Use pill style in confirmation pages

Draw selected clients from confirmation pages like selected clients from
scopes and commands pages.

9 files changed, 18 insertions, 16 deletions

diff --git a/ogcp/templates/actions/delete_client.html b/ogcp/templates/actions/delete_client.html
index ea46b4f..7a144b5 100644
--- a/ogcp/templates/actions/delete_client.html
+++ b/ogcp/templates/actions/delete_client.html
@@ -10,7 +10,7 @@
   {{ _('Delete %(ip_count)d client(s)', ip_count=ip_count) }}
 </h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_client_delete'),
diff --git a/ogcp/templates/actions/image_restore.html b/ogcp/templates/actions/image_restore.html
index 9bd368b..c8322e8 100644
--- a/ogcp/templates/actions/image_restore.html
+++ b/ogcp/templates/actions/image_restore.html
@@ -8,7 +8,7 @@
 {% set ip_count = ip_list | length %}
 <h1 class="m-5">Restore partition image to {{ip_count}} {%if ip_count > 1%}computers{% else %}computer{% endif %}</h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_image_restore'),
diff --git a/ogcp/templates/actions/mode.html b/ogcp/templates/actions/mode.html
index 63f3d8f..7e7f39e 100644
--- a/ogcp/templates/actions/mode.html
+++ b/ogcp/templates/actions/mode.html
@@ -8,7 +8,7 @@
 {% set ip_count = ip_list | length %}
 <h1 class="m-5">Changing boot mode of {{ip_count}} {%if ip_count > 1%}computers{% else %}computer{% endif %}</h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_mode'),
diff --git a/ogcp/templates/actions/oglive.html b/ogcp/templates/actions/oglive.html
index ea85d00..92c8687 100644
--- a/ogcp/templates/actions/oglive.html
+++ b/ogcp/templates/actions/oglive.html
@@ -8,7 +8,7 @@
 {% set ip_count = ip_list | length %}
 <h1 class="m-5">Changing ogLive of {{ip_count}} {%if ip_count > 1%}computers{% else %}computer{% endif %}</h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_oglive'),
diff --git a/ogcp/templates/actions/poweroff.html b/ogcp/templates/actions/poweroff.html
index 11b14d8..cc739d3 100644
--- a/ogcp/templates/actions/poweroff.html
+++ b/ogcp/templates/actions/poweroff.html
@@ -10,7 +10,7 @@
   {{ _('Power off %(ip_count)d client(s)', ip_count=ip_count) }}
 </h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_poweroff'),
diff --git a/ogcp/templates/actions/reboot.html b/ogcp/templates/actions/reboot.html
index 2b4cba6..9a6a1bc 100644
--- a/ogcp/templates/actions/reboot.html
+++ b/ogcp/templates/actions/reboot.html
@@ -10,7 +10,7 @@
   {{ _('Reboot %(ip_count)d client(s)', ip_count=ip_count) }}
 </h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_reboot'),
diff --git a/ogcp/templates/actions/session.html b/ogcp/templates/actions/session.html
index fab5bcf..189ceb4 100644
--- a/ogcp/templates/actions/session.html
+++ b/ogcp/templates/actions/session.html
@@ -9,7 +9,7 @@
   {{ _('Start %(ip_count)d client(s) session', ip_count=ip_count) }}
 </h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_session'),
diff --git a/ogcp/templates/actions/wol.html b/ogcp/templates/actions/wol.html
index 2a35592..7ba014c 100644
--- a/ogcp/templates/actions/wol.html
+++ b/ogcp/templates/actions/wol.html
@@ -8,7 +8,7 @@
 {% set ip_count = ip_list | length %}
 <h1 class="m-5">Powering on {{ip_count}} {%if ip_count > 1%}computers{% else %}computer{% endif %}</h1>
 
-{{ macros.cmd_selected_clients(ip_list) }}
+{{ macros.cmd_selected_clients(selected_clients) }}
 
 {{ wtf.quick_form(form,
                   action=url_for('action_wol'),
diff --git a/ogcp/templates/macros.html b/ogcp/templates/macros.html
index 6999fd6..745b154 100644
--- a/ogcp/templates/macros.html
+++ b/ogcp/templates/macros.html
@@ -53,14 +53,16 @@
 <div id="selected-clients" class="d-flex flex-wrap justify-content-center"></div>
 {% endmacro %}
 
-{% macro cmd_selected_clients(ip_list) -%}
-<ul class="list-group mx-5 list-group-horizontal-sm d-flex flex-wrap">
-{% set max_clients = 50 %}
-{% for ip in ip_list[:max_clients] %}
-    <li class="list-group-item flex-fill list-group-item-info">{{ ip }}</li>
-    {% if loop.last %}
-        <li class="list-group-item flex-fill list-group-item-info">...</li>
+{% macro cmd_selected_clients(selected_clients) -%}
+<div class="d-flex flex-wrap justify-content-center">
+    {% set max_clients = 50 %}
+    {% for name_id, ip in selected_clients[:max_clients] %}
+    <div id="pill-{{ name_id|replace(".", "_") }}" class="badge badge-pill badge-light">
+        {{ name_id }}<br>{{ ip }}
+    </div>
+    {% if loop.last and (selected_clients|length > max_clients) %}
+        <div class="badge badge-pill badge-light">...</div>
     {% endif %}
 {% endfor %}
-</ul>
+</div>
 {% endmacro %}