\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)\r\n\t\t\t\treturn null;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{this.tilgungsergebnisAuswahl(this.props.aktiverRechner)}\r\n\t\t\t\r\n\t\t);\r\n\r\n\t}\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\n\r\nimport Table from '@material-ui/core/Table';\r\nimport TableBody from '@material-ui/core/TableBody';\r\nimport TableCell from '@material-ui/core/TableCell';\r\nimport TableContainer from '@material-ui/core/TableContainer';\r\nimport TableHead from '@material-ui/core/TableHead';\r\nimport TableRow from '@material-ui/core/TableRow';\r\n\r\n/**\r\n\t* Komponente für die Darstellung des Tilgungsplans im letzten Schritt \r\n*/\r\nexport class Tilgungsplan extends React.Component {\r\n\r\n\tconstructor(props: any) {\r\n\t\tsuper(props);\r\n\t\tthis.planauswahl = this.planauswahl.bind(this);\r\n\t}\r\n\r\n\tplanauswahl(planTyp: string) {\r\n\t\tconst display = this.props.tilgungsplan.TilgungsfreieAnlaufjahreZahlung.length > 0 ? 'block' : 'none';\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{this.props.tilgungsplan.TilgungsfreieAnlaufjahreZahlung.length > 0 && \r\n\t\t\t\t\t
Hier wird der Tilgungsplan bis zum Ende der ersten Zinsbindung dargestellt.
\r\n\t\t\t\t\t\t
Die Höhe der weiteren Zahlungen ist abhängig von dem Zinssatz, der für die darauf folgende Zinsbindung vereinbart wird.
\r\n\t\t\t\t\t
}\r\n\t\t\t\t}\r\n\t\t\t)\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{this.planauswahl(this.props.aktiverRechner)}\r\n\t\t\t\r\n\t\t);\r\n\t}\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\n\r\n/**\r\n * Hilfetexte für den Tilgungsrechner\r\n */\r\nexport const Hilfetexte: Array<{ key: string, value: any }> = [\r\n { key: 'Freijahre', value: Zeit, in der ein Darlehen zwar verzinst, aber noch nicht getilgt wird. Vereinzelt ist in den Programmbedingungen eine Mindestanzahl von tilgungsfreien Anlaufjahren vorgesehen. Näheres finden Sie im jeweiligen Programmmerkblatt. },\r\n { key: 'Zinsbindung', value: Es wird die Standardzinsbindung der gewählten Laufzeitvariante angezeigt. },\r\n { key: 'Tilgungszuschuss', value: Voraussichtlicher Tilgungszuschuss. Informationen hierzu finden Sie im jeweiligen Programmmerkblatt. },\r\n { key: 'Tilgungsplan', value: Es handelt sich hierbei um eine Beispielrechnung, die unabhängig von einem bestimmten Kreditprogramm erfolgt. Bitte stellen Sie sicher, dass die eingegebenen Kreditmerkmale/Zinssätze mit den konkreten Programmbedingungen (s. Merkblatt) übereinstimmen. },\r\n { key: 'ZinsbindungsEnde', value: Hier wird der Tilgungsplan bis zum Ende der ersten Zinsbindung dargestellt. Die Höhe der weiteren Zahlungen ist abhängig von dem Zinssatz, der für die darauf folgende Zinsbindung vereinbart wird. },\r\n { key: 'Zinsbindung_ratierlich', value: Zeit, in der sich der Zinssatz nicht verändert. Die Zinsbindung größer 100 ist nicht zulässig },\r\n { key: 'Auszahlungssatz', value: Anteil der Kreditsumme in %, der nach Abzug von Auszahlungsabschlägen (z. B. Bearbeitungsgebühr oder Disagio) zur Berechnung des Tilgungsplans herangezogen wird. },\r\n { key: 'Zinszuschlag', value: Zinszuschlag für Haftungsfreistellung oder Garantie-Entgelt. Nur der Wert zwischen 0,00 und 25,00 ist zulässig },\r\n { key: 'laufzeit', value: Die maximale Laufzeit beträgt 100 Jahre },\r\n { key: 'zinsstaffeln', value: Zinsstaffeln erlauben Ihnen, innerhalb der Zinsbindungsfrist unterschiedliche Zinssätze zu erfassen. Nutzen Sie dazu bitte die Felder \"Sollzins ab dem\" und \" Sollzins %\". Gilt der Zinssatz bis zum Ende der Zinsbindung, ist nur ein Zinssatz ab dem 1. Jahr (aktuelles Jahr) zu erfassen. Nur der Wert zwischen 0,00 und 25,00 ist zulässig },\r\n { key: 'Sollzins', value: Dieses Feld ermöglicht Ihnen einen persönlichen Zinssatz einzugeben. Wünschen Sie das nicht, klicken Sie Tilgungsplan ermitteln zur Auswertung Ihrer Eingaben. },\r\n];","// eslint-disable-next-line\r\nimport React from 'react';\r\nimport { CircularProgress, FormControl, InputLabel, Button, MenuItem, Select, Tooltip, Fade, TextField, InputAdornment } from '@material-ui/core';\r\nimport ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';\r\nimport NumberFormat from 'react-number-format';\r\nimport { Hilfetexte } from './../../utilities/Hilfetexte';\r\n\r\n/**\r\n* Komponente vom Wizard-Schritt 4: Auswahl der Laufzeit, Freijahre und Zinsbindung\r\n*/\r\nexport class Hauptkriterien extends React.Component {\r\n\r\n /**\r\n * Renderfunktion der Hauptkriterien-Komponente\r\n * @returns Rückgabewert: Material-UI Komponenten-Tags\r\n */\r\n render() {\r\n return (\r\n \r\n \r\n Laufzeit\r\n \r\n \r\n \r\n \r\n Freijahre\r\n \r\n \r\n \r\n \r\n \r\n Zinsbindung\r\n \r\n \r\n \r\n {this.props.zinsbindung !== '' && \r\n \r\n % p.a.,\r\n }}\r\n style={{ marginLeft: '10px' }}\r\n required\r\n allowNegative={false}\r\n decimalSeparator={','}\r\n decimalScale={2}\r\n fixedDecimalScale={true}\r\n />\r\n }\r\n
}\r\n \r\n );\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\nimport { FormControl, InputAdornment, TextField } from '@material-ui/core';\r\n//import NumberFormat from 'react-number-format';\r\n\r\n/**\r\n* Komponente Eingabe von Kreditvolmen\r\n*/\r\nexport class Kreditprogramm extends React.Component {\r\n\r\n /**\r\n * Renderfunktion der Kreditprogramm-Komponente\r\n * @returns Rückgabewert: Material-UI Komponenten-Tags\r\n */\r\n render() {\r\n return (\r\n \r\n
Programmspezifische Parameter:
\r\n \r\n ,\r\n }}\r\n style={{ marginLeft: '10px' }}\r\n onInput={(e) => {\r\n e.target.value = (e.target.value).toString().slice(0, 50)\r\n }}\r\n />\r\n \r\n \r\n )\r\n };\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\nimport { Grid, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core';\r\n\r\n\r\n/**\r\n\t* Komponente für die Darstellung des Tilgungsplans im letzten Schritt \r\n*/\r\nexport class Tilgungsplan extends React.Component {\r\n\r\n\tconstructor(props: any) {\r\n\t\tsuper(props);\r\n\t}\r\n\r\n\tformatNumber(data: number): number {\r\n\t\treturn parseFloat(data.toFixed(2));\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst display = this.props.tilgungsplan.zahlung.length > 0 ? 'block' : 'none';\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t{\r\n\t\t\t\t\tthis.props.tilgungsplan.effektivzins > 0 &&\r\n\t\t\t\t\t
\r\n\t\t\t\t\t\t
Es handelt sich hierbei um eine Beispielrechnung, die unabhängig von einem bestimmten Kreditprogramm erfolgt. Bitte stellen Sie sicher, dass die eingegebenen Kreditmerkmale/Zinssätze mit den konkreten Programmbedingungen (s. Merkblatt) übereinstimmen.
\r\n \r\n );\r\n }\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\nimport { Sidebar } from './Sidebar';\r\nimport { Kreditprogramm } from './Kreditprogramm';\r\nimport { Tilgungsplan } from './Tilgungsplan';\r\nimport { Hauptkriterien } from './Hauptkriterien';\r\nimport { RatierlichState } from './../../interfaces/ITilgungsrechner';\r\nimport { TILGUNGSRECHNER_REST_BASE_URL } from './../../utilities/RestApiUrls';\r\nimport KfWStyles from './../../utilities/KfWStyles';\r\nimport { MuiThemeProvider, CssBaseline, Grid } from '@material-ui/core';\r\n\r\nimport axios from 'axios';\r\n\r\n/**\r\n * Zentrale Komponente für den Tilgungsrechner Ratierlich mit Buisness Logic\r\n*/\r\nexport default class Ratierlich extends React.Component {\r\n\r\n /**\r\n * Initiale Wertzuweisung der Tilgungsrechner Ratierlich-Komponente State Parameter\r\n */\r\n state: RatierlichState;\r\n\r\n /**\r\n * Konstruktur der Tilgungsrechner Ratierlich-Komponente\r\n */\r\n constructor(state: RatierlichState) {\r\n super(state);\r\n this.state = this.initState();\r\n this.handleInputChange = this.handleInputChange.bind(this);\r\n this.formatNumber = this.formatNumber.bind(this);\r\n this.ermittelTilgungsplan = this.ermittelTilgungsplan.bind(this);\r\n this.handleZinsdatenInput = this.handleZinsdatenInput.bind(this);\r\n }\r\n\r\n /**\r\n * Prüfung des Betrags\r\n * @param zins Vorhandener Betrag\r\n */\r\n pruefeBetrag(value: any) {\r\n let proofedValue = value;\r\n let muster = /[0-9]/gi;\r\n let checkZahl = value.slice(-1);\r\n checkZahl.match(muster) ? proofedValue = value : proofedValue = value.slice(0, -1);;\r\n if (proofedValue.length > 9) {\r\n return proofedValue.slice(0, 9);\r\n }\r\n return proofedValue;\r\n }\r\n\r\n /**\r\n * Prüfung des Jahres aus der Zinsstaffel\r\n * @param value Vorhandenes Jahr\r\n */\r\n pruefeJahr(value: any) {\r\n let proofedValue = value;\r\n let muster = /[0-9]/gi;\r\n let checkZahl = value.slice(-1);\r\n checkZahl.match(muster) ? proofedValue = value : proofedValue = value.slice(0, -1);;\r\n if (value.length === 1 && value === \"0\") {\r\n return \"\";\r\n }\r\n if (proofedValue.length > 3 && proofedValue.slice(0, 3) === \"100\") {\r\n return \"100\";\r\n }\r\n if (proofedValue.length > 2 && Number(proofedValue) > 100) {\r\n this.state.ueberhundertflag = \"on\";\r\n return proofedValue.slice(0, 2);\r\n } else {\r\n this.state.ueberhundertflag = \"off\";\r\n }\r\n return proofedValue;\r\n }\r\n\r\n /**\r\n * Prüfung des Jahres aus der Zinsstaffel\r\n * @param value Vorhandenes Jahr\r\n*/\r\n pruefeFreiJahr(value: any) {\r\n let proofedValue = value;\r\n let muster = /[0-9]/gi;\r\n let checkZahl = value.slice(-1);\r\n checkZahl.match(muster) ? proofedValue = value : proofedValue = value.slice(0, -1);;\r\n if (proofedValue.length > 3 && proofedValue.slice(0, 3) === \"100\") {\r\n return \"100\";\r\n }\r\n if (proofedValue.length > 2 && Number(proofedValue) > 100) {\r\n this.state.ueberhundertflag = \"on\";\r\n return proofedValue.slice(0, 2);\r\n } else {\r\n this.state.ueberhundertflag = \"off\";\r\n }\r\n return proofedValue;\r\n }\r\n\r\n /**\r\n * Löschung der Zinsstaffel\r\n * @param index Index der Zinsstaffel\r\n */\r\n zinsdatenEntfernen = (index: number) => {\r\n if (this.state.sollzinsListe.length > 1) {\r\n const list = [...this.state.sollzinsListe];\r\n list.splice(index, 1);\r\n this.setState({\r\n sollzinsListe: list\r\n })\r\n }\r\n };\r\n\r\n /**\r\n * Hinzufügen einer Zinsstaffel\r\n */\r\n zinsdatenHinzufuegen = () => {\r\n if (this.state.sollzinsListe.length < 5) {\r\n this.setState({\r\n sollzinsListe: [...this.state.sollzinsListe, { validFrom: null, interestRateValue: \"\" }]\r\n })\r\n }\r\n };\r\n\r\n /**\r\n * Bearbeitung der Zinsstaffel in der Zinstreppe\r\n * @param index Index der Zinsstaffel\r\n */\r\n handleZinsdatenInput = (e: any, index: number) => {\r\n if (e.target !== undefined) {\r\n let errors = this.state.errors;\r\n const { name, value } = e.target;\r\n const list = [...this.state.sollzinsListe];\r\n let proofedValue: string = '';\r\n\r\n if (name === \"interestRateValue\") {\r\n if (Number(value.replace(',', '.')) > 100) {\r\n proofedValue = \"25,00\";\r\n } else {\r\n proofedValue = String(parseFloat(value.replace(',', '.')).toFixed(2)).replace('.', ',');\r\n }\r\n errors.zinstreppeZins[index] =\r\n !this.isValidInterest(proofedValue)\r\n ? 'Bitte Zahl zwischen 0,00 und 25,00 eingeben'\r\n : '';\r\n }\r\n\r\n if (name === \"validFrom\") {\r\n proofedValue = this.pruefeJahr(value);\r\n list.map((x: any, i: any) => {\r\n if (i > 0 && (Number(this.state.laufzeit) < Number(list[i].validFrom) || Number(list[i - 1].validFrom) >= Number(list[i].validFrom))) {\r\n this.setState((prevState: RatierlichState) => {\r\n let vfmaperror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[i] = 'Wert darf die Laufzeit nicht überschreiten und muss größer sein als die Angabe \"Sollzins ab dem\" der ' + (i) + '. Zinsstaffel.';\r\n return { vfmaperror };\r\n })\r\n }\r\n else {\r\n this.setState((prevState: RatierlichState) => {\r\n let vfmaperror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[i] = '';\r\n return { vfmaperror };\r\n })\r\n }\r\n })\r\n\r\n if (Number(this.state.laufzeit) < Number(proofedValue) || Number(list[index - 1].validFrom) >= Number(proofedValue)) {\r\n this.setState((prevState: RatierlichState) => {\r\n let lzerror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[index] = 'Wert darf die Laufzeit nicht überschreiten und muss größer sein als die Angabe \"Sollzins ab dem\" der ' + (index) + '. Zinsstaffel.';\r\n return { lzerror };\r\n })\r\n }\r\n else {\r\n this.setState((prevState: RatierlichState) => {\r\n let vfmaperror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[index] = '';\r\n return { vfmaperror };\r\n })\r\n }\r\n\r\n errors.zinstreppeJahr[index] =\r\n !this.isValidYear(proofedValue)\r\n ? 'Bitte geben Sie ein Jahr ein'\r\n : '';\r\n }\r\n\r\n list[index][name] = proofedValue;\r\n this.setState({\r\n sollzinsListe: list\r\n }, () => {\r\n console.log(\"-------------------------------------------------------------------------\");\r\n console.log(\"InputList:\", this.state.sollzinsListe);\r\n })\r\n }\r\n };\r\n\r\n /**\r\n * Auswertung der Eingabe eines Eingabefeldes\r\n * Wird von allen Eingabefeldern benutzt, der Filter von welchem Eingabefeld erfolgt über das Event Target Objekt\r\n * @param event Event Übergabe des aufrufenden Eingabefeldes, bzw. das Target-Objekt davon\r\n * @returns Rückgabewert: void\r\n */\r\n handleInputChange(event: { target: any; }) {\r\n const target = event.target;\r\n const value = target.type === 'checkbox' ? target.checked : target.value;\r\n const name = target.name;\r\n let proofedValue: string = '';\r\n\r\n console.log(\"AKTUELLER NAME:\", name);\r\n\r\n // Error handling\r\n let errors = this.state.errors;\r\n switch (name) {\r\n case 'kreditprogramm':\r\n proofedValue = value;\r\n break;\r\n case 'faelligkeitsturnus':\r\n proofedValue = value;\r\n break;\r\n case 'betrag':\r\n let val = value.replaceAll('.', '');\r\n proofedValue = this.pruefeBetrag(val);\r\n errors.betrag =\r\n !this.isValidNumber(proofedValue)\r\n ? 'Bitte geben Sie den gewünschten Kreditbetrag ein'\r\n : '';\r\n {\r\n errors.auszahlungssatz === '' && errors.betrag === '' &&\r\n this.setState({\r\n auszahlungsbetrag: Number(val) * Number(this.state.auszahlungssatz) / 100,\r\n });\r\n }\r\n break;\r\n case 'auszahlungssatz':\r\n if (value > 100) {\r\n proofedValue = String(100);\r\n } else {\r\n proofedValue = value;\r\n }\r\n errors.auszahlungssatz =\r\n !this.isValidNumber(proofedValue)\r\n ? 'Bitte geben Sie einen gültigen Auszahlungssatz ein'\r\n : '';\r\n {\r\n errors.auszahlungssatz === '' && errors.betrag === '' &&\r\n this.setState({\r\n auszahlungsbetrag: Number(this.state.betrag) * Number(proofedValue) / 100,\r\n });\r\n }\r\n break;\r\n case 'zinszuschlag':\r\n if (Number(value.replace(',', '.')) > 100) {\r\n proofedValue = \"25,00\";\r\n } else {\r\n proofedValue = String(parseFloat(value.replace(',', '.')).toFixed(2)).replace('.', ',');\r\n }\r\n errors.zinszuschlag =\r\n !this.isValidInterest(proofedValue)\r\n ? 'Bitte geben Sie einen gültigen Zinszuschlag zwischen 0,00 und 25,00 ein'\r\n : '';\r\n break;\r\n case 'laufzeit':\r\n if (value > 100) {\r\n proofedValue = String(100);\r\n } else {\r\n proofedValue = value;\r\n }\r\n proofedValue = this.pruefeJahr(proofedValue);\r\n if (this.state.ueberhundertflag === \"on\") {\r\n this.setState((prevState: RatierlichState) => {\r\n let uherror = Object.assign({}, prevState.errors);\r\n errors.laufzeit = 'Bitte geben Sie keine Laufzeit > 100 ein';\r\n return { uherror };\r\n })\r\n setTimeout(() => {\r\n this.setState((prevState: RatierlichState) => {\r\n let uherror = Object.assign({}, prevState.errors);\r\n errors.laufzeit = '';\r\n return { uherror };\r\n })\r\n }, 3000);\r\n } else {\r\n this.setState((prevState: RatierlichState) => {\r\n let uherror = Object.assign({}, prevState.errors);\r\n errors.laufzeit = '';\r\n return { uherror };\r\n })\r\n }\r\n if (Number(this.state.tilgungsfreieAnlaufzeit) <= Number(proofedValue) && this.state.errors.tilgungsfreieAnlaufzeit === 'Anzahl der Freijahre ist größer als die Laufzeit') {\r\n this.setState((prevState: RatierlichState) => {\r\n let tfaerror = Object.assign({}, prevState.errors);\r\n errors.tilgungsfreieAnlaufzeit = '';\r\n return { tfaerror };\r\n })\r\n }\r\n if (Number(this.state.zinsbindung) <= Number(proofedValue) && this.state.errors.zinsbindung === 'Die Zinsbindung ist größer als die Laufzeit') {\r\n this.setState((prevState: RatierlichState) => {\r\n let zberror = Object.assign({}, prevState.errors);\r\n errors.zinsbindung = '';\r\n return { zberror };\r\n })\r\n }\r\n this.state.sollzinsListe.map((x: any, i: any) => {\r\n if (i > 0 && (Number(proofedValue) < Number(this.state.sollzinsListe[i].validFrom) || Number(this.state.sollzinsListe[i - 1].validFrom) >= Number(this.state.sollzinsListe[i].validFrom))) {\r\n this.setState((prevState: RatierlichState) => {\r\n let vfmaperror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[i] = 'Wert darf die Laufzeit nicht überschreiten und muss größer sein als die Angabe \"Sollzins ab dem\" der ' + (i) + '. Zinsstaffel.';\r\n return { vfmaperror };\r\n })\r\n }\r\n else {\r\n this.setState((prevState: RatierlichState) => {\r\n let vfmaperror = Object.assign({}, prevState.errors);\r\n errors.zinstreppeJahr[i] = '';\r\n return { vfmaperror };\r\n })\r\n }\r\n })\r\n errors.laufzeit =\r\n !this.isValidYear(proofedValue)\r\n ? 'Bitte geben Sie einen gültigen Wert ein'\r\n : '';\r\n break;\r\n case 'tilgungsfreieAnlaufzeit':\r\n if (value > 100) {\r\n proofedValue = String(100);\r\n } else {\r\n proofedValue = value;\r\n }\r\n proofedValue = this.pruefeFreiJahr(proofedValue);\r\n if (Number(this.state.laufzeit) < Number(proofedValue)) {\r\n this.setState((prevState: RatierlichState) => {\r\n let tfaerror = Object.assign({}, prevState.errors);\r\n errors.tilgungsfreieAnlaufzeit = 'Anzahl der Freijahre ist größer als die Laufzeit';\r\n return { tfaerror };\r\n })\r\n }\r\n errors.tilgungsfreieAnlaufzeit =\r\n !this.isValidFreiYear(proofedValue)\r\n ? 'Bitte geben Sie einen gültigen Wert ein'\r\n : '';\r\n break;\r\n case 'zinsbindung':\r\n if (value > 100) {\r\n proofedValue = String(100);\r\n } else {\r\n proofedValue = value;\r\n }\r\n proofedValue = this.pruefeJahr(proofedValue);\r\n if (Number(this.state.laufzeit) < Number(proofedValue)) {\r\n this.setState((prevState: RatierlichState) => {\r\n let lzerror = Object.assign({}, prevState.errors);\r\n errors.zinsbindung = 'Die Zinsbindung ist größer als die Laufzeit';\r\n return { lzerror };\r\n })\r\n }\r\n errors.zinsbindung =\r\n !this.isValidYear(proofedValue)\r\n ? 'Bitte geben Sie eine gültige Zinsbindung ein'\r\n : '';\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n\r\n this.setState({\r\n [name]: proofedValue,\r\n errors: errors\r\n }, () => {\r\n console.log('>>> State element ' + name + ' updated to ' + proofedValue);\r\n });\r\n }\r\n\r\n /**\r\n * Gib das Array ohne Duplikate zurück\r\n * @param array \r\n * @returns Rückgabewert: list ohne Duplikate\r\n */\r\n arrayOhneDuplikate(list: any[]): any {\r\n return list.filter(function (ele, pos) {\r\n return list.indexOf(ele) === pos;\r\n });\r\n }\r\n\r\n /**\r\n * Funktion die unmittelbar nach dem Laden der BEGStepper-Komponente ausgeführt wird\r\n */\r\n componentDidMount() {\r\n document.title = 'Tilgungsrechner Ratierlich';\r\n //this.ladeZinskonditionen();\r\n }\r\n\r\n\r\n submitValidateForm = () => {\r\n let validationresult = 0;\r\n let errors = this.state.errors;\r\n let begErrors = this.state.begErrors;\r\n let auszahlungssatz = this.state.auszahlungssatz;\r\n let auszahlungsbetrag = this.state.auszahlungsbetrag;\r\n let betragValue = this.state.betrag;\r\n let laufzeit = this.state.laufzeit;\r\n let tilgungsfreieAnlaufzeit = this.state.tilgungsfreieAnlaufzeit;\r\n let zinsbindung = this.state.zinsbindung;\r\n let sollzinsliste = this.state.sollzinsListe;\r\n let zinszuschlag = this.state.zinszuschlag;\r\n\r\n errors.auszahlungssatz = !this.isValidNumber(auszahlungssatz)\r\n ? 'Bitte geben Sie einen gültigen Auszahlungssatz ein'\r\n : '';\r\n errors.auszahlungsbetrag = !this.isValidNumber(auszahlungsbetrag)\r\n ? 'Bitte geben Sie einen gültigen Auszahlungsbetrag ein'\r\n : '';\r\n errors.betrag = !this.isValidNumber(betragValue)\r\n ? 'Bitte geben Sie den gewünschten Kreditbetrag ein'\r\n : '';\r\n errors.laufzeit =\r\n !this.isValidYear(laufzeit)\r\n ? 'Bitte geben Sie eine gültige Laufzeit ein'\r\n : '';\r\n errors.tilgungsfreieAnlaufzeit =\r\n !this.isValidFreiYear(tilgungsfreieAnlaufzeit)\r\n ? 'Bitte geben Sie eine gültige Freijahrzeit ein'\r\n : '';\r\n errors.zinsbindung =\r\n !this.isValidYear(zinsbindung)\r\n ? 'Bitte geben Sie eine gültige Zinsbindung ein'\r\n : '';\r\n errors.zinszuschlag =\r\n !this.isValidInterest(zinszuschlag)\r\n ? 'Bitte geben Sie einen gültigen Zinszuschlag zwischen 0,00 und 25,00 ein'\r\n : '';\r\n sollzinsliste.map((x: any, i: any) => {\r\n if (!this.isValidYear(x.validFrom) || (x.validFrom === '' && x.interestRateValue !== '')) {\r\n errors.zinstreppeJahr[i] = 'Bitte geben Sie einen gültigen Jahreswert ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n if (!this.isValidInterest(x.interestRateValue) || (x.interestRateValue === '' && x.validFrom !== '')) {\r\n errors.zinstreppeZins[i] = 'Bitte geben Sie einen gültigen Sollzins zwischen 0,00 und 25,00 ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n })\r\n\r\n if (auszahlungssatz === '') {\r\n errors.auszahlungssatz = 'Bitte geben Sie einen gültigen Auszahlungssatz ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n\r\n if (auszahlungsbetrag < 0) {\r\n errors.betrag = 'Bitte geben Sie einen gültigen Auszahlungsbetrag ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n\r\n if (betragValue === '') {\r\n errors.betrag = 'Bitte geben Sie den gewünschten Kreditbetrag ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n if (laufzeit === '') {\r\n errors.laufzeit = 'Bitte geben Sie eine gültige Laufzeit ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n if (tilgungsfreieAnlaufzeit === '') {\r\n errors.tilgungsfreieAnlaufzeit = 'Bitte geben Sie eine gültige Freijahrzeit ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n if (zinsbindung === '') {\r\n errors.zinsbindung = 'Bitte geben Sie eine gültige Zinsbindung ein';\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n\r\n if (errors.betrag !== '' || errors.laufzeit !== '' || errors.laufzeit !== '' || errors.laufzeit !== '' || errors.laufzeit !== '') {\r\n validationresult = Number(validationresult) + 1;\r\n }\r\n\r\n this.setState({\r\n errors: errors,\r\n }, () => {\r\n console.log('State ' + errors + ' updated');\r\n });\r\n\r\n if (Number(validationresult) === 0) {\r\n return true\r\n }\r\n else {\r\n return false\r\n }\r\n }\r\n\r\n /**\r\n * Ermittele den Tilgungsplan\r\n * @param event \r\n * @returns undefined\r\n */\r\n ermittelTilgungsplan(event: { target: any; }) {\r\n let finalValidation = this.submitValidateForm();\r\n\r\n if (finalValidation === true) {\r\n switch (this.state.faelligkeitsturnus) {\r\n case \"monatlich\":\r\n this.state.turnusergebnis = 4;\r\n this.state.turnusspalte = \"Monat\";\r\n this.state.perioden = 12;\r\n this.state.monatsfaktor = 1;\r\n break;\r\n case \"vierteljährlich\":\r\n this.state.turnusergebnis = 3;\r\n this.state.turnusspalte = \"Quartal\";\r\n this.state.perioden = 4;\r\n this.state.monatsfaktor = 3;\r\n break;\r\n case \"halbjährlich\":\r\n this.state.turnusergebnis = 2;\r\n this.state.turnusspalte = \"Halbjahr\";\r\n this.state.perioden = 2;\r\n this.state.monatsfaktor = 6;\r\n break;\r\n case \"jährlich\":\r\n this.state.turnusergebnis = 1;\r\n this.state.turnusspalte = \"Jahr\";\r\n this.state.perioden = 1;\r\n this.state.monatsfaktor = 12;\r\n break;\r\n default:\r\n return 4;\r\n }\r\n\r\n let basisdatum = new Date(\"January 01, 2021\");\r\n let basisdatumRP = basisdatum.getTime();\r\n let tfaAddition = (Number(this.state.tilgungsfreieAnlaufzeit) * 12) + Number(this.state.monatsfaktor);\r\n let ersterZahlungsterminRP = basisdatum.setMonth(basisdatum.getMonth() + tfaAddition);\r\n basisdatum = new Date(\"January 01, 2021\");\r\n let ersterZinsterminRP = basisdatum.setMonth(basisdatum.getMonth() + Number(this.state.monatsfaktor));\r\n basisdatum = new Date(\"January 01, 2021\");\r\n let zinsbindungsdatumRP = basisdatum.setMonth(basisdatum.getMonth() + (Number(this.state.zinsbindung) * 12));\r\n basisdatum = new Date(\"January 01, 2021\");\r\n let laufzeitdatumRP = basisdatum.setMonth(basisdatum.getMonth() + (Number(this.state.laufzeit) * 12));\r\n\r\n this.state.relevanteSollzinsListe = this.konvertiereDatum(this.state.sollzinsListe, \"validFrom\");\r\n let znszuschlag = this.state.zinszuschlag;\r\n let zinsstaffelErgebnis = this.state.relevanteSollzinsListe.map(zinsstaffel => (\r\n {\r\n validFrom: zinsstaffel.validFrom,\r\n interestRateValue: (Number(zinsstaffel.interestRateValue.replace(',', '.')) + Number(znszuschlag.replace(',', '.')))\r\n })\r\n );\r\n\r\n console.log(\"==============================\");\r\n console.log(\"BETRAG:\", this.state.betrag);\r\n console.log(\"LAUFZEIT:\", this.state.laufzeit);\r\n console.log(\"FREIJAHRE:\", this.state.tilgungsfreieAnlaufzeit);\r\n console.log(\"ZINSBINDUNG\", this.state.zinsbindung);\r\n console.log(\"SOLLZINSLISTE:\", this.state.sollzinsListe);\r\n console.log(\"ZINSZUSCHLAG:\", this.state.zinszuschlag);\r\n console.log(\"TURNUSERGEBNIS:\", this.state.turnusergebnis);\r\n console.log(\"ZINSSTAFFELERGEBNIS:\", zinsstaffelErgebnis);\r\n console.log(\"ERSTER_ZAHLUNGSTERMIN:\", ersterZahlungsterminRP, \" / \", new Date(ersterZahlungsterminRP).toLocaleString());\r\n console.log(\"ERSTER_ZINSTERMIN:\", ersterZinsterminRP, \" / \", new Date(ersterZinsterminRP).toLocaleString());\r\n console.log(\"ZINSBINDUNGSDATUM:\", zinsbindungsdatumRP, \" / \", new Date(zinsbindungsdatumRP).toLocaleString());\r\n console.log(\"LAUFZEITDATUM:\", laufzeitdatumRP, \" / \", new Date(laufzeitdatumRP).toLocaleString());\r\n console.log(\"==============================\");\r\n\r\n let config = {\r\n headers: { 'Content-Type': 'text/plain' },\r\n };\r\n\r\n const instance = axios.create({\r\n baseURL: TILGUNGSRECHNER_REST_BASE_URL,\r\n timeout: 10000,\r\n withCredentials: false,\r\n });\r\n\r\n let data = {\r\n \"loanAmount\": this.state.betrag,\r\n \"disbursementDate\": basisdatumRP,\r\n \"firstRepaymentDate\": ersterZahlungsterminRP,\r\n \"firstInterestRateDate\": ersterZinsterminRP,\r\n \"endDateOfFixedInterestRatePeriod\": zinsbindungsdatumRP,\r\n \"endDateOfLoanCall\": laufzeitdatumRP,\r\n \"repaymentProcess\": 3,\r\n \"interestRateDueDateCycle\": this.state.turnusergebnis,\r\n \"interestRates\": zinsstaffelErgebnis\r\n };\r\n\r\n console.log(\"Data\");\r\n console.log(data);\r\n\r\n instance.post('/tilgungsrechner-rest/berechneZinstilgplan', JSON.stringify(data), config)\r\n .then(response => {\r\n let obj = JSON.parse(response.data);\r\n console.log(\"Obj:\");\r\n console.log(obj);\r\n\r\n if (obj === null) {\r\n return;\r\n }\r\n\r\n let newState = Object.assign({}, this.state);\r\n newState.tilgungsplan.tilgungsfreieAnlaufzeit = Number(this.state.tilgungsfreieAnlaufzeit);\r\n newState.tilgungsplan.effektivzins = obj.interestRate;\r\n newState.tilgungsplan.anfaenglicherTilgungssatz = obj.initialRepaymentRate;\r\n newState.tilgungsplan.annuitaet = obj.repayments[Number(this.state.tilgungsfreieAnlaufzeit) * Number(this.state.perioden)].amount;\r\n newState.tilgungsplan.zahlung = ([]);\r\n\r\n let betragSumme: number = 0;\r\n let tilgungSumme: number = 0;\r\n let zinsSumme: number = 0;\r\n let balanceSumme: number = 0;\r\n let i = 0;\r\n let j = 0;\r\n\r\n obj.repayments.forEach((element: any) => {\r\n if (i === (Number(this.state.tilgungsfreieAnlaufzeit) * Number(this.state.perioden))) {\r\n j = i;\r\n }\r\n if (i >= (Number(this.state.tilgungsfreieAnlaufzeit) * Number(this.state.perioden))) {\r\n if (element.balance >= 0) {\r\n newState.tilgungsplan.zahlung.push({\r\n \"nr\": j + 1, \"betrag\": element.amount, \"tilgung\": element.repaymentAmount,\r\n \"zins\": element.interestRateAmount, \"saldo\": element.balance\r\n });\r\n betragSumme = betragSumme + this.formatNumber(Number(element.amount));\r\n zinsSumme = zinsSumme + element.interestRateAmount;\r\n balanceSumme = balanceSumme + this.formatNumber(Number(element.balance));\r\n j = j + 1;\r\n }\r\n tilgungSumme = tilgungSumme + Number(element.repaymentAmount);\r\n }\r\n i = i + 1;\r\n });\r\n\r\n let endsaldo: number = newState.tilgungsplan.zahlung.slice(-1)[0].saldo;\r\n\r\n newState.tilgungsplan.gesamtsumme = [obj.totalLoanCost, this.formatNumber(tilgungSumme), obj.totalInterestCost, endsaldo];\r\n newState.tilgungsplan.zwischensumme = [obj.repayments[0].amount, obj.repayments[0].balance];\r\n this.setState({\r\n tilgungsplan: newState.tilgungsplan\r\n }, () => {\r\n console.log('State effektivzins, anfaenglicherTilgungsatz changed after calling REST-API');\r\n }\r\n );\r\n })\r\n .catch(error => {\r\n console.log(error);\r\n });\r\n }\r\n }\r\n\r\n /**\r\n * Formatiere Daten in list\r\n * @param list \r\n * @param prop \r\n * @returns Rückgabewert: any\r\n */\r\n konvertiereDatum = (list: any, prop: any) => {\r\n return list.map((item: any) => {\r\n const obj = Object.assign({}, item);\r\n obj[prop] = new Date(this.state.defaultDatum.getFullYear() + Number(item.validFrom) - 1, 0, 1).getTime();\r\n return obj;\r\n });\r\n }\r\n\r\n /**\r\n * Formatiere die Zahl mit 2 Nachkommazahlen in fixed-point notation.\r\n * @param data \r\n * @returns Rückgabewert: string\r\n */\r\n formatNumber(data: number): number {\r\n return parseFloat(data.toFixed(2));\r\n }\r\n\r\n /**\r\n * Prüfe ob die Eingabe Interest valid ist\r\n * @param val \r\n * @returns Rückgabewert: boolean\r\n */\r\n isValidInterest(val: any) {\r\n let werttest = val.replace(/,/, \".\");\r\n return !isNaN(werttest) && typeof Number.parseFloat(werttest) === 'number' && Number.parseFloat(werttest) >= 0 && Number.parseFloat(werttest) <= 25;\r\n }\r\n\r\n /**\r\n * Prüfe ob die Eingabe eine Zahl ist\r\n * @param val \r\n * @returns Rückgabewert: boolean\r\n */\r\n isValidNumber(val: any) {\r\n return !isNaN(val) && typeof Number.parseInt(val) === 'number' && Number.parseInt(val) > 0 && Number.parseInt(val) < 1000000000;\r\n }\r\n\r\n /**\r\n * Prüfe od das Jahr valid ist\r\n * @param val \r\n * @returns Rückgabewert: boolean\r\n */\r\n isValidYear(val: any) {\r\n return val !== \"\" && Number(val) > 0 && Number(val) < 101;\r\n }\r\n\r\n\r\n /**\r\n * Prüfe od das FreiJahr valid ist\r\n * @param val \r\n * @returns Rückgabewert: boolean\r\n */\r\n isValidFreiYear(val: any) {\r\n return val !== \"\" && Number(val) >= 0 && Number(val) < 101;\r\n }\r\n\r\n /**\r\n * Setzen des initialen Wertes aller State-Variablen.\r\n * Wird vom Konstruktur aufgerufen.\r\n */\r\n initState = () => ({\r\n aktiverRechner: \"ratierlich\",\r\n kreditprogramm: '',\r\n verwendungszweck: '',\r\n betrag: '',\r\n laufzeit: '',\r\n anzahlZahlungstermine: 12,\r\n tilgungsfreieAnlaufzeit: '',\r\n zinsbindung: '',\r\n sollzinsListe: [{ validFrom: \"1\", interestRateValue: \"\" }],\r\n relevanteSollzinsListe: [],\r\n zinszuschlag: '',\r\n faelligkeitsturnus: \"monatlich\",\r\n auszahlungssatz: '',\r\n turnusspalte: '',\r\n auszahlungsbetrag: '',\r\n tilgungszuschuss: 0,\r\n zeitpunktTilgungszuschuss: 0,\r\n turnusergebnis: 0,\r\n ueberhundertflag: \"off\",\r\n laufzeitJahre: ([]),\r\n freiJahre: ([]),\r\n zinsbindungJahre: ([]),\r\n zinskonditionenId: '',\r\n sollzins: '',\r\n monatsfaktor: 1,\r\n perioden: 12,\r\n defaultDatum: new Date(2021, 0, 1),\r\n progress: 0,\r\n begErrors: {\r\n value: '',\r\n },\r\n tilgungsplan: {\r\n tilgungsfreieAnlaufzeit: 1,\r\n annuitaet: 0,\r\n effektivzins: 0,\r\n anfaenglicherTilgungssatz: 0,\r\n TilgungsfreieAnlaufjahreZahlung: ([]),\r\n zahlung: ([0]),\r\n items: ([0]),\r\n gesamtsumme: [0, 0, 0, 0],\r\n zwischensumme: [0, 0, 0, 0],\r\n tilgungsplanBisZinbungsende: false,\r\n },\r\n errors: {\r\n betrag: '',\r\n laufzeit: '',\r\n tilgungsfreieAnlaufzeit: '',\r\n auszahlungssatz: '',\r\n auszahlungsbetrag: '',\r\n zinsbindung: '',\r\n zinstreppeJahr: [\"\", \"\", \"\", \"\", \"\"],\r\n zinstreppeZins: [\"\", \"\", \"\", \"\", \"\"],\r\n zinszuschlag: '',\r\n tilgungszuschuss: '',\r\n tilgungszuschussbetrag: '',\r\n zmTilgungszuschuss: [\"\", \"\"],\r\n },\r\n });\r\n\r\n /**\r\n * Konvertierung des Betragwertes in eine Darstellung mit Punkt-Tausendertrennung ohne Nachkommastellen\r\n * @param betrag Eingegebener Betrag\r\n * @returns Rückgabewert: string Konvertierte Darstellung\r\n */\r\n konvertiereBetrag(betrag: number): string {\r\n if (betrag === undefined) {\r\n return \"0 €\"\r\n }\r\n else {\r\n let tempzahl: string = Number(betrag).toFixed(2);\r\n let nStr: string = tempzahl\r\n nStr += '';\r\n var x = nStr.split('.');\r\n var x1 = x[0];\r\n // var x2 = x.length > 1 ? '.' + x[1] : '';\r\n var rgx = /(\\d+)(\\d{3})/;\r\n while (rgx.test(x1)) {\r\n x1 = x1.replace(rgx, String('$1') + '.' + String('$2'));\r\n }\r\n // let x3: string = x2.replace(\".\", \",\");\r\n return x1 + \" €\";\r\n }\r\n }\r\n\r\n /**\r\n * Konvertierung des Betragwertes in eine Darstellung mit Punkt-Tausendertrennung ohne Nachkommastellen\r\n * @param betrag Eingegebener Betrag\r\n * @returns Rückgabewert: string Konvertierte Darstellung\r\n */\r\n konvertiereBetragFuerTilgungsplan(betrag: number): string {\r\n if (betrag === undefined) {\r\n return \"0 €\"\r\n }\r\n else {\r\n let tempzahl: string = Number(betrag).toFixed(2);\r\n let nStr: string = tempzahl\r\n nStr += '';\r\n var x = nStr.split('.');\r\n var x1 = x[0];\r\n // var x2 = x.length > 1 ? '.' + x[1] : '';\r\n var rgx = /(\\d+)(\\d{3})/;\r\n while (rgx.test(x1)) {\r\n x1 = x1.replace(rgx, String('$1') + '.' + String('$2'));\r\n }\r\n if (x.length > 1) {\r\n x1 = x1 + ',' + x[1];\r\n }\r\n // let x3: string = x2.replace(\".\", \",\");\r\n return x1 + \" €\";\r\n }\r\n }\r\n\r\n /**\r\n * Konvertierung des Zinswertes in eine Darstellung mit Komma als Dezimaltrenung und 2 Nachkommastellen\r\n * @param zins Vorhandener Zinswert\r\n * @returns Rückgabewert: string Konvertierte Darstellung\r\n */\r\n konvertiereZins(zins: number): string {\r\n if (zins === undefined || isNaN(zins)) {\r\n return \"0 %\";\r\n }\r\n else {\r\n let tempzahl: string = Number(zins).toFixed(2);\r\n let nStr: string = tempzahl\r\n nStr += '';\r\n var x = nStr.split('.');\r\n var x1 = x[0];\r\n var x2 = x.length > 1 ? '.' + x[1] : '';\r\n var rgx = /(\\d+)(\\d{3})/;\r\n while (rgx.test(x1)) {\r\n x1 = x1.replace(rgx, String('$1') + '.' + String('$2'));\r\n }\r\n let x3: string = x2.replace(\".\", \",\");\r\n return x1 + x3 + \" %\";\r\n }\r\n }\r\n\r\n /**\r\n * Formatierung des Sollzinses\r\n * @returns Rückgabewert: number \r\n */\r\n formatSollzins(): number {\r\n return Number(this.state.sollzins.replace(/,/, \".\"));\r\n }\r\n\r\n /**\r\n * Renderfunktion der BEGStepper-Komponente\r\n * @returns Rückgabewert: Child-Komponenten\r\n */\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Tilgungsrechner Ratierlich\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n
{this.state.begErrors.value}
\r\n }\r\n \r\n {}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}","// eslint-disable-next-line\r\nimport React from 'react';\r\n\r\nimport { Grid, Typography, Link } from '@material-ui/core';\r\n\r\n/**\r\n * Copyright-Komponente\r\n * @returns Rückgabewert: Material-UI Typography-Tag mit aktuellem Jahr\r\n*/\r\nfunction Copyright() {\r\n return (\r\n \r\n {new Date().getFullYear()} KfW, Frankfurt am Main\r\n \r\n );\r\n}\r\n\r\n/**\r\n * Datenschutz-Komponente\r\n * @returns Rückgabewert: Link zu KfW Datenschutz Seite\r\n*/\r\nfunction Datenschutz() {\r\n return (\r\n \r\n \r\n Datenschutz\r\n \r\n \r\n );\r\n}\r\n\r\n/**\r\n * Impressum-Komponente\r\n * @returns Rückgabewert: Link zu KfW Impressum\r\n*/\r\nfunction Impressum() {\r\n return (\r\n \r\n \r\n Impressum\r\n \r\n \r\n );\r\n}\r\n\r\n/**\r\n * Footer vom Mischtilgungszuschussrechner mit KfW Copyright, Datenschutz und Impressum Angaben\r\n * @returns Rückgabewert: Copyright-Komponente\r\n*/\r\nexport default function Footer() {\r\n\r\n return (\r\n \r\n );\r\n}","// eslint-disable-next-line\r\nimport React, { Component } from 'react'\r\n\r\nimport Header from './components/Header';\r\nimport BEGStepper from './components/rechner/beg/Index';\r\nimport Wohneigentum from './components/rechner/wohneigentum/Index';\r\nimport Altersgerecht from './components/rechner/altersgerecht/Index';\r\nimport Ratierlich from './components/rechner/ratierlich/Index';\r\nimport Footer from './components/Footer';\r\nimport { Switch, Route, BrowserRouter as Router } from \"react-router-dom\";\r\n\r\n/**\r\n * Aufteilung der Einstiegskomponente in Header, BEGStepper und Footer\r\n */\r\nclass App extends Component {\r\n render() {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n (\r\n \r\n )} />\r\n \r\n \r\n \r\n \r\n \r\n )\r\n }\r\n}\r\n\r\nexport default App","// This optional code is used to register a service worker.\r\n// register() is not called by default.\r\n\r\n// This lets the app load faster on subsequent visits in production, and gives\r\n// it offline capabilities. However, it also means that developers (and users)\r\n// will only see deployed updates on subsequent visits to a page, after all the\r\n// existing tabs open on the page have been closed, since previously cached\r\n// resources are updated in the background.\r\n\r\n// To learn more about the benefits of this model and instructions on how to\r\n// opt-in, read https://bit.ly/CRA-PWA\r\n\r\nconst isLocalhost = Boolean(\r\n window.location.hostname === 'localhost' ||\r\n // [::1] is the IPv6 localhost address.\r\n window.location.hostname === '[::1]' ||\r\n // 127.0.0.0/8 are considered localhost for IPv4.\r\n window.location.hostname.match(\r\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\r\n )\r\n);\r\n\r\nexport function register(config: any) {\r\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\r\n // The URL constructor is available in all browsers that support SW.\r\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\r\n if (publicUrl.origin !== window.location.origin) {\r\n // Our service worker won't work if PUBLIC_URL is on a different origin\r\n // from what our page is served on. This might happen if a CDN is used to\r\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\r\n return;\r\n }\r\n\r\n window.addEventListener('load', () => {\r\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\r\n\r\n if (isLocalhost) {\r\n // This is running on localhost. Let's check if a service worker still exists or not.\r\n checkValidServiceWorker(swUrl, config);\r\n\r\n // Add some additional logging to localhost, pointing developers to the\r\n // service worker/PWA documentation.\r\n navigator.serviceWorker.ready.then(() => {\r\n console.log(\r\n 'This web app is being served cache-first by a service ' +\r\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\r\n );\r\n });\r\n } else {\r\n // Is not localhost. Just register service worker\r\n registerValidSW(swUrl, config);\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction registerValidSW(swUrl: any, config: any) {\r\n navigator.serviceWorker\r\n .register(swUrl)\r\n .then(registration => {\r\n registration.onupdatefound = () => {\r\n const installingWorker = registration.installing;\r\n if (installingWorker == null) {\r\n return;\r\n }\r\n installingWorker.onstatechange = () => {\r\n if (installingWorker.state === 'installed') {\r\n if (navigator.serviceWorker.controller) {\r\n // At this point, the updated precached content has been fetched,\r\n // but the previous service worker will still serve the older\r\n // content until all client tabs are closed.\r\n console.log(\r\n 'New content is available and will be used when all ' +\r\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\r\n );\r\n\r\n // Execute callback\r\n if (config && config.onUpdate) {\r\n config.onUpdate(registration);\r\n }\r\n } else {\r\n // At this point, everything has been precached.\r\n // It's the perfect time to display a\r\n // \"Content is cached for offline use.\" message.\r\n console.log('Content is cached for offline use.');\r\n\r\n // Execute callback\r\n if (config && config.onSuccess) {\r\n config.onSuccess(registration);\r\n }\r\n }\r\n }\r\n };\r\n };\r\n })\r\n .catch(error => {\r\n console.error('Error during service worker registration:', error);\r\n });\r\n}\r\n\r\nfunction checkValidServiceWorker(swUrl: any, config: any) {\r\n // Check if the service worker can be found. If it can't reload the page.\r\n fetch(swUrl, {\r\n headers: { 'Service-Worker': 'script' },\r\n })\r\n .then(response => {\r\n // Ensure service worker exists, and that we really are getting a JS file.\r\n const contentType = response.headers.get('content-type');\r\n if (\r\n response.status === 404 ||\r\n (contentType != null && contentType.indexOf('javascript') === -1)\r\n ) {\r\n // No service worker found. Probably a different app. Reload the page.\r\n navigator.serviceWorker.ready.then(registration => {\r\n registration.unregister().then(() => {\r\n window.location.reload();\r\n });\r\n });\r\n } else {\r\n // Service worker found. Proceed as normal.\r\n registerValidSW(swUrl, config);\r\n }\r\n })\r\n .catch(() => {\r\n console.log(\r\n 'No internet connection found. App is running in offline mode.'\r\n );\r\n });\r\n}\r\n\r\nexport function unregister() {\r\n if ('serviceWorker' in navigator) {\r\n navigator.serviceWorker.ready\r\n .then(registration => {\r\n registration.unregister();\r\n })\r\n .catch(error => {\r\n console.error(error.message);\r\n });\r\n }\r\n}\r\n","// eslint-disable-next-line\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport './App.css';\r\n\r\nimport App from './App';\r\nimport * as serviceWorker from './serviceWorker';\r\n\r\nimport 'react-app-polyfill/ie11';\r\nimport 'react-app-polyfill/stable';\r\n\r\n/**\r\n * Initialer Aufruf der Anwendung\r\n*/\r\nReactDOM.render(\r\n ,\r\n document.getElementById('root')\r\n);\r\n\r\n\r\n// https://www.grapecity.com/forums/wijmo/warning-on-react-strictmod\r\n// & Fade\r\n// If you want your app to work offline and load faster, you can change\r\n// unregister() to register() below. Note this comes with some pitfalls.\r\n// Learn more about service workers: https://bit.ly/CRA-PWA\r\nserviceWorker.unregister();\r\n"],"sourceRoot":""}