Check for dependencies conflict before deleting a device

central_frontend/src/routes/RelaysListRoute.tsx

@@ -0,0 +1,67 @@
+import CheckIcon from "@mui/icons-material/Check";
+import DeleteIcon from "@mui/icons-material/Delete";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import {
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Tooltip,
+} from "@mui/material";
+import React from "react";
+import { Device, DeviceApi, DeviceRelay } from "../api/DeviceApi";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
+import { TimeWidget } from "../widgets/TimeWidget";
+import { RelayApi } from "../api/RelayApi";
+
+export function RelaysListRoute(): React.ReactElement {
+  const loadKey = React.useRef(1);
+
+  const [list, setList] = React.useState<DeviceRelay[] | undefined>();
+
+  const load = async () => {
+    setList(await RelayApi.GetList());
+  };
+
+  const reload = () => {
+    loadKey.current += 1;
+    setList(undefined);
+  };
+
+  return (
+    <SolarEnergyRouteContainer
+      label="Relays list"
+      actions={
+        <Tooltip title="Refresh list">
+          <IconButton onClick={reload}>
+            <RefreshIcon />
+          </IconButton>
+        </Tooltip>
+      }
+    >
+      <AsyncWidget
+        loadKey={loadKey.current}
+        ready={!!list}
+        errMsg="Failed to load the list of relays!"
+        load={load}
+        build={() => <RelaysList onReload={reload} list={list!} />}
+      />
+    </SolarEnergyRouteContainer>
+  );
+}
+
+function RelaysList(p: {
+  list: DeviceRelay[];
+  onReload: () => void;
+}): React.ReactElement {
+  return <>todo</>;
+}