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 { DeviceRelay } from "../api/DeviceApi";
import { RelayApi, RelaysStatus } from "../api/RelayApi";
import { AsyncWidget } from "../widgets/AsyncWidget";
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
import { TimeWidget } from "../widgets/TimeWidget";

export function RelaysListRoute(): React.ReactElement {
  const loadKey = React.useRef(1);

  const [list, setList] = React.useState<DeviceRelay[] | undefined>();
  const [status, setStatus] = React.useState<RelaysStatus | undefined>();

  const load = async () => {
    setList(await RelayApi.GetList());
    setStatus(await RelayApi.GetRelaysStatus());

    list?.sort((a, b) => b.priority - a.priority);
  };

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

  return (
    <SolarEnergyRouteContainer
      label="Relays list"
      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>
  );
}

function RelaysList(p: {
  list: DeviceRelay[];
  status: RelaysStatus;
  onReload: () => void;
}): React.ReactElement {
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <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 } }}
            >
              <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>
  );
}

function BoolText(p: {
  val: boolean;
  positive: string;
  negative: string;
}): React.ReactElement {
  return p.val ? (
    <span style={{ color: "green" }}>{p.positive}</span>
  ) : (
    <span style={{ color: "red" }}>{p.negative}</span>
  );
}