Can set relay forced state from UI

central_frontend/src/dialogs/SelectForcedStateDurationDialog.tsx

@@ -0,0 +1,53 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { DeviceRelay } from "../api/DeviceApi";
+import React from "react";
+
+export function SelectForcedStateDurationDialog(p: {
+  relay: DeviceRelay;
+  forcedState: string;
+  onCancel: () => void;
+  onSubmit: (duration: number) => void;
+}): React.ReactElement {
+  const [duration, setDuration] = React.useState(60);
+
+  return (
+    <Dialog open onClose={p.onCancel}>
+      <DialogTitle>Set forced relay state</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          Please specify the number of minutes the relay <i>{p.relay.name}</i>{" "}
+          will remain in forced state <i>{p.forcedState}</i>:
+        </DialogContentText>
+
+        <TextField
+          label="Duration (min)"
+          variant="standard"
+          value={Math.floor(duration / 60)}
+          onChange={(e) => {
+            const val = Number.parseInt(e.target.value);
+            setDuration((Number.isNaN(val) ? 1 : val) * 60);
+          }}
+          fullWidth
+          style={{ marginTop: "5px" }}
+        />
+
+        <p>Equivalent in seconds: {duration} secs</p>
+        <p>Equivalent in hours: {duration / 3600} hours</p>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onCancel}>Cancel</Button>
+        <Button onClick={() => p.onSubmit(duration)} autoFocus>
+          Start timer
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}