Changed Builder Format

src/views/jobs/builder/JobBuilder.jsx

@@ -0,0 +1,86 @@
+import React, { useContext, useState, useEffect } from "react";
+
+import StoreContext from "../../../ctx/StoreContext.jsx";
+
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import Toolbar from "@mui/material/Toolbar";
+import DialogTitle from "@mui/material/DialogTitle";
+
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import SpeedDial from "@mui/material/SpeedDial";
+import SpeedDialAction from "@mui/material/SpeedDialAction";
+import SpeedDialIcon from "@mui/material/SpeedDialIcon";
+
+import PageviewIcon from "@mui/icons-material/Pageview";
+import ViewColumnIcon from "@mui/icons-material/ViewColumn";
+import ViewCarouselIcon from "@mui/icons-material/ViewCarousel";
+
+export default function JobBuilder(props) {
+  const { state: store, updateStore } = useContext(StoreContext);
+
+  const [quickOpen, setQuickOpen] = useState(false);
+  const [jobDialogOpen, setJobDialogOpen] = useState(false);
+
+  const quickOpenClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!store.simplifiedControls) return setQuickOpen(!quickOpen);
+    setJobDialogOpen(true);
+  };
+
+  const quickOpenClose = () => setQuickOpen(false);
+  const handleClickOpen = () => setJobDialogOpen(true);
+
+  const [cache, setCache] = useState({});
+
+  const handleClose = (confirmed) => () => {
+    setJobDialogOpen(false);
+    if (!confirmed) return;
+    jobBuilder(cache);
+  };
+
+  // Pull info from url if possible?
+  const actions = [
+    { name: "Suite", icon: <ViewCarouselIcon /> },
+    { name: "Compound", icon: <ViewColumnIcon /> },
+    { name: "Manual", icon: <PageviewIcon /> },
+  ];
+
+  return (
+    <React.Fragment>
+      <Dialog open={jobDialogOpen} onClose={handleClose()} fullScreen>
+        <Toolbar />
+        <DialogTitle>New Job</DialogTitle>
+        <DialogContent></DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose()}>Cancel</Button>
+          <Button onClick={handleClose(true)} autoFocus>
+            Start
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      <ClickAwayListener onClickAway={quickOpenClose}>
+        <SpeedDial
+          ariaLabel="New Job"
+          sx={{ position: "fixed", bottom: 16, right: 16 }}
+          icon={<SpeedDialIcon />}
+          onClick={quickOpenClick}
+          open={quickOpen}
+        >
+          {actions.map((action) => (
+            <SpeedDialAction
+              key={action.name}
+              icon={action.icon}
+              tooltipTitle={action.name}
+              onClick={handleClickOpen}
+            />
+          ))}
+        </SpeedDial>
+      </ClickAwayListener>
+    </React.Fragment>
+  );
+}