Start to build relay dialog

central_frontend/src/api/ServerApi.ts

@@ -8,6 +8,12 @@ export interface ServerConfig {
 export interface ServerConstraint {
   dev_name_len: LenConstraint;
   dev_description_len: LenConstraint;
+  relay_name_len: LenConstraint;
+  relay_priority: LenConstraint;
+  relay_consumption: LenConstraint;
+  relay_minimal_uptime: LenConstraint;
+  relay_minimal_downtime: LenConstraint;
+  relay_daily_minimal_runtime: LenConstraint;
 }
 
 export interface LenConstraint {

central_frontend/src/dialogs/EditDeviceRelaysDialog.tsx

@@ -0,0 +1,283 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  Typography,
+} from "@mui/material";
+import { TimePicker } from "@mui/x-date-pickers";
+import React from "react";
+import { Device, DeviceRelay } from "../api/DeviceApi";
+import { ServerApi } from "../api/ServerApi";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { dayjsToTimeOfDay, timeOfDay } from "../utils/DateUtils";
+import { lenValid } from "../utils/StringsUtils";
+import { CheckboxInput } from "../widgets/forms/CheckboxInput";
+import { TextInput } from "../widgets/forms/TextInput";
+
+export function EditDeviceRelaysDialog(p: {
+  onClose: () => void;
+  relay?: DeviceRelay;
+  device: Device;
+  onUpdated: () => void;
+}): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const [relay, setRelay] = React.useState<DeviceRelay>(
+    p.relay ?? {
+      id: "",
+      name: "relay",
+      enabled: false,
+      priority: 1,
+      consumption: 500,
+      minimal_downtime: 60 * 5,
+      minimal_uptime: 60 * 5,
+      depends_on: [],
+      conflicts_with: [],
+    }
+  );
+
+  const creating = !p.relay;
+
+  const onSubmit = async () => {
+    try {
+      loadingMessage.show(
+        `${creating ? "Creating" : "Updating"} relay information`
+      );
+
+      // TODO
+
+      snackbar(
+        `The relay have been successfully ${creating ? "created" : "updated"}!`
+      );
+      p.onUpdated();
+    } catch (e) {
+      console.error("Failed to update device relay information!" + e);
+      alert(`Failed to ${creating ? "create" : "update"} relay! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  const canSubmit =
+    lenValid(relay.name, ServerApi.Config.constraints.relay_name_len) &&
+    relay.priority >= 0;
+
+  return (
+    <Dialog open>
+      <DialogTitle>Edit relay information</DialogTitle>
+      <DialogContent>
+        <DialogFormTitle>General info</DialogFormTitle>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <TextInput
+              editable
+              label="Relay name"
+              value={relay.name}
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    name: v ?? "",
+                  };
+                })
+              }
+              size={ServerApi.Config.constraints.dev_name_len}
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <CheckboxInput
+              editable
+              label="Enable relay"
+              checked={relay.enabled}
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    enabled: v,
+                  };
+                })
+              }
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput
+              editable
+              label="Priority"
+              value={relay.priority.toString()}
+              type="number"
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    priority: Number(v) ?? 0,
+                  };
+                })
+              }
+              size={ServerApi.Config.constraints.relay_priority}
+              helperText="Relay priority when selecting relays to turn on. 0 = lowest priority"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput
+              editable
+              label="Consumption"
+              value={relay.consumption.toString()}
+              type="number"
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    consumption: Number(v) ?? 0,
+                  };
+                })
+              }
+              size={ServerApi.Config.constraints.relay_consumption}
+              helperText="Estimated consumption of device powered by relay"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput
+              editable
+              label="Minimal uptime"
+              value={relay.minimal_uptime.toString()}
+              type="number"
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    minimal_uptime: Number(v) ?? 0,
+                  };
+                })
+              }
+              size={ServerApi.Config.constraints.relay_minimal_uptime}
+              helperText="Minimal time this relay shall be left on before it can be turned off (in seconds)"
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <TextInput
+              editable
+              label="Minimal downtime"
+              value={relay.minimal_downtime.toString()}
+              type="number"
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    minimal_downtime: Number(v) ?? 0,
+                  };
+                })
+              }
+              size={ServerApi.Config.constraints.relay_minimal_downtime}
+              helperText="Minimal time this relay shall be left on before it can be turned off (in seconds)"
+            />
+          </Grid>
+        </Grid>
+
+        <DialogFormTitle>Daily runtime</DialogFormTitle>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <CheckboxInput
+              editable
+              label="Enable minimal runtime"
+              checked={!!relay.daily_runtime}
+              onValueChange={(v) =>
+                setRelay((r) => {
+                  return {
+                    ...r,
+                    daily_runtime: v
+                      ? { reset_time: 0, min_runtime: 3600, catch_up_hours: [] }
+                      : undefined,
+                  };
+                })
+              }
+            />
+          </Grid>
+
+          {!!relay.daily_runtime && (
+            <>
+              <Grid item xs={6}>
+                <TextInput
+                  editable
+                  label="Minimal daily runtime"
+                  value={relay.daily_runtime!.min_runtime.toString()}
+                  type="number"
+                  onValueChange={(v) =>
+                    setRelay((r) => {
+                      return {
+                        ...r,
+                        daily_runtime: {
+                          ...r.daily_runtime!,
+                          min_runtime: Number(v),
+                        },
+                      };
+                    })
+                  }
+                  size={
+                    ServerApi.Config.constraints.relay_daily_minimal_runtime
+                  }
+                  helperText="Minimum time, in seconds, that this relay should run each day"
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TimePicker
+                  label="Reset time"
+                  value={timeOfDay(relay.daily_runtime!.reset_time)}
+                  onChange={(d) =>
+                    setRelay((r) => {
+                      return {
+                        ...r,
+                        daily_runtime: {
+                          ...r.daily_runtime!,
+                          reset_time: d ? dayjsToTimeOfDay(d) : 0,
+                        },
+                      };
+                    })
+                  }
+                />
+              </Grid>
+              <Grid item xs={6}>
+                <TimePicker
+                  label="Catch up hours"
+                  value={timeOfDay(relay.daily_runtime!.reset_time)}
+                  onChange={(d) =>
+                    setRelay((r) => {
+                      return {
+                        ...r,
+                        daily_runtime: {
+                          ...r.daily_runtime!,
+                          reset_time: d ? dayjsToTimeOfDay(d) : 0,
+                        },
+                      };
+                    })
+                  }
+                />
+              </Grid>
+            </>
+          )}
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Cancel</Button>
+        <Button onClick={onSubmit} autoFocus disabled={!canSubmit}>
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+function DialogFormTitle(p: React.PropsWithChildren): React.ReactElement {
+  return (
+    <>
+      <span style={{ height: "2px" }}></span>
+      <Typography variant="h6">{p.children}</Typography>
+    </>
+  );
+}

central_frontend/src/main.tsx

@@ -13,24 +13,28 @@ import { SnackbarProvider } from "./hooks/context_providers/SnackbarProvider";
 import "./index.css";
 import { ServerApi } from "./api/ServerApi";
 import { AsyncWidget } from "./widgets/AsyncWidget";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <DarkThemeProvider>
-      <AlertDialogProvider>
-        <ConfirmDialogProvider>
-          <SnackbarProvider>
-            <LoadingMessageProvider>
-              <AsyncWidget
-                loadKey={1}
-                load={async () => await ServerApi.LoadConfig()}
-                errMsg="Failed to connect to backend to retrieve static config!"
-                build={() => <App />}
-              />
-            </LoadingMessageProvider>
-          </SnackbarProvider>
-        </ConfirmDialogProvider>
-      </AlertDialogProvider>
-    </DarkThemeProvider>
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DarkThemeProvider>
+        <AlertDialogProvider>
+          <ConfirmDialogProvider>
+            <SnackbarProvider>
+              <LoadingMessageProvider>
+                <AsyncWidget
+                  loadKey={1}
+                  load={async () => await ServerApi.LoadConfig()}
+                  errMsg="Failed to connect to backend to retrieve static config!"
+                  build={() => <App />}
+                />
+              </LoadingMessageProvider>
+            </SnackbarProvider>
+          </ConfirmDialogProvider>
+        </AlertDialogProvider>
+      </DarkThemeProvider>
+    </LocalizationProvider>
   </React.StrictMode>
 );

central_frontend/src/routes/DeviceRoute/DeviceRelays.tsx

@@ -0,0 +1,50 @@
+import AddIcon from "@mui/icons-material/Add";
+import { IconButton, Tooltip } from "@mui/material";
+import React from "react";
+import { Device, DeviceRelay } from "../../api/DeviceApi";
+import { DeviceRouteCard } from "./DeviceRouteCard";
+import { EditDeviceRelaysDialog } from "../../dialogs/EditDeviceRelaysDialog";
+
+export function DeviceRelays(p: {
+  device: Device;
+  onReload: () => void;
+}): React.ReactElement {
+  const [dialogOpen, setDialogOpen] = React.useState(false);
+  const [currRelay, setCurrRelay] = React.useState<DeviceRelay | undefined>();
+
+  const createNewRelay = () => {
+    setDialogOpen(true);
+    setCurrRelay(undefined);
+  };
+
+  return (
+    <>
+      {dialogOpen && (
+        <EditDeviceRelaysDialog
+          device={p.device}
+          onClose={() => setDialogOpen(false)}
+          relay={currRelay}
+          onUpdated={() => {
+            setDialogOpen(false);
+            p.onReload();
+          }}
+        />
+      )}
+      <DeviceRouteCard
+        title="Device relays"
+        actions={
+          <Tooltip title="Create new relay">
+            <IconButton
+              onClick={createNewRelay}
+              disabled={p.device.relays.length >= p.device.info.max_relays}
+            >
+              <AddIcon />
+            </IconButton>
+          </Tooltip>
+        }
+      >
+        TODO : relays list ({p.device.relays.length}) relays now)
+      </DeviceRouteCard>
+    </>
+  );
+}

central_frontend/src/routes/DeviceRoute/DeviceRoute.tsx

@@ -1,5 +1,5 @@
 import DeleteIcon from "@mui/icons-material/Delete";
-import { IconButton, Tooltip } from "@mui/material";
+import { Grid, IconButton, Tooltip } from "@mui/material";
 import React from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Device, DeviceApi } from "../../api/DeviceApi";
@@ -10,6 +10,7 @@ import { useSnackbar } from "../../hooks/context_providers/SnackbarProvider";
 import { AsyncWidget } from "../../widgets/AsyncWidget";
 import { SolarEnergyRouteContainer } from "../../widgets/SolarEnergyRouteContainer";
 import { GeneralDeviceInfo } from "./GeneralDeviceInfo";
+import { DeviceRelays } from "./DeviceRelays";
 
 export function DeviceRoute(): React.ReactElement {
   const { id } = useParams();
@@ -79,7 +80,14 @@ function DeviceRouteInner(p: {
         </Tooltip>
       }
     >
-      <GeneralDeviceInfo {...p} />
+      <Grid container spacing={2}>
+        <Grid item xs={12} md={6}>
+          <GeneralDeviceInfo {...p} />
+        </Grid>
+        <Grid item xs={12} md={6}>
+          <DeviceRelays {...p} />
+        </Grid>
+      </Grid>
     </SolarEnergyRouteContainer>
   );
 }

central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx

@@ -62,6 +62,7 @@ export function GeneralDeviceInfo(p: {
             <DeviceInfoProperty
               label="Enabled"
               value={p.device.enabled ? "YES" : "NO"}
+              color={p.device.enabled ? "green" : "red"}
             />
             <DeviceInfoProperty
               label="Maximum number of relays"
@@ -82,11 +83,12 @@ function DeviceInfoProperty(p: {
   icon?: React.ReactElement;
   label: string;
   value: string;
+  color?: string;
 }): React.ReactElement {
   return (
     <TableRow hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
       <TableCell>{p.label}</TableCell>
-      <TableCell>{p.value}</TableCell>
+      <TableCell style={{ color: p.color }}>{p.value}</TableCell>
     </TableRow>
   );
 }

central_frontend/src/utils/DateUtils.ts

@@ -1,6 +1,29 @@
+import dayjs, { Dayjs } from "dayjs";
+
 /**
  * Get current UNIX time, in seconds
  */
 export function time(): number {
   return Math.floor(new Date().getTime() / 1000);
 }
+
+/**
+ * Get dayjs representation of given time of day
+ */
+export function timeOfDay(time: number): Dayjs {
+  const hours = Math.floor(time / 3600);
+  const minutes = Math.floor(time / 60) - hours * 60;
+
+  return dayjs(
+    `2022-04-17T${hours.toString().padStart(2, "0")}:${minutes
+      .toString()
+      .padStart(2, "0")}`
+  );
+}
+
+/**
+ * Get time of day (in secs) from a given dayjs representation
+ */
+export function dayjsToTimeOfDay(d: Dayjs): number {
+  return d.hour() * 3600 + d.minute() * 60 + d.second();
+}