Improve home page

central_frontend/src/routes/RelaysListRoute.tsx

@@ -11,12 +11,14 @@ import {
   Tooltip,
 } from "@mui/material";
 import React from "react";
-import { DeviceRelay } from "../api/DeviceApi";
+import { Device, DeviceApi, DeviceRelay, DeviceURL } from "../api/DeviceApi";
 import { RelayApi, RelaysStatus } from "../api/RelayApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { BoolText } from "../widgets/BoolText";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
+import { EditDeviceRelaysDialog } from "../dialogs/EditDeviceRelaysDialog";
+import { useNavigate } from "react-router-dom";
 
 export function RelaysListRoute(p: {
   homeWidget?: boolean;
@@ -24,10 +26,12 @@ export function RelaysListRoute(p: {
   const loadKey = React.useRef(1);
 
   const [list, setList] = React.useState<DeviceRelay[] | undefined>();
+  const [devices, setDevices] = React.useState<Device[] | undefined>();
   const [status, setStatus] = React.useState<RelaysStatus | undefined>();
 
   const load = async () => {
     setList(await RelayApi.GetList());
+    setDevices(await DeviceApi.ValidatedList());
     setStatus(await RelayApi.GetRelaysStatus());
 
     list?.sort((a, b) => b.priority - a.priority);
@@ -39,38 +43,53 @@ export function RelaysListRoute(p: {
   };
 
   return (
-    <SolarEnergyRouteContainer
-      label="Relays list"
-      homeWidget={p.homeWidget}
-      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!} status={status!} />
-        )}
-      />
-    </SolarEnergyRouteContainer>
+    <>
+      <SolarEnergyRouteContainer
+        label="Relays list"
+        homeWidget={p.homeWidget}
+        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!}
+              devices={devices!}
+              status={status!}
+            />
+          )}
+        />
+      </SolarEnergyRouteContainer>
+    </>
   );
 }
 
 function RelaysList(p: {
   list: DeviceRelay[];
+  devices: Device[];
   status: RelaysStatus;
   onReload: () => void;
 }): React.ReactElement {
+  const navigate = useNavigate();
+
+  const openDevicePage = (relay: DeviceRelay) => {
+    const dev = p.devices.find((d) => d.relays.find((r) => r.id === relay.id));
+    navigate(DeviceURL(dev!));
+  };
+
   return (
     <TableContainer component={Paper}>
-      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+      <Table sx={{ minWidth: 650 }}>
         <TableHead>
           <TableRow>
             <TableCell>Name</TableCell>
@@ -85,6 +104,8 @@ function RelaysList(p: {
             <TableRow
               key={row.name}
               sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              hover
+              onDoubleClick={() => openDevicePage(row)}
             >
               <TableCell>{row.name}</TableCell>
               <TableCell>

central_frontend/src/widgets/StatCard.tsx

@@ -103,7 +103,7 @@ export default function StatCard({
               {interval}
             </Typography>
           </Stack>
-          <Box sx={{ width: "100%", height: 50 }}>
+          <Box sx={{ width: "100%", height: 100 }}>
             {data && interval && (
               <SparkLineChart
                 colors={[chartColor]}