src: revisit sidebar context storage approach

Maintain selections made in scope sidebar after clicking an action
(ie. client add, room delete, etc.)
Use ids instead of names as the name html property is the same for
every room and center.
Call keepSelectedClients() in macros.html for both Scope Management
and Commands instead of only in Commands.
Add a "context" value to the checkbox id to separate scope and
commands values in local storage.

3 files changed, 24 insertions, 19 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 17d3ca0..a0bbed1 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -52,11 +52,11 @@ function showSelectedClientsOnEvents() {
     });
 }
 
-function storeCheckboxStatus(checkbox) {
+function storeCheckboxStatus(checkbox, context) {
         if (checkbox.checked)
-            localStorage.setItem(checkbox.name, "check");
+            localStorage.setItem(context + checkbox.id, "check");
         else
-            localStorage.removeItem(checkbox.name);
+            localStorage.removeItem(context + checkbox.id);
 }
 
 function checkParentsCheckboxes() {
@@ -84,7 +84,7 @@ function checkParentsCheckboxes() {
     });
 }
 
-function checkChildrenCheckboxes() {
+function checkChildrenCheckboxes(context) {
     const checkboxes = $('input:checkbox[form|="scopesForm"]')
 
     checkboxes.on('change', function () {
@@ -98,7 +98,7 @@ function checkChildrenCheckboxes() {
                 others.prop('checked', false);
                 others.each(function() {
                     showSelectedClient(this);
-                    storeCheckboxStatus(this);
+                    storeCheckboxStatus(this, context);
                 });
                 //others.trigger('change');
             } else {
@@ -108,10 +108,10 @@ function checkChildrenCheckboxes() {
                 others.prop('checked', false).prop('indeterminate', false);
                 others.each(function() {
                     const checks = $(this).parent().find('input:checkbox').prop('checked', false);
-                    storeCheckboxStatus(this);
+                    storeCheckboxStatus(this, context);
                     checks.each(function() {
                         showSelectedClient(this);
-                        storeCheckboxStatus(this);
+                        storeCheckboxStatus(this, context);
                     });
                 });
             }
@@ -119,22 +119,22 @@ function checkChildrenCheckboxes() {
 
         children.each(function () {
             this.checked = checked;
-            storeCheckboxStatus(this);
+            storeCheckboxStatus(this, context);
             $(this).trigger('show-client');
         });
         checkParentsCheckboxes();
     });
 }
 
-function keepSelectedClients() {
+function keepSelectedClients(context) {
     const checkboxes = $('input:checkbox[form|="scopesForm"]')
 
     checkboxes.on('change', function (event) {
-            storeCheckboxStatus(this);
+            storeCheckboxStatus(this, context);
     });
 
     checkboxes.each(function () {
-        if (localStorage.getItem(this.name) == 'check') {
+        if (localStorage.getItem(context + this.id) == 'check') {
             this.checked = true;
             $(this).trigger('show-client');
         }
@@ -384,24 +384,28 @@ function checkRepoServer() {
     });
 }
 
-function checkFolderParent() {
+function checkFolderParent(context) {
     const folder = $('input:checkbox[form|="scopesForm"][name="folder"]')
     folder.on('change', function() {
         const folder_parent = $('#' + $.escapeSelector(this.dataset.parentInput));
         folder_parent.prop('checked', this.checked);
+        storeCheckboxStatus(folder_parent.get(0), context);
     });
 }
 
-function limitCheckboxes() {
+function limitCheckboxes(context) {
     const checkboxes = $('input:checkbox[form|="scopesForm"]');
 
     checkboxes.on('change', function () {
         const checked = this;
         checkboxes.filter((i, c) => c !== checked).prop('checked', false);
+
+        checkScopeServer();
+
         checkboxes.each(function() {
+            storeCheckboxStatus(this, context);
             showSelectedClient(this);
         });
-        checkScopeServer();
     });
 }
 
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index 0037f79..3ac4f5d 100644
--- a/ogcp/templates/base.html
+++ b/ogcp/templates/base.html
@@ -111,7 +111,7 @@
     <!-- ChartJS -->
     <script src="{{ url_for('static', filename='AdminLTE/plugins/chart.js/Chart.min.js') }}"></script>
 
-    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=6"></script>
+    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=7"></script>
 
     <script>
         // error messages
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 228c393..c6cd15e 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -11,14 +11,15 @@
             showSelectedClientsOnEvents();
             updateScopeState();
             keepScopesTreeState();
+            let context = {{ selection_mode | tojson | safe }};
             {% if selection_mode == 'commands' %}
-                keepSelectedClients();
-                checkChildrenCheckboxes();
+                checkChildrenCheckboxes(context);
                 checkParentsCheckboxes();
             {% elif selection_mode == 'scopes' %}
-                limitCheckboxes();
-                checkFolderParent();
+                limitCheckboxes(context);
+                checkFolderParent(context);
             {% endif %}
+            keepSelectedClients(context);
         }
     });
 </script>