52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import { Table, TableBody } from "@mui/material";
|
|
import React from "react";
|
|
import { Device, DeviceApi, DeviceState } from "../../api/DeviceApi";
|
|
import { AsyncWidget } from "../../widgets/AsyncWidget";
|
|
import { BoolText } from "../../widgets/BoolText";
|
|
import { timeDiff } from "../../widgets/TimeWidget";
|
|
import { DeviceInfoProperty } from "./DeviceInfoProperty";
|
|
import { DeviceRouteCard } from "./DeviceRouteCard";
|
|
|
|
export function DeviceStateBlock(p: { device: Device }): React.ReactElement {
|
|
const [state, setState] = React.useState<DeviceState>();
|
|
|
|
const load = async () => {
|
|
setState(await DeviceApi.GetSingleState(p.device.id));
|
|
};
|
|
|
|
return (
|
|
<DeviceRouteCard title="Device state">
|
|
<AsyncWidget
|
|
loadKey={p.device.id}
|
|
load={load}
|
|
ready={!!state}
|
|
errMsg="Failed to load device state!"
|
|
build={() => <DeviceStateInner state={state!} />}
|
|
/>
|
|
</DeviceRouteCard>
|
|
);
|
|
}
|
|
|
|
function DeviceStateInner(p: { state: DeviceState }): React.ReactElement {
|
|
return (
|
|
<Table size="small">
|
|
<TableBody>
|
|
<DeviceInfoProperty
|
|
label="Status"
|
|
value={
|
|
<BoolText
|
|
val={p.state.online}
|
|
positive="ONLINE"
|
|
negative="Offline"
|
|
/>
|
|
}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Last ping"
|
|
value={timeDiff(0, p.state.last_ping)}
|
|
/>
|
|
</TableBody>
|
|
</Table>
|
|
);
|
|
}
|