From 91672725faf4c23662c9b6c7e112806945a7a8a2 Mon Sep 17 00:00:00 2001
From: Maks Snegov <snegov@spqr.link>
Date: Wed, 24 Apr 2024 16:33:16 -0700
Subject: [PATCH] Use table for consulates info

---
 popup/popup.html |  4 +---
 popup/popup.js   | 40 ++++++++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/popup/popup.html b/popup/popup.html
index c89ff12..487217b 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -74,9 +74,7 @@
 
         <!-- consulates -->
         <div class="row">
-            <div class="col">
-                Consulates:
-            </div>
+            <div class="col">Consulates:</div>
         </div>
         <div id="consulatesConfig">
         </div>
diff --git a/popup/popup.js b/popup/popup.js
index 412a0a1..dfc9126 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -83,35 +83,43 @@
   await chrome.storage.local.get(['__consulates']).then((result) => {
     let consulates = result['__consulates'];
 
-    let html = '';
+    let html = `
+      <table class="table table-striped">
+        <thead>
+          <tr>
+            <th scope="col"></th>
+            <th scope="col">City</th>
+            <th scope="col" style="white-space: nowrap;">Current Date</th>
+            <th scope="col" style="white-space: nowrap;">Best Date</th>
+            <th scope="col">Autobook</th>
+          </tr>
+        </thead>
+        <tbody>
+    `
     for (let c in consulates) {
-      console.log(c, consulates[c])
       let cSelected = consulates[c].isSelected === true ? "checked" : "";
       let cAutobook = consulates[c].autobook === true ? "checked" : "";
-      let cName = c.replace(/ /g, '&nbsp;')
       let cId = consulates[c].id;
       html += `
-          <div class="row">
-            <div class="col">
+          <tr>
+            <td>
               <div class="form-check form-checkbox" style="text-align: left;">
                 <input class="form-check-input" type="checkbox" role="switch" id="isSelected-${cId}" ${cSelected}>
               </div>
-            </div>
-            <div class="col">${cName}</div>
-            <div class="col"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></div>
-            <div class="col"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></div>
-            <div class="col">
+            </td>
+            <td style="white-space: nowrap;">${c}</td>
+            <td style="white-space: nowrap;"><span id="currentDate-${cId}">${consulates[c].currentDate || "-"}</span></td>
+            <td style="white-space: nowrap;"><span id="bestDate-${cId}">${consulates[c].bestDate || "-"}</span></td>
+            <td>
               <div class="form-check form-switch" style="text-align: left;">
                 <input class="form-check-input" type="checkbox" role="switch" id="autobook-${cId}" ${cAutobook}>
-                <label class="form-check-label" for="autobook-${cId}">Autobook</label>
+                <!--<label class="form-check-label" for="autobook-${cId}">Autobook</label>-->
               </div>
-            </div>
-          </div>
+            </td>
+          </tr>
       `;
     }
-    if (html === '') {
-      html = "No consulates found.";
-    }
+    html += `</tbody></table>`;
     document.getElementById('consulatesConfig').innerHTML = html;
 
     for (let c in consulates) {