#352 Update Modal for templating

API/Backend/Draw/routes/files.js

@@ -425,6 +425,11 @@ router.post("/change", function (req, res, next) {
   ) {
     toUpdateTo.public = req.body.public;
   }
+  if (req.body.hasOwnProperty("template") && req.body.template != null) {
+    try {
+      toUpdateTo.template = JSON.parse(req.body.template);
+    } catch (err) {}
+  }
 
   let updateObj = {
     where: {

docs/pages/Tools/Draw/Draw.md

@@ -34,18 +34,84 @@ There are five files that are group editable with the correct permission. The gr
         "done"
     ],
     "hoverLengthOnLines": false
-    "leadsCanEditFileInfo": false
+    "leadsCanEditFileInfo": false,
+    "templates": {
+        "example_1": [
+            {
+                "type": "slider",
+                "field": "a",
+                "min": 0,
+                "max": 100,
+                "step": 1,
+                "default": 0
+            },
+            {
+                "type": "number",
+                "field": "b",
+                "min": 0,
+                "max": 100,
+                "step": 1,
+                "required": true,
+                "default": 3
+            },
+            {
+                "type": "text",
+                "field": "c",
+                "minLength": 2,
+                "maxLength": 4,
+                "required": true,
+                "regex": null,
+                "default": null
+            },
+            {
+                "type": "textarea",
+                "field": "d",
+                "maxLength": 10,
+                "required": true,
+                "default": "hi"
+            },
+            {
+                "type": "checkbox",
+                "field": "e",
+                "default": true
+            },
+            {
+                "type": "dropdown",
+                "field": "f",
+                "items": [
+                    "Yes",
+                    "No",
+                    "Maybe"
+                ],
+                "default": "No"
+            },
+            {
+                "type": "date",
+                "field": "g",
+                "format": "HH:mm:ss",
+                "default": "now"
+            }
+        ],
+        "example_2": [
+            {
+                "type": "checkbox",
+                "field": "h",
+                "default": false
+            }
+        ]
+    }
 }
 ```
 
 _"intents"_: The names in quotes will be the group file names.  
 _"preferredTags"_: Users can attach tags or keyword to files to organize them. Preferred Tags are curated tags and promoted over user generated ones.  
 _"hoverLengthOnLines"_: If true, the hover text for line features will include the total length of the line in meters.
 _"leadsCanEditFileInfo"_: If true, lead roles can edit the file info, (name, description, tags, folder, make private) of any user's public file.
+_"templates"_: Templates create forms for feature properties. For instance, all features in a given draw file could, in the feature's edit panel, have the field "Reviewed" be togglable via a checkbox. Users may make their own templates too but the ones configured here are promoted and cannot be delete.
 
 ## Tool Use
 
-The Draw Tool has three panels: one for making files and controlling the intial feature creation, another for editing features and their properties, and lastly a panel for controlling the edit history. You can navigate between the panels by clicking on the icons at the top: Pencil icon (default) for panel 1, Shapes icon for panel 2, and Clock icon for panel 3.
+The Draw Tool has three panels: one for making files and controlling the initial feature creation, another for editing features and their properties, and lastly a panel for controlling the edit history. You can navigate between the panels by clicking on the icons at the top: Pencil icon (default) for panel 1, Shapes icon for panel 2, and Clock icon for panel 3.
 
 ### Panels
 
@@ -59,7 +125,7 @@ This panel creates files, manages them, and is where you initially make features
 
 #### Panel 2
 
-The shapes panel shows all the currently drawn features is a list. It serves as a quick way to view, select (and group select with CTRL and SHIFT) and navigate to the cooresponding features on the map. The bottom section allows users to copy selected features to other files.
+The shapes panel shows all the currently drawn features is a list. It serves as a quick way to view, select (and group select with CTRL and SHIFT) and navigate to the corresponding features on the map. The bottom section allows users to copy selected features to other files.
 
 #### Panel 3
 

docs/pages/Tools/Identifier/Identifier.md

@@ -7,7 +7,7 @@ parent: Tools
 
 # Identifier
 
-Mouse over to query underlying datasets. This will read the raw values from a georeferenced dataset, which can be any bitdepth (8,16,32). You can set up multiple file to return values from.
+Mouse over to query underlying datasets. This will read the raw values from a geo-referenced dataset, which can be any bit-depth (8,16,32). You can set up multiple file to return values from.
 
 ### Raw Variables
 

src/essence/Ancillary/Modal.css

@@ -1,4 +1,4 @@
-#mmgisModal {
+.mmgisModal {
     overflow: auto;
     position: fixed;
     top: 0;

src/essence/Ancillary/Modal.js

@@ -9,56 +9,69 @@ import $ from 'jquery'
 import './Modal.css'
 
 const Modal = {
-    _onRemoveCallback: null,
-    set: function (html, onAddCallback, onRemoveCallback) {
-        if ($('#mmgisModal')) $('#mmgisModal').remove()
+    _onRemoveCallback: {},
+    _activeModalIds: {},
+    set: function (html, onAddCallback, onRemoveCallback, modalId) {
+        modalId = modalId || 0
+        Modal._activeModalIds[modalId] = true
+        const id = `mmgisModal_${modalId}`
+        const elmId = `#${id}`
+        if ($(elmId)) $(elmId).remove()
         // prettier-ignore
         $('body').append([
-            "<div id='mmgisModal'>",
+            `<div id='${id}' class='mmgisModal dontCloseWhenClicked'>`,
                 "<div id='mmgisModalClose'><i class='mdi mdi-close mdi-24px'></i></div>",
                 "<div id='mmgisModalInner'>",
                 html,
                 "</div>",
             "</div>"
         ].join('\n'))
 
-        if (typeof onAddCallback === 'function') onAddCallback('mmgisModal')
+        if (typeof onAddCallback === 'function') onAddCallback(id)
 
-        $('#mmgisModal').on('click', function () {
-            Modal.remove()
-        })
-        $('#mmgisModalInner').on('click', function (e) {
-            e.stopPropagation()
+        $(elmId).on('click', (e) => {
+            if (!$(e.target).parents().hasClass('dontCloseWhenClicked'))
+                Modal.remove(false, modalId)
         })
 
-        $('#main-container').css({ filter: 'blur(3px)' })
-        $('#mmgisModal').animate(
+        $('#main-container').css({
+            filter: `blur(${3 * Object.keys(Modal._activeModalIds).length}px)`,
+        })
+        $(elmId).animate(
             {
                 opacity: 1,
             },
             500
         )
 
         if (typeof onRemoveCallback === 'function')
-            Modal._onRemoveCallback = onRemoveCallback
-        else Modal._onRemoveCallback = null
+            Modal._onRemoveCallback[modalId] = onRemoveCallback
+        else Modal._onRemoveCallback[modalId] = null
     },
     //Remove everything CursorInfo created
-    remove: function (isImmediate) {
+    remove: function (isImmediate, modalId) {
+        modalId = modalId || 0
+        const elmId = `#mmgisModal_${modalId}`
         const time = isImmediate ? 0 : 500
 
-        if (typeof Modal._onRemoveCallback === 'function')
-            Modal._onRemoveCallback()
-        Modal._onRemoveCallback = null
+        if (typeof Modal._onRemoveCallback[modalId] === 'function')
+            Modal._onRemoveCallback[modalId]()
+        Modal._onRemoveCallback[modalId] = null
 
-        $('#main-container').css({ filter: 'blur(0px)' })
-        $('#mmgisModal').animate(
+        $('#main-container').css({
+            filter: `blur(${
+                3 * (Object.keys(Modal._activeModalIds).length - 1)
+            }px)`,
+        })
+        $(elmId).animate(
             {
                 opacity: 0,
             },
             time,
             function () {
-                $('#mmgisModal').remove()
+                $(elmId).remove()
+
+                delete Modal._activeModalIds[modalId]
             }
         )
     },

src/external/Dropy/dropy.css

@@ -127,7 +127,7 @@ dd {
 }
 
 .dropy.open .dropy__content ul {
-    max-height: 18.75em;
+    max-height: 20em;
     overflow-y: auto;
     opacity: 1;
 }