templates: save checkbox state in images and repos

Store the checked checkboxes of the sidebar in Images and Repos.
Autoselect the correct server after updating the checkboxes.

4 files changed, 24 insertions, 43 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index f70f77c..96bf3d9 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -298,41 +298,6 @@ function updateScopes(scopes) {
     return hasLiveChildren;
 }
 
-function checkImageServer() {
-    const images = $('input:checkbox[form|="imagesForm"][name!="image-server"]')
-
-    images.on('change', function() {
-        const selectedServer = $('#' + $.escapeSelector(this.dataset.server));
-        const serversSelector = 'input:checkbox[name|="image-server"]';
-        const nonSelectedServers = $(serversSelector).not(selectedServer);
-
-        selectedServer.prop('checked', true);
-
-        nonSelectedServers.each(function() {
-            $(this).prop('checked', false);
-            const checkboxes = $('input:checkbox[data-server|="' + this.id + '"]');
-            checkboxes.prop('checked', false);
-        });
-    });
-}
-
-function checkRepoServer() {
-    const repos = $('input:checkbox[form|="reposForm"][name!="repos-server"]')
-    repos.on('change', function() {
-        const selectedServer = $('#' + $.escapeSelector(this.dataset.server));
-        const serversSelector = 'input:checkbox[name|="repos-server"]';
-        const nonSelectedServers = $(serversSelector).not(selectedServer);
-
-        selectedServer.prop('checked', true);
-
-        nonSelectedServers.each(function() {
-            $(this).prop('checked', false);
-            const checkboxes = $('input:checkbox[data-server|="' + this.id + '"]');
-            checkboxes.prop('checked', false);
-        });
-    });
-}
-
 function checkFolderParent(context) {
     const folder = $('#sidebar input:checkbox[name="folder"]')
     folder.on('change', function() {
@@ -362,7 +327,7 @@ function limitCheckboxes(context) {
             }
         });
 
-        checkScopeServer();
+        checkCheckbox('scope-server');
 
         checkboxes.each(function() {
             storeCheckboxStatus(this, context);
@@ -371,9 +336,9 @@ function limitCheckboxes(context) {
     });
 }
 
-function checkScopeServer() {
-    const servers = $('#sidebar input:checkbox[name="scope-server"]');
-    servers.each(function() {
+function checkCheckbox(inputName) {
+    const checkboxes = $('#sidebar input:checkbox[name="' + inputName + '"]');
+    checkboxes.each(function() {
         const checkbox = this;
         const checkboxChildren = $('input:checkbox', this.parentNode).not(this);
         if (checkboxChildren.length == 0) return;
@@ -382,3 +347,15 @@ function checkScopeServer() {
         checkbox.checked = checkedChildren.length > 0;
     });
 }
+
+function checkOnChange(inputName) {
+    const checkboxes = $('#sidebar input:checkbox')
+
+    checkboxes.on('change', function (event) {
+        checkCheckbox(inputName);
+    });
+
+    checkboxes.each(function () {
+        checkCheckbox(inputName)
+    });
+}
diff --git a/ogcp/templates/base.html b/ogcp/templates/base.html
index 9c6b3e1..f245c8d 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=20"></script>
+    <script src="{{ url_for('static', filename='js/ogcp.js') }}?v=21"></script>
 
     <script>
         // error messages
diff --git a/ogcp/templates/images.html b/ogcp/templates/images.html
index 34d8a87..7a16a0d 100644
--- a/ogcp/templates/images.html
+++ b/ogcp/templates/images.html
@@ -15,7 +15,8 @@
     document.addEventListener('readystatechange', () => {
         if (document.readyState === 'complete') {
             keepTreeState('#servers');
-            checkImageServer();
+            keepSelectedClients('images');
+            checkOnChange('image-server');
         }
     });
 </script>
@@ -45,7 +46,8 @@
                                     <input class="form-check-input" type="checkbox" form="imagesForm"
                                         data-server="{{ server_str }}" value="{{ image["id"] }}"
                                         {% if image.get("selected", False) %}checked{% endif %}
-                                        name="{{ image["name"] }}_{{ image["id"] }}" />
+                                        name="{{ image["name"] }}_{{ image["id"] }}"
+                                        id="image{{ image["id"] }}"/>
                                      {{ image["name"] }}
                                 </li>
                             {% endfor %}
diff --git a/ogcp/templates/repos.html b/ogcp/templates/repos.html
index 9f15391..2f5fe1b 100644
--- a/ogcp/templates/repos.html
+++ b/ogcp/templates/repos.html
@@ -27,6 +27,7 @@
                 {% for r in repos_list %}
                 <li class="nav-item">
                     <input class="form-check-input" type="checkbox" form="reposForm"
+                           id="repo{{ r["id"] }}"
                            data-server="{{server_ip_port}}"
                            value="{{ r["id"] }}"
                            name="{{ r["name"]~_~r["id"] }}" />
@@ -43,7 +44,8 @@
         document.addEventListener('readystatechange', () => {
             if (document.readyState === 'complete') {
                 keepTreeState('#repos-list')
-                checkRepoServer()
+                keepSelectedClients('repos');
+                checkOnChange('repos-server');
             }
         });
     </script>