SolarEnergy/central_frontend/src/routes/RelaysListRoute.tsx

import RefreshIcon from "@mui/icons-material/Refresh";
import {
  IconButton,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Tooltip,
} from "@mui/material";
import React from "react";
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 { useNavigate } from "react-router-dom";

export function RelaysListRoute(p: {
  homeWidget?: boolean;
}): React.ReactElement {
  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);
  };

  const reload = () => {
    loadKey.current += 1;
    setList(undefined);
  };

  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!}
              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 }}>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Enabled</TableCell>
            <TableCell>Priority</TableCell>
            <TableCell>Consumption</TableCell>
            <TableCell>Status</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {p.list.map((row) => (
            <TableRow
              key={row.name}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              hover
              onDoubleClick={() => openDevicePage(row)}
            >
              <TableCell>{row.name}</TableCell>
              <TableCell>
                <BoolText val={row.enabled} positive="YES" negative="NO" />
              </TableCell>
              <TableCell>{row.priority}</TableCell>
              <TableCell>{row.consumption}</TableCell>
              <TableCell>
                <BoolText
                  val={p.status.get(row.id)!.on}
                  positive="ON"
                  negative="OFF"
                />{" "}
                for <TimeWidget diff time={p.status.get(row.id)!.for} />
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}