feat: add quantity row to AgileCalculator and improve the layout

src/components/AgileCalculator.tsx

@@ -13,14 +13,19 @@ const AgileCalculator: Component = () => {
     singlePrice: 10.0,
     hoursPerPoint: 1,
   });
-  const calculatorQuantity = createMemo(() =>
+  const hours = createMemo(() =>
     calculateAgileQuantity(
-      1,
+      agileCalculator.hoursPerPoint,
       new Big(agileCalculator.risk).div(100).toNumber(),
       agileCalculator.minPoints,
       agileCalculator.maxPoints
     )
   );
+  const quantity = createMemo(() =>
+    agileCalculator.hoursPerPoint > 0
+      ? new Big(hours()).div(agileCalculator.hoursPerPoint).toNumber()
+      : hours()
+  );
 
   return (
     <div class="border border-slate-500/40 flex flex-col gap-2 p-2 rounded mb-3">
@@ -41,35 +46,36 @@ const AgileCalculator: Component = () => {
       />
       <TextInput
         labelMinWidth="300px"
-        label="Stunden pro Story Point"
+        label="Story Points Minimum"
         min="0"
         type="number"
-        value={agileCalculator.hoursPerPoint}
+        value={agileCalculator.minPoints}
         onInput={(e) =>
           !Number.isNaN(e.currentTarget.valueAsNumber) &&
-          setAgileCalculator("hoursPerPoint", e.currentTarget.valueAsNumber)
+          setAgileCalculator("minPoints", e.currentTarget.valueAsNumber)
         }
       />
       <TextInput
         labelMinWidth="300px"
-        label="Story Points Minimum"
+        label="Story Points Maximum"
         min="0"
         type="number"
-        value={agileCalculator.minPoints}
+        value={agileCalculator.maxPoints}
         onInput={(e) =>
           !Number.isNaN(e.currentTarget.valueAsNumber) &&
-          setAgileCalculator("minPoints", e.currentTarget.valueAsNumber)
+          setAgileCalculator("maxPoints", e.currentTarget.valueAsNumber)
         }
       />
       <TextInput
         labelMinWidth="300px"
-        label="Story Points Maximum"
+        label="Stunden pro Story Point"
+        suffix="h"
         min="0"
         type="number"
-        value={agileCalculator.maxPoints}
+        value={agileCalculator.hoursPerPoint}
         onInput={(e) =>
           !Number.isNaN(e.currentTarget.valueAsNumber) &&
-          setAgileCalculator("maxPoints", e.currentTarget.valueAsNumber)
+          setAgileCalculator("hoursPerPoint", e.currentTarget.valueAsNumber)
         }
       />
       <TextInput
@@ -85,7 +91,7 @@ const AgileCalculator: Component = () => {
         }
       />
       <div class="items-center grid grid-cols-[300px_1fr] gap-2">
-        <div class="p-1 font-mono text-sm text-right">
+        <div class="px-1 font-mono text-sm text-right">
           {"("}
           <span title="Nichtrisiko Anteil" class="text-title-border">
             {new Big(-100).plus(agileCalculator.risk).abs().toNumber()}%
@@ -107,37 +113,40 @@ const AgileCalculator: Component = () => {
           </span>
           {")"} =
         </div>
-        <div class="p-1">
+        <div class="px-1 flex justify-between">
-          <div class="flex justify-between">
+          <span>Gewichtete Story Points:</span>
-            <span>Gewichtete Story Points:</span>
+          {quantity()} SP
-            {calculatorQuantity()} SP
-          </div>
         </div>
-        <div class="p-1 font-mono text-sm text-right">
+        <div class="px-1 font-mono text-sm text-right">
           <span title="Gewichtete Story Points" class="text-title-border">
-            {calculatorQuantity()} SP
+            {quantity()} SP
           </span>{" "}
           *{" "}
           <span title="Stunden pro Story Point" class="text-title-border">
             {agileCalculator.hoursPerPoint} h
           </span>{" "}
+          =
+        </div>
+        <div class="px-1 flex justify-between">
+          <span>Menge:</span>
+          {hours()} h
+        </div>
+        <div class="px-1 font-mono text-sm text-right">
+          <span title="Menge" class="text-title-border">
+            {hours()} h
+          </span>{" "}
           *{" "}
           <span title="Einzelpreis" class="text-title-border">
             {agileCalculator.singlePrice} CHF
           </span>{" "}
           =
         </div>
-        <div class="p-1 font-bold">
+        <div class="px-1 font-bold flex justify-between">
-          <div class="flex justify-between">
+          <span>Gesamtpreis:</span>
-            <span>Gesamtpreis:</span>
+          {formatAmount(
-            {formatAmount(
+            new Big(hours()).mul(agileCalculator.singlePrice).toNumber()
-              new Big(calculatorQuantity())
+          )}{" "}
-                .mul(agileCalculator.hoursPerPoint)
+          CHF
-                .mul(agileCalculator.singlePrice)
-                .toNumber()
-            )}{" "}
-            CHF
-          </div>
         </div>
       </div>
     </div>