Get state of relay on device page

central_frontend/src/api/RelayApi.ts

@@ -75,4 +75,16 @@ export class RelayApi {
     }
     return map;
   }
+
+  /**
+   * Get the status of a single relay
+   */
+  static async SingleStatus(relay: DeviceRelay): Promise<RelayStatus> {
+    return (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/relay/${relay.id}/state`,
+      })
+    ).data;
+  }
 }

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} />
+        </>
+      )}
+    />
+  );
+}

central_frontend/src/routes/RelaysListRoute.tsx

@@ -14,6 +14,7 @@ import React from "react";
 import { DeviceRelay } from "../api/DeviceApi";
 import { RelayApi, RelaysStatus } from "../api/RelayApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { BoolText } from "../widgets/BoolText";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
 
@@ -103,15 +104,3 @@ function RelaysList(p: {
     </TableContainer>
   );
 }
-
-function BoolText(p: {
-  val: boolean;
-  positive: string;
-  negative: string;
-}): React.ReactElement {
-  return p.val ? (
-    <span style={{ color: "green" }}>{p.positive}</span>
-  ) : (
-    <span style={{ color: "red" }}>{p.negative}</span>
-  );
-}

central_frontend/src/widgets/BoolText.tsx

@@ -0,0 +1,11 @@
+export function BoolText(p: {
+  val: boolean;
+  positive: string;
+  negative: string;
+}): React.ReactElement {
+  return p.val ? (
+    <span style={{ color: "green" }}>{p.positive}</span>
+  ) : (
+    <span style={{ color: "red" }}>{p.negative}</span>
+  );
+}