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

2 files changed, 20 insertions, 0 deletions

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>