Feat: Weather, Speed, Battery, and Range implementation

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/App.tsx

@@ -1,25 +1,148 @@
+// import { parse } from "path";
+// import { stringify } from "querystring";
+import { useState } from "react";
+import { useReducer } from "react";
+
 import BatteryInput from "~/components/batteryInput";
 import Header from "~/components/header";
 import SpeedInput from "~/components/speedInput";
 import WeatherInput from "~/components/weatherInput";
 
 const App = () => {
+  const [visible, setVisible] = useState(false);
+  type InputState = {
+    speed: number | undefined;
+    battery: number | undefined;
+    weather: number;
+  };
+  type Action =
+    | { type: "SET_BATTERY"; payload: number | undefined }
+    | { type: "SET_SPEED"; payload: number | undefined }
+    | { type: "SET_WEATHER"; payload: number };
+
+  const initialState: InputState = {
+    speed: 0,
+    battery: 100,
+    weather: 50,
+  };
+
   const calculateRange = () => {
-    return;
+    event?.preventDefault();
+    setVisible(true);
+  };
+  function BatteryValid() {
+    const battery = inputs["battery"];
+    if (battery !== undefined && battery <= 100 && battery >= 0) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  function SpeedValid() {
+    const speed = inputs["speed"];
+    if (speed !== undefined && speed <= 90 && speed >= 0) {
+      return true;
+    } else {
+      return false;
+    }
   }
 
+  const reducer = (state: InputState, action: Action) => {
+    setVisible(false);
+
+    switch (action.type) {
+      case "SET_BATTERY":
+        return { ...state, battery: action.payload };
+      case "SET_SPEED":
+        return { ...state, speed: action.payload };
+      case "SET_WEATHER":
+        return { ...state, weather: action.payload };
+      default:
+        return state;
+    }
+  };
+  const [inputs, dispatch] = useReducer(reducer, initialState);
+
   return (
     <div className="h-screen w-screen bg-[#212121]">
       <div className="flex h-full flex-col items-center pt-36 text-white">
         <Header />
         <form name="simulator" className="flex w-full flex-col items-center">
           <div className="mb-4 flex w-full flex-col items-center gap-y-4">
-            <SpeedInput />
-            <BatteryInput />
+            <SpeedInput
+              value={inputs["speed"]}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_SPEED",
+                  payload: parseInt(e.target.value),
+                })
+              }
+            />
+            {!SpeedValid() && (
+              <p className="text-red-500">
+                {" "}
+                The speed should be within the range of 0 to 90
+              </p>
+            )}
+            {inputs["speed"] === undefined && (
+              <p className="text-red-500">Speed is required</p>
+            )}
+            <BatteryInput
+              value={inputs["battery"]}
+              onChange={(e) =>
+                dispatch({
+                  type: "SET_BATTERY",
+                  payload: parseInt(e.target.value),
+                })
+              }
+            />
+            {!BatteryValid() && (
+              <p className="text-red-500">
+                The battery percentage should be with the range of 0 to 100
+              </p>
+            )}
+            {inputs["battery"] === undefined && (
+              <p className="text-red-500">Battery percentage is required</p>
+            )}
           </div>
           <div className="flex w-full flex-row justify-center gap-4">
-            <WeatherInput />
+            <WeatherInput
+              value={inputs["weather"]}
+              onChange={(value) =>
+                dispatch({
+                  type: "SET_WEATHER",
+                  payload: value,
+                })
+              }
+            />
           </div>
+
+          <button
+            className="mt-10 h-10 w-60 rounded bg-blue-200 text-white"
+            type="submit"
+            onClick={() => calculateRange()}
+          >
+            Submit
+          </button>
+          {visible &&
+            BatteryValid() &&
+            SpeedValid() &&
+            inputs["battery"] !== undefined &&
+            inputs["speed"] !== undefined && (
+              <p className="mt-10">
+                The predicted range of the Eylsia is{" "}
+                {(
+                  -(
+                    (inputs["speed"] * inputs["speed"] * inputs["battery"]) /
+                    2500
+                  ) +
+                  4 * inputs["battery"] +
+                  inputs["weather"]
+                ).toFixed(3)}{" "}
+                km
+              </p>
+            )}
         </form>
       </div>
     </div>

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/batteryInput/index.tsx

@@ -1,4 +1,10 @@
-const BatteryInput = () => {
+const BatteryInput = ({
+  value,
+  onChange,
+}: {
+  value: number | undefined;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}) => {
   return (
     <div className="flex w-full flex-col items-center gap-2">
       <label>Battery Percentage (%):</label>
@@ -8,6 +14,8 @@ const BatteryInput = () => {
         name="battery"
         type="number"
         placeholder="Battery"
+        value={value !== undefined ? value : ""}
+        onChange={onChange}
       />
     </div>
   );

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/speedInput/index.tsx

@@ -1,4 +1,10 @@
-const SpeedInput = () => {
+const SpeedInput = ({
+  value,
+  onChange,
+}: {
+  value: number | undefined;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}) => {
   return (
     <>
       <div className="flex w-full flex-col items-center gap-2">
@@ -9,6 +15,8 @@ const SpeedInput = () => {
           name="speed"
           type="number"
           placeholder="Speed"
+          value={value !== undefined ? value : ""}
+          onChange={onChange}
         />
       </div>
     </>

Recruit-Training/Advanced-Recruit-Training/Telemetry-Teaser/src/components/weatherInput/index.tsx

@@ -1,16 +1,44 @@
-const WeatherInput = () => {
+// import { useState } from "react";
+
+const WeatherInput = ({
+  value,
+  onChange,
+}: {
+  value: number;
+  onChange: (num: number) => void;
+}) => {
+  const handleWeatherIncrement = () => {
+    onChange(value + 1);
+  };
+  const handleWeatherDecrement = () => {
+    onChange(value - 1);
+  };
+
   return (
     <>
-      <img src="/Cloud.png" height="66px" width="66px" alt="Cloud" />
+      <img
+        src="/Cloud.png"
+        height="66px"
+        width="66px"
+        alt="Cloud"
+        onClick={() => handleWeatherDecrement()}
+      />
       <input
         id="weather"
         className="w-1/4"
         type="range"
         min="0"
         max="100"
-        value="50"
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+      />
+      <img
+        src="/Sun.png"
+        height="66px"
+        width="66px"
+        alt="Sun"
+        onClick={() => handleWeatherIncrement()}
       />
-      <img src="/Sun.png" height="66px" width="66px" alt="Sun" />
     </>
   );
 };