Merge pull request #38 from CivicTechAtlanta/AV-14

Av 14 - Create drip rate calculator

Author: MotorizedWandOfFury

src/app/refill-time/RefillTime.scss renamed to src/app/drip-rate/DripRate.scss

@@ -4,45 +4,44 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import LanguageSelector from "../components/LanguageSelector/LanguageSelector";
 
-import './RefillTime.scss';
+import './DripRate.scss';
 import Home from "../components/Home/Home";
 
-export default function RefillTimeFormula() {
+export default function DripRateFormula() {
     const { t } = useTranslation();
 
     const [motherSolutionVolume, setMotherSolutionVolume] = useState<number>(0)
     const [dripRate, setDripRate] = useState<number>(0)
     const [refillTime, setRefillTime] = useState<number>(0)
 
     useEffect(() => {
-        if (dripRate <= 0) {
-            setRefillTime(0)
-            return;
-        }
-        setRefillTime(motherSolutionVolume / dripRate)
-    }, [motherSolutionVolume, dripRate])
+        // The mother solution is in liters. The refill time is in days. We want the drip rate in milliliters per minute.
+        // We convert liters to milliliters and days to minutes and perform the division.
+        const calculatedDripRate = refillTime > 0 ? (motherSolutionVolume * 1000) / (refillTime * 1440) : 0
+        setDripRate(calculatedDripRate)
+    }, [motherSolutionVolume, refillTime])
 
     return (
         <div className="center">
             <Home></Home>
-            <h1>{t('Refill Time Formula')}</h1>
+            <h1>{t('Drip Rate Formula')}</h1>
             <div className="input-wrapper">
 
                 <div className="input-group">
-                    <label>{t('Mother Solution Volume')}</label>
+                    <label>{`${t('Mother Solution Volume')} (${t('L')})`}</label>
                     <input type="number" value={motherSolutionVolume} onChange={(event) => { setMotherSolutionVolume(Number(event.target.value)) }} />
                 </div>
 
                 <div className="input-group">
-                    <label>{t('Drip Rate')}</label>
-                    <input type="number" value={dripRate} onChange={(event) => { setDripRate(Number(event.target.value)) }} />
+                    <label>{`${t('Refill time')} (${t('days')})`}</label>
+                    <input type="number" value={refillTime} onChange={(event) => { setRefillTime(Number(event.target.value)) }} />
                 </div>
 
-                <h2>{`${t('Refill time is')}: ${refillTime} ${t('hours')}`}</h2>
+                <h2>{`${t('Drip Rate is')}: ${dripRate.toFixed(2)} ${t('milliliters')}/${t('minute')}`}</h2>
 
                 <button className="button" onClick={() => {
                     setMotherSolutionVolume(0)
-                    setDripRate(0)
+                    setRefillTime(0)
                 }}>{t('Clear')}</button>
             </div>
 

src/app/refill-time/page.tsx renamed to src/app/drip-rate/page.tsx

@@ -4,6 +4,7 @@
     "button": "Switch Language",
     "Home": "Home",
     "Chlorine Weight Formula": "Chlorine Weight Formula",
+    "Drip Rate Formula": "Drip Rate Formula",
     "Mother Solution Concentration": "Mother Solution Concentration",
     "Refill Time": "Refill Time",
     "Reservoir Ingress": "Reservoir Ingress",
@@ -12,6 +13,7 @@
     "Water Ingress": "Water Ingress",
     "Desired Concentration": "Desired Concentration",
     "Drip Rate": "Drip Rate",
+    "Drip Rate is": "Drip Rate is",
     "Chlorine Percentage": "Chlorine Percentage",
     "Show Chlorine Weight": "Show Chlorine Weight",
     "The weight of chlorine needed is": "The weight of chlorine needed is",
@@ -24,10 +26,13 @@
     "Refill time is": "Refill time is",
     "Reservoir Ingress Formula": "Reservoir Ingress Formula",
     "The ingress formula is": "The ingress formula is",
+    "days": "days",
     "hours": "hours",
     "liters": "liters",
+    "minute": "minute",
     "second": "second",
     "milligrams": "milligrams",
+    "milliliters": "milliliters",
     "grams": "grams",
     "mg": "mg",
     "L": "L",

src/app/locales/en.json

@@ -4,6 +4,7 @@
     "button": "Cambiar Idioma",
     "Home": "Inicio",
     "Chlorine Weight Formula": "Fórmula de peso de cloro",
+    "Drip Rate Formula": "Fórmula de Goteo",
     "Mother Solution Concentration": "Concentración de la Solución Madre",
     "Refill Time": "Tiempo de Recarga",
     "Reservoir Ingress": "Entrada al Reservorio",
@@ -12,6 +13,7 @@
     "Water Ingress": "Entrada de Agua",
     "Desired Concentration": "Concentración Deseada",
     "Drip Rate": "Taza de Goteo",
+    "Drip Rate is": "El taza de goteo",
     "Chlorine Percentage": "Porcentaje de Cloro",
     "Show Chlorine Weight": "Mostrar Peso de Cloro",
     "The weight of chlorine needed is": "El peso de cloro necesario es",
@@ -24,9 +26,12 @@
     "Refill time is": "El tiempo de recarga es",
     "Reservoir Ingress Formula": "Fórmula de Entrada al Reservorio",
     "The ingress formula is": "La fórmula de entrada es",
+    "days": "días",
     "hours": "horas",
     "liters": "litros",
     "second": "segundo",
+    "minute": "minuto",
+    "milliliters": "millilitros",
     "milligrams": "miligramos",
     "grams": "gramos",
     "mg": "mg",

src/app/locales/es.json

@@ -15,7 +15,7 @@ export default function Home() {
       <main className='main'>
         <Link className='go-to-page' href="/chlorine-weight">{t('Chlorine Weight Formula')}</Link>
         <Link className='go-to-page' href="/mother-solution-concentration">{t('Mother Solution Concentration')}</Link>
-        <Link className='go-to-page' href="/refill-time">{t('Refill Time')}</Link>
+        <Link className='go-to-page' href="/drip-rate">{t('Drip Rate')}</Link>
         <Link className='go-to-page' href="/reservoir-ingress">{t('Reservoir Ingress')}</Link>
         <Link className='go-to-page' href="/mother-tank-maximum-weight">{t('Mother Tank Maximum Weight')}</Link>
         {/* <Link className='go-to-page' href="/lang-test">{t('Language Test')}</Link> */}