From b107b7a44151845661a8cd607c701fac9bd8a5a0 Mon Sep 17 00:00:00 2001
From: Ryan Williams <ryan.williams@signalwire.com>
Date: Wed, 17 Jan 2024 22:09:54 -0800
Subject: [PATCH] feat: Flatten the addresses (#25)

---
 public/full.js  | 55 +++++++++++++++++++++++++++++++++++++++----------
 views/index.ejs |  3 ++-
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/public/full.js b/public/full.js
index 454f205..3d97887 100644
--- a/public/full.js
+++ b/public/full.js
@@ -885,26 +885,59 @@ function updateAddressUI() {
 
     const listItem = document.createElement('li')
     listItem.className = 'list-group-item'
-    listItem.innerHTML = `<b>${displayName}</b> / <span>${name}</span> 
-                          <span class="badge bg-primary float-end">${type}</span>`
+    //  container d-flex align-items-center gap-2
 
-    listItem.appendChild(dialList)
+    const container = document.createElement('div');
+    container.className = 'container p-0';
+    listItem.appendChild(container);
 
-    Object.entries(address.channels).forEach(([channelName, channelValue]) => {
-      const sanitizedValue = escapeHTML(channelValue)
-      const li = document.createElement('li')
-      li.className = 'list-group-item d-flex align-items-center gap-2'
-      li.innerHTML = `<span>${sanitizedValue}</span>`
+    const row = document.createElement('div');
+    row.className = 'row';
+    container.appendChild(row);
+
+    const col1 = document.createElement('div');
+    col1.className = 'col-10';
+    row.appendChild(col1);
+
+    const badge = document.createElement('span');
+    badge.className = 'badge bg-primary me-2';
+    badge.textContent = type;
+    col1.appendChild(badge);
+
+    const b = document.createElement('b');
+    b.textContent = displayName;
+    col1.appendChild(b);
+
+    const col2 = document.createElement('div');
+    col2.className = 'col';
+    row.appendChild(col2);
 
+    Object.entries(address.channels).forEach(([channelName, channelValue]) => {
       const button = document.createElement('button')
       button.className = 'btn btn-sm btn-success'
-      button.textContent = 'Dial'
+
+      // button.textContent = `Dial ${channelName}`
       button.addEventListener('click', () => dialAddress(channelValue))
 
-      li.appendChild(button)
-      dialList.appendChild(li)
+      const icon = document.createElement('i');
+      if (channelName === "messaging") {
+        icon.className = 'bi bi-chat';
+      } else if (channelName === "video") {
+        icon.className = 'bi bi-camera-video';
+      } else if (channelName === "audio") {
+        icon.className = 'bi bi-phone';
+      }
+      button.appendChild(icon);
+
+      col2.appendChild(button);
     })
 
+    const row2 = document.createElement('div')
+    const addressUrl = Object.values(address.channels)[0]
+    let strippedUrl = addressUrl.split('?')[0];
+    row2.textContent = strippedUrl
+    container.appendChild(row2)
+
     return listItem
   }
 
diff --git a/views/index.ejs b/views/index.ejs
index 4a1b9d2..20b5602 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -13,6 +13,7 @@
   <!-- To style up the demo a little -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous" />
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
 </head>
 
@@ -346,4 +347,4 @@
   <script src="/full.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>