js: use div instead of br in client pills

Improve html structure inside client pills so the values can be
obtained with jquery by matching the name field of the div.

1 files changed, 6 insertions, 4 deletions

diff --git a/ogcp/static/js/ogcp.js b/ogcp/static/js/ogcp.js
index 548122b..af95dde 100644
--- a/ogcp/static/js/ogcp.js
+++ b/ogcp/static/js/ogcp.js
@@ -10,7 +10,7 @@ async function show_client_mac(pill_id) {
         return
     }
 
-    const ip = pill.html().split('<br>')[1]
+    const ip =  $('[name="ip"]', pill).html()
 
     if (!macs.get(ip)) {
         const resp = await fetch('/client/mac?ip=' + ip);
@@ -19,7 +19,7 @@ async function show_client_mac(pill_id) {
     }
 
     const mac = macs.get(ip)
-    pill.append('<br>' + mac);
+    pill.append('<div name="mac">' + mac + '</div>');
 }
 
 function showSelectedClient(client_checkbox) {
@@ -33,8 +33,10 @@ function showSelectedClient(client_checkbox) {
     if (client_checkbox.checked) {
         if (!($('#' + pill_id).length)) {
             $(container).append('<div class="badge badge-pill og-pill badge-light" ' +
-                                'id="'+ pill_id + '">' + client_name +
-                                '<br>' + client_checkbox.value + '</div>');
+                                'id="'+ pill_id + '">' +
+                                '<div name="name">' + client_name + '</div>' +
+                                '<div name="ip">' + client_checkbox.value + '</div>'+
+                                '</div>');
 
             show_client_mac(pill_id);
         }