117 lines
3.7 KiB
JavaScript
117 lines
3.7 KiB
JavaScript
import { React, useState, useEffect } from 'react';
|
|
|
|
import {
|
|
ChakraProvider,
|
|
extendTheme,
|
|
Heading,
|
|
Center,
|
|
SimpleGrid,
|
|
Box,
|
|
Text,
|
|
Stack,
|
|
useColorModeValue,
|
|
OrderedList,
|
|
ListItem,
|
|
|
|
} from '@chakra-ui/react';
|
|
|
|
import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten';
|
|
|
|
import { Nav } from './Nav';
|
|
import { minRent, maxRent, minRentFactor } from './Data';
|
|
function App() {
|
|
|
|
const [selectedFlat, setSelectedFlat] = useState();
|
|
const [selectedRoom, setSelectedRoom] = useState();
|
|
const [numAdults, setNumAdults] = useState();
|
|
|
|
const [rent, setRent] = useState(0);
|
|
const [flatRent, setFlatRent] = useState();
|
|
|
|
const theme = extendTheme({
|
|
"colors": {
|
|
"gray": {
|
|
"50": "#F3FEE7",
|
|
"100": "#DEFCBB",
|
|
"200": "#C8FA8F",
|
|
"300": "#B3F862",
|
|
"400": "#9DF636",
|
|
"500": "#88F50A",
|
|
"600": "#6DC408",
|
|
"700": "#529306",
|
|
"800": "#366204",
|
|
"900": "#1B3102"
|
|
}
|
|
}
|
|
});
|
|
|
|
useEffect(() => {
|
|
setFlatRent(null);
|
|
if (selectedFlat && numAdults && (selectedFlat.wgRoomList.length === 0 || selectedRoom)) {
|
|
console.log("Recalculating Rent...");
|
|
var commonAreaShare = 60 * numAdults;
|
|
var kitchenCost = 50;
|
|
var sizePrivate = selectedFlat.sizePrivate;
|
|
var internalAreaShare = 0;
|
|
|
|
if (selectedFlat.wgRoomList.length > 0) {
|
|
internalAreaShare = selectedFlat.calcInternalAreaShare(selectedRoom);
|
|
sizePrivate = selectedRoom.size;
|
|
kitchenCost = kitchenCost / selectedFlat.wgRoomList.length;
|
|
}
|
|
|
|
var newRent = {
|
|
minCovering: (sizePrivate + internalAreaShare) * minRent + kitchenCost + commonAreaShare,
|
|
maxCovering: (sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare
|
|
}
|
|
newRent.min = newRent.minCovering * minRentFactor;
|
|
|
|
setFlatRent(newRent);
|
|
}
|
|
}, [selectedFlat, selectedRoom, numAdults])
|
|
|
|
|
|
return (
|
|
|
|
<ChakraProvider theme={theme}>
|
|
<Nav></Nav>
|
|
<Center p={5}>
|
|
<Stack maxWidth={1200}>
|
|
<Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
|
|
<Text>
|
|
<Heading>Allmende Solimieten-Helferlein</Heading>
|
|
|
|
Im Rahmen des Konzept für solidarische Mieten, kann jede Partei in der Allmende ihre Miethöhe selbst bestimmen.
|
|
Dieses Tool soll als Orientierungshilfe bei der Selbsteinschätzung dienen.
|
|
</Text>
|
|
<Text pt={3}>Dies geschieht in folgenden Schritten:
|
|
</Text>
|
|
<OrderedList pt={3}>
|
|
<ListItem>Wähle deine Wohnung aus</ListItem>
|
|
<ListItem>Bestimme das monatliche Haushaltseinkommen</ListItem>
|
|
<ListItem>Wähle den Prozentsatz des Nettoeinkommens, den du zu zahlen bereit bist aus</ListItem>
|
|
<ListItem>Nun siehst du den daraus resultierenden Mietpreis absolut und auf den Quadratmeter gerechnet.</ListItem>
|
|
</OrderedList>
|
|
</Box>
|
|
<SimpleGrid pt={5} columns={{ base: 1, md: 2, lg: 2 }} spacing={4}>
|
|
|
|
<Heading>Wohnung</Heading>
|
|
<Box></Box>
|
|
|
|
<FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} onNumAdultsSelected={setNumAdults} />
|
|
<FlatDetailsCard flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
|
|
|
|
<Heading>Selbsteinschätzung</Heading>
|
|
<Box></Box>
|
|
|
|
<SelfEvaluationCard rent={rent} setRent={setRent} />
|
|
<ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
|
|
</SimpleGrid>
|
|
</Stack>
|
|
</Center>
|
|
</ChakraProvider >
|
|
);
|
|
}
|
|
|
|
export default App;
|