98 lines
2.8 KiB
TypeScript
98 lines
2.8 KiB
TypeScript
import CheckIcon from "@mui/icons-material/Check";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
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 } from "../api/DeviceApi";
|
|
import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
|
|
import { useConfirm } from "../hooks/context_providers/ConfirmDialogProvider";
|
|
import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
|
|
import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
|
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
|
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
|
|
import { TimeWidget } from "../widgets/TimeWidget";
|
|
import { RelayApi } from "../api/RelayApi";
|
|
|
|
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 ? "YES" : "NO"}</TableCell>
|
|
<TableCell>{row.priority}</TableCell>
|
|
<TableCell>{row.consumption}</TableCell>
|
|
<TableCell>TODO</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|