Update scopes tree dynamically

This patch adds a javascript function to update the scope tree (on/off)
state.

This javacript function is called every second, does a call to the
new backend endpoint `/scopes/status` and updates the tree classes
depending on the current data.

The new `/scopes/status` endpoint just returns the scopes tree as json.

This patch also adds an icon in the tree leafs, a filled green circle
when the state is `on`, and a empty red circle when the state is `off`.

There's also a new javascript function to unfold all collapses in the
scope tree.

1 files changed, 54 insertions, 0 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
new file mode 100644
index 0000000..ab06dfc
--- /dev/null
+++ b/ogcp/static/js/ogcp.js
@@ -0,0 +1,54 @@
+const Endpoint = '/scopes/status';
+const Interval = 1000;
+let updateTimeoutId = null;
+
+function updateScopeState() {
+    if (updateTimeoutId) {
+        clearTimeout(updateTimeoutId);
+    }
+
+    updateTimeoutId = setTimeout(() => {
+        updateTimeoutId = null;
+        fetch(Endpoint)
+            .then(response => response.json())
+            .then((data) => {
+                updateScopes(data.scope);
+            })
+            .catch((error) => { console.error(error); })
+            .finally(() => {
+                updateScopeState();
+            });
+    }, Interval);
+}
+
+function updateScopes(scopes) {
+    scopes.forEach((scope) => {
+        if (scope.state) {
+            const scopeId = `${scope.name}_${scope.id}`;
+            const scopeEl = document.querySelector(`#${scopeId}`);
+            const stateCls = ['state--on', 'state--off'];
+            scopeEl.classList.remove(...stateCls);
+            const stateClass = `state--${scope.state}`;
+            scopeEl.classList.add(stateClass);
+
+            const iconEl = document.querySelector(`#${scopeId} .nav-icon`);
+            const iconCls = ['fas', 'far', 'text-danger', 'text-success'];
+            iconEl.classList.remove(...iconCls);
+            let newIconCls = [];
+            if (scope.state === 'on') {
+                newIconCls.push('fas', 'text-success');
+            } else {
+                newIconCls.push('far', 'text-danger');
+            }
+            iconEl.classList.add(...newIconCls);
+        }
+        if (scope.scope) {
+            // This is a level so we should update all childs
+            updateScopes(scope.scope);
+        }
+    });
+}
+
+function unfoldAll() {
+    $('#scopes .collapse').collapse('show');
+}