Enrich home page

central_frontend/src/routes/DevicesRoute.tsx

@@ -19,7 +19,7 @@ import { BoolText } from "../widgets/BoolText";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
 
-export function DevicesRoute(): React.ReactElement {
+export function DevicesRoute(p: { homeWidget?: boolean }): React.ReactElement {
   const loadKey = React.useRef(1);
 
   const [list, setList] = React.useState<Device[] | undefined>();
@@ -38,6 +38,7 @@ export function DevicesRoute(): React.ReactElement {
 
   return (
     <SolarEnergyRouteContainer
+      homeWidget={p.homeWidget}
       label="Devices"
       actions={
         <Tooltip title="Refresh table">
@@ -81,12 +82,12 @@ function ValidatedDevicesList(p: {
         <TableHead>
           <TableRow>
             <TableCell>#</TableCell>
-            <TableCell>Model</TableCell>
-            <TableCell>Version</TableCell>
-            <TableCell>Max number of relays</TableCell>
-            <TableCell>Created</TableCell>
-            <TableCell>Updated</TableCell>
-            <TableCell>Status</TableCell>
+            <TableCell align="center">Model</TableCell>
+            <TableCell align="center">Version</TableCell>
+            <TableCell align="center">Max relays</TableCell>
+            <TableCell align="center">Created</TableCell>
+            <TableCell align="center">Updated</TableCell>
+            <TableCell align="center">Status</TableCell>
             <TableCell></TableCell>
           </TableRow>
         </TableHead>
@@ -100,13 +101,13 @@ function ValidatedDevicesList(p: {
               <TableCell component="th" scope="row">
                 {dev.id}
               </TableCell>
-              <TableCell>{dev.info.reference}</TableCell>
-              <TableCell>{dev.info.version}</TableCell>
-              <TableCell>{dev.info.max_relays}</TableCell>
-              <TableCell>
+              <TableCell align="center">{dev.info.reference}</TableCell>
+              <TableCell align="center">{dev.info.version}</TableCell>
+              <TableCell align="center">{dev.info.max_relays}</TableCell>
+              <TableCell align="center">
                 <TimeWidget time={dev.time_create} />
               </TableCell>
-              <TableCell>
+              <TableCell align="center">
                 <TimeWidget time={dev.time_update} />
               </TableCell>
               <TableCell align="center">

central_frontend/src/routes/HomeRoute.tsx

@@ -3,6 +3,8 @@ import { CurrConsumptionWidget } from "./HomeRoute/CurrConsumptionWidget";
 import Grid from "@mui/material/Grid2";
 import { CachedConsumptionWidget } from "./HomeRoute/CachedConsumptionWidget";
 import { RelayConsumptionWidget } from "./HomeRoute/RelayConsumptionWidget";
+import { RelaysListRoute } from "./RelaysListRoute";
+import { DevicesRoute } from "./DevicesRoute";
 
 export function HomeRoute(): React.ReactElement {
   return (
@@ -25,6 +27,14 @@ export function HomeRoute(): React.ReactElement {
         <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
           <CachedConsumptionWidget />
         </Grid>
+
+        <Grid size={{ xs: 12, sm: 12, lg: 9 }}>
+          <DevicesRoute homeWidget />
+        </Grid>
+
+        <Grid size={{ xs: 12, sm: 12, lg: 9 }}>
+          <RelaysListRoute homeWidget />
+        </Grid>
       </Grid>
     </div>
   );

central_frontend/src/routes/RelaysListRoute.tsx

@@ -18,7 +18,9 @@ import { BoolText } from "../widgets/BoolText";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
 
-export function RelaysListRoute(): React.ReactElement {
+export function RelaysListRoute(p: {
+  homeWidget?: boolean;
+}): React.ReactElement {
   const loadKey = React.useRef(1);
 
   const [list, setList] = React.useState<DeviceRelay[] | undefined>();
@@ -39,6 +41,7 @@ export function RelaysListRoute(): React.ReactElement {
   return (
     <SolarEnergyRouteContainer
       label="Relays list"
+      homeWidget={p.homeWidget}
       actions={
         <Tooltip title="Refresh list">
           <IconButton onClick={reload}>

central_frontend/src/widgets/SolarEnergyRouteContainer.tsx

@@ -4,11 +4,12 @@ import React, { PropsWithChildren } from "react";
 export function SolarEnergyRouteContainer(
   p: {
     label: string;
+    homeWidget?: boolean;
     actions?: React.ReactElement;
   } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <div style={{ margin: "50px" }}>
+    <div style={{ margin: p.homeWidget ? "0px" : "50px" }}>
       <div
         style={{
           display: "flex",
@@ -17,7 +18,7 @@ export function SolarEnergyRouteContainer(
           marginBottom: "20px",
         }}
       >
-        <Typography variant="h4">{p.label}</Typography>
+        <Typography variant={p.homeWidget ? "h6" : "h4"}>{p.label}</Typography>
         {p.actions ?? <></>}
       </div>