[FEATURE] Mutable Servers & Edit UI (#8)

Co-authored-by: Dunemask <dunemask@gmail.com> Reviewed-on: https://gitea.dunemask.dev/elysium/minecluster/pulls/8
2024-01-23 20:10:00 +00:00 · 2024-01-23 20:10:00 +00:00 · 3d73f69678
commit 3d73f69678
parent 23efaafe1d
19 changed files with 291 additions and 35 deletions
--- a/src/pages/EditCoreOptions.jsx
+++ b/src/pages/EditCoreOptions.jsx
@ -0,0 +1,134 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import FormControl from "@mui/material/FormControl";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
+import { useGetServer, useModifyServer } from "@mcl/queries";
+
+// Core Options
+import NameOption from "@mcl/components/server-options/NameOption.jsx";
+import HostOption from "@mcl/components/server-options/HostOption.jsx";
+import VersionOption from "@mcl/components/server-options/VersionOption.jsx";
+import ServerTypeOption, {
+  serverTypeOptions,
+} from "@mcl/components/server-options/ServerTypeOption.jsx";
+import CpuOption, {
+  cpuOptions,
+} from "@mcl/components/server-options/CpuOption.jsx";
+import MemoryOption, {
+  memoryOptions,
+} from "@mcl/components/server-options/MemoryOption.jsx";
+import ExtraPortsOption from "@mcl/components/server-options/ExtraPortsOption.jsx";
+
+import BackupHostOption from "@mcl/components/server-options/BackupHostOption.jsx";
+import BackupBucketOption from "@mcl/components/server-options/BackupBucketOption.jsx";
+import BackupIdOption from "@mcl/components/server-options/BackupIdOption.jsx";
+import BackupKeyOption from "@mcl/components/server-options/BackupKeyOption.jsx";
+import BackupIntervalOption, {
+  backupIntervalDefault,
+} from "@mcl/components/server-options/BackupIntervalOption.jsx";
+
+export default function EditCoreOptions(props) {
+  const { serverId } = props;
+  const [spec, setSpec] = useState();
+  const modifyServer = useModifyServer(spec);
+  const { isLoading, data: serverBlueprint } = useGetServer(serverId);
+
+  useEffect(() => setSpec(serverBlueprint), [serverBlueprint]);
+
+  const updateSpec = (attr, val) => {
+    const s = { ...spec };
+    s[attr] = val;
+    setSpec(s);
+  };
+
+  const coreUpdate = (attr) => (e) => updateSpec(attr, e.target.value);
+
+  const upsertSpec = () => {
+    modifyServer(spec);
+  };
+
+  const toggleBackupEnabled = () =>
+    updateSpec("backupEnabled", !spec.backupEnabled);
+
+  function validateSpec() {
+    console.log("TODO CREATE VALIDATION");
+    if (!spec.host) return alertValidationError("Host cannot be blank");
+    if (!spec.name) return alertValidationError("Name not included");
+    if (!spec.version) return alertValidationError("Version cannot be blank");
+    return "validated";
+  }
+
+  function alertValidationError(reason) {
+    alert(`Could not validate spec because: ${reason}`);
+  }
+
+  if (!spec) return; // TODO: Add loading for spec
+  return (
+    <Box
+      className="edit-options"
+      sx={{ width: "100%", maxWidth: "600px", margin: "auto" }}
+    >
+      <FormControl fullWidth sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}>
+        <NameOption value={spec.name} onChange={coreUpdate("name")} />
+        <HostOption value={spec.host} onChange={coreUpdate("host")} />
+        <VersionOption value={spec.version} onChange={coreUpdate("version")} />
+        <ServerTypeOption
+          value={spec.serverType}
+          onChange={coreUpdate("serverType")}
+        />
+        <CpuOption value={spec.cpu} onChange={coreUpdate("cpu")} />
+        <MemoryOption value={spec.memory} onChange={coreUpdate("memory")} />
+
+        <ExtraPortsOption extraPorts={spec.extraPorts} onChange={updateSpec} />
+        {spec.backupEnabled !== null && (
+          <FormControlLabel
+            control={
+              <Switch
+                checked={spec.backupEnabled}
+                inputProps={{ "aria-label": "controlled" }}
+                onClick={toggleBackupEnabled}
+              />
+            }
+            label="Enable Backups?"
+            labelPlacement="start"
+            sx={{ mr: "auto" }}
+          />
+        )}
+
+        {/*spec.backupEnabled && ( // TODO: Disabled while secrets are insecure
+          <FormControl
+            fullWidth
+            sx={{ mt: "2rem", display: "flex", gap: ".5rem" }}
+          >
+            <Typography variant="h6">Backups</Typography>
+            <BackupHostOption
+              value={spec.backupHost}
+              onChange={coreUpdate("backupHost")}
+            />
+            <BackupBucketOption
+              value={spec.backupBucket}
+              onChange={coreUpdate("backupBucket")}
+            />
+            <BackupIdOption
+              value={spec.backupId}
+              onChange={coreUpdate("backupId")}
+            />
+            <BackupKeyOption
+              value={spec.backupKey}
+              onChange={coreUpdate("backupKey")}
+            />
+            <BackupIntervalOption onChange={coreUpdate("backupInterval")} />
+          </FormControl>
+        )*/}
+
+        <Button onClick={upsertSpec} variant="contained">
+          Save Changes
+        </Button>
+      </FormControl>
+    </Box>
+  );
+}