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

1 files changed, 30 insertions, 0 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 8a6db02..dc1c063 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -2,6 +2,34 @@ const Endpoint = '/scopes/status';
 const Interval = 1000;
 let updateTimeoutId = null;
 
+function showSelectedClient(client_checkbox) {
+    const container = $('#selected-clients');
+    const pill_id = 'pill-' + client_checkbox.name.replaceAll('.', '_');
+
+    if (client_checkbox.checked) {
+        if (!($('#' + pill_id).length))
+            $(container).append('<div class="badge badge-pill badge-light" ' +
+                                'id="'+ pill_id + '">' + client_checkbox.name +
+                                '<br>' + client_checkbox.value + '</div>');
+        return;
+    }
+
+    $('#' + pill_id).remove();
+}
+
+function showSelectedClientsOnEvents() {
+    const checkboxes = $('input:checkbox[form|="scopesForm"]');
+    const container = $('#selected-clients');
+
+    const client_checkboxes = checkboxes.filter(function () {
+        return $(this).siblings().length == "1";
+    });
+
+    client_checkboxes.on('change show-client', function () {
+        showSelectedClient(this);
+    });
+}
+
 function storeCheckboxStatus(checkbox) {
         if (checkbox.checked)
             localStorage.setItem(checkbox.name, "check");
@@ -18,6 +46,7 @@ function checkChildrenCheckboxes() {
         children.each(function () {
             this.checked = checked;
             storeCheckboxStatus(this);
+            $(this).trigger('show-client');
         });
     });
 }
@@ -32,6 +61,7 @@ function keepSelectedClients() {
     checkboxes.each(function () {
         if (localStorage.getItem(this.name) == 'check') {
             this.checked = true;
+            $(this).trigger('show-client');
         }
     });
 }