User history table now shows proper states if user isn't logged in or…

… has no entries yet
IGS · Dec 29, 2023 · a4f446c · a4f446c
1 parent 8d1083c
commit a4f446c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 12 deletions.
diff --git a/www/index.html b/www/index.html
@@ -288,8 +288,9 @@ <h3 class="mt-6 mb-4">
                   <td colspan="4">
                     <div class="has-text-centered">
                       <span class="icon is-large">
-                        <i class="mdi mdi-loading mdi-spin mdi-48px"></i>
+                        <i class="mdi mdi-account-off mdi-48px"></i>
                       </span>
+                      <p class="mt-2">Login to show recent activity</p>
                     </div>
                   </td>
                 </tr>
@@ -306,6 +307,29 @@ <h3 class="mt-6 mb-4">
                   <td class="date is-vcentered"></td>
                 </tr>
               </template>
+              <template id="user-history-no-entries">
+                <tr>
+                  <td colspan="4">
+                    <div class="has-text-centered">
+                      <span class="icon is-large">
+                        <i class="mdi mdi-alert-outline mdi-48px"></i>
+                      </span>
+                      <p class="mt-2">No history found. As you use the site entries will appear here</p>
+                    </div>
+                  </td>
+                </tr>
+              </template>
+              <template id="user-history-loading">
+                <tr>
+                  <td colspan="4">
+                    <div class="has-text-centered">
+                      <span class="icon is-large">
+                        <i class="mdi mdi-loading mdi-spin mdi-48px"></i>
+                      </span>
+                    </div>
+                  </td>
+                </tr>
+              </template>
             </table>
           </section><!-- end #content_c -->
         </section> <!-- end #main_c -->

diff --git a/www/js/index.js b/www/js/index.js
@@ -4,11 +4,21 @@ document.addEventListener('DOMContentLoaded', () => {
 
 const populateUserHistoryTable = async () => {
     const numEntries = 5;
-    if (CURRENT_USER) {
-        try {
-            const data = await apiCallsMixin.fetchUserHistoryEntries(numEntries);
-            const template = document.querySelector('#user-history-row');
 
+    // Load the spinner template
+    const spinnerTemplate = document.querySelector('#user-history-loading');
+    document.querySelector('#user-history-table-tbody').innerHTML = '';
+    document.querySelector('#user-history-table-tbody').appendChild(spinnerTemplate.content.cloneNode(true));
+
+    try {
+        const data = await apiCallsMixin.fetchUserHistoryEntries(numEntries);
+        const template = document.querySelector('#user-history-row');
+        document.querySelector('#user-history-table-tbody').innerHTML = '';
+
+        if (data.length === 0) {
+            const noHistoryTemplate = document.querySelector('#user-history-no-entries');
+            document.querySelector('#user-history-table-tbody').appendChild(noHistoryTemplate.content.cloneNode(true));
+        } else {
             for (const entry of data) {
                 const row = template.content.cloneNode(true);
 
@@ -21,16 +31,15 @@ const populateUserHistoryTable = async () => {
                 row.querySelector('.url').setAttribute('href', entry.url);
 
                 document.querySelector('#user-history-table-tbody').appendChild(row);
-            };
-        } catch (error) {
-            console.error(error);
+            }
         }
-    } else {
-        console.log('No user logged in. Clearing user history table.');
-        document.querySelector('#user-history-table-tbody').innerHTML = '';
+    } catch (error) {
+        console.error(error);
     }
 }
 
 const handlePageSpecificLoginUIUpdates = async (event) => {
-    populateUserHistoryTable();
+    if (CURRENT_USER.session_id) {
+        populateUserHistoryTable();
+    }
 }