Can set relay forced state from UI

central_frontend/src/routes/DeviceRoute/DeviceRelays.tsx

@@ -10,16 +10,16 @@ import {
 } from "@mui/material";
 import React from "react";
 import { Device, DeviceRelay } from "../../api/DeviceApi";
+import { RelayApi, RelayStatus } from "../../api/RelayApi";
 import { EditDeviceRelaysDialog } from "../../dialogs/EditDeviceRelaysDialog";
-import { DeviceRouteCard } from "./DeviceRouteCard";
+import { useAlert } from "../../hooks/context_providers/AlertDialogProvider";
 import { useConfirm } from "../../hooks/context_providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../../hooks/context_providers/LoadingMessageProvider";
-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";
+import { TimeWidget } from "../../widgets/TimeWidget";
+import { DeviceRouteCard } from "./DeviceRouteCard";
 
 export function DeviceRelays(p: {
   device: Device;
@@ -145,7 +145,8 @@ function RelayEntryStatus(
       errMsg="Failed to load relay status!"
       build={() => (
         <>
-          <BoolText val={state!.on} positive="ON" negative="OFF" /> for{" "}
+          <BoolText val={state!.on} positive="ON" negative="OFF" />{" "}
+          {state?.forced_state.type !== "None" && <b>Forced</b>} for{" "}
           <TimeWidget diff time={state!.for} />
         </>
       )}

central_frontend/src/routes/RelaysListRoute.tsx

@@ -16,12 +16,13 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Device, DeviceApi, DeviceRelay, DeviceURL } from "../api/DeviceApi";
 import { RelayApi, RelaysStatus } from "../api/RelayApi";
+import { ServerApi } from "../api/ServerApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { BoolText } from "../widgets/BoolText";
+import { CopyToClipboard } from "../widgets/CopyToClipboard";
+import { RelayForcedState } from "../widgets/RelayForcedState";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
-import { CopyToClipboard } from "../widgets/CopyToClipboard";
-import { ServerApi } from "../api/ServerApi";
 
 export function RelaysListRoute(p: {
   homeWidget?: boolean;
@@ -104,6 +105,7 @@ function RelaysList(p: {
             <TableCell>Priority</TableCell>
             <TableCell>Consumption</TableCell>
             <TableCell>Status</TableCell>
+            <TableCell>Forced state</TableCell>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -129,6 +131,13 @@ function RelaysList(p: {
                 />{" "}
                 for <TimeWidget diff time={p.status.get(row.id)!.for} />
               </TableCell>
+              <TableCell>
+                <RelayForcedState
+                  relay={row}
+                  state={p.status.get(row.id)!}
+                  onUpdated={p.onReload}
+                />
+              </TableCell>
               <TableCell>
                 <Tooltip title="Copy legacy api status">
                   <CopyToClipboard