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

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

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

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

    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!} />}
      />
    </SolarEnergyRouteContainer>
  );
}

function RelaysList(p: {
  list: DeviceRelay[];
  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>
                {row.enabled ? (
                  <span style={{ color: "green" }}>YES</span>
                ) : (
                  <span style={{ color: "red" }}>NO</span>
                )}
              </TableCell>
              <TableCell>{row.priority}</TableCell>
              <TableCell>{row.consumption}</TableCell>
              <TableCell>TODO</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}