103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
import { useParams } from "react-router-dom";
|
|
import { Device, DeviceApi } from "../api/DeviceApi";
|
|
import React from "react";
|
|
import { AsyncWidget } from "../widgets/AsyncWidget";
|
|
import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
|
|
import {
|
|
Card,
|
|
Paper,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableRow,
|
|
Typography,
|
|
} from "@mui/material";
|
|
|
|
export function DeviceRoute(): React.ReactElement {
|
|
const { id } = useParams();
|
|
const [device, setDevice] = React.useState<Device | undefined>();
|
|
|
|
const loadKey = React.useRef(1);
|
|
|
|
const load = async () => {
|
|
setDevice(await DeviceApi.GetSingle(id!));
|
|
};
|
|
|
|
const reload = () => {
|
|
loadKey.current += 1;
|
|
setDevice(undefined);
|
|
};
|
|
|
|
return (
|
|
<AsyncWidget
|
|
loadKey={loadKey.current}
|
|
errMsg="Failed to load device information"
|
|
load={load}
|
|
ready={!!device}
|
|
build={() => <DeviceRouteInner device={device!} onReload={reload} />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function DeviceRouteInner(p: {
|
|
device: Device;
|
|
onReload: () => void;
|
|
}): React.ReactElement {
|
|
return (
|
|
<SolarEnergyRouteContainer label={`Device ${p.device.name}`}>
|
|
<GeneralDeviceInfo {...p} />
|
|
</SolarEnergyRouteContainer>
|
|
);
|
|
}
|
|
|
|
function GeneralDeviceInfo(p: { device: Device }): React.ReactElement {
|
|
return (
|
|
<TableContainer component={Paper}>
|
|
<Typography variant="h6" style={{ padding: "6px" }}>
|
|
General device information
|
|
</Typography>
|
|
<Table size="small">
|
|
<TableBody>
|
|
<DeviceInfoProperty label="ID" value={p.device.id} />
|
|
<DeviceInfoProperty
|
|
label="Reference"
|
|
value={p.device.info.reference}
|
|
/>
|
|
<DeviceInfoProperty label="Version" value={p.device.info.version} />
|
|
<DeviceInfoProperty label="Name" value={p.device.name} />
|
|
<DeviceInfoProperty
|
|
label="Description"
|
|
value={p.device.description}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Enabled"
|
|
value={p.device.enabled ? "YES" : "NO"}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Maximum number of relays"
|
|
value={p.device.info.max_relays.toString()}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Number of configured relays"
|
|
value={p.device.relays.length.toString()}
|
|
/>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
);
|
|
}
|
|
|
|
function DeviceInfoProperty(p: {
|
|
icon?: React.ReactElement;
|
|
label: string;
|
|
value: string;
|
|
}): React.ReactElement {
|
|
return (
|
|
<TableRow hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
|
|
<TableCell>{p.label}</TableCell>
|
|
<TableCell>{p.value}</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|