Change Results panel

src/Solimieten.js

@@ -14,7 +14,6 @@ import {
     StatNumber,
     StatGroup,
     Select,
-    Progress,
     NumberInput,
     NumberInputField,
     Slider,
@@ -22,7 +21,9 @@ import {
     SliderMark,
     SliderTrack,
     SliderThumb,
-    Tooltip
+    Tooltip,
+    Alert,
+    AlertIcon
 } from '@chakra-ui/react';
 
 import { flatData } from './Data';
@@ -297,21 +298,33 @@ export function SelfEvaluationCard({ rent, setRent }) {
 
 export function ResultsCard({ rent, flat, room, numAdults, flatRent }) {
     var body = <CardBody></CardBody>
-    if (flat && (room || flat.wgRoomList.length === 0) && flatRent) {
+    if (rent && flat && (room || flat.wgRoomList.length === 0) && flatRent) {
         var totalSize = flat.calcTotalPayedArea(room)
         var relativeRent = (rent) / totalSize;
 
-        var rangePosition = ((rent - flatRent.min) / (flatRent.maxCovering * - flatRent.min)) * 100;
-        if (rangePosition < 0) { rangePosition = 0; }
-        if (rangePosition > 100) { rangePosition = 100; }
-        var color = "red";
-        if (rangePosition > 33) { color = "yellow"; }
-        if (rangePosition > 66) { color = "green    "; }
+        var status = "error", text = "Dieses Gebot läge unter der Mindestmiete und ist nicht zulässig";
+
+        if (rent >= flatRent.min) {
+            status = 'info';
+            text = "Über der Mindestmiete. "
+        }
+        if (rent >= flatRent.minCovering) {
+            status = 'success';
+            text = 'Über der Standardmiete WBS 🎉'
+        }
+        if (rent >= flatRent.maxCovering) {
+            status = 'success';
+            text = 'Über der Standardmiete freifinanziert! 🎉🎉🎉'
+        }
+
         body = <CardBody>
             <Stack>
+                <Text fontWeight="bold">
+                    Das ergäbe eine Miete von:
+                </Text>
                 <StatGroup>
                     <Stat>
-                        <StatLabel>Miete</StatLabel>
+                        <StatLabel>Warmmiete</StatLabel>
                         <StatNumber>{rent} €</StatNumber>
                     </Stat>
 
@@ -320,22 +333,10 @@ export function ResultsCard({ rent, flat, room, numAdults, flatRent }) {
                         <StatNumber>{relativeRent.toFixed(2)} € </StatNumber>
                     </Stat>
                 </StatGroup>
-                <Text>
-                    Im Folgenden siehst du, wo deine Miete auf der Spanne zwischen WBS-Satz und
-                    frei finanzierten Wohnungen ohne Soli-Ausgleich liegen würde.
-                </Text>
-                <Progress colorScheme={color} size='sm' value={rangePosition} />
-                <StatGroup>
-                    <Stat>
-                        <StatLabel>Mindestmiete</StatLabel>
-                        <StatNumber>{flatRent.min.toFixed(2)} €</StatNumber>
-                    </Stat>
-
-                    <Stat>
-                        <StatLabel>Standardmiete freifinanziert</StatLabel>
-                        <StatNumber>{flatRent.maxCovering.toFixed(2)} € </StatNumber>
-                    </Stat>
-                </StatGroup>
+                <Alert status={status}>
+                    <AlertIcon />
+                    {text}
+                </Alert>
             </Stack>
         </CardBody>;
     }