Added Einkommen Boxen

fontend_angular/wbs-rechner-angular/src/app/app.component.css

@@ -0,0 +1 @@
+

fontend_angular/wbs-rechner-angular/src/app/app.component.html

@@ -1,10 +1,67 @@
 <h1>WBS Rechner</h1>
 
 <app-headerbox [title]="'Haushaltsmitglieder'">
-  <div toolbar>Das ist ein Text Text</div>
+  <div toolbar>
+    <button
+      class="plus-button button"
+      title="Person hinzufügen"
+      (click)="addPerson()"
+    >
+      +
+    </button>
+  </div>
   <div content>
-    Test 123 <br />
-    Test 123 <br />Test 123 <br />Test 123 <br />Test 123 <br />Test 123 <br />
+    <div class="table">
+      <div class="table-header mobile-not-visble">
+        <div class="table-cell">Nr.</div>
+        <div class="table-cell">Kindsalter</div>
+        <div class="table-cell">Freibeträge</div>
+        <div class="table-cell">Gesamteinkommen</div>
+        <div class="table-cell">Löschen</div>
+      </div>
+      <div class="table-body">
+        <div class="table-row" *ngFor="let person of persons">
+          <div class="table-header-mobile table-cell">
+            {{ person.index }}. Person
+            <button
+              class="delete-button button desktop-not-visble"
+              title="Person löschen"
+              (click)="deletePerson(person.index)"
+            >
+              &times;
+            </button>
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Kindsalter</span
+            >{{ person.index }}
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Freibeträge</span
+            >{{ person.index }}
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Gesamteinkommen</span
+            >{{ calculateTotalIncome(person) }}
+          </div>
+          <div class="table-cell mobile-not-visble">
+            <button
+              class="delete-button button"
+              title="Person löschen"
+              (click)="deletePerson(person.index)"
+            >
+              &times;
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
   </div>
 </app-headerbox>
 
+
+<div *ngFor="let p of persons" style="margin-top: 20px;">
+    <app-income [person]="p">
+
+    </app-income>
+  </div>

fontend_angular/wbs-rechner-angular/src/app/app.component.ts

@@ -1,14 +1,55 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { HeaderboxComponent } from './headerbox/headerbox.component';
+import { IncomeComponent } from './income/income.component';
+import {NgFor} from '@angular/common';
+import { Income } from './incomes';
+import { Person } from './person';
+
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderboxComponent],
+  imports: [NgFor, RouterOutlet, HeaderboxComponent, IncomeComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
+
 export class AppComponent {
   title = 'wbs-rechner-angular';
+
+  persons: Array<Person> = [];
+
+  calculateTotalIncome(person: any): number {
+    let totalIncome = 0;
+    for (const income of person.incomes) {
+      totalIncome += income.amount;
+    }
+    return totalIncome;
+  }
+  
+  addPerson() {
+    const newPerson = {
+      index: this.getHighestIndex(this.persons)+1,
+      incomes: []
+    };
+    this.persons.push(newPerson);
+  }
+
+  deletePerson(index: number) {
+    this.persons = this.persons.filter(person => person.index !== index);
+  }
+
+  getHighestIndex(arr: any[]): number {
+    let highestIndex = 0;
+    for (const item of arr) {
+      if (item.index > highestIndex) {
+        highestIndex = item.index;
+      }
+    }
+    return highestIndex;
+  }
+
 }
+  
+

fontend_angular/wbs-rechner-angular/src/app/headerbox/headerbox.component.css

@@ -8,7 +8,6 @@
 .header {
   display: flex;
   background-color: var(--highlight-color);
-  color: var(--background-color);
   padding: 2px;
 }
 

fontend_angular/wbs-rechner-angular/src/app/income/income.component.html

@@ -0,0 +1,62 @@
+<app-headerbox [title]="'Einkommen der ' + person.index + '. Person'">
+  <div toolbar>
+    <button
+      class="plus-button button"
+      title="Einkommen hinzufügen"
+      (click)="addIncome()"
+    >
+      +
+    </button>
+  </div>
+  <div content>
+    <div class="table">
+      <div class="table-header mobile-not-visble">
+        <div class="table-cell">Nr.</div>
+        <div class="table-cell">Typ</div>
+        <div class="table-cell">Frequenz</div>
+        <div class="table-cell">Brutto Betrag</div>
+        <div class="table-cell">jährliche Werbungskosten</div>
+        <div class="table-cell">Löschen</div>
+      </div>
+      <div class="table-body">
+        <div class="table-row" *ngFor="let income of person.incomes">
+          <div class="table-header-mobile table-cell">
+            {{ income.index }}. Einkommen
+            <button
+              class="delete-button button desktop-not-visble"
+              title="{{ income.index }}. Einkommen der {{person.index}}. Person löschen"
+              (click)="deleteIncome(income.index)"
+            >
+              &times;
+            </button>
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Typ</span>{{ income.type }}
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Frequenz</span
+            >{{ income.frequency }}
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile">Brutto Betrag</span
+            ><input type="number" [value]="income.amount">
+          </div>
+          <div class="table-cell">
+            <span class="table-cell-header-mobile"
+              >jährliche Werbungskosten</span
+            >{{ income.advertisingCosts }}
+          </div>
+          <div class="table-cell mobile-not-visble">
+            <button
+              class="delete-button button"
+              title="{{ income.index }}. Einkommen der {{person.index}}. Person löschen"
+              (click)="deleteIncome(income.index)"
+            >
+              &times;
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</app-headerbox>

fontend_angular/wbs-rechner-angular/src/app/income/income.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IncomeComponent } from './income.component';
+
+describe('IncomeComponent', () => {
+  let component: IncomeComponent;
+  let fixture: ComponentFixture<IncomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IncomeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(IncomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

fontend_angular/wbs-rechner-angular/src/app/income/income.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input  } from '@angular/core';
+import { HeaderboxComponent } from '../headerbox/headerbox.component';
+import {NgFor} from '@angular/common';
+import { Income } from '../incomes';
+import { Person } from '../person';
+
+@Component({
+  selector: 'app-income',
+  standalone: true,
+  imports: [HeaderboxComponent, NgFor],
+  templateUrl: './income.component.html',
+  styleUrl: './income.component.css'
+})
+
+export class IncomeComponent {
+  @Input() person: Person;
+
+  addIncome() {
+    const newincome = {
+      index: this.getHighestIndex(this.person.incomes)+1,
+      amount: 0,
+      frequency: 0,
+      advertisingCosts: 0,
+      type: 0
+    };
+    this.person.incomes.push(newincome);
+  }
+
+  deleteIncome(index: number) {
+    this.person.incomes = this.person.incomes.filter(income => income.index !== index);
+  }
+
+  getHighestIndex(arr: any[]): number {
+    let highestIndex = 0;
+    for (const item of arr) {
+      if (item.index > highestIndex) {
+        highestIndex = item.index;
+      }
+    }
+    return highestIndex;
+  }
+
+}

fontend_angular/wbs-rechner-angular/src/app/incomes.ts

@@ -0,0 +1,7 @@
+export interface Income {
+    index: number,
+    amount: number,
+    frequency: number,
+    advertisingCosts: number,
+    type: number
+}

fontend_angular/wbs-rechner-angular/src/app/person.ts

@@ -0,0 +1,8 @@
+import { Income } from './incomes';
+
+export interface Person {
+    index: number;
+    incomes: Array<Income>;
+}
+
+

fontend_angular/wbs-rechner-angular/src/styles.css

@@ -4,8 +4,8 @@
 :root {
   --background-color: white;
   --main-color: black;
-  --highlight-color: #0051a1;
-  --light-highlight-color: #0074d9;
+  --highlight-color: #49a1f8;
+  --light-highlight-color: #9bc9f1;
 }
 
 body {
@@ -39,3 +39,96 @@ input[type="checkbox"]:checked {
   background-position: center;
   background-size: 19px 19px;
 }
+
+.button {
+  font-size: 27px;
+  font-weight: bolder;
+  color: #333;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}
+
+.plus-button:hover {
+  color: var(--light-highlight-color);
+}
+
+.delete-button {
+  color: red;
+}
+
+.plus-button:hover {
+  color: darkred;
+}
+
+/* Responsive Table Design */
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  background-color: var(--light-highlight-color);
+  font-weight: bold;
+}
+.table-cell {
+  flex: 1;
+  padding: 5px;
+}
+.table-row {
+  display: flex;
+  border-top: 1px solid var(--light-highlight-color);
+}
+.table-row:first-child {
+  border-top: none;
+}
+.table-body {
+  display: flex;
+  flex-direction: column;
+}
+.table-row > .table-cell {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.table-cell-header-mobile {
+  display: none;
+  width: 40%;
+  background-color: var(--light-highlight-color); 
+  padding: 5px;
+  font-weight: bold;
+  word-wrap: break-word; 
+  word-break: break-all; 
+}
+
+.desktop-not-visble {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .table-header-mobile {
+    padding: 5px !important;
+    background-color: var(--light-highlight-color); 
+    font-weight: bold;
+    word-wrap: break-word; 
+    word-break: break-all; 
+  }
+
+  .mobile-not-visble {
+    display: none !important;
+  }
+
+  .desktop-not-visble {
+    display: inline;
+  }
+
+  .table-cell-header-mobile {
+    display: block;
+  }
+
+  .table-row {
+    flex-direction: column;
+  }
+
+  .table-cell {
+    flex-basis: 100%;
+    padding: 0px;
+  } 
+}

fontend_angular/wbs-rechner-angular/tsconfig.json

@@ -18,6 +18,7 @@
     "target": "ES2022",
     "module": "ES2022",
     "useDefineForClassFields": false,
+    "strictPropertyInitialization": false,
     "lib": [
       "ES2022",
       "dom"