#477 DrawTool - Filter state management (#478)

NASA-AMMOS · Dec 19, 2023 · 7bfaf79 · 7bfaf79
1 parent 05612bd
commit 7bfaf79
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 29 deletions.
diff --git a/config/css/config.css b/config/css/config.css
@@ -477,6 +477,10 @@ textarea {
   margin: 0;
 }
 
+.l_title {
+  text-transform: none;
+}
+
 [type="radio"]:checked + label:after,
 [type="radio"].with-gap:checked + label:after {
   background-color: #1565c0;

diff --git a/docs/pages/Tools/Draw/Draw.md b/docs/pages/Tools/Draw/Draw.md
@@ -33,7 +33,11 @@ There are five files that are group editable with the correct permission. The gr
         "plan2",
         "done"
     ],
-    "hoverLengthOnLines": false
+    "hoverLengthOnLines": false,
+    "defaultDrawClipping": "over || under || off",
+    "defaultPublicFilter": false,
+    "defaultYoursOnlyFilter": true,
+    "defaultOnFilter": false,
     "leadsCanEditFileInfo": false,
     "templates": {
         "example_1": [
@@ -111,6 +115,10 @@ There are five files that are group editable with the correct permission. The gr
 _"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.
+_"defaultDrawClipping"_: Default clipping mode for drawing: "over || under || off".
+_"defaultPublicFilter"_: When the DrawTool first opens, filter the file list down to only public files or not. default: false
+_"defaultYoursOnlyFilter"_: When the DrawTool first opens, filter the file list down to only files you own or not. default: true.
+_"defaultOnFilter"_: When the DrawTool first opens, filter the file list down to only files that are on or not. default: false.
 _"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.
 

diff --git a/src/essence/Tools/Draw/DrawTool.js b/src/essence/Tools/Draw/DrawTool.js
@@ -155,7 +155,7 @@ var markup = [
                 "</div>",
                 "<div id='drawToolDrawSortDiv'>",
                     "<div type='public' title='Public Only'><i class='mdi mdi-shield-outline mdi-14px'></i></div>",
-                    "<div type='owned' title='Yours Only' class='active'><i class='mdi mdi-account mdi-18px'></i></div>",
+                    "<div type='owned' title='Yours Only'><i class='mdi mdi-account mdi-18px'></i></div>",
                     "<div type='on' title='On Only'><i class='mdi mdi-eye mdi-18px'></i></div>",
                 "</div>",
             "</div>",
@@ -226,7 +226,7 @@ var markup = [
             "<div id='drawToolShapes_filtering'>",
                 "<div id='drawToolShapes_filtering_header'>",
                     "<div id='drawToolShapes_filtering_title_left'>",
-                        "<div id='drawToolShapes_filtering_title'>Filter</div>",
+                        "<div id='drawToolShapes_filtering_title'>Advanced Filter</div>",
                     "</div>",
                     "<div id='drawToolShapes_filtering_adds'>",
                         "<div id='drawToolShapes_filtering_add_value' class='mmgisButton5' title='Add New Key-Value Filter'><div>Add</div><i class='mdi mdi-plus mdi-18px'></i></div>",
@@ -513,13 +513,30 @@ var DrawTool = {
 
         //Turn on files from url
         if (L_.FUTURES.tools) {
-            for (var t of L_.FUTURES.tools) {
-                var tUrl = t.split('$')
+            for (let t of L_.FUTURES.tools) {
+                const tUrl = t.split('$')
                 if (tUrl[0] == 'DrawTool') {
-                    var fileIds = tUrl[1].split('.')
-                    for (var f of fileIds) {
+                    const tUrl2 = tUrl[1].split('-')
+                    //fileson
+                    const fileIds = tUrl2[0].split('.')
+                    for (let f of fileIds) {
                         this.toggleFile(parseInt(f))
                     }
+
+                    // default filters
+                    const filtersOn = tUrl2[1]
+                    if (filtersOn != null) {
+                        window._toolStates = window._toolStates || {}
+                        window._toolStates.draw = window._toolStates.draw || {}
+                        window._toolStates.draw.filter =
+                            window._toolStates.draw.filter || {}
+
+                        window._toolStates.draw.filter.public =
+                            filtersOn[0] == '1'
+                        window._toolStates.draw.filter.owned =
+                            filtersOn[1] == '1'
+                        window._toolStates.draw.filter.on = filtersOn[2] == '1'
+                    }
                     break
                 }
             }
@@ -763,7 +780,26 @@ var DrawTool = {
         }
     },
     getUrlString: function () {
-        return this.filesOn.toString().replace(/,/g, '.')
+        // Structure is fileOnId.fileOnId.fileOnId,filtersOnBinary
+        const publicFilterOn = $(
+            `#drawToolDrawSortDiv > [type="public"]`
+        ).hasClass('active')
+            ? 1
+            : 0
+        const yoursOnlyFilterOn = $(
+            `#drawToolDrawSortDiv > [type="owned"]`
+        ).hasClass('active')
+            ? 1
+            : 0
+        const onFilterOn = $(`#drawToolDrawSortDiv > [type="on"]`).hasClass(
+            'active'
+        )
+            ? 1
+            : 0
+        return (
+            this.filesOn.toString().replace(/,/g, '.') +
+            `-${publicFilterOn}${yoursOnlyFilterOn}${onFilterOn}`
+        )
     },
     showContent: function (type) {
         //Go to back to latest history after leaving history
@@ -806,6 +842,7 @@ var DrawTool = {
                 DrawTool.endDrawing()
                 DrawTool.populateShapes()
                 $('#drawToolShapes').css('display', 'flex')
+                DrawTool.setSubmitButtonState(true)
                 break
             case 'history':
                 $('.drawToolContextMenuHeaderClose').click()
@@ -1308,6 +1345,7 @@ var DrawTool = {
     },
     timeFilterDrawingLayer(fileId) {
         if (L_.layers.layer[`DrawTool_${fileId}`]) {
+            DrawTool.setSubmitButtonState(true)
             const file = DrawTool.getFileObjectWithId(fileId)
 
             let startField
@@ -1332,10 +1370,13 @@ var DrawTool = {
                                         startField,
                                         endField
                                     )
+
                                 if (l2.savedOptions == null)
-                                    l2.savedOptions = JSON.parse(
-                                        JSON.stringify(l2.options)
-                                    )
+                                    l2.savedOptions = {
+                                        opacity: l2.options.opacity,
+                                        fillOpacity: l2.options.fillOpacity,
+                                    }
+
                                 l2.temporallyHidden = !isVisible
                                 if (l2.temporallyHidden)
                                     $(
@@ -1371,7 +1412,10 @@ var DrawTool = {
                         endField
                     )
                     if (l.savedOptions == null)
-                        l.savedOptions = JSON.parse(JSON.stringify(l.options))
+                        l.savedOptions = {
+                            opacity: l.options.opacity,
+                            fillOpacity: l.options.fillOpacity,
+                        }
 
                     l.temporallyHidden = !isVisible
                     if (l.temporallyHidden)
@@ -1421,6 +1465,28 @@ function interfaceWithMMGIS() {
     //Add the markup to tools or do it manually
     tools.html(markup)
 
+    // Set default Public filter state
+    if (window._toolStates?.draw?.filter?.public != null) {
+        if (window._toolStates.draw.filter.public === true)
+            $(`#drawToolDrawSortDiv > [type="public"]`).addClass('active')
+    } else if (DrawTool.vars.defaultPublicFilter === true) {
+        $(`#drawToolDrawSortDiv > [type="public"]`).addClass('active')
+    }
+    // Set default Yours Only filter state
+    if (window._toolStates?.draw?.filter?.owned != null) {
+        if (window._toolStates.draw.filter.owned === true)
+            $(`#drawToolDrawSortDiv > [type="owned"]`).addClass('active')
+    } else if (DrawTool.vars.defaultYoursOnlyFilter !== false) {
+        $(`#drawToolDrawSortDiv > [type="owned"]`).addClass('active')
+    }
+    // Set default On filter state
+    if (window._toolStates?.draw?.filter?.on != null) {
+        if (window._toolStates.draw.filter.on === true)
+            $(`#drawToolDrawSortDiv > [type="on"]`).addClass('active')
+    } else if (DrawTool.vars.defaultOnFilter === true) {
+        $(`#drawToolDrawSortDiv > [type="on"]`).addClass('active')
+    }
+
     // Set defaultDrawClipping if any
     $(
         `#drawToolDrawSettingsTier > [value="${

diff --git a/src/essence/Tools/Draw/DrawTool_Files.js b/src/essence/Tools/Draw/DrawTool_Files.js
@@ -190,8 +190,15 @@ var Files = {
         $('#drawToolDrawSortDiv > div').off('click')
         $('#drawToolDrawSortDiv > div').on('click', function (e) {
             $(this).toggleClass('active')
+            window._toolStates = window._toolStates || {}
+            window._toolStates.draw = window._toolStates.draw || {}
+            window._toolStates.draw.filter =
+                window._toolStates.draw.filter || {}
+            window._toolStates.draw.filter[$(this).attr('type')] =
+                $(this).hasClass('active')
             fileFilter()
         })
+
         $('#drawToolDrawFilter').off('keydown')
         $('#drawToolDrawFilter').on('keydown', function (e) {
             if (e.which === 13)

diff --git a/src/essence/Tools/Draw/DrawTool_Shapes.css b/src/essence/Tools/Draw/DrawTool_Shapes.css
@@ -1,4 +1,3 @@
-
 #drawToolShapesCopyDiv {
     background: var(--color-a);
     display: flex;
@@ -68,7 +67,6 @@
     transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
 
-
 #drawToolShapesFilterDiv {
     background: var(--color-a);
     display: flex;
@@ -93,7 +91,7 @@
     background: var(--color-a1);
     height: 30px;
     cursor: pointer;
-    transition: color 0.2s ease-in-out
+    transition: color 0.2s ease-in-out;
 }
 
 #drawToolShapesFilterAdvanced > i,
@@ -108,7 +106,9 @@
 #drawToolShapesFilterClear:hover > i {
     color: var(--color-a7) !important;
 }
-
+#drawToolShapesFilterAdvanced {
+    border-right: 1px solid var(--color-a-5);
+}
 #drawToolShapesFilterAdvanced.on {
     background: var(--color-a2) !important;
 }
@@ -136,10 +136,8 @@
     max-height: 50vh;
 }
 
-
-
 #drawToolShapes {
-    height: 100%; 
+    height: 100%;
     display: flex;
     flex-flow: column;
 }
@@ -227,7 +225,6 @@
     text-align: center;
 }
 
-
 /*Filter*/
 #drawToolShapes_filtering {
     background: var(--color-a2);
@@ -248,9 +245,10 @@
     display: flex;
 }
 #drawToolShapes_filtering_title {
-    font-size: 16px;
-    padding-left: 14px;
+    font-size: 14px;
+    padding-left: 8px;
     line-height: 31px;
+    color: var(--color-a6);
 }
 #drawToolShapes_filtering_count {
     font-size: 12px;
@@ -292,7 +290,6 @@
     color: #fff;
 }
 
-
 #drawToolShapes_filtering_footer {
     display: flex;
     justify-content: space-between;
@@ -389,13 +386,15 @@
     width: 22px;
 }
 #drawToolShapes_filtering_clear {
-    padding: 0px 14px;
+    padding: 0px 8px;
+    font-size: 13px;
 }
 #drawToolShapes_filtering_clear:hover {
     background: var(--color-red2);
 }
 #drawToolShapes_filtering_submit {
     padding: 0px 8px;
+    font-size: 13px;
     transition: background 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 #drawToolShapes_filtering_submit.active {

diff --git a/src/essence/Tools/Draw/DrawTool_Shapes.js b/src/essence/Tools/Draw/DrawTool_Shapes.js
@@ -15,6 +15,7 @@ var Shapes = {
         DrawTool = tool
         DrawTool.populateShapes = Shapes.populateShapes
         DrawTool.updateCopyTo = Shapes.updateCopyTo
+        DrawTool.setSubmitButtonState = Shapes.setSubmitButtonState
     },
     populateShapes: function (fileId, selectedFeatureIds) {
         //If we get an array of fileIds, split them
@@ -103,10 +104,9 @@ var Shapes = {
         $('#drawToolShapesFilterAdvanced').on('click', function () {
             $('#drawToolShapesFilterAdvanced').toggleClass('on')
             $('#drawToolShapesFilterAdvancedDiv').toggleClass('on')
-            if ($('#drawToolShapesFilterAdvancedDiv').hasClass('on'))
-                $('#drawToolDrawShapesList').css('height', 'calc(100% - 265px)')
-            else $('#drawToolDrawShapesList').css('height', 'calc(100% - 65px)')
-            //shapeFilter()
+            if (!$('#drawToolShapesFilterAdvanced').hasClass('on')) {
+                $(`#drawToolShapes_filtering_clear`).click()
+            }
         })
         $('#drawToolShapesFilterClear').off('click')
         $('#drawToolShapesFilterClear').on('click', function () {
@@ -901,6 +901,7 @@ var Shapes = {
         $(`#drawToolShapes_filtering_clear`).off('click')
         $(`#drawToolShapes_filtering_clear`).on('click', async () => {
             $(`#drawToolShapes_filtering_submit_loading`).addClass('active')
+            Shapes.setSubmitButtonState(true)
 
             // Clear value filter elements
             Shapes.filters.values = Shapes.filters.values.filter((v) => {
@@ -910,7 +911,6 @@ var Shapes = {
 
             $(`.drawToolContextMenuHeaderClose`).click()
             fileIds.forEach((fileId) => {
-                console.log(Shapes.filters)
                 // Refilter to show all
                 const filter = {
                     values: JSON.parse(JSON.stringify(Shapes.filters.values)),

diff --git a/src/essence/Tools/Draw/config.json b/src/essence/Tools/Draw/config.json
@@ -13,6 +13,9 @@
                 "All_Alias"
             ],
             "defaultDrawClipping": "over || under || off",
+            "defaultPublicFilter": false,
+            "defaultYoursOnlyFilter": true,
+            "defaultOnFilter": false,
             "leadsCanEditFileInfo": false,
             "hoverLengthOnLines": false,
             "templates": {