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

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