Add more rent info
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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} m²)</option>)}
|
{roomOptions.map((room, index) => <option value={index} >{room.print()} ({room.size} m²)</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 €/m²), den Nebenkosten (1,20 €/m²) 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 €/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='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>
|
||||||
|
|||||||
Reference in New Issue
Block a user