brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

implemented live web socket on the devices page for status readings

Browse source
This commit is contained in:
Carter 2026-03-13 12:29:06 -06:00
parent c7016be6cd
commit b96787698b
1 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/pages/Devices.tsx
View file

@ -6,7 +6,9 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
import ProvisionDevice from "device/ProvisionDevice";
import { pond } from "protobuf-ts/pond";
import { useDeviceAPI, useGlobalState, useGroupAPI, useTeamAPI } from "providers";
import { useCallback, useEffect, useState } from "react";
import { useHTTP } from "hooks";
import { useDeviceStatusStreams } from "hooks/useDeviceStatusStreams";
import { useCallback, useEffect, useMemo, useState } from "react";
import PageContainer from "./PageContainer";
import { useMobile } from "hooks";
import { useLocation, useNavigate, useParams } from "react-router-dom";
@ -191,6 +193,26 @@ export default function Devices() {
const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
const [{ as, team }] = useGlobalState()
const { token } = useHTTP()
const deviceIds = useMemo(() => devices.map((d) => d.id().toString()), [devices])
const handleStatusUpdate = useCallback((deviceId: string, status: pond.DeviceStatus) => {
setDevices((prev) =>
prev.map((d) => {
if (d.id().toString() !== deviceId) return d
const updated = Device.clone(d)
updated.status = status
return updated
})
)
}, [])
useDeviceStatusStreams({
deviceIds,
onStatusUpdate: handleStatusUpdate,
token,
enabled: devices.length > 0 && !!token,
})
const updateGroups = (newGroups: Group[]) => {
setGroups(newGroups);
@ -242,7 +264,7 @@ export default function Devices() {
const now = new Date();
const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
if (compareTimestamps(device.status.sen5x?.timestamp, oneDayAgo.toISOString()) > 0) {
// console.log("timestamp success " + device.settings?.deviceId)
// console.log("timestamp success " + device.settings?.deviceId + ": " + device.status.sen5x?.timestamp)
return true
} else {
// console.log("timestamp fail " + device.settings?.deviceId)