Display relays status

central_frontend/src/api/RelayApi.ts

@@ -1,6 +1,14 @@
 import { APIClient } from "./ApiClient";
 import { Device, DeviceRelay } from "./DeviceApi";
 
+export interface RelayStatus {
+  id: string;
+  on: boolean;
+  for: number;
+}
+
+export type RelaysStatus = Map<string, RelayStatus>;
+
 export class RelayApi {
   /**
    * Get the full list of relays
@@ -49,4 +57,22 @@ export class RelayApi {
       uri: `/relay/${relay.id}`,
     });
   }
+
+  /**
+   * Get the status of all relays
+   */
+  static async GetRelaysStatus(): Promise<RelaysStatus> {
+    const data: any[] = (
+      await APIClient.exec({
+        method: "GET",
+        uri: `/relays/status`,
+      })
+    ).data;
+
+    const map = new Map();
+    for (let r of data) {
+      map.set(r.id, r);
+    }
+    return map;
+  }
 }

central_frontend/src/routes/RelaysListRoute.tsx

@@ -12,17 +12,20 @@ import {
 } from "@mui/material";
 import React from "react";
 import { DeviceRelay } from "../api/DeviceApi";
-import { RelayApi } from "../api/RelayApi";
+import { RelayApi, RelaysStatus } from "../api/RelayApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+import { TimeWidget } from "../widgets/TimeWidget";
 
 export function RelaysListRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
 
   const [list, setList] = React.useState<DeviceRelay[] | undefined>();
+  const [status, setStatus] = React.useState<RelaysStatus | undefined>();
 
   const load = async () => {
     setList(await RelayApi.GetList());
+    setStatus(await RelayApi.GetRelaysStatus());
 
     list?.sort((a, b) => b.priority - a.priority);
   };
@@ -48,7 +51,9 @@ export function RelaysListRoute(): React.ReactElement {
         ready={!!list}
         errMsg="Failed to load the list of relays!"
         load={load}
-        build={() => <RelaysList onReload={reload} list={list!} />}
+        build={() => (
+          <RelaysList onReload={reload} list={list!} status={status!} />
+        )}
       />
     </SolarEnergyRouteContainer>
   );
@@ -56,6 +61,7 @@ export function RelaysListRoute(): React.ReactElement {
 
 function RelaysList(p: {
   list: DeviceRelay[];
+  status: RelaysStatus;
   onReload: () => void;
 }): React.ReactElement {
   return (
@@ -78,15 +84,18 @@ function RelaysList(p: {
             >
               <TableCell>{row.name}</TableCell>
               <TableCell>
-                {row.enabled ? (
-                  <span style={{ color: "green" }}>YES</span>
-                ) : (
-                  <span style={{ color: "red" }}>NO</span>
-                )}
+                <BoolText val={row.enabled} positive="YES" negative="NO" />
               </TableCell>
               <TableCell>{row.priority}</TableCell>
               <TableCell>{row.consumption}</TableCell>
-              <TableCell>TODO</TableCell>
+              <TableCell>
+                <BoolText
+                  val={p.status.get(row.id)!.on}
+                  positive="ON"
+                  negative="OFF"
+                />{" "}
+                for <TimeWidget diff time={p.status.get(row.id)!.for} />
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
@@ -94,3 +103,15 @@ 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>
+  );
+}