Check for dependencies conflict before deleting a device

central_frontend/src/App.tsx

@@ -6,13 +6,14 @@ import {
 } from "react-router-dom";
 import { AuthApi } from "./api/AuthApi";
 import { ServerApi } from "./api/ServerApi";
+import { DeviceRoute } from "./routes/DeviceRoute/DeviceRoute";
+import { DevicesRoute } from "./routes/DevicesRoute";
+import { HomeRoute } from "./routes/HomeRoute";
 import { LoginRoute } from "./routes/LoginRoute";
 import { NotFoundRoute } from "./routes/NotFoundRoute";
-import { HomeRoute } from "./routes/HomeRoute";
-import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 import { PendingDevicesRoute } from "./routes/PendingDevicesRoute";
-import { DevicesRoute } from "./routes/DevicesRoute";
-import { DeviceRoute } from "./routes/DeviceRoute/DeviceRoute";
+import { RelaysListRoute } from "./routes/RelaysListRoute";
+import { BaseAuthenticatedPage } from "./widgets/BaseAuthenticatedPage";
 
 export function App() {
   if (!AuthApi.SignedIn && !ServerApi.Config.auth_disabled)
@@ -25,6 +26,7 @@ export function App() {
         <Route path="pending_devices" element={<PendingDevicesRoute />} />
         <Route path="devices" element={<DevicesRoute />} />
         <Route path="dev/:id" element={<DeviceRoute />} />
+        <Route path="relays" element={<RelaysListRoute />} />
         <Route path="*" element={<NotFoundRoute />} />
       </Route>
     )

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</>;
+}

central_frontend/src/widgets/SolarEnergyNavList.tsx

@@ -1,10 +1,9 @@
-import { mdiChip, mdiHome, mdiNewBox } from "@mdi/js";
+import { mdiChip, mdiElectricSwitch, mdiHome, mdiNewBox } from "@mdi/js";
 import Icon from "@mdi/react";
 import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemSecondaryAction,
   ListItemText,
 } from "@mui/material";
 import { useLocation } from "react-router-dom";
@@ -31,25 +30,29 @@ export function SolarEnergyNavList(): React.ReactElement {
         uri="/pending_devices"
         icon={<Icon path={mdiNewBox} size={1} />}
       />
+      <NavLink
+        label="Relays"
+        uri="/relays"
+        icon={<Icon path={mdiElectricSwitch} size={1} />}
+      />
     </List>
   );
 }
 
-function NavLink(p: {
-  icon: React.ReactElement;
-  uri: string;
-  label: string;
-  secondaryAction?: React.ReactElement;
-}): React.ReactElement {
+function NavLink(
+  p: Readonly<{
+    icon: React.ReactElement;
+    uri: string;
+    label: string;
+    secondaryAction?: React.ReactElement;
+  }>
+): React.ReactElement {
   const location = useLocation();
   return (
     <RouterLink to={p.uri}>
       <ListItemButton selected={p.uri === location.pathname}>
         <ListItemIcon>{p.icon}</ListItemIcon>
         <ListItemText primary={p.label} />
-        {p.secondaryAction && (
-          <ListItemSecondaryAction>{p.secondaryAction}</ListItemSecondaryAction>
-        )}
       </ListItemButton>
     </RouterLink>
   );