Can update device general information

central_frontend/src/dialogs/EditDeviceMetadataDialog.tsx

@@ -0,0 +1,87 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import React from "react";
+import { Device, DeviceApi } from "../api/DeviceApi";
+import { ServerApi } from "../api/ServerApi";
+import { useAlert } from "../hooks/context_providers/AlertDialogProvider";
+import { useLoadingMessage } from "../hooks/context_providers/LoadingMessageProvider";
+import { useSnackbar } from "../hooks/context_providers/SnackbarProvider";
+import { lenValid } from "../utils/StringsUtils";
+import { CheckboxInput } from "../widgets/forms/CheckboxInput";
+import { TextInput } from "../widgets/forms/TextInput";
+
+export function EditDeviceMetadataDialog(p: {
+  onClose: () => void;
+  device: Device;
+  onUpdated: () => void;
+}): React.ReactElement {
+  const loadingMessage = useLoadingMessage();
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const [name, setName] = React.useState(p.device.name);
+  const [description, setDescription] = React.useState(p.device.description);
+  const [enabled, setEnabled] = React.useState(p.device.enabled);
+
+  const onSubmit = async () => {
+    try {
+      loadingMessage.show("Updating device information");
+      await DeviceApi.Update(p.device, {
+        name,
+        description,
+        enabled,
+      });
+
+      snackbar("The device information have been successfully updated!");
+      p.onUpdated();
+    } catch (e) {
+      console.error("Failed to update device general information!" + e);
+      alert(`Failed to update device general information! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
+  const canSubmit =
+    lenValid(name, ServerApi.Config.constraints.dev_name_len) &&
+    lenValid(description, ServerApi.Config.constraints.dev_description_len);
+
+  return (
+    <Dialog open>
+      <DialogTitle>Edit device general information</DialogTitle>
+      <DialogContent>
+        <TextInput
+          editable
+          label="Device name"
+          value={name}
+          onValueChange={(s) => setName(s ?? "")}
+          size={ServerApi.Config.constraints.dev_name_len}
+        />
+        <TextInput
+          editable
+          label="Device description"
+          value={description}
+          onValueChange={(s) => setDescription(s ?? "")}
+          size={ServerApi.Config.constraints.dev_description_len}
+        />
+        <CheckboxInput
+          editable
+          label="Enable device"
+          checked={enabled}
+          onValueChange={setEnabled}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Cancel</Button>
+        <Button onClick={onSubmit} autoFocus disabled={!canSubmit}>
+          Submit
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}