Add more rent info

This commit is contained in:
Niklas Meinzer
2024-09-29 09:45:09 +02:00
parent 55572f71c4
commit ee8a1e3ffb
3 changed files with 41 additions and 12 deletions

View File

@@ -23,6 +23,7 @@ function App() {
const [selectedFlat, setSelectedFlat] = useState(); const [selectedFlat, setSelectedFlat] = useState();
const [selectedRoom, setSelectedRoom] = useState(); const [selectedRoom, setSelectedRoom] = useState();
const [numAdults, setNumAdults] = useState(1);
const [rent, setRent] = useState(0); const [rent, setRent] = useState(0);
@@ -73,8 +74,8 @@ function App() {
<Heading>Wohnung</Heading> <Heading>Wohnung</Heading>
<Box></Box> <Box></Box>
<FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} /> <FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} onNumAdultsSelected={setNumAdults} />
<FlatDetailsCard flat={selectedFlat} room={selectedRoom} /> <FlatDetailsCard flat={selectedFlat} room={selectedRoom} numAdults={numAdults} />
<Heading>Selbsteinschätzung</Heading> <Heading>Selbsteinschätzung</Heading>
<Box></Box> <Box></Box>

View File

@@ -59,7 +59,7 @@ class Room {
export const flatData = { export const flatData = {
"north": { "north": {
0: [ 0: [
new Flat("W 0.1", 4, 84.834, false, false, [ new Flat("W 0.1 (WG)", 4, 84.834, false, false, [
new Room("0.1 02", 12.523), new Room("0.1 03", 12.102), new Room("0.1 04", 14.746) new Room("0.1 02", 12.523), new Room("0.1 03", 12.102), new Room("0.1 04", 14.746)
]), ]),
new Flat("W 0.2", 2, 53.453, true), new Flat("W 0.2", 2, 53.453, true),
@@ -68,21 +68,21 @@ export const flatData = {
1: [ 1: [
new Flat("W 1.1", 4, 84.794, true), new Flat("W 1.1", 4, 84.794, true),
new Flat("W 1.2", 1, 36.469, true), new Flat("W 1.2", 1, 36.469, true),
new Flat("W 1.3", 4, 63.128, true, false, [ new Flat("W 1.3 (WG)", 4, 63.128, true, false, [
new Room("1.3 02", 11.434), new Room("1.3 03", 11.245), new Room("1.3 04", 11.77) new Room("1.3 02", 11.434), new Room("1.3 03", 11.245), new Room("1.3 04", 11.77)
]) ])
], ],
2: [ 2: [
new Flat("W 2.1", 4, 84.794, true), new Flat("W 2.1", 4, 84.794, true),
new Flat("W 2.2", 2, 46.261, true), new Flat("W 2.2", 2, 46.261, true),
new Flat("W 2.3", 5, 154.196, true, true, [ new Flat("W 2.3 (Cluster)", 5, 154.196, true, true, [
new Room("1 Person", 28.774), new Room("2 Personen", 46.32, 2), new Room("1 Person (rollstuhlgerecht)", 41.814) new Room("1 Person", 28.774), new Room("2 Personen", 46.32, 2), new Room("1 Person (rollstuhlgerecht)", 41.814)
]), ]),
new Flat("W 2.4", 2, 64.265, true, true) new Flat("W 2.4", 2, 64.265, true, true)
], ],
3: [ 3: [
new Flat("W 3.1", 4, 84.794), new Flat("W 3.1", 4, 84.794),
new Flat("W 3.2", 5, 154.97, true, true, [ new Flat("W 3.2 (Cluster)", 5, 154.97, true, true, [
new Room("1 Person", 28.531), new Room("2 Personen", 47.146, 2), new Room("1 Person (rollstuhlgerecht)", 44.036) new Room("1 Person", 28.531), new Room("2 Personen", 47.146, 2), new Room("1 Person (rollstuhlgerecht)", 44.036)
]), ]),
new Flat("W 3.3", 3, 63.128, true) new Flat("W 3.3", 3, 63.128, true)

View File

@@ -27,7 +27,7 @@ import {
import { flatData, minRent, maxRent } from './Data'; import { flatData, minRent, maxRent } from './Data';
export function FlatSelectionCard({ setSelectedFlat, onRoomSelected }) { 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" }]);
const [flatOptions, setFlatOptions] = useState([]); const [flatOptions, setFlatOptions] = useState([]);
const [roomOptions, setRoomOptions] = useState([]); const [roomOptions, setRoomOptions] = useState([]);
@@ -64,6 +64,9 @@ export function FlatSelectionCard({ setSelectedFlat, onRoomSelected }) {
onRoomSelected(roomOptions[e.target.value]); onRoomSelected(roomOptions[e.target.value]);
} }
function numAdultsSelected(e) {
onNumAdultsSelected(e.target.value);
}
return <Card> return <Card>
<CardHeader> <CardHeader>
<Heading size='md'>Wohnungsauswahl</Heading> <Heading size='md'>Wohnungsauswahl</Heading>
@@ -83,22 +86,29 @@ export function FlatSelectionCard({ setSelectedFlat, onRoomSelected }) {
{roomOptions.length > 0 ? (<Select placeholder='Zimmer auswählen' onChange={roomSelected}> {roomOptions.length > 0 ? (<Select placeholder='Zimmer auswählen' onChange={roomSelected}>
{roomOptions.map((room, index) => <option value={index} >{room.print()} ({room.size} )</option>)} {roomOptions.map((room, index) => <option value={index} >{room.print()} ({room.size} )</option>)}
</Select>) : null} </Select>) : null}
<Select placeholder='Anzahl Erwachsene' onChange={numAdultsSelected}>
<option value="1">1 erwachsene Person</option>
<option value="2">2 erwachsene Personen</option>
</Select>
</Stack> </Stack>
</CardBody> </CardBody>
</Card > </Card >
} }
export function FlatDetailsCard({ flat, room }) { export function FlatDetailsCard({ flat, room, numAdults }) {
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 && (room || flat.wgRoomList.length === 0)) {
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;
@@ -155,9 +165,27 @@ export function FlatDetailsCard({ flat, room }) {
<Heading size='xs' textTransform='uppercase'> <Heading size='xs' textTransform='uppercase'>
Mindestmiete Mindestmiete
</Heading> </Heading>
<Text fontSize="xs">Die Mindestmiete ergibt sich aus dem WBS Satz für die private Fläche (4,45 /), den Nebenkosten (1,20 /) und der Küchen-Nutzungspauschale von 50 pro Küche</Text> <Text fontSize="xs">Die Mindestmiete ergibt sich aus dem WBS Satz für die private Fläche (4,45 /), den Nebenkosten (1,20 /) und der Küchen-Nutzungspauschale von 50 pro Küche (in Clustern und WGs auf Parteien aufgeteilt)</Text>
<Text pt='2' fontSize='m' fontWeight='bold'> <Text pt='2' fontSize='xl' fontWeight='bold'>
{((sizePrivate + internalAreaShare) * minRent + 50).toFixed(2)} {((sizePrivate + internalAreaShare) * minRent + kitchenCost).toFixed(2)}
</Text>
</Box>
<Box>
<Heading size='xs' textTransform='uppercase'>
Deckungsmiete WBS
</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)}
</Text>
</Box>
<Box>
<Heading size='xs' textTransform='uppercase'>
Deckungsmiete freifinanziert {flat.isWbs ? "(zum Vergleich)" : ""}
</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." : "."}</Text>
<Text pt='2' fontSize='xl' fontWeight='bold'>
{((sizePrivate + internalAreaShare) * maxRent + kitchenCost + commonAreaShare).toFixed(2)}
</Text> </Text>
</Box> </Box>
</Stack> </Stack>