Change Pressure Sensor Reading Color Based on Boundary!

client/src/components/Data.tsx

@@ -1,12 +1,14 @@
 import React from "react";
+import { StatsState } from "../store/reducers/stats";
 import { useSelector } from "react-redux";
 import getColor from "../lib/getColor";
+import sensorColor from "../lib/getColor";
 import stylizeName from "../lib/camelize";
 import { CaelusState } from "../store/reducers";
 
 import Block from "./Block";
 import BlockHeader from "./BlockHeader";
-import PandidBoxed from "../images/pandidboxed.png";
+import NitrousPID from "../images/nitrouspid.png";
 
 const VALVE_MAP = {
   1: "OPEN",
@@ -62,9 +64,12 @@ const Data = () => {
           ? []
           : [["", state.data.general.heartbeat_status]],
       mode: state.data.general.mode,
+      Stage: state.data.general.stage,
     };
   });
 
+
+
   const blockStyle = "rounded-lg m-1 p-4 bg-gray-100";
   const abortStyle = "animate-ping rounded-lg m-1 p-4 bg-pink-300";
   const groupHeaderStyle = "font-bold mb-1";
@@ -89,9 +94,9 @@ const Data = () => {
         className="flexFont"
       >
         <img
-          src={PandidBoxed}
-          id="pandidboxed"
-          alt="pandidboxed"
+          src={NitrousPID}
+          id="nitrouspid"
+          alt="nitrouspid"
           style={{ width: "100%" }}
         />
         {Object.entries(SENSOR_TEXT_PADDING).map(([sensor, padding]) => (
@@ -143,7 +148,7 @@ const Data = () => {
                   <p
                     style={{
                       color:
-                        "green" /*getColor(data.sensorState[sensor][loc])*/,
+                        sensorColor(data.sensorState.sensors[type][locations], data.Stage),
                     }}
                     key={type + "." + loc}
                   >

client/src/config.json

@@ -206,22 +206,22 @@
             "safe": [100, 500],
             "warn": [50, 550],
             "critical": [0, 600],
-            "waiting": {
+          "waiting": {
               "safe": [100, 500],
               "warn": [50, 550],
               "critical": [0, 600]
             },
-            "pressurization": {
+          "pressurization": {
               "safe": [100, 500],
               "warn": [50, 550],
               "critical": [0, 600]
             },
-            "autosequence": {
+          "autosequence": {
               "safe": [100, 500],
               "warn": [50, 550],
               "critical": [0, 600]
             },
-            "postburn": {
+          "postburn": {
               "safe": [100, 500],
               "warn": [50, 550],
               "critical": [0, 600]

client/src/lib/getColor.ts

@@ -1,4 +1,6 @@
 import caelusLogger from "./caelusLogger";
+import stats from "../store/reducers/stats";
+import config from "../config.json";
 
 const getColor = (status: any) => {
   if (status.length === 0) {
@@ -17,4 +19,18 @@ const getColor = (status: any) => {
   }
 };
 
+const sensorColor = (sensor, stage) => {
+  var measure = sensor.measured;
+  var stages = config.sensors.list.pressure.sensor.boundaries.stage;
+
+  if (measure >= stages.safe[0] && measure <= stages.safe[1]) return "green";
+  else if (measure >= stages.warn[0] && measure <= stages.warn[1]) return "orange";
+  else if (measure >= stages.critical[0] && measure <= stages.critical[1]) return "red";
+
+  //go into state and find the sensor
+  //based on stage, check if value is in safe, warn, or critical
+
+};
+
 export default getColor;
+export default sensorColor;