From 32c2fbdb6e2be17e07a2c79c9d7f812b1aec82dc Mon Sep 17 00:00:00 2001 From: Carter Date: Fri, 23 May 2025 12:13:10 -0600 Subject: [PATCH] StatusGas now displays overlays and can be grouped --- src/common/StatusGas.tsx | 172 ++++++++++++++++++++------------------- src/pages/Devices.tsx | 44 +++++++--- 2 files changed, 120 insertions(+), 96 deletions(-) diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx index b0ebb85..a714ba5 100644 --- a/src/common/StatusGas.tsx +++ b/src/common/StatusGas.tsx @@ -5,6 +5,7 @@ import { Device } from "models"; import PulseBox from "./PulseBox"; import { or } from "utils"; import { useEffect, useState } from "react"; +import { pond } from "protobuf-ts/pond"; interface Props { device: Device @@ -54,104 +55,107 @@ export default function StatusGas(props: Props) { const { device, gasType } = props; const classes = useStyles() // console.log(noDust) - // const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []); - // const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []); + const colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []); + const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []); - // const [color, setColor] = useState(colors.length > 0 ? colors[0] : ""); - // const [, setColorIndex] = useState(0) + const [color, setColor] = useState(colors.length > 0 ? colors[0] : ""); + const [, setColorIndex] = useState(0) - // useEffect(() => { - // const interval = setInterval(() => { - // setColorIndex(prevIndex => { - // const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1; - // setColor(colors[newIndex]); // Use the new index here - // return newIndex; - // }); - // }, 7500); + const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"] + + useEffect(() => { + const interval = setInterval(() => { + setColorIndex(prevIndex => { + const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1; + setColor(colors[newIndex]); // Use the new index here + return newIndex; + }); + }, 7500); - // return () => clearInterval(interval); - // }, []); + return () => clearInterval(interval); + }, []); - // const [currentIndex, setCurrentIndex] = useState(0); + const [currentIndex, setCurrentIndex] = useState(0); // Auto-cycle through measurements every 5 seconds - // useEffect(() => { - // if (noDust) { - // setCurrentIndex(0) - // return - // } - // const interval = setInterval(() => { - // if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2); - // setCurrentIndex((prevIndex) => (prevIndex + 1) % 2); - // }, 5000); + useEffect(() => { + if (gasType !== "all") { + setCurrentIndex(0) + return + } + const interval = setInterval(() => { + if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4); + setCurrentIndex((prevIndex) => (prevIndex + 1) % 4); + }, 5000); - // return () => clearInterval(interval); // Cleanup on unmount - // }, [noDust]); + return () => clearInterval(interval); // Cleanup on unmount + }, [gasType]); - // const tooltip = () => { - // if (messages.length === 0) return null - // if (messages.length < 2) return ( - // messages[0] - // ) - // return ( - // - // - // - // Overlay Messages - // - // - // {messages.map((message, index) => { - // return ( - // - // - // - // {message} - // - // - // ) - // })} - // - // ) - // } + const tooltip = () => { + if (messages.length === 0) return null + if (messages.length < 2) return ( + messages[0] + ) + return ( + + + + Overlay Messages + + + {messages.map((message, index) => { + return ( + + + + {message} + + + ) + })} + + ) + } const gasDisplay = () => { - if (gasType !== "all") { - return( - // - - - - - {gasType !== "o2" ? - - Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm - - : - - Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}% - - } - - - - Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV + const gas = gasType === "all" ? gasTypes[currentIndex] : gasType + // if (gasType !== "all") { + return ( + + + + + + {gas !== "o2" ? + + Gas: {device.status[gas]?.ppm.toFixed(1)}ppm - + : + + Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}% + + } + + + + Volt: {device.status[gas]?.millivolts.toFixed(1)}mV + - - // - ) + + + + ) - } + // } } return ( diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index dcd2c1c..bc43773 100644 --- a/src/pages/Devices.tsx +++ b/src/pages/Devices.tsx @@ -138,6 +138,15 @@ export default function Devices() { localStorage.setItem('separateDust', separateDust.toString()); }, [separateDust]); + const [groupGas, setGroupGas] = useState(() => { + const stored = localStorage.getItem('groupGas'); + return stored !== null ? stored === 'true' : false; + }); + + useEffect(() => { + localStorage.setItem('groupGas', groupGas.toString()); + }, [groupGas]); + const [preferencesAnchor, setPreferencesAnchor] = useState(null) const [{ as }] = useGlobalState() @@ -320,9 +329,9 @@ export default function Devices() { return '/' + newSegments.join('/'); } - useEffect(() => { - console.log(devices) - }, [devices]) + // useEffect(() => { + // console.log(devices) + // }, [devices]) const toDevice = (device: Device) => { let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : "" @@ -455,12 +464,12 @@ export default function Devices() { } if (hasCo) { columns.push({ - title: "CO", + title: groupGas ? "Gas" : "CO", render: (device: Device) => { if (device.status.co) { return ( - + ) } else { @@ -471,7 +480,7 @@ export default function Devices() { } }) } - if (hasCo2) { + if (hasCo2 && !groupGas) { columns.push({ title: "CO2", render: (device: Device) => { @@ -489,7 +498,7 @@ export default function Devices() { } }) } - if (hasNo2) { + if (hasNo2 && !groupGas) { columns.push({ title: "NO2", render: (device: Device) => { @@ -507,7 +516,7 @@ export default function Devices() { } }) } - if (hasCo2) { + if (hasO2 && !groupGas) { columns.push({ title: "O2", render: (device: Device) => { @@ -625,8 +634,6 @@ export default function Devices() { ) } - - const preferencesMenu = () => { return ( - + + + setGroupGas(!groupGas)} + sx={{ marginLeft: -0.75 }} + dense + > + + + + )