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

import React, { ChangeEvent } from "react";
import "./App.css";
import Headerbox from "./components/Headerbox";
import { Person } from './interfaces/persons';
import { Frequency } from "./interfaces/frequency";
import { Type } from "./interfaces/type";
import { WBS } from "./interfaces/wbs";


import { WbsService } from "./service/wbsService";
import { Income } from "./interfaces/incomes";


interface AppState {
  personanzahl: number;
  persons: Person[];
  wbs: WBS;
  wbsResult: boolean;
}

const wbsService = new WbsService();


class App extends React.Component<{}, AppState> {
  types: Array<Type> = [];
  freq: Array<Frequency> = [];

  constructor(props: {}) {
    super(props);
    this.state = {
      wbsResult: false,
      
      wbs: { wbsGranted: "Keinen", difference: 0, percent: 0, yearlyAmount: 0, yearlyAmountMax: 0 },
      personanzahl: 1,
      persons: [{ index: 1, incomes: [] as Income[], totalincome: 0 }]
    };

    wbsService.getTypes().then(types => {
      types.forEach(type => {
        this.types.push(type);
      });
    });

    wbsService.getFrequencies().then(freqs => {
      freqs.forEach(freq => {
        this.freq.push(freq);
      });
    });
  }




  render() {
    return (
      <div className="App" id="div_app">
        <h1 id="ueberschrift">WBS Rechner</h1>
        <Headerbox title="Haushaltsmitglieder">
          <div className="label-container">
            <label htmlFor="personenanzahl">Anzahl Personen im Haushalt</label>
            <input
              defaultValue={this.state.personanzahl}
              id="personenanzahl"
              type="number"
              min="1"
              max="20"
              onChange={this.updateInputValue}
            />
          </div>
        </Headerbox>
        {this.state.persons.map((p, pindex) =>
          <Headerbox title={'Daten der ' + p.index + '. Person'}>
            <div>
              {this.state.persons[p.index - 1].incomes.map((i, inindex) =>
                <div className="label_box">
                  <div className="label-container">
                    <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 + '_' + inindex + '_' + t.value} value={t.value}> {t.description}</option>
                      )}
                    </select>

                  </div>
                  <div className="label-container">
                    <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 + '_' + inindex + '_' + f.value} value={f.value}> {f.description}</option>
                      )}
                    </select>
                  </div>
                  <div className="label-container">
                    <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 + '_' + 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 + '_' + inindex}>Löschen</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; Löschen</button>
                  </div>
                </div>
              )}
              <button onClick={() => this.addIncome(p.index)} className="calculateButton">+ Einkommen hinzufügen</button>
            </div>
          </Headerbox>
        )
        }

        <Headerbox title="WBS berechnen">
          <h2>Zusammenfassung Haushalt</h2>
          {this.state.persons.map(p =>
            <div className="label_box">
              <div className='label-container'>
                <label htmlFor={"nr" + p.index}>Nr.</label>
                <span id={"nr" + p.index}>{p.index}</span>
              </div>

              <div className="label-container">
                <label htmlFor={"kindsalter" + p.index}>Kindsalter</label>
                <span id={"kindsalter" + p.index}>N/A</span>
              </div>

              <div className="label-container">
                <label htmlFor={"freibetrage" + p.index}>Freibeträge</label>
                <span id={"freibetrage" + p.index}>N/A</span>
              </div>

              <div className="label-container">
                <label htmlFor={"gesamteinkommen" + p.index}>Gesamteinkommen</label>
                <span id={"gesamteinkommen" + p.index}>{p.totalincome}</span>
              </div>
            </div>
          )}

          <button onClick={this.calculateWBS.bind(this)} className="calculateButton">⚙ WBS berechnen</button>

          {this.state.wbsResult ?
            <div>
              <div className="label-container">
                <label htmlFor="yearlyAmount">anrechenbares jährliches Gesamteinkommen:</label>
                <span id="yearlyAmount">{this.state.wbs.yearlyAmount} €</span>
              </div>
              <div className="label-container">
                <label htmlFor="yearlyAmountMax">Einkommensgrenze:</label>
                <span id="yearlyAmountMax">{this.state.wbs.yearlyAmountMax} €</span>
              </div>
              <div className="label-container">
                <label htmlFor="difference">{this.state.wbs.difference > 0 ? 'Überschreitung' : 'Unterschreitung'}</label>
                <span id="difference">{this.state.wbs.difference} €</span>
              </div>
              <div className="label-container">
                <label htmlFor="percent">Verhältnis Gesamteinkommen / Einkommensgrenze</label>
                <span id="percent">{this.state.wbs.percent} %</span>
              </div>
              <div className="label-container">
                <label htmlFor="percent">Möglicher WBS:</label>
                <span id="percent">{this.state.wbs.wbsGranted}</span>
              </div>
            </div>
            :
            <div></div>
          }


        </Headerbox>
      </div >
    );
  }

  updateInputValue = (evt: ChangeEvent<HTMLInputElement>) => {
    this.setState({ personanzahl: evt.target.valueAsNumber });
    this.refreshPeople(evt.target.valueAsNumber);
  }

  updateIncomeValue = (evt: ChangeEvent<HTMLInputElement>) => {
    this.updateValueState(evt.target.id, evt.target.valueAsNumber);
  }

  updateIncomeSelectValue = (evt: ChangeEvent<HTMLSelectElement>) => {
    this.updateValueState(evt.target.id, evt.target.value);
  }


  updateValueState(id: string, value: any) {
    var parts = id.split("_");
    var field = parts[0];
    var personid: number = parseInt(parts[1]);
    var incomeId: number = parseInt(parts[2]);

    this.setState(prevState => {
      const persons = [...prevState.persons];
      const person = persons[personid - 1];
      const income = person.incomes[incomeId];
      if (field === "amount") {
        income.amount = value;
        person.totalincome = this.calculateTotalIncome(personid - 1);
      } else if (field === "advertisingCosts") {
        income.advertisingCosts = value;
        person.totalincome = this.calculateTotalIncome(personid - 1);
      } else if (field === "frequency") {
        income.frequency = value;
        person.totalincome = this.calculateTotalIncome(personid - 1);
      } else if (field === "type") {
        income.type = value;
      }

      return { persons };
    });
  }


  calculateWBS() {
    var persons: Array<Person> = this.state.persons;
    wbsService.calculateWbs(persons).then(wbsErg => {
      this.setState({ wbsResult: true });
      this.setState({ wbs: wbsErg });
    });
  }


  calculateTotalIncome(personindex: number): number {
    let totalIncome = 0;
    for (const income of this.state.persons[personindex].incomes) {
      totalIncome += ((income.frequency * income.amount) - income.advertisingCosts);
    }
    return totalIncome;
  }

  refreshPeople(personenanzahl: number) {
    if (personenanzahl > this.state.persons.length) {
      let anzahl = personenanzahl - this.state.persons.length;
      for (let i = 1; i <= anzahl; i++) {
        this.addPerson();
      }
    }

    if (personenanzahl < this.state.persons.length) {
      let anzahl = this.state.persons.length - personenanzahl;
      for (let i = 1; i <= anzahl; i++) {
        this.deletePerson(this.state.persons.length);
      }
    }
  }

  addPerson() {
    const newPerson: Person = {
      index: this.getHighestIndex(this.state.persons) + 1,
      incomes: [],
      totalincome: 0
    };
    this.setState(prevState => ({
      persons: [...prevState.persons, newPerson]
    }));
  }

  deletePerson(index: number) {
    this.setState(prevState => ({
      persons: prevState.persons.filter(person => person.index !== index)
    }));
  }

  deleteIncome(pindex: number, iindex: number) {
    console.log(pindex + " - " + iindex);

    this.setState(prevState => {
      const persons = [...prevState.persons];
      const person = persons[pindex];
      console.log(person.incomes);
      person.incomes.splice(iindex, 1)
      console.log(person.incomes);
      person.totalincome = this.calculateTotalIncome(pindex);
      return { persons };
    });

    console.log(this.state.persons);
  }


  addIncome(index: number) {
    const newincome = {
      index: this.getHighestIndex(this.state.persons[index - 1].incomes) + 1,
      amount: 0,
      frequency: 0,
      advertisingCosts: 0,
      type: 0
    };
    this.setState(prevState => {
      const persons = [...prevState.persons];
      const person = persons[index - 1];

      person.incomes = [...person.incomes, newincome];

      return { persons };
    });
  }


  getHighestIndex(arr: any[]) {
    let highestIndex = 0;
    if (typeof arr === "undefined") {
      return highestIndex;
    }
    for (const item of arr) {
      if (item.index > highestIndex) {
        highestIndex = item.index;
      }
    }
    return highestIndex;
  }
}

export default App;