95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import EditIcon from "@mui/icons-material/Edit";
|
|
import {
|
|
IconButton,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableRow,
|
|
Tooltip,
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
import { Device } from "../../api/DeviceApi";
|
|
import { EditDeviceMetadataDialog } from "../../dialogs/EditDeviceMetadataDialog";
|
|
import { formatDate } from "../../widgets/TimeWidget";
|
|
import { DeviceRouteCard } from "./DeviceRouteCard";
|
|
|
|
export function GeneralDeviceInfo(p: {
|
|
device: Device;
|
|
onReload: () => void;
|
|
}): React.ReactElement {
|
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
{dialogOpen && (
|
|
<EditDeviceMetadataDialog
|
|
device={p.device}
|
|
onClose={() => setDialogOpen(false)}
|
|
onUpdated={p.onReload}
|
|
/>
|
|
)}
|
|
<DeviceRouteCard
|
|
title="General device information"
|
|
actions={
|
|
<Tooltip title="Edit device information">
|
|
<IconButton onClick={() => setDialogOpen(true)}>
|
|
<EditIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
}
|
|
>
|
|
<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="Created"
|
|
value={formatDate(p.device.time_create)}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Updated"
|
|
value={formatDate(p.device.time_update)}
|
|
/>
|
|
<DeviceInfoProperty
|
|
label="Enabled"
|
|
value={p.device.enabled ? "YES" : "NO"}
|
|
color={p.device.enabled ? "green" : "red"}
|
|
/>
|
|
<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>
|
|
</DeviceRouteCard>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function DeviceInfoProperty(p: {
|
|
icon?: React.ReactElement;
|
|
label: string;
|
|
value: string;
|
|
color?: string;
|
|
}): React.ReactElement {
|
|
return (
|
|
<TableRow hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
|
|
<TableCell>{p.label}</TableCell>
|
|
<TableCell style={{ color: p.color }}>{p.value}</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|