Can configure network autostart

virtweb_frontend/src/widgets/forms/ResAutostartInput.tsx

@@ -0,0 +1,73 @@
+import { Alert, CircularProgress, Typography } from "@mui/material";
+import { AsyncWidget } from "../AsyncWidget";
+import React from "react";
+import { CheckboxInput } from "./CheckboxInput";
+import { useAlert } from "../../hooks/providers/AlertDialogProvider";
+import { useSnackbar } from "../../hooks/providers/SnackbarProvider";
+
+export function ResAutostartInput(p: {
+  editable: boolean;
+  checkAutotostart: () => Promise<boolean>;
+  setAutotostart: (enable: boolean) => Promise<void>;
+  ressourceName: string;
+}): React.ReactElement {
+  const alert = useAlert();
+  const snackbar = useSnackbar();
+
+  const [enabled, setEnabled] = React.useState<boolean | undefined>();
+
+  const load = async () => {
+    setEnabled(await p.checkAutotostart());
+  };
+
+  const update = async (enabled: boolean) => {
+    try {
+      await p.setAutotostart(enabled);
+      snackbar(`Autostart status of ${p.ressourceName} successfully updated!`);
+      setEnabled(enabled);
+    } catch (e) {
+      console.error(e);
+      alert(`Failed to update autostart status of ${p.ressourceName}!`);
+    }
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={p.ressourceName}
+      load={load}
+      errMsg={`Failed to check autostart status of ${p.ressourceName}!`}
+      buildLoading={() => (
+        <Typography>
+          <CircularProgress size={"1rem"} /> Checking for autostart
+        </Typography>
+      )}
+      buildError={(e: string) => <Alert severity="error">{e}</Alert>}
+      build={() => (
+        <ResAutostartInputInner
+          editable={p.editable}
+          enabled={enabled!}
+          setEnabled={update}
+          resName={p.ressourceName}
+        />
+      )}
+    />
+  );
+}
+
+function ResAutostartInputInner(p: {
+  editable: boolean;
+  enabled: boolean;
+  setEnabled: (b: boolean) => void;
+  resName: string;
+}): React.ReactElement {
+  return (
+    <div>
+      <CheckboxInput
+        editable={p.editable}
+        checked={p.enabled}
+        label={`Autostart ${p.resName}`}
+        onValueChange={p.setEnabled}
+      />
+    </div>
+  );
+}