From 886e6c7b67168441ea64ac04039c51264453fd77 Mon Sep 17 00:00:00 2001
From: Javier Sánchez Parra <jsanchez@soleta.eu>
Date: Tue, 22 Feb 2022 17:22:07 +0100
Subject: Show selected clients in container block

On scopes and commands views, draw clients as users selects them in the
scopes tree.

Trigger client drawing on two events:

1."change" event, occurs when the user clicks a client checkbox. This
  event is standard [1].

2. "show-client" event, fires when ogcp get selected clients from
   localStorage and when an user checks a parent checkbox. This event is
   custom.

Dot characters (".") in clients names are replaced by underscore("_")
when used as id to avoid errors.

1. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
---
 ogcp/templates/commands.html | 3 +++
 ogcp/templates/macros.html   | 5 +++++
 ogcp/templates/scopes.html   | 4 ++++
 3 files changed, 12 insertions(+)

(limited to 'ogcp/templates')

diff --git a/ogcp/templates/commands.html b/ogcp/templates/commands.html
index 1b51701..9fa8617 100644
--- a/ogcp/templates/commands.html
+++ b/ogcp/templates/commands.html
@@ -96,3 +96,6 @@
   </div>
 {% endblock %}
 
+{% block content %}
+  {{ macros.selected_clients() }}
+{% endblock %}
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index a1b5ebb..7864cd4 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -8,6 +8,7 @@
     // in the scope
     document.addEventListener('readystatechange', () => {
         if (document.readyState === 'complete') {
+            showSelectedClientsOnEvents();
             updateScopeState();
             keepScopesTreeState();
             keepSelectedClients();
@@ -47,3 +48,7 @@
   </li>
 {% endfor %}
 {% endmacro %}
+
+{% macro selected_clients() -%}
+<div id="selected-clients" class="d-flex flex-wrap justify-content-center"></div>
+{% endmacro %}
diff --git a/ogcp/templates/scopes.html b/ogcp/templates/scopes.html
index 6c543fa..81b2403 100644
--- a/ogcp/templates/scopes.html
+++ b/ogcp/templates/scopes.html
@@ -29,3 +29,7 @@
   <input class="btn btn-light" type="submit" value="{{ _('Delete center') }}"
          form="scopesForm" formaction="{{ url_for('action_center_delete') }}" formmethod="get">
 {% endblock %}
+
+{% block content %}
+  {{ macros.selected_clients() }}
+{% endblock %}
-- 
cgit v1.2.3-18-g5258