Add scopes_tree_collapse macro

Being able to collapse the scopes tree allows to fit a bigger scopes
tree.

A new macro is introduced to generate the HTML code for the scope tree
in such a way that each non-leaf level (center, room) are collapsible.

	macros.scopes_tree_collapse(scopes)

As of now, the state of the scope tree is not saved when changing nav
sections.

4 files changed, 45 insertions, 2 deletions

diff --git a/ogcp/static/css/soleta.css b/ogcp/static/css/soleta.css
index ca49897..d17674c 100644
--- a/ogcp/static/css/soleta.css
+++ b/ogcp/static/css/soleta.css
@@ -14,3 +14,17 @@ html, body {
 .toast {
     margin: 10px;
 }
+
+.nav {
+  position: relative;
+}
+
+.nav-item {
+  padding-left: 20px;
+  position: relative;
+}
+
+.nav-link {
+  padding: 0;
+}
+
diff --git a/ogcp/templates/commands.html b/ogcp/templates/commands.html
index 27af1b1..1e7dc84 100644
--- a/ogcp/templates/commands.html
+++ b/ogcp/templates/commands.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block sidebar %}
-  {{ macros.print_scopes_tree(scopes["scope"]) }}
+  {{ macros.scopes_tree_collapse(scopes) }}
 {% endblock %}
 
 {% block commands %}
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 3bde877..60b26a7 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -18,3 +18,32 @@
 
 {% endmacro %}
 
+{% macro scopes_tree_collapse(scopes) -%}
+
+<ul class="nav flex-column nav-pills">
+  {{ scopes_tree_collapse_level(scopes["scope"], 1) }}
+</ul>
+
+{% endmacro %}
+
+{% macro scopes_tree_collapse_level(scopes, i) -%}
+{% for scope in scopes %}
+<li 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"]) }}"
+               {% if scope.get("selected", False) %}checked{% endif %}
+               name="{{ scope["name"] }}_{{ scope["id"] }}" />
+    {% endif %}
+    <a class="nav-link {% if not scope["scope"] %}disabled{% endif %}" href="#level{{i}}-{{loop.index}}"
+                       {% if scope["scope"] %}data-toggle="collapse"{% endif %}>
+      {{ scope["name"] }}
+    </a>
+    {% if scope["scope"] %}
+      <ul class="nav flex-column collapse level{{i}}" id="level{{i}}-{{loop.index}}">
+          {{ scopes_tree_collapse_level(scope["scope"], i + 1) }}
+      </ul>
+    {% endif %}
+  </li>
+{% endfor %}
+{% endmacro %}
diff --git a/ogcp/templates/scopes.html b/ogcp/templates/scopes.html
index 1d931bb..746acff 100644
--- a/ogcp/templates/scopes.html
+++ b/ogcp/templates/scopes.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block sidebar %}
-  {{ macros.print_scopes_tree(scopes["scope"]) }}
+  {{ macros.scopes_tree_collapse(scopes) }}
 {% endblock %}
 
 {% block commands %}