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.

1 files changed, 29 insertions, 0 deletions

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 %}