Created form to upload new firmware

2024-10-07 22:04:57 +02:00
parent f4dda44d15
commit cef5b5aa5b
7 changed files with 566 additions and 248 deletions
--- a/central_frontend/src/dialogs/UploadUpdateDialog.tsx
+++ b/central_frontend/src/dialogs/UploadUpdateDialog.tsx
@ -0,0 +1,111 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  styled,
+} from "@mui/material";
+import React from "react";
+import { TextInput } from "../widgets/forms/TextInput";
+import { SemVer } from "semver";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+
+const VisuallyHiddenInput = styled("input")({
+  clip: "rect(0 0 0 0)",
+  clipPath: "inset(50%)",
+  height: 1,
+  overflow: "hidden",
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  whiteSpace: "nowrap",
+  width: 1,
+});
+
+export function UploadUpdateDialog(p: {
+  platforms: string[];
+  onClose: () => void;
+  onCreated: () => void;
+}): React.ReactElement {
+  const [platform, setPlatform] = React.useState<string | undefined>();
+  const [version, setVersion] = React.useState<string | undefined>();
+  const [file, setFile] = React.useState<File | undefined>();
+  return (
+    <Dialog open={true} onClose={p.onClose}>
+      <DialogTitle>Submit a new update</DialogTitle>
+      <DialogContent>
+        <DialogContentText>
+          You can upload a new firmware using this form.
+        </DialogContentText>
+        <br />
+        <FormControl fullWidth>
+          <InputLabel>Platform</InputLabel>
+          <Select
+            label="Platform"
+            value={platform}
+            onChange={(e) => setPlatform(e.target.value)}
+            variant="standard"
+          >
+            {p.platforms.map((p) => (
+              <MenuItem key={p} value={p}>
+                {p}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+        <br />
+        <br />
+        <TextInput
+          editable
+          label="Version"
+          helperText="The version shall follow semantics requirements"
+          value={version}
+          onValueChange={setVersion}
+          checkValue={(v) => {
+            try {
+              new SemVer(v, { loose: false });
+              return true;
+            } catch (e) {
+              console.error(e);
+              return false;
+            }
+          }}
+        />
+
+        <br />
+
+        <Button
+          fullWidth
+          component="label"
+          role={undefined}
+          variant={file ? "contained" : "outlined"}
+          tabIndex={-1}
+          startIcon={<CloudUploadIcon />}
+        >
+          Upload file
+          <VisuallyHiddenInput
+            type="file"
+            onChange={(event) =>
+              setFile(
+                (event.target.files?.length ?? 0) > 0
+                  ? event.target.files![0]
+                  : undefined
+              )
+            }
+            multiple
+          />
+        </Button>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={p.onClose}>Cancel</Button>
+        <Button type="submit">Subscribe</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}