#464 Preview Modal

configure/public/index.html

@@ -9,6 +9,19 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <script>
+      var mmgisglobal = {};
+      mmgisglobal.SERVER = "node";
+      mmgisglobal.AUTH = "#{AUTH}";
+      mmgisglobal.SHOW_AUTH_TIMEOUT = true;
+      mmgisglobal.user = "#{user}";
+      mmgisglobal.NODE_ENV = "#{NODE_ENV}";
+      mmgisglobal.ROOT_PATH = "#{ROOT_PATH}";
+      mmgisglobal.WEBSOCKET_ROOT_PATH = "#{WEBSOCKET_ROOT_PATH}";
+      mmgisglobal.PORT = "#{PORT}";
+      mmgisglobal.ENABLE_CONFIG_WEBSOCKETS = "#{ENABLE_CONFIG_WEBSOCKETS}";
+      mmgisglobal.ENABLE_CONFIG_OVERRIDE = "#{ENABLE_CONFIG_OVERRIDE}";
+    </script>
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

configure/src/components/Main/Main.js

@@ -16,6 +16,8 @@ import ViewQuiltIcon from "@mui/icons-material/ViewQuilt";
 import { calls } from "../../core/calls";
 import { setConfiguration, setSnackBarText } from "../../core/ConfigureStore";
 
+import SaveBar from "../SaveBar/SaveBar";
+
 import Home from "../Tabs/Home/Home";
 import Layers from "../Tabs/Layers/Layers";
 import Tools from "../Tabs/Tools/Tools";
@@ -196,6 +198,7 @@ export default function Main() {
             </div>
           </div>
           <div className={c.tabPage}>{TabPage}</div>
+          <SaveBar />
         </>
       )}
     </div>

configure/src/components/SaveBar/Modals/PreviewModal/PreviewModal.js

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+
+import { calls } from "../../../../core/calls";
+
+import {
+  setMissions,
+  setModal,
+  setSnackBarText,
+} from "../../../../core/ConfigureStore";
+
+import Typography from "@mui/material/Typography";
+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 DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
+
+import CloseSharpIcon from "@mui/icons-material/CloseSharp";
+import PreviewIcon from "@mui/icons-material/Preview";
+
+import TextField from "@mui/material/TextField";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+
+import { makeStyles, useTheme } from "@mui/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+const useStyles = makeStyles((theme) => ({
+  Modal: {
+    [theme.breakpoints.down("xs")]: {
+      margin: "6px",
+    },
+    "& .MuiDialog-container": {
+      width: "100%",
+      transform: "translateX(-50%) translateY(-50%)",
+      left: "50%",
+      top: "50%",
+      position: "absolute",
+    },
+    "& .MuiPaper-root": {
+      margin: "0px",
+    },
+  },
+  contents: {
+    height: "100%",
+    width: "100%",
+    maxWidth: "calc(100vw - 32px) !important",
+    maxHeight: "calc(100vh - 32px) !important",
+  },
+  heading: {
+    height: theme.headHeights[2],
+    boxSizing: "border-box",
+    background: theme.palette.swatches.p[0],
+    padding: `4px ${theme.spacing(2)} 4px ${theme.spacing(4)} !important`,
+  },
+  title: {
+    padding: `8px 0px`,
+    fontSize: theme.typography.pxToRem(16),
+    fontWeight: "bold",
+    textTransform: "uppercase",
+  },
+  content: {
+    padding: "0px !important",
+    height: `calc(100vh - 32px)`,
+    background: theme.palette.swatches.grey[100],
+  },
+  closeIcon: {
+    padding: theme.spacing(1.5),
+    height: "100%",
+    margin: "4px 0px",
+  },
+  flexBetween: {
+    display: "flex",
+    justifyContent: "space-between",
+  },
+  backgroundIcon: {
+    margin: "7px 8px 0px 0px",
+  },
+}));
+
+function MMGIS(props) {
+  const { configuration } = props;
+
+  React.useEffect(() => {
+    const MMGISIframe = document.getElementById("MMGISIframe");
+    MMGISIframe.addEventListener("load", (e) => {
+      window.mmgisAPI = e.target.contentWindow.mmgisAPI;
+
+      window.mmgisAPI.onLoaded(() => {
+        window.mmgisAPI.setConfiguration(
+          JSON.parse(JSON.stringify(configuration))
+        );
+      });
+    });
+    MMGISIframe.src = `${
+      window.mmgisglobal.NODE_ENV === "development"
+        ? "http://localhost:8889"
+        : window.location.origin
+    }/?_preview=true`;
+  }, [configuration]);
+
+  return (
+    <div
+      className="MMGIS"
+      style={{
+        width: "100%",
+        height: "calc(100vh - 78px)",
+        overflow: "hidden",
+      }}
+    >
+      <iframe
+        title="MMGIS - Preview"
+        id="MMGISIframe"
+        allow="fullscreen"
+        style={{ width: "100%", height: "100%", border: "none" }}
+      ></iframe>
+    </div>
+  );
+}
+
+const MODAL_NAME = "preview";
+const PreviewModal = (props) => {
+  const {} = props;
+  const c = useStyles();
+
+  const modal = useSelector((state) => state.core.modal[MODAL_NAME]);
+  const configuration = useSelector((state) => state.core.configuration);
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const dispatch = useDispatch();
+
+  const handleClose = () => {
+    // close modal
+    dispatch(setModal({ name: MODAL_NAME, on: false }));
+  };
+
+  return (
+    <Dialog
+      className={c.Modal}
+      fullScreen={isMobile}
+      open={modal !== false}
+      onClose={handleClose}
+      aria-labelledby="responsive-dialog-title"
+      PaperProps={{
+        className: c.contents,
+      }}
+    >
+      <DialogTitle className={c.heading}>
+        <div className={c.flexBetween}>
+          <div className={c.flexBetween}>
+            <PreviewIcon className={c.backgroundIcon} />
+            <div className={c.title}>Previewing Changes</div>
+          </div>
+          <IconButton
+            className={c.closeIcon}
+            title="Close"
+            aria-label="close"
+            onClick={handleClose}
+          >
+            <CloseSharpIcon fontSize="inherit" />
+          </IconButton>
+        </div>
+      </DialogTitle>
+      <DialogContent className={c.content}>
+        <MMGIS configuration={configuration} />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PreviewModal;

configure/src/components/SaveBar/SaveBar.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import {} from "./SaveBarSlice";
+import { makeStyles } from "@mui/styles";
+
+import { calls } from "../../core/calls";
+import { setModal } from "../../core/ConfigureStore";
+
+import Button from "@mui/material/Button";
+
+import PreviewIcon from "@mui/icons-material/Preview";
+import SaveIcon from "@mui/icons-material/Save";
+
+import PreviewModal from "./Modals/PreviewModal/PreviewModal";
+
+const useStyles = makeStyles((theme) => ({
+  SaveBar: {
+    width: "100%",
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    height: "48px",
+    minHeight: "48px",
+    display: "flex",
+    justifyContent: "flex-end",
+  },
+  preview: {
+    margin: "8px !important",
+    height: "32px",
+    border: `1px solid ${theme.palette.swatches.grey[500]} !important`,
+    borderRadius: "3px !important",
+    background: `${theme.palette.swatches.grey[800]} !important`,
+  },
+  save: {
+    margin: "8px 24px 8px 8px !important",
+    height: "32px",
+    borderRadius: "3px !important",
+    background: `${theme.palette.swatches.p[11]} !important`,
+    color: "white !important",
+  },
+}));
+
+export default function SaveBar() {
+  const c = useStyles();
+
+  const dispatch = useDispatch();
+
+  return (
+    <>
+      <div className={c.SaveBar}>
+        <Button
+          className={c.preview}
+          variant="outlined"
+          startIcon={<PreviewIcon />}
+          onClick={() => {
+            dispatch(setModal({ name: "preview" }));
+          }}
+        >
+          Preview Changes
+        </Button>
+        <Button className={c.save} variant="contained" endIcon={<SaveIcon />}>
+          Save Changes
+        </Button>
+      </div>
+      <PreviewModal />
+    </>
+  );
+}

configure/src/components/SaveBar/SaveBarSlice.js

@@ -0,0 +1,12 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const SaveBarSlice = createSlice({
+  name: "SaveBar",
+  initialState: {},
+  reducers: {},
+});
+
+// Action creators are generated for each case reducer function
+export const {} = SaveBarSlice.actions;
+
+export default SaveBarSlice.reducer;

configure/src/components/Tabs/Coordinates/Coordinates.js

@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
 }));
 

configure/src/components/Tabs/Home/Home.js

@@ -14,6 +14,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
 }));
 

configure/src/components/Tabs/Layers/Layers.js

@@ -30,6 +30,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
   layersList: {
     width: "100%",

configure/src/components/Tabs/Time/Time.js

@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
 }));
 

configure/src/components/Tabs/Tools/Tools.js

@@ -23,6 +23,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
   card: {
     height: "300px",

configure/src/components/Tabs/UserInterface/UserInterface.js

@@ -13,6 +13,7 @@ const useStyles = makeStyles((theme) => ({
     width: "100%",
     display: "flex",
     background: theme.palette.swatches.grey[1000],
+    paddingBottom: "64px",
   },
 }));
 

configure/src/core/Configure.js

@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
   right: {
     height: "100%",
     flex: 1,
+    position: "relative",
   },
 }));
 

configure/src/core/ConfigureStore.js

@@ -11,6 +11,7 @@ export const ConfigureStore = createSlice({
       newMission: false,
       layer: false,
       tool: false,
+      preview: false,
     },
     snackBarText: false,
   },

src/essence/Basics/Layers_/Layers_.js

@@ -3182,7 +3182,11 @@ function parseConfig(configData, urlOnLayers) {
     L_.radius = L_.configData.msv.radius
     L_.masterdb = L_.configData.msv.masterdb || false
 
-    L_.tools = L_.configData.tools
+    // Remove tools that start have on: false (on null still allowed)
+    L_.tools = []
+    L_.configData.tools.forEach((t) => {
+        if (t.on !== false) L_.tools.push(t)
+    })
 
     L_.hasMap = L_.configData.panels.indexOf('map') > -1
     L_.hasMap = true //Should always have map;

src/essence/Basics/ToolController_/ToolController_.js

@@ -21,12 +21,7 @@ let ToolController_ = {
     activeBG: 'var(--color-i)',
     loaded: false,
     init: function (tools) {
-        // remove tools that start have on: false (on null still allowed)
-        const toolsOn = []
-        tools.forEach((t) => {
-            if (t.on !== false) toolsOn.push(t)
-        })
-        this.tools = toolsOn
+        this.tools = tools
 
         var mainDiv = d3
             .select('#toolbar')