pierre/SolarEnergy
1
0
Fork 0
Code Issues 2 Pull Requests 5 Actions Packages Projects Releases 2 Wiki Activity

Enrich home page

Browse Source
This commit is contained in:
Pierre HUBERT 2024-09-26 23:14:18 +02:00
parent 3f41269c0b
commit cb798dfd14
4 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
central_frontend/src/routes/DevicesRoute.tsx
View File

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

10
central_frontend/src/routes/HomeRoute.tsx
View File

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

5
central_frontend/src/routes/RelaysListRoute.tsx
View File

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

5
central_frontend/src/widgets/SolarEnergyRouteContainer.tsx
View File

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