Merge pull request #42 from CivicTechAtlanta/steve-calc-flow

save

Author: steveschannel

src/app/calculator-flow/components/ChlorineWeightFlow.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTranslation } from "react-i18next";
+
+import Input from '../../chlorine-weight/components/Input';
+import Modal from '../../components/Modal/Modal';
+
+import {
+  CalculatorFlowSharedStateData
+} from "./Interfaces";
+
+export default function ChlorineWeightFormula({ onCalculate, sharedState }: { onCalculate: (data: any) => void, sharedState: CalculatorFlowSharedStateData }) {
+    const { t } = useTranslation();
+
+    const [showText, setShowText] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const [showModal, setShowModal] = useState(null as string | null);
+
+    console.log('ChlorineWeightFormula sharedState', sharedState);
+
+    const [formData, setFormData] = useState({
+        motherSolution: sharedState.msVolume || '',
+        waterIngress: sharedState.reservoirIngress || '',
+        desiredConcentration: sharedState.desiredConcentration || '',
+        dripRate: sharedState.desiredDripRate || '',
+        chlorinePercentage: sharedState.chlorinePercentage || '',
+    });
+
+    //Calculate the weight of chlorine needed
+    const chlorineWeight = .36 * ((Number(formData.motherSolution) * Number(formData.waterIngress) * Number(formData.desiredConcentration)) / (Number(formData.dripRate) * Number(formData.chlorinePercentage)))
+
+    const handleClick = () => {
+        if (
+            formData.motherSolution === '' ||
+            formData.waterIngress === '' ||
+            formData.desiredConcentration === '' ||
+            formData.dripRate === '' ||
+            formData.chlorinePercentage === ''
+        ) {
+            setErrorMessage('Please fill all inputs');
+            setShowText(false);
+        } else {
+            setErrorMessage('');
+            setShowText(true);
+            onCalculate({
+                chlorineWeight: chlorineWeight,
+                msVolume: formData.motherSolution,
+                waterIngress: formData.waterIngress,
+                desiredConcentration: formData.desiredConcentration,
+                dripRate: formData.dripRate,
+                chlorinePercentage: formData.chlorinePercentage
+            });
+        }
+    };
+
+    const handleClear = () => {
+        Object.keys(formData).forEach(key => {
+            setFormData({
+                ...formData,
+                [key]: '',
+            });
+        });
+
+        setShowText(false);
+        setErrorMessage('')
+    };
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = event.target;
+        setFormData((prev) => ({
+            ...prev,
+            [name]: parseFloat(value) || 0,
+        }));
+    };
+
+    return (
+        <div className="center">
+            <div className="pageHeader">
+                <h1>{t('Chlorine Weight Formula')}
+                    <svg onClick={() => setShowModal('info')} fill="#288DCE" viewBox="0 0 50 50"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z" /></svg>
+                </h1>
+            </div>
+
+            <div className="input-wrapper">
+                <Input
+                    label={`${t('Mother Solution')} (${t('liters')})`}
+                    name='motherSolution'
+                    value={formData.motherSolution}
+                    placeholder='600'
+                    handleChange={handleChange}
+                />
+                <Input
+                    label={`${t('Water Ingress')} (${t('liters')}/${'second'})`}
+                    name='waterIngress'
+                    value={formData.waterIngress}
+                    placeholder='20'
+                    handleChange={handleChange}
+                />
+                <Input
+                    label={`${t('Desired Concentration')} (${t('miligrams')}/${'liter'})`}
+                    name='desiredConcentration'
+                    value={formData.desiredConcentration}
+                    placeholder='1'
+                    handleChange={handleChange}
+                />
+                <Input
+                    label={`${t('Drip Rate')} (${t('liters')}/${'hour'})`}
+                    name='dripRate'
+                    value={formData.dripRate}
+                    placeholder='2'
+                    handleChange={handleChange}
+                />
+                <Input
+                    label={`${t('Chlorine Percentage')}`}
+                    name='chlorinePercentage'
+                    value={formData.chlorinePercentage}
+                    placeholder='0.7'
+                    handleChange={handleChange}
+                />
+
+                {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
+
+                <button className="button" onClick={handleClear}>{t('Clear')}</button>
+                
+                {showText ? (
+                    <p>{`${t('The weight of chlorine needed is')}: ${chlorineWeight} ${t('grams')}`}</p>
+                ) : (
+                    <button className="button primary" onClick={handleClick}>{t('Submit')}</button>
+                )}
+            </div>
+
+            <Modal
+                show={showModal === 'info'}
+                closeModal={() => setShowModal(null)}
+                headerText='How to Determine Chlorine Weight Formula'
+                imageKey='CHLORINE_WEIGHT'/>
+
+        </div>
+    );
+}

src/app/calculator-flow/components/DripRateCalculatorFlow.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Modal from '../../components/Modal/Modal';
+
+import '../../drip-rate/DripRate.scss';
+
+import {
+  CalculatorFlowSharedStateData
+} from "./Interfaces";
+
+export default function DripRateFormula({ onCalculate, sharedState }: { 
+    onCalculate: (data: any) => void,
+    sharedState: CalculatorFlowSharedStateData
+}) {
+        const { t } = useTranslation();
+
+        const [motherSolutionVolume, setMotherSolutionVolume] = useState<number>(sharedState.msVolume || 0)
+        const [dripRate, setDripRate] = useState<number>(sharedState.desiredDripRate || 0)
+        const [refillTime, setRefillTime] = useState<number>(0)
+
+        const [showModal, setShowModal] = useState(null as string | null);
+
+        const handleSubmit = () => {
+                const calculatedDripRate = refillTime > 0 ? (motherSolutionVolume * 1000) / (refillTime * 1440) : 0
+                setDripRate(calculatedDripRate)
+                onCalculate({
+                    msVolume: motherSolutionVolume,
+                    refillTime: refillTime,
+                    dripRate: calculatedDripRate
+                })
+        }
+
+        return (
+                <div className="center">
+                        <div className="pageHeader">
+                            <h1>{t('Recharge Time Formula')}
+                                <svg onClick={() => setShowModal('info')} fill="#288DCE" viewBox="0 0 50 50"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z" /></svg>
+                            </h1>
+                        </div>
+
+                        <div className="input-wrapper">
+
+                                <div className="input-group">
+                                        <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('Refill time')} (${t('days')})`}</label>
+                                        <input type="number" value={refillTime} onChange={(event) => { setRefillTime(Number(event.target.value)) }} />
+                                </div>
+
+                                <button className="button" onClick={() => {
+                                        setMotherSolutionVolume(0)
+                                        setRefillTime(0)
+                                        setDripRate(0)
+                                }}>{t('Clear')}</button>
+
+                                <button type="submit" className="primary button" onClick={() => {
+                                        handleSubmit()  // Simulate form submission
+                                }}>
+                                    {t('Submit')}
+                                </button>
+
+                                <h2>{`${t('Drip Rate is')}: ${dripRate.toFixed(2)} ${t('milliliters')}/${t('minute')}`}</h2>
+                        </div>
+
+                    <Modal
+                        show={showModal === 'info'}
+                        closeModal={() => setShowModal(null)}
+                        headerText={['Drip Rate']}
+                        modalText={[t('RechargeText1')]}
+                        imageKey={[null, 'CHLORINE_WEIGHT']}
+                    />
+                </div>
+        );
+}

src/app/calculator-flow/components/Input.tsx

@@ -0,0 +1,17 @@
+import "../styles/Input.css"
+
+type InputProps = {
+  label: string;
+  name: string;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  min?: string;
+};
+
+export default function Input({ label, name, min, handleChange }: InputProps) {
+  return (
+    <div className="input-group">
+      <p>{label}</p>
+      <input name={name} min={min} type="number" onChange={handleChange} step="0.01"></input>
+    </div>
+  );
+}

src/app/calculator-flow/components/Interfaces.tsx

@@ -0,0 +1,34 @@
+export interface DripRateData {
+    msVolume: number | null,
+    refillTime: number | null,
+    dripRate: number | null
+}
+
+export interface ChlorineWeightData {
+    weight: number | null,
+    concentration: number | null
+}
+
+export interface IngressData {
+    flowRate: number | null,
+}
+
+export interface MotherSolutionConcentrationData {
+    volume: number | null,
+    concentration: number | null
+}
+
+export interface MotherSolutionTankMaxWeightData {
+    weight: number | null,
+    concentration: number | null
+}
+
+export interface CalculatorFlowSharedStateData {
+    msVolume: number | null,
+    chlorinePercentage: number | null,
+    reservoirIngress: number | null,
+    chlorineWeight: number | null,
+    desiredDripRate: number | null,
+    msConcentration: number | null
+    desiredConcentration: number | null
+}

src/app/calculator-flow/components/MotherSolutionConcentrationFlow.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Modal from '../../components/Modal/Modal';
+
+import Form from "../../mother-solution-concentration/components/Form";
+
+import "../../mother-solution-concentration/styles/Main.css";
+
+export default function MotherSolutionConcentrationFormula({ onCalculate, sharedState }: { onCalculate: (data: any) => void, sharedState: object }) {
+  const { t } = useTranslation();
+
+  const [concentratedMotherSolution, setConcentratedMotherSolution] =
+    useState(0);
+
+  const [showModal, setShowModal] = useState(null as string | null);
+  const handleCalculate = (calculatedValue: number) => {
+    setConcentratedMotherSolution(calculatedValue);
+    onCalculate(calculatedValue);
+  };
+
+  return (
+    <div className="center">
+      <div className="pageHeader">
+        <h1>{t('Mother Solution Concentration Formula')}
+            <svg onClick={() => setShowModal('info')} fill="#288DCE" viewBox="0 0 50 50"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z" /></svg>
+        </h1>
+      </div>
+
+      <Form onCalculate={handleCalculate} sharedState={sharedState} />
+
+      <div className="result-wrapper">
+        <h2>{`${t('The concentration of the mother solution is')}:`}</h2>
+
+        <p className="answer">
+          {`${concentratedMotherSolution.toFixed(2)} ${t('mg')}/${t('L')}`}
+        </p>
+      </div>
+      <Modal
+          show={showModal === 'info'}
+          closeModal={() => setShowModal(null)}
+          headerText='How to Determine Chlorine Weight Formula'
+          imageKey='CHLORINE_WEIGHT'/>
+    </div>
+    
+  );
+}

src/app/calculator-flow/components/MotherTankMaximumWeightFlow.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import Form from "../../mother-tank-maximum-weight/components/Form";
+import Modal from '../../components/Modal/Modal';
+
+import "../styles/Main.css";
+
+import {
+  CalculatorFlowSharedStateData
+} from "./Interfaces";
+
+export default function MotherTankMaximumWeightFormula({ onCalculate, sharedState }: { onCalculate: (data: any) => void, sharedState: CalculatorFlowSharedStateData }) {
+  const { t } = useTranslation();
+
+  const [motherWeightMaximumWeightSolution, setMotherWeightMaximumWeightSolution] = useState(0);
+  const [showModal, setShowModal] = useState(null as string | null);
+
+
+  const handleCalculate = (calculatedValue: any) => {
+    setMotherWeightMaximumWeightSolution(calculatedValue.msMaximumWeight);
+    onCalculate({
+      motherWeightMaximumWeightSolution: calculatedValue.msMaximumWeight,
+      msVolume: calculatedValue.msVolume,
+      chlorinePercentage: calculatedValue.chlorinePercentage
+    });
+  };
+
+  return (
+    <div className="center">
+      <div className="pageHeader">
+        <h1>{t('Mother Tank Maximum Weight Formula')}
+            <svg onClick={() => setShowModal('info')} fill="#288DCE" viewBox="0 0 50 50"><path d="M 25 2 C 12.309295 2 2 12.309295 2 25 C 2 37.690705 12.309295 48 25 48 C 37.690705 48 48 37.690705 48 25 C 48 12.309295 37.690705 2 25 2 z M 25 4 C 36.609824 4 46 13.390176 46 25 C 46 36.609824 36.609824 46 25 46 C 13.390176 46 4 36.609824 4 25 C 4 13.390176 13.390176 4 25 4 z M 25 11 A 3 3 0 0 0 22 14 A 3 3 0 0 0 25 17 A 3 3 0 0 0 28 14 A 3 3 0 0 0 25 11 z M 21 21 L 21 23 L 22 23 L 23 23 L 23 36 L 22 36 L 21 36 L 21 38 L 22 38 L 23 38 L 27 38 L 28 38 L 29 38 L 29 36 L 28 36 L 27 36 L 27 21 L 26 21 L 22 21 L 21 21 z" /></svg>
+        </h1>
+      </div>
+
+      <Form onCalculate={handleCalculate} sharedState={sharedState} />
+
+      <div className="result-wrapper">
+        <h2>{`${t('The maximum weight of the mother tank is')}:`}</h2>
+        <p className="answer">
+          {`${Math.trunc(motherWeightMaximumWeightSolution)} ${t('grams')}`} {`(${(motherWeightMaximumWeightSolution / 1000).toFixed(1)} ${t('kilograms')})`}
+        </p>
+      </div>
+
+      <Modal
+        show={showModal === 'info'}
+        closeModal={() => setShowModal(null)}
+        headerText='How to Determine Maximum Mother Tank Weight'
+        imageKey='CHLORINE_WEIGHT'></Modal>
+    </div>
+  );
+}