Can update device general information

central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx

@@ -0,0 +1,92 @@
+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"}
+            />
+            <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;
+}): React.ReactElement {
+  return (
+    <TableRow hover sx={{ "&:last-child td, &:last-child th": { border: 0 } }}>
+      <TableCell>{p.label}</TableCell>
+      <TableCell>{p.value}</TableCell>
+    </TableRow>
+  );
+}