Allmende/Solimieten-Helferlein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change range description from relative rent to absolute rent

Browse Source
This commit is contained in:
Niklas Meinzer
2024-10-04 11:59:02 +02:00
parent 49e4da2da8
commit 4a0f47f03b
2 changed files with 46 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/App.js
View File

@@ -1,4 +1,4 @@
import { React, useState } from 'react'; import { React, useState, useEffect } from 'react';
import { import {
ChakraProvider, ChakraProvider,
@@ -18,14 +18,15 @@ import {
import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten'; import { FlatSelectionCard, FlatDetailsCard, SelfEvaluationCard, ResultsCard } from './Solimieten';
import { Nav } from './Nav'; import { Nav } from './Nav';
import { minRent, maxRent } from './Data';
function App() { function App() {
const [selectedFlat, setSelectedFlat] = useState(); const [selectedFlat, setSelectedFlat] = useState();
const [selectedRoom, setSelectedRoom] = 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({ const theme = extendTheme({
"colors": { "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 ( return (
@@ -55,7 +79,7 @@ function App() {
<Stack maxWidth={1200}> <Stack maxWidth={1200}>
<Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}> <Box p={6} borderRadius="lg" bg={useColorModeValue('gray.100', 'gray.200')}>
<Text> <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. 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. Dieses Tool soll als Orientierungshilfe bei der Selbsteinschätzung dienen.
@@ -75,13 +99,13 @@ function App() {
<Box></Box> <Box></Box>
<FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} onNumAdultsSelected={setNumAdults} /> <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> <Heading>Selbsteinschätzung</Heading>
<Box></Box> <Box></Box>
<SelfEvaluationCard rent={rent} setRent={setRent} /> <SelfEvaluationCard rent={rent} setRent={setRent} />
<ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} /> <ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} numAdults={numAdults} flatRent={flatRent} />
</SimpleGrid> </SimpleGrid>
</Stack> </Stack>
</Center> </Center>

32
src/Solimieten.js
View File

@@ -25,7 +25,7 @@ import {
Tooltip Tooltip
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { flatData, minRent, maxRent } from './Data'; import { flatData } from './Data';
export function FlatSelectionCard({ setSelectedFlat, onRoomSelected, onNumAdultsSelected }) { 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" }]); 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 > </Card >
} }
export function FlatDetailsCard({ flat, room, numAdults }) { export function FlatDetailsCard({ flat, room, flatRent }) {
var body = <CardBody> var body = <CardBody>
Bitte auswählen Bitte auswählen
</CardBody>; </CardBody>;
var badges = ""; 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; var sizePrivate = flat.sizePrivate;
if (room) { if (room) {
sizePrivate = room.size; sizePrivate = room.size;
kitchenCost = kitchenCost / flat.wgRoomList.length;
} }
var sizeSharedBox = null; var sizeSharedBox = null;
@@ -171,7 +168,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
</Heading> </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 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'> <Text pt='2' fontSize='xl' fontWeight='bold'>
{((sizePrivate + internalAreaShare) * minRent + kitchenCost).toFixed(2)} € {(flatRent.min).toFixed(2)} €
</Text> </Text>
</Box> </Box>
<Box> <Box>
@@ -180,7 +177,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
</Heading> </Heading>
<Text fontSize="xs">Die Deckungsmiete beinhaltet einen Beitrag von 60 € pro erwachsener Person für die Gemeinschaftsflächen</Text> <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'> <Text pt='2' fontSize='xl' fontWeight='bold'>
{((sizePrivate + internalAreaShare) * minRent + kitchenCost + commonAreaShare).toFixed(2)} € {(flatRent.minCovering).toFixed(2)} €
</Text> </Text>
</Box> </Box>
<Box> <Box>
@@ -189,7 +186,7 @@ export function FlatDetailsCard({ flat, room, numAdults }) {
</Heading> </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 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'> <Text pt='2' fontSize='xl' fontWeight='bold'>
{((sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare).toFixed(2)} € {(flatRent.maxCovering).toFixed(2)} €
</Text> </Text>
</Box> </Box>
</Stack> </Stack>
@@ -298,13 +295,14 @@ export function SelfEvaluationCard({ rent, setRent }) {
</Card> </Card>
} }
export function ResultsCard({ rent, flat, room }) { export function ResultsCard({ rent, flat, room, numAdults, flatRent }) {
var body = <CardBody></CardBody> 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 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 = ((rent - flatRent.min) / (flatRent.maxCovering - flatRent.min)) * 100;
var rangePosition = ((relativeRent - minRent) / (maxRent - minRent)) * 100;
if (rangePosition < 0) { rangePosition = 0; } if (rangePosition < 0) { rangePosition = 0; }
if (rangePosition > 100) { rangePosition = 100; } if (rangePosition > 100) { rangePosition = 100; }
var color = "green"; var color = "green";
@@ -330,13 +328,13 @@ export function ResultsCard({ rent, flat, room }) {
<Progress colorScheme={color} size='sm' value={rangePosition} /> <Progress colorScheme={color} size='sm' value={rangePosition} />
<StatGroup> <StatGroup>
<Stat> <Stat>
<StatLabel>WBS Miete</StatLabel> <StatLabel>Mindestmiete</StatLabel>
<StatNumber>{minRent.toFixed(2)} €</StatNumber> <StatNumber>{flatRent.min.toFixed(2)} €</StatNumber>
</Stat> </Stat>
<Stat> <Stat>
<StatLabel>Max</StatLabel> <StatLabel>Deckungsmiete freifinanziert</StatLabel>
<StatNumber>{maxRent.toFixed(2)} € </StatNumber> <StatNumber>{flatRent.maxCovering.toFixed(2)} € </StatNumber>
</Stat> </Stat>
</StatGroup> </StatGroup>
</Stack> </Stack>