Color Anpassungen

Sowie Postionierung

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

@@ -4,8 +4,8 @@
 :root {
   --background-color: white;
   --main-color: black;
-  --highlight-color: hsl(214, 56%, 61%);
-  --light-highlight-color: #d6d6d6;
+  --highlight-color: #006dfc;
+  --light-highlight-color: #cfcfcf;
 }
 
 input, select {

frontend_react/wbs-rechner-react/src/App.css

@@ -30,7 +30,6 @@ h2 {
   margin: 0px;
 }
 
-
 .label-container {
   display: flex;
   align-items: center;
@@ -58,6 +57,7 @@ h2 {
   padding: 3px;
   border: none;
   border-bottom: 1px solid var(--light-highlight-color);
+  align-self: flex-end;
 }
 
 
@@ -91,15 +91,15 @@ input[type="checkbox"]:checked {
   background-color: var(--highlight-color);
 }
 
-.plus-button:hover {
-  color: var(--light-highlight-color);
-}
 
 .delete-button {
   color: red;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
 }
 
-.plus-button:hover {
+.delete-button:hover {
   color: darkred;
 }
 
@@ -108,14 +108,17 @@ input[type="checkbox"]:checked {
 
   .label-container label {
     width: 49%;
+    word-wrap: break-word;
   }
 
-  .calculateButton {
+  .label-container span, input, select, a {
     width: 49%;
   }
 
-  .label-container span, input, select, a {
-    width: 49%;
+  .calculateButton {
+    min-width: 49%;
   }
+
+
 }
 

frontend_react/wbs-rechner-react/src/App.tsx

@@ -66,41 +66,41 @@ class App extends React.Component<{}, AppState> {
             />
           </div>
         </Headerbox>
-        {this.state.persons.map(p =>
+        {this.state.persons.map((p, pindex) =>
           <Headerbox title={'Daten der ' + p.index + '. Person'}>
             <div>
-              {this.state.persons[p.index - 1].incomes.map(i =>
+              {this.state.persons[p.index - 1].incomes.map((i, inindex) =>
                 <div className="label_box">
                   <div className="label-container">
-                    <label htmlFor={'type' + p.index + '_' + i.index}>Typ</label>
-                    <select id={'type_' + p.index + '_' + i.index} defaultValue={i.type} onChange={this.updateIncomeSelectValue}>
-                      <option id={'type_' + p.index + '_' + i.index + '_0'} value={0} disabled>keine Auswahl</option>
+                    <label htmlFor={'type' + p.index + '_' + inindex}>Typ</label>
+                    <select id={'type_' + p.index + '_' + inindex} defaultValue={i.type} onChange={this.updateIncomeSelectValue}>
+                      <option id={'type_' + p.index + '_' + inindex + '_0'} value={0} disabled>keine Auswahl</option>
                       {this.types.map(t =>
-                        <option id={'type' + p.index + '_' + i.index + '_' + t.value} value={t.value}> {t.description}</option>
+                        <option id={'type' + p.index + '_' + inindex + '_' + t.value} value={t.value}> {t.description}</option>
                       )}
                     </select>
 
                   </div>
                   <div className="label-container">
-                    <label htmlFor={'frequency' + p.index + '_' + i.index}>Frequenz</label>
-                    <select id={'frequency_' + p.index + '_' + i.index} onChange={this.updateIncomeSelectValue} defaultValue={i.frequency} >
-                      <option id={'frequency_' + p.index + '_' + i.index + '_0'} value={0} disabled>keine Auswahl</option>
+                    <label htmlFor={'frequency' + p.index + '_' + inindex}>Frequenz</label>
+                    <select id={'frequency_' + p.index + '_' + inindex} onChange={this.updateIncomeSelectValue} defaultValue={i.frequency} >
+                      <option id={'frequency_' + p.index + '_' + inindex + '_0'} value={0} disabled>keine Auswahl</option>
                       {this.freq.map(f =>
-                        <option id={'frequency_' + p.index + '_' + i.index + '_' + f.value} value={f.value}> {f.description}</option>
+                        <option id={'frequency_' + p.index + '_' + inindex + '_' + f.value} value={f.value}> {f.description}</option>
                       )}
                     </select>
                   </div>
                   <div className="label-container">
-                    <label htmlFor={'amount_' + p.index + '_' + i.index}>Brutto Betrag</label>
-                    <input id={'amount_' + p.index + '_' + i.index} type="number" defaultValue={i.amount} onChange={this.updateIncomeValue} min={0} />
+                    <label htmlFor={'amount_' + p.index + '_' + inindex}>Brutto Betrag</label>
+                    <input id={'amount_' + p.index + '_' + inindex} type="number" defaultValue={i.amount} onChange={this.updateIncomeValue} min={0} />
                   </div>
                   <div className="label-container">
-                    <label htmlFor={'advertisingCosts_' + p.index + '_' + i.index}>jährliche Werbungskosten</label>
-                    <input id={'advertisingCosts_' + p.index + '_' + i.index} type="number" defaultValue={i.advertisingCosts} onChange={this.updateIncomeValue} min={0} />
+                    <label htmlFor={'advertisingCosts_' + p.index + '_' + inindex}>jährliche Werbungskosten</label>
+                    <input id={'advertisingCosts_' + p.index + '_' + inindex} type="number" defaultValue={i.advertisingCosts} onChange={this.updateIncomeValue} min={0} />
                   </div>
                   <div className="label-container">
-                    <label htmlFor={'delete_' + p.index + '_' + i.index}>Löschen</label>
-                    <a className="delete-button button"  id={'delete_' + p.index + '_' + i.index} onClick={() => this.deleteIncome(p.index, i.index)}  title={ i.index + ' Einkommen der ' + p.index + ' Person löschen'} >&times;</a>
+                    <label htmlFor={'delete_' + p.index + '_' + inindex}>Löschen {inindex}</label>
+                    <button className="delete-button" id={'delete_' + p.index + '_' + inindex} onClick={() => this.deleteIncome(pindex, inindex)} title={(inindex + 1) + ' Einkommen der ' + p.index + ' Person löschen'} >&times;</button>
                   </div>
                 </div>
               )}
@@ -194,7 +194,7 @@ class App extends React.Component<{}, AppState> {
     this.setState(prevState => {
       const persons = [...prevState.persons];
       const person = persons[personid - 1];
-      const income = person.incomes[incomeId - 1];
+      const income = person.incomes[incomeId];
       if (field === "amount") {
         income.amount = value;
         person.totalincome = this.calculateTotalIncome(personid - 1);
@@ -263,13 +263,20 @@ class App extends React.Component<{}, AppState> {
     }));
   }
 
-  deleteIncome = (pindex:number, iindex: number) => {
+  deleteIncome(pindex: number, iindex: number) {
+    console.log(pindex + " - " + iindex);
+
     this.setState(prevState => {
       const persons = [...prevState.persons];
       const person = persons[pindex];
-      person.incomes = person.incomes.filter(income => income.index !== iindex);
+      console.log(person.incomes);
+      person.incomes.splice(iindex-1, 1)
+      console.log(person.incomes);
+      person.totalincome = this.calculateTotalIncome(pindex);
       return { persons };
     });
+
+    console.log(this.state.persons);
   }
 
 
@@ -284,10 +291,9 @@ class App extends React.Component<{}, AppState> {
     this.setState(prevState => {
       const persons = [...prevState.persons];
       const person = persons[index - 1];
-      const isNewIncomeExist = person.incomes.find(income => income.index === newincome.index);
-      if (!isNewIncomeExist) {
-        person.incomes = [...person.incomes, newincome];
-      }
+
+      person.incomes = [...person.incomes, newincome];
+
       return { persons };
     });
   }

frontend_react/wbs-rechner-react/src/index.js

@@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
     <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function