From b7e4f47f5cca21a2f7f04b6bd6a87873b5cef853 Mon Sep 17 00:00:00 2001
From: Javier Sánchez Parra <jsanchez@soleta.eu>
Date: Mon, 24 Jan 2022 16:21:38 +0100
Subject: Keep scopes tree state

Otherwise, users have to expand the scopes tree every time they switch
view.

This commit adds two hooks to capture when an element of the tree is
shown or is hidden[1]. When they are shown, ogcp (front-end) stores them
in browser's local storage[2]. When they are hidden, ogcp removes them
from local storage.

Every time users load a page with the scopes tree, ogcp checks local
storage to restore the scopes tree state.

Store and remove functions use stopPropagation() to prevent ancestors of
clicked elements to also be stored or removed from local storage.[3]

1. https://getbootstrap.com/docs/4.1/components/collapse/#events
2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
3. https://javascript.info/bubbling-and-capturing
---
 ogcp/static/js/ogcp.js     | 19 +++++++++++++++++++
 ogcp/templates/macros.html |  1 +
 2 files changed, 20 insertions(+)

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 8a538ca..c6dbdf0 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -2,6 +2,25 @@ const Endpoint = '/scopes/status';
 const Interval = 1000;
 let updateTimeoutId = null;
 
+function keepScopesTreeState() {
+    const scopes_tree = $('#scopes .collapse')
+
+    scopes_tree.on('hidden.bs.collapse', function (event) {
+        event.stopPropagation();
+        localStorage.removeItem(this.id);
+    });
+    scopes_tree.on('shown.bs.collapse', function (event) {
+        event.stopPropagation();
+        localStorage.setItem(this.id, 'show');
+    });
+
+    scopes_tree.each(function () {
+        if (localStorage.getItem(this.id) == 'show') {
+            $(this).collapse('show');
+        }
+    });
+}
+
 function updateScopeState() {
     if (updateTimeoutId) {
         clearTimeout(updateTimeoutId);
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 4ae5982..dd26818 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -9,6 +9,7 @@
     document.addEventListener('readystatechange', () => {
         if (document.readyState === 'complete') {
             updateScopeState();
+            keepScopesTreeState();
         }
     });
 </script>
-- 
cgit v1.2.3-18-g5258