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, 18 insertions, 2 deletions

diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 60b26a7..93c7380 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -20,15 +20,28 @@
 
 {% macro scopes_tree_collapse(scopes) -%}
 
-<ul class="nav flex-column nav-pills">
+<ul id="scopes" class="nav flex-column nav-pills">
   {{ scopes_tree_collapse_level(scopes["scope"], 1) }}
 </ul>
+<script>
+    // Launch the javascript on document ready, so all the global functions exists
+    // in the scope
+    document.addEventListener('readystatechange', () => {
+        if (document.readyState === 'complete') {
+            updateScopeState();
+            unfoldAll();
+        }
+    });
+</script>
 
 {% endmacro %}
 
 {% macro scopes_tree_collapse_level(scopes, i) -%}
 {% for scope in scopes %}
-<li class="nav-item {% if scope["state"] %}state--{{scope["state"] | lower}}{% endif %}">
+  <li
+    id="{{ scope["name"] }}_{{ scope["id"] }}"
+    class="nav-item {% if scope["state"] %}state--{{scope["state"] | lower}}{% endif %}"
+  >
     {% if " ".join(scope["ip"]) %}
         <input class="form-check-input" type="checkbox" form="scopesForm"
                value="{{ " ".join(scope["ip"]) }}"
@@ -37,6 +50,9 @@
     {% endif %}
     <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#level{{i}}-{{loop.index}}"
                        {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
+      {% if not scope["scope"] %}
+        <i class="nav-icon fa-circle {% if scope['state'] == 'on' %}fas text-success{% else %}far text-danger{% endif %}"></i>
+      {% endif %}
       {{ scope["name"] }}
     </a>
     {% if scope["scope"] %}