From a21933d3eb2cdb397ce2bec8def07960523bd4f8 Mon Sep 17 00:00:00 2001
From: SinTan1729 <sayantan.santra689@gmail.com>
Date: Wed, 9 Nov 2022 18:55:50 -0600
Subject: [PATCH] Improve display of url table

---
 src/main/resources/public/index.html | 12 +++++++++---
 src/main/resources/public/js/main.js | 21 +++++++++++++++------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index 39c446a..47a4c55 100644
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -40,6 +40,10 @@
         form input[name="shortUrl"] {
             text-transform: lowercase;
         }
+
+        td[name="deleteBtn"] {
+            text-align: center;
+        }
     </style>
 </head>
 
@@ -48,7 +52,7 @@
     <div class="container">
         <form class="pure-form pure-form-aligned" name="new-url-form">
             <fieldset>
-                <legend style="font-size: 32px;"><img src="assets/favicon-32.png" height="26px" alt="logo"> Simply
+                <legend style="font-size: 32px;"><img src="assets/favicon-32.png" width="26px" alt="logo"> Simply
                     Shorten</legend>
                 <div class="pure-control-group">
                     <label for="longUrl">Long URL</label>
@@ -65,13 +69,15 @@
             </fieldset>
         </form>
 
-        <table class="pure-table">
+        <table class="pure-table" style="visibility: hidden;">
+            <caption style="font-size: 22px; text-align: left; font-style: normal;">Active links:</caption>
+            <br>
             <thead>
                 <tr>
                     <td>Short URL</td>
                     <td>Long URL</td>
                     <td>Hits</td>
-                    <td></td>
+                    <td name="deleteBtn">&times;</td>
                 </tr>
             </thead>
             <tbody id="url-table">
diff --git a/src/main/resources/public/js/main.js b/src/main/resources/public/js/main.js
index cfa469d..862d045 100644
--- a/src/main/resources/public/js/main.js
+++ b/src/main/resources/public/js/main.js
@@ -14,10 +14,17 @@ const refreshData = async () => {
 };
 
 const displayData = (data) => {
-    const table = document.querySelector("#url-table");
-    table.innerHTML = ''; // Clear
-    data.map(TR)
-        .forEach(tr => table.appendChild(tr));
+    table_box = document.querySelector(".pure-table");
+    if (data.length == 0) {
+        table_box.style.visibility = "hidden";
+    }
+    else {
+        const table = document.querySelector("#url-table");
+        table_box.style.visibility = "visible";
+        table.innerHTML = ''; // Clear
+        data.map(TR)
+            .forEach(tr => table.appendChild(tr));
+    }
 };
 
 const addErrBox = async () => {
@@ -48,6 +55,7 @@ const A = (s) => `<a href='${s}'>${s}</a>`;
 const A_INT = (s) => `<a href='/${s}'>${window.location.host}/${s}</a>`;
 
 const deleteButton = (shortUrl) => {
+    const td = document.createElement("td");
     const btn = document.createElement("button");
 
     btn.innerHTML = "&times;";
@@ -60,8 +68,9 @@ const deleteButton = (shortUrl) => {
             }).then(_ => refreshData());
         }
     };
-
-    return btn;
+    td.setAttribute("name", "deleteBtn");
+    td.appendChild(btn);
+    return td;
 };
 
 const TD = (s) => {