diff --git a/src/App.js b/src/App.js index c26f34a..64c586a 100644 --- a/src/App.js +++ b/src/App.js @@ -2,41 +2,23 @@ import { React, useState } from 'react'; import { ChakraProvider, - Text, extendTheme, - Select, - Card, - CardHeader, Heading, - CardBody, Center, SimpleGrid, Box, - Stack, - NumberInput, - NumberInputField, - Slider, - SliderFilledTrack, - SliderMark, - SliderTrack, - SliderThumb, - Tooltip + } from '@chakra-ui/react'; -import { FlatDetails, ResultsCard } from './Solimieten'; -import { flatData } from './Data'; +import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten'; + import { Nav } from './Nav'; function App() { - const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]); - const [flatOptions, setFlatOptions] = useState([]); - const [selectedBuilding, setSelectedBuilding] = useState(); + const [selectedFlat, setSelectedFlat] = useState(); - const [income, setIncome] = useState(0); - - const [sliderValue, setSliderValue] = useState(30) - const [showTooltip, setShowTooltip] = useState(false) + const [rent, setRent] = useState(0); const theme = extendTheme({ "colors": { @@ -55,33 +37,6 @@ function App() { } }); - function buildingSelected(e) { - var newOptions; - if (e.target.value === "south") { - newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }]; - } else { - newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]; - } - setLevelOption(newOptions); - setSelectedBuilding(e.target.value); - }; - - - function levelSelected(e) { - var newData = flatData[selectedBuilding][e.target.value]; - if (newData) { - setFlatOptions(flatData[selectedBuilding][e.target.value]); - } - } - - function flatSelected(e) { - var index = e.target.value; - - setSelectedFlat(flatOptions[index]); - } - - const formatEuro = (val) => val + ' €'; - const parseEuro = (val) => val.replace(/^€/, '') @@ -91,91 +46,18 @@ function App() {
+ Wohnung - - - Wohnungsauswahl - - - - - - - - - - + + Selbsteinschätzung - - - - Wie hoch ist euer/dein Haushaltsnetto? Beachtet dabei alle regelmäßigen Einkünfte wie Gehalt, Rente, Mieteinkünfte oder Kapitalerträge - setIncome(parseEuro(valueString))} - value={formatEuro(income)} - > - - - - Wie viel Prozent eures/deines Nettoeinkommens kannst du für Miete aufbringen? - setSliderValue(v)} - onMouseEnter={() => setShowTooltip(true)} - onMouseLeave={() => setShowTooltip(false)} - > - - 10% - - - 20% - - - 30% - - - 40% - - - 50% - - - - - - - - - - - - - - + +
diff --git a/src/Solimieten.js b/src/Solimieten.js index 6c99597..8508ae5 100644 --- a/src/Solimieten.js +++ b/src/Solimieten.js @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -11,12 +12,71 @@ import { Stat, StatLabel, StatNumber, - StatHelpText, - StatArrow, - StatGroup + StatGroup, + Select, + NumberInput, + NumberInputField, + Slider, + SliderFilledTrack, + SliderMark, + SliderTrack, + SliderThumb, + Tooltip } from '@chakra-ui/react'; -export function FlatDetails({ flat }) { +import { flatData } from './Data'; + +export function FlatSelectionCard({ setSelectedFlat }) { + const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]); + const [flatOptions, setFlatOptions] = useState([]); + const [selectedBuilding, setSelectedBuilding] = useState(); + + function buildingSelected(e) { + var newOptions; + if (e.target.value === "south") { + newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }]; + } else { + newOptions = [{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]; + } + setLevelOption(newOptions); + setSelectedBuilding(e.target.value); + }; + + function levelSelected(e) { + var newData = flatData[selectedBuilding][e.target.value]; + if (newData) { + setFlatOptions(flatData[selectedBuilding][e.target.value]); + } + } + + function flatSelected(e) { + var index = e.target.value; + + setSelectedFlat(flatOptions[index]); + } + + return + + Wohnungsauswahl + + + + + + + + + +} + +export function FlatDetailsCard({ flat }) { var body = Bitte auswählen ; @@ -78,10 +138,89 @@ export function FlatDetails({ flat }) { ); } -export function ResultsCard({ income, percentage, flat }) { +export function SelfEvaluationCard({ rent, setRent }) { + + const [sliderValue, setSliderValue] = useState(30) + const [showTooltip, setShowTooltip] = useState(false) + + const [income, setIncome] = useState(1000) + + const formatEuro = (val) => val + ' €'; + const parseEuro = (val) => val.replace(/^€/, '') + + + function onIncomeChange(valueString) { + setIncome(parseEuro(valueString)); + setRent(valueString * sliderValue / 100); + } + + function onSliderChange(value) { + setSliderValue(value); + setRent(income * value / 100); + } + + return + + + Wie hoch ist euer/dein Haushaltsnetto? Beachtet dabei alle regelmäßigen Einkünfte wie Gehalt, Rente, Mieteinkünfte oder Kapitalerträge + + + + + Wie viel Prozent eures/deines Nettoeinkommens kannst du für Miete aufbringen? + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + > + + 10% + + + 20% + + + 30% + + + 40% + + + 50% + + + + + + + + + + + + + +} + +export function ResultsCard({ rent, flat }) { var body = if (flat) { - var rent = income * percentage / 100; var relativeRent = rent / flat.sizePrivate; body = @@ -92,7 +231,7 @@ export function ResultsCard({ income, percentage, flat }) { Pro m² - {relativeRent.toFixed(2)} € + {relativeRent.toFixed(2)} € ;