make it all work for WGs

src/App.js

@@ -22,6 +22,7 @@ import { Nav } from './Nav';
 function App() {
 
   const [selectedFlat, setSelectedFlat] = useState();
+  const [selectedRoom, setSelectedRoom] = useState();
 
   const [rent, setRent] = useState(0);
 
@@ -72,14 +73,14 @@ function App() {
             <Heading>Wohnung</Heading>
             <Box></Box>
 
-            <FlatSelectionCard setSelectedFlat={setSelectedFlat} />
+            <FlatSelectionCard setSelectedFlat={setSelectedFlat} onRoomSelected={setSelectedRoom} />
-            <FlatDetailsCard flat={selectedFlat} />
+            <FlatDetailsCard flat={selectedFlat} room={selectedRoom} />
 
             <Heading>Selbsteinschätzung</Heading>
             <Box></Box>
 
             <SelfEvaluationCard rent={rent} setRent={setRent} />
-            <ResultsCard rent={rent} flat={selectedFlat} />
+            <ResultsCard rent={rent} flat={selectedFlat} room={selectedRoom} />
           </SimpleGrid>
         </Stack>
       </Center>

src/Data.js

@@ -1,9 +1,20 @@
 class Flat {
-    constructor(name, numRooms, sizePrivate, isWbs = false, isAccessible = false) {
+    constructor(name, numRooms, sizePrivate, isWbs = false, isAccessible = false, wgRoomList = null) {
         this.name = name;
         this.numRooms = numRooms;
         this.sizePrivate = sizePrivate;
         this.isWbs = isWbs;
+        this.sizeShared = 0;
+        if (!wgRoomList) {
+            this.wgRoomList = [];
+        } else {
+            this.wgRoomList = wgRoomList;
+            this.sizeShared = this.sizePrivate;
+            for (var i = 0; i < this.wgRoomList.length; i++) {
+                this.sizeShared -= this.wgRoomList[i].size;
+            }
+        }
+
     }
 
     print() {
@@ -22,6 +33,7 @@ export const flatData = {
         ],
         1: [
             new Flat("W 1.4", 2, 55.7),
+            new Flat("W 1.5 (WG)", 5, 83.86, true, false, [{ "label": "1.5 02", "size": 15.72 }, { "label": "1.5 03", "size": 9.81 }, { "label": "1.5 05", "size": 11.48 }, { "label": "1.5 06", "size": 13.45 }]),
             new Flat("W 1.6.0", 1, 25.6),
             new Flat("W 1.6", 5, 95.7),
         ],

src/Solimieten.js

@@ -27,9 +27,10 @@ import {
 
 import { flatData, minRent, maxRent } from './Data';
 
-export function FlatSelectionCard({ setSelectedFlat }) {
+export function FlatSelectionCard({ setSelectedFlat, onRoomSelected }) {
     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 [roomOptions, setRoomOptions] = useState([]);
     const [selectedBuilding, setSelectedBuilding] = useState();
 
     function buildingSelected(e) {
@@ -52,9 +53,15 @@ export function FlatSelectionCard({ setSelectedFlat }) {
 
     function flatSelected(e) {
         var index = e.target.value;
-
+        var flat = flatOptions[index];
+        if (flat.wgRoomList) {
+            setRoomOptions(flat.wgRoomList);
+        }
         setSelectedFlat(flatOptions[index]);
     }
+    function roomSelected(e) {
+        onRoomSelected(roomOptions[e.target.value]);
+    }
 
     return <Card>
         <CardHeader>
@@ -72,19 +79,43 @@ export function FlatSelectionCard({ setSelectedFlat }) {
                 <Select placeholder='Wohnung auswählen' onChange={flatSelected}>
                     {flatOptions.map((flat, index) => <option value={index} >{flat.print()}</option>)}
                 </Select>
+                {roomOptions.length > 0 ? (<Select placeholder='Zimmer auswählen' onChange={roomSelected}>
+                    {roomOptions.map((room, index) => <option value={index} >{room.label} ({room.size} m²)</option>)}
+                </Select>) : null}
             </Stack>
         </CardBody>
     </Card>
 }
 
-export function FlatDetailsCard({ flat }) {
+export function FlatDetailsCard({ flat, room }) {
     var body = <CardBody>
         Bitte auswählen
     </CardBody>;
 
     var badges = "";
 
-    if (flat) {
+    if (flat && (room || flat.wgRoomList.length === 0)) {
+        var sizePrivate = flat.sizePrivate;
+        if (room) {
+            sizePrivate = room.size;
+        }
+
+        var sizeSharedBox = null;
+        var sizeSharedShare = 0;
+
+        if (flat.wgRoomList.length > 0) {
+            sizeSharedShare = flat.sizeShared / flat.wgRoomList.length;
+            sizeSharedBox = <Box>
+                <Heading size='xs' textTransform='uppercase'>
+                    Interne Gemeinschaftsfläche
+                </Heading>
+                <Text pt='2' fontSize='sm'>
+                    {flat.sizeShared.toFixed(2)} m²
+                </Text>
+            </Box>;
+
+        }
+
         body = <CardBody>
 
             <Stack divider={<StackDivider />} spacing='4'>
@@ -94,7 +125,7 @@ export function FlatDetailsCard({ flat }) {
                         Bezeichnung
                     </Heading>
                     <Text pt='2' fontSize='sm'>
-                        {flat.name}
+                        {flat.name} {room ? "Zimmer: " + room.label : null}
                     </Text>
                 </Box>
                 <Box>
@@ -105,12 +136,13 @@ export function FlatDetailsCard({ flat }) {
                         {flat.numRooms}
                     </Text>
                 </Box>
+                {sizeSharedBox}
                 <Box>
                     <Heading size='xs' textTransform='uppercase'>
-                        Private Fläche
+                        Fläche
                     </Heading>
                     <Text pt='2' fontSize='sm'>
-                        {flat.sizePrivate} m²
+                        {sizePrivate + sizeSharedShare} m² {sizeSharedShare ? ("(" + sizePrivate + " m² Zimmer + " + sizeSharedShare.toFixed(2) + " m² Anteil interne Gemeinschaftsfläche)") : null}
                     </Text>
                 </Box>
             </Stack>
@@ -219,10 +251,15 @@ export function SelfEvaluationCard({ rent, setRent }) {
     </Card>
 }
 
-export function ResultsCard({ rent, flat }) {
+export function ResultsCard({ rent, flat, room }) {
     var body = <CardBody></CardBody>
-    if (flat) {
+    if (flat && (room || flat.wgRoomList.length === 0)) {
-        var relativeRent = rent / flat.sizePrivate;
+        var totalSize = flat.sizePrivate;
+        if (room) {
+            totalSize = room.size + flat.sizeShared / flat.wgRoomList.length;
+        }
+
+        var relativeRent = rent / totalSize;
         var rangePosition = ((relativeRent - minRent) / (maxRent - minRent)) * 100;
         if (rangePosition < 0) { rangePosition = 0; }
         if (rangePosition > 100) { rangePosition = 100; }