Start to build relay dialog

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