added h2s lel and o2 to the device status readings on the devices dashboard
This commit is contained in:
Carter
parent
1e2003a541
commit
9e3ce3c00d
2 changed files with 101 additions and 30 deletions
|
|
@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
|
|||
|
||||
interface Props {
|
||||
device: Device;
|
||||
gasType: "co2" | "co" | "no2" | "o2" | "all";
|
||||
gasType: "co2" | "co" | "no2" | "o2" | "lel" | "h2s" | "all";
|
||||
showTimestamp?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
marginRight: "auto",
|
||||
margin: theme.spacing(1),
|
||||
width: theme.spacing(14),
|
||||
height: theme.spacing(6),
|
||||
minHeight: theme.spacing(6),
|
||||
},
|
||||
boxTall: {
|
||||
display: "inline-block",
|
||||
|
|
@ -34,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
marginRight: "auto",
|
||||
margin: theme.spacing(1),
|
||||
width: theme.spacing(14),
|
||||
height: theme.spacing(8.5),
|
||||
minHeight: theme.spacing(8.5),
|
||||
},
|
||||
carouselContainer: {
|
||||
position: 'relative',
|
||||
|
|
@ -68,23 +68,27 @@ export default function StatusGas(props: Props) {
|
|||
let colors: string[] = []
|
||||
let messages: string[] = []
|
||||
if (gasType === "all") {
|
||||
colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
|
||||
colors.push(...or(device.status.co2?.overlays.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.no2?.overlays.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.co?.overlays.map(overlay => overlay.color), []));
|
||||
messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
|
||||
messages.push(...or(device.status.co2?.overlays.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.no2?.overlays.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.co?.overlays.map(overlay => overlay.message), []));
|
||||
colors = or(device.status.o2?.overlays?.map(overlay => overlay.color), []);
|
||||
colors.push(...or(device.status.co2?.overlays?.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.no2?.overlays?.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.co?.overlays?.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.lel?.overlays?.map(overlay => overlay.color), []));
|
||||
colors.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.color), []));
|
||||
messages = or(device.status.o2?.overlays?.map(overlay => overlay.message), []);
|
||||
messages.push(...or(device.status.co2?.overlays?.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.no2?.overlays?.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.co?.overlays?.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.lel?.overlays?.map(overlay => overlay.message), []));
|
||||
messages.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.message), []));
|
||||
} else {
|
||||
colors = or(device.status[gasType]?.overlays.map(overlay => overlay.color), []);
|
||||
messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []);
|
||||
colors = or(device.status[gasType]?.overlays?.map(overlay => overlay.color), []);
|
||||
messages = or(device.status[gasType]?.overlays?.map(overlay => overlay.message), []);
|
||||
}
|
||||
|
||||
const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
|
||||
const [, setColorIndex] = useState(0)
|
||||
|
||||
const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"]
|
||||
const gasTypes: ("o2" | "no2" | "co2" | "co" | "lel" | "h2s")[] = ["o2", "no2", "co2", "co", "lel", "h2s"]
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
|
|
@ -107,8 +111,7 @@ export default function StatusGas(props: Props) {
|
|||
return
|
||||
}
|
||||
const interval = setInterval(() => {
|
||||
if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
|
||||
else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
|
||||
if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % gasTypes.length);
|
||||
}, 6000);
|
||||
|
||||
return () => clearInterval(interval); // Cleanup on unmount
|
||||
|
|
@ -189,14 +192,14 @@ export default function StatusGas(props: Props) {
|
|||
}
|
||||
<Grid2 container direction="column">
|
||||
<Grid2>
|
||||
{gas !== "o2" ?
|
||||
<Typography variant="body2" style={{ color: teal[500]}}>
|
||||
Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
|
||||
</Typography>
|
||||
:
|
||||
{(gas === "o2" || gas === "lel") ?
|
||||
<Typography variant="body2" style={{ color: blue[500]}}>
|
||||
Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
|
||||
</Typography>
|
||||
:
|
||||
<Typography variant="body2" style={{ color: teal[500]}}>
|
||||
Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
|
||||
</Typography>
|
||||
}
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
|
|
|
|||
|
|
@ -143,6 +143,8 @@ export default function Devices() {
|
|||
const [hasCo2, setHasCo2] = useState(false)
|
||||
const [hasNo2, setHasNo2] = useState(false)
|
||||
const [hasO2, setHasO2] = useState(false)
|
||||
const [hasLel, setHasLel] = useState(false)
|
||||
const [hasH2S, setHasH2S] = useState(false)
|
||||
|
||||
const [groupsLoading, setGroupsLoading] = useState(false)
|
||||
const [groups, setGroups] = useState<Group[]>([]);
|
||||
|
|
@ -296,15 +298,33 @@ export default function Devices() {
|
|||
|
||||
const doesDeviceHaveO2 = (device: pond.Device) => {
|
||||
if (device.status?.o2?.ppm && device.status?.o2?.timestamp) {
|
||||
if (device.status.sen5x?.timestamp) {
|
||||
const now = new Date();
|
||||
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) {
|
||||
return true
|
||||
}
|
||||
} else {
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const doesDeviceHaveLel = (device: pond.Device) => {
|
||||
if (device.status?.lel?.ppm && device.status?.lel?.timestamp) {
|
||||
const now = new Date();
|
||||
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
if (compareTimestamps(device.status.lel?.timestamp, oneDayAgo.toISOString()) > 0) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const doesDeviceHaveH2S = (device: pond.Device) => {
|
||||
if (device.status?.h2s?.ppm && device.status?.h2s?.timestamp) {
|
||||
const now = new Date();
|
||||
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
|
||||
if (compareTimestamps(device.status.h2s?.timestamp, oneDayAgo.toISOString()) > 0) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
|
@ -486,6 +506,8 @@ export default function Devices() {
|
|||
let hasCo = false
|
||||
let hasCo2 = false
|
||||
let hasNo2 = false
|
||||
let hasLel = false
|
||||
let hasH2S = false
|
||||
resp.data.devices.forEach(device => {
|
||||
setHasPlenums(doesDeviceHavePlenum(device))
|
||||
if (doesDeviceHavePlenum(device)) hasPlenum = true
|
||||
|
|
@ -495,6 +517,8 @@ export default function Devices() {
|
|||
if (doesDeviceHaveCo(device)) hasCo = true
|
||||
if (doesDeviceHaveCo2(device)) hasCo2 = true
|
||||
if (doesDeviceHaveNo2(device)) hasNo2 = true
|
||||
if (doesDeviceHaveLel(device)) hasLel = true
|
||||
if (doesDeviceHaveH2S(device)) hasH2S = true
|
||||
newDevices.push(Device.create(device))
|
||||
})
|
||||
setHasPlenums(hasPlenum)
|
||||
|
|
@ -503,6 +527,8 @@ export default function Devices() {
|
|||
setHasCo(hasCo)
|
||||
setHasCo2(hasCo2)
|
||||
setHasNo2(hasNo2)
|
||||
setHasLel(hasLel)
|
||||
setHasH2S(hasH2S)
|
||||
setDevices(newDevices)
|
||||
setTotal(resp.data.total)
|
||||
}).finally(() => {
|
||||
|
|
@ -774,6 +800,42 @@ export default function Devices() {
|
|||
}
|
||||
})
|
||||
}
|
||||
if (hasLel && !groupGas) {
|
||||
columns.push({
|
||||
title: "LEL",
|
||||
render: (device: Device) => {
|
||||
if (device.status.lel) {
|
||||
return (
|
||||
<Box sx={{ marginLeft: 1 }}>
|
||||
<StatusGas device={device} gasType={"lel"} showTimestamp={showTimestamp} />
|
||||
</Box>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if (hasH2S && !groupGas) {
|
||||
columns.push({
|
||||
title: "H2S",
|
||||
render: (device: Device) => {
|
||||
if (device.status.h2s) {
|
||||
return (
|
||||
<Box sx={{ marginLeft: 1 }}>
|
||||
<StatusGas device={device} gasType={"h2s"} showTimestamp={showTimestamp} />
|
||||
</Box>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<></>
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
return columns
|
||||
}
|
||||
|
||||
|
|
@ -1000,6 +1062,8 @@ export default function Devices() {
|
|||
let hasCo = false
|
||||
let hasCo2 = false
|
||||
let hasNo2 = false
|
||||
let hasLel = false
|
||||
let hasH2S = false
|
||||
resp.data.devices.forEach(device => {
|
||||
setHasPlenums(doesDeviceHavePlenum(device))
|
||||
if (doesDeviceHavePlenum(device)) hasPlenum = true
|
||||
|
|
@ -1009,6 +1073,8 @@ export default function Devices() {
|
|||
if (doesDeviceHaveCo(device)) hasCo = true
|
||||
if (doesDeviceHaveCo2(device)) hasCo2 = true
|
||||
if (doesDeviceHaveNo2(device)) hasNo2 = true
|
||||
if (doesDeviceHaveLel(device)) hasLel = true
|
||||
if (doesDeviceHaveH2S(device)) hasH2S = true
|
||||
newDevices.push(Device.create(device))
|
||||
})
|
||||
setHasPlenums(hasPlenum)
|
||||
|
|
@ -1017,6 +1083,8 @@ export default function Devices() {
|
|||
setHasCo(hasCo)
|
||||
setHasCo2(hasCo2)
|
||||
setHasNo2(hasNo2)
|
||||
setHasLel(hasLel)
|
||||
setHasH2S(hasH2S)
|
||||
setDevices(currentRows.concat(newDevices))
|
||||
}).catch(_err => {
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue