Merge pull request #76 from Solar-Gators/Hqllow/master

Hqllow/master

client/package.json

@@ -20,6 +20,7 @@
     "react-bootstrap": "^2.8.0",
     "react-d3-speedometer": "^2.1.0-rc.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
     "react-materialize": "^3.4.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
@@ -56,7 +57,10 @@
     "prettier": "3.0.3"
   },
   "options": {
-    "allowedHosts": ["localhost", ".localhost"],
+    "allowedHosts": [
+      "localhost",
+      ".localhost"
+    ],
     "proxy": "http://localhost:9000/"
   }
 }

client/src/App.tsx

@@ -6,30 +6,24 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import ArchivedTelemetry from "./pages/ArchivedTelemetry";
 import Strategy from "./pages/Strategy";
 import CountLaps from "./pages/CountLaps";
+import Settings from "./pages/Settings";
 import { Modal, Form, Button } from "react-bootstrap";
 
 export default function App() {
-  const username = localStorage.getItem("username");
-  const password = localStorage.getItem("password");
-
   const usernameInput = useRef<HTMLInputElement>(null);
   const passwordInput = useRef<HTMLInputElement>(null);
 
   return (
     <>
       <BrowserRouter>
         <Sidebar />
-        <div className="page-content">
-          <Routes>
-            <Route path="/history" element={<ArchivedTelemetry />} />
-            <Route path="/strategy" element={<Strategy />} />
-            <Route path="/count" element={<CountLaps />} />
-            <Route path="*" element={<LiveTelemetry />} />
-          </Routes>
-        </div>
-      </BrowserRouter>
-      {localStorage.getItem("passwordNeedsSet") == "true" && (
-        <Modal show={true}>
+        <Modal
+          show={
+            !localStorage.getItem("username")?.trim() ||
+            !localStorage.getItem("password")?.trim()
+          }
+          centered
+        >
           <Modal.Header>Enter Username/Password</Modal.Header>
           <Modal.Body>
             <Form
@@ -42,7 +36,6 @@ export default function App() {
                   "password",
                   String(passwordInput?.current?.value),
                 );
-                localStorage.setItem("passwordNeedsSet", "false");
               }}
             >
               <Form.Group className="mb-3">
@@ -57,7 +50,16 @@ export default function App() {
             </Form>
           </Modal.Body>
         </Modal>
-      )}
+        <div className="page-content">
+          <Routes>
+            <Route path="/history" element={<ArchivedTelemetry />} />
+            <Route path="/strategy" element={<Strategy />} />
+            <Route path="/count" element={<CountLaps />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<LiveTelemetry />} />
+          </Routes>
+        </div>
+      </BrowserRouter>
     </>
   );
 }

client/src/component/BMS.tsx

@@ -54,22 +54,22 @@ export const bmsShape: TelemetryTabbed<telemetry.DataResponse["bms"]> = {
         label: "High Cell Voltage Fault",
       },
       high_charge_current_fault: {
-        label: "High Charge Current Fault"
+        label: "High Charge Current Fault",
       },
       high_discharge_current_fault: {
-        label: "High Discharge Current Fault"
+        label: "High Discharge Current Fault",
       },
       high_temp_fault: {
-        label: "High Temp Fault"
+        label: "High Temp Fault",
       },
       thermistor_disconnected_fault: {
-        label: "Thermistor Disconnected Fault"
+        label: "Thermistor Disconnected Fault",
       },
       current_sensor_disconnect_fault: {
-        label: "Current Sensor Disconnect Fault"
+        label: "Current Sensor Disconnect Fault",
       },
       kill_switch_pressed_fault: {
-        label: "Kill Switch Pressed Fault"
+        label: "Kill Switch Pressed Fault",
       },
     },
   },

client/src/component/Calculated.tsx

@@ -15,6 +15,10 @@ export const calculatedShape: TelemetryTabbed<
         label: "State of Charge (Voltage Derived)",
         unit: "%",
       },
+      motor_power_consumption_: {
+        label: "Motor Power Consumption",
+        unit: "watt",
+      },
     },
   },
 };

client/src/component/Sidebar.js

@@ -44,6 +44,9 @@ function Sidebar() {
         <li className={location.pathname == "/history" ? "bold active" : ""}>
           <Link to="/history">Data Export</Link>
         </li>
+        <li className={location.pathname == "/settings" ? "bold active" : ""}>
+          <Link to="/settings">Settings</Link>
+        </li>
       </ul>
     </div>
   );

client/src/component/TelemetryCan.tsx

@@ -33,11 +33,11 @@ export default function TelemetryCAN<T>({
         {Object.keys(config.data).map((messageName: string) => {
           const message = config.data?.[messageName];
 
-          if (!message) return;
+          if (!message) return null;
           const telemetryData = data?.[messageName];
 
           return (
-            <Row id={messageName}>
+            <Row key={messageName} id={messageName}>
               <h4 style={{ textAlign: "left" }}>{messageName.toUpperCase()}</h4>
               <p className="text-start">
                 Received:{" "}
@@ -48,17 +48,16 @@ export default function TelemetryCAN<T>({
               {Object.keys(message).map((telemetryName) => {
                 const telemetryInfo = message[telemetryName];
 
-                if (!telemetryInfo) return;
+                if (!telemetryInfo) return null;
                 return (
-                  <>
-                    <Label
-                      svgSrc={telemetryInfo.icon}
-                      label={telemetryInfo.label}
-                      unit={telemetryInfo.unit}
-                      booleanError={telemetryInfo.booleanError}
-                      value={telemetryData?.[telemetryName] ?? "N/D"}
-                    />
-                  </>
+                  <Label
+                    key={`${messageName}-${telemetryName}`}
+                    svgSrc={telemetryInfo.icon}
+                    label={telemetryInfo.label}
+                    unit={telemetryInfo.unit}
+                    booleanError={telemetryInfo.booleanError}
+                    value={telemetryData?.[telemetryName] ?? "N/D"}
+                  />
                 );
               })}
             </Row>

client/src/pages/LiveTelemetry.tsx

@@ -35,6 +35,12 @@ function LiveTelemetry() {
 
   React.useEffect(() => {
     setInterval(() => {
+      if (
+        !localStorage.getItem("username")?.trim() ||
+        !localStorage.getItem("password")?.trim()
+      )
+        return;
+
       telemetry
         .getAll()
         .then((response) => {
@@ -43,36 +49,23 @@ function LiveTelemetry() {
           //Calculate speed
           const rpm = response?.mitsuba?.rx0?.motorRPM ?? 0;
           setSpeed(rpm * 60 * telemetry.WHEEL_RADIUS_MI);
-
-          // The password may needed to reset but it's actually empty so it didn't
-          if (localStorage.getItem("passwordNeedsSet") == "true") {
-            localStorage.setItem("passwordNeedsSet", "false");
-            window.location.reload();
-          }
         })
         .catch((reason) => {
-          // clear username/password if it changed for some reason
-          if (
-            reason.request.status == 403 &&
-            (!localStorage.getItem("passwordNeedsSet") ||
-              localStorage.getItem("passwordNeedsSet") == "false")
-          ) {
-            localStorage.setItem("passwordNeedsSet", "true");
-            localStorage.setItem("username", "");
-            localStorage.setItem("password", "");
+          if (reason.request.status == 403) {
             window.location.reload();
           }
         });
     }, 1000);
   }, []);
 
   if (!data) {
-    return <p>Loading..</p>;
+    return <p>Loading...</p>;
   }
 
   // adjusting for tlm we have a 2024 ASC
 
   // tends to be a voltage drop before BMS
+
   const packVoltage = data?.mitsuba?.rx0?.battVoltage + 3
   const totalArrayPower = calcArrayPower(data?.mppt?.[1])+ calcArrayPower(data?.mppt?.[2]) + calcArrayPower(data?.mppt?.[3])
 
@@ -151,37 +144,24 @@ function LiveTelemetry() {
 
       <h3>Quick Facts</h3>
       <Row>
-        <Label
-          label="Pack Voltage"
-          value={packVoltage}
-          unit="V"
-        />
+        <Label label="Pack Voltage" value={packVoltage} unit="V" />
         <Label
           label="Consumption"
           value={
-            (data?.mitsuba?.rx0?.battVoltage * data?.mitsuba?.rx0?.battCurrent) - totalArrayPower
+            data?.mitsuba?.rx0?.battVoltage * data?.mitsuba?.rx0?.battCurrent -
+            totalArrayPower
           }
           unit="W"
         />
-        <Label
-          label="Custom SOC"
-          value={stateOfCharge(packVoltage)}
-          unit="%"
-        />
+        <Label label="Custom SOC" value={stateOfCharge(packVoltage)} unit="%" />
         <Label
           label="High Cell Temp"
           value={data?.bms?.rx1?.high_temp_}
           unit="C"
         />
       </Row>
       <Row>
-        <Label
-          label="Total Array Power"
-          value={
-            totalArrayPower
-          }
-          unit="W"
-        />
+        <Label label="Total Array Power" value={totalArrayPower} unit="W" />
         <Label
           label="Sup Bat Volt"
           value={data?.powerBoard?.rx1?.SupBatVoltage_ ?? "N/A"}
@@ -304,7 +284,9 @@ function LiveTelemetry() {
           element={
             <>
               <br />
-              <p>Last heard from the PI on {String(data?.pi?.alive?.createdAt)}</p>
+              <p>
+                Last heard from the PI on {String(data?.pi?.alive?.createdAt)}
+              </p>
               <br />
             </>
           }