Get state of relay on device page

central_frontend/src/routes/DeviceRoute/DeviceRelays.tsx

@@ -14,9 +14,12 @@ import { EditDeviceRelaysDialog } from "../../dialogs/EditDeviceRelaysDialog";
 import { DeviceRouteCard } from "./DeviceRouteCard";
 import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
-import { RelayApi } from "../../api/RelayApi";
+import { RelayApi, RelayStatus } from "../../api/RelayApi";
 import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
 import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
+import { AsyncWidget } from "../../widgets/AsyncWidget";
+import { TimeWidget } from "../../widgets/TimeWidget";
+import { BoolText } from "../../widgets/BoolText";
 
 export function DeviceRelays(p: {
   device: Device;
@@ -115,10 +118,35 @@ export function DeviceRelays(p: {
               </>
             }
           >
-            <ListItemText primary={r.name} secondary={"TODO: status"} />
+            <ListItemText
+              primary={r.name}
+              secondary={<RelayEntryStatus relay={r} />}
+            />
           </ListItem>
         ))}
       </DeviceRouteCard>
     </>
   );
 }
+
+function RelayEntryStatus(p: { relay: DeviceRelay }): React.ReactElement {
+  const [state, setState] = React.useState<RelayStatus | undefined>();
+
+  const load = async () => {
+    setState(await RelayApi.SingleStatus(p.relay));
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={p.relay.id}
+      load={load}
+      errMsg="Failed to load relay status!"
+      build={() => (
+        <>
+          <BoolText val={state!.on} positive="ON" negative="OFF" /> for{" "}
+          <TimeWidget diff time={state!.for} />
+        </>
+      )}
+    />
+  );
+}