Change range description from relative rent to absolute rent
This commit is contained in:
Niklas Meinzer
38
src/App.js
38
src/App.js
@@ -1,4 +1,4 @@
|
||||
import { React, useState } from 'react';
|
||||
import { React, useState, useEffect } from 'react';
|
||||
|
||||
import {
|
||||
ChakraProvider,
|
||||
@@ -18,14 +18,15 @@ import {
|
||||
import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten';
|
||||
|
||||
import { Nav } from './Nav';
|
||||
|
||||
import { minRent, maxRent } from './Data';
|
||||
function App() {
|
||||
|
||||
const [selectedFlat, setSelectedFlat] = useState();
|
||||
const [selectedRoom, setSelectedRoom] = useState();
|
||||
const [numAdults, setNumAdults] = useState(1);
|
||||
const [numAdults, setNumAdults] = useState();
|
||||
|
||||
const [rent, setRent] = useState(0);
|
||||
const [rent, setRent] = useState();
|
||||
const [flatRent, setFlatRent] = useState();
|
||||
|
||||
const theme = extendTheme({
|
||||
"colors": {
|
||||
@@ -44,7 +45,30 @@ function App() {
|
||||
}
|
||||
});
|
||||
|
||||
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 = {
|
||||
min: (sizePrivate + internalAreaShare) * minRent + kitchenCost,
|
||||
minCovering: (sizePrivate + internalAreaShare) * minRent + kitchenCost + commonAreaShare,
|
||||
maxCovering: (sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare
|
||||
}
|
||||
|
||||
setFlatRent(newRent);
|
||||
}
|
||||
}, [selectedFlat, selectedRoom, numAdults])
|
||||
|
||||
|
||||
return (
|
||||
@@ -55,7 +79,7 @@ function App() {
|
||||
<Stack maxWidth={1200}>
|
||||
<Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
|
||||
<Text>
|
||||
<Heading>Allemende Solimieten-Helferlein</Heading>
|
||||
<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.
|
||||
@@ -75,13 +99,13 @@ function App() {
|
||||
<Box></Box>
|
||||
|
||||
<FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} onNumAdultsSelected={setNumAdults} />
|
||||
<FlatDetailsCard flat={selectedFlat} room={selectedRoom} numAdults={numAdults} />
|
||||
<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} />
|
||||
<ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
</Center>
|
||||
|
||||
@@ -25,7 +25,7 @@ import {
|
||||
Tooltip
|
||||
} from '@chakra-ui/react';
|
||||
|
||||
import { flatData, minRent, maxRent } from './Data';
|
||||
import { flatData } from './Data';
|
||||
|
||||
export function FlatSelectionCard({ setSelectedFlat, onRoomSelected, onNumAdultsSelected }) {
|
||||
const [levelOptions, setLevelOption] = useState([{ value: 0, label: "EG" }, { value: 1, label: "1. OG" }, { value: 2, label: "2. OG" }, { value: 3, label: "3. OG" }]);
|
||||
@@ -99,20 +99,17 @@ export function FlatSelectionCard({ setSelectedFlat, onRoomSelected, onNumAdults
|
||||
</Card >
|
||||
}
|
||||
|
||||
export function FlatDetailsCard({ flat, room, numAdults }) {
|
||||
export function FlatDetailsCard({ flat, room, flatRent }) {
|
||||
var body = <CardBody>
|
||||
Bitte auswählen
|
||||
</CardBody>;
|
||||
|
||||
var badges = "";
|
||||
var kitchenCost = 50;
|
||||
var commonAreaShare = 60 * numAdults;
|
||||
|
||||
if (flat && (room || flat.wgRoomList.length === 0)) {
|
||||
if (flat && (flat.wgRoomList.length === 0 || room) && flatRent) {
|
||||
var sizePrivate = flat.sizePrivate;
|
||||
if (room) {
|
||||
sizePrivate = room.size;
|
||||
kitchenCost = kitchenCost / flat.wgRoomList.length;
|
||||
}
|
||||
|
||||
var sizeSharedBox = null;
|
||||
@@ -171,7 +168,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
|
||||
</Heading>
|
||||
<Text fontSize="xs">Die Mindestmiete ergibt sich aus dem WBS Satz für die private Fläche (9,45 €/m²), den Nebenkosten (1,20 €/m²) und der Küchen-Nutzungspauschale von 50€ pro Küche (in Clustern und WGs auf Parteien aufgeteilt)</Text>
|
||||
<Text pt='2' fontSize='xl' fontWeight='bold'>
|
||||
{((sizePrivate + internalAreaShare) * minRent + kitchenCost).toFixed(2)} €
|
||||
{(flatRent.min).toFixed(2)} €
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
@@ -180,7 +177,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
|
||||
</Heading>
|
||||
<Text fontSize="xs">Die Deckungsmiete beinhaltet einen Beitrag von 60 € pro erwachsener Person für die Gemeinschaftsflächen</Text>
|
||||
<Text pt='2' fontSize='xl' fontWeight='bold'>
|
||||
{((sizePrivate + internalAreaShare) * minRent + kitchenCost + commonAreaShare).toFixed(2)} €
|
||||
{(flatRent.minCovering).toFixed(2)} €
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
@@ -189,7 +186,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
|
||||
</Heading>
|
||||
<Text fontSize="xs">Das ist die Miete, die für diese Wohnung ohne solidarischen Ausgleich anfallen würde{flat.isWbs ? ", wenn Sie frei finanziert wäre " : " "}und ergibt sich aus 13,06 €/m² plus 1,20 €/m² Nebenkosten und Gemeinschaftsflächen-Pauschale.</Text>
|
||||
<Text pt='2' fontSize='xl' fontWeight='bold'>
|
||||
{((sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare).toFixed(2)} €
|
||||
{(flatRent.maxCovering).toFixed(2)} €
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
@@ -298,13 +295,14 @@ export function SelfEvaluationCard({ rent, setRent }) {
|
||||
</Card>
|
||||
}
|
||||
|
||||
export function ResultsCard({ rent, flat, room }) {
|
||||
export function ResultsCard({ rent, flat, room, numAdults, flatRent }) {
|
||||
var body = <CardBody></CardBody>
|
||||
if (flat && (room || flat.wgRoomList.length === 0)) {
|
||||
if (flat && (room || flat.wgRoomList.length === 0) && flatRent) {
|
||||
var totalSize = flat.calcTotalPayedArea(room)
|
||||
var kitchenCost = flat.wgRoomList.length > 0 ? 50 / flat.wgRoomList.length : 50;
|
||||
var relativeRent = (rent - kitchenCost - (60 * numAdults)) / totalSize;
|
||||
|
||||
var relativeRent = rent / totalSize;
|
||||
var rangePosition = ((relativeRent - minRent) / (maxRent - minRent)) * 100;
|
||||
var rangePosition = ((rent - flatRent.min) / (flatRent.maxCovering - flatRent.min)) * 100;
|
||||
if (rangePosition < 0) { rangePosition = 0; }
|
||||
if (rangePosition > 100) { rangePosition = 100; }
|
||||
var color = "green";
|
||||
@@ -330,13 +328,13 @@ export function ResultsCard({ rent, flat, room }) {
|
||||
<Progress colorScheme={color} size='sm' value={rangePosition} />
|
||||
<StatGroup>
|
||||
<Stat>
|
||||
<StatLabel>WBS Miete</StatLabel>
|
||||
<StatNumber>{minRent.toFixed(2)} €</StatNumber>
|
||||
<StatLabel>Mindestmiete</StatLabel>
|
||||
<StatNumber>{flatRent.min.toFixed(2)} €</StatNumber>
|
||||
</Stat>
|
||||
|
||||
<Stat>
|
||||
<StatLabel>Max</StatLabel>
|
||||
<StatNumber>{maxRent.toFixed(2)} € </StatNumber>
|
||||
<StatLabel>Deckungsmiete freifinanziert</StatLabel>
|
||||
<StatNumber>{flatRent.maxCovering.toFixed(2)} € </StatNumber>
|
||||
</Stat>
|
||||
</StatGroup>
|
||||
</Stack>
|
||||
|
||||
Reference in New Issue
Block a user