Better handle enabled / disabled relays

central_frontend/src/routes/RelaysListRoute.tsx

@@ -1,5 +1,3 @@
-import CheckIcon from "@mui/icons-material/Check";
-import DeleteIcon from "@mui/icons-material/Delete";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import {
   IconButton,
@@ -13,15 +11,10 @@ import {
   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 { DeviceRelay } from "../api/DeviceApi";
+import { RelayApi } from "../api/RelayApi";
 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);
@@ -84,7 +77,13 @@ function RelaysList(p: {
               sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
             >
               <TableCell>{row.name}</TableCell>
-              <TableCell>{row.enabled ? "YES" : "NO"}</TableCell>
+              <TableCell>
+                {row.enabled ? (
+                  <span style={{ color: "green" }}>YES</span>
+                ) : (
+                  <span style={{ color: "red" }}>NO</span>
+                )}
+              </TableCell>
               <TableCell>{row.priority}</TableCell>
               <TableCell>{row.consumption}</TableCell>
               <TableCell>TODO</TableCell>