From 5fee186dcb307001ff0fffb69291f39fc6850b70 Mon Sep 17 00:00:00 2001
From: Balakrishnan Balasubramanian <git.user@balki.me>
Date: Sat, 3 Aug 2024 01:47:22 -0400
Subject: [PATCH] Add a dialog for showing notices

---
 web/choose.html |  4 ++++
 web/choose.js   | 41 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 5 deletions(-)
diff --git a/web/choose.html b/web/choose.html
index fa4bd78..8be1e6e 100644
--- a/web/choose.html
+++ b/web/choose.html
@@ -6,6 +6,10 @@
     <script src="choose.js" defer></script>
   </head>
   <body>
+      <dialog id="notice_dialog">
+      <p id="notice_p"></p>
+      <form><button type="submit" formmethod="dialog">X</button></form>
+      </dialog>
       <label>
         <span>Select Album</span>
         <select id="album_selector" size="8">
diff --git a/web/choose.js b/web/choose.js
index 9e5c238..3216a04 100644
--- a/web/choose.js
+++ b/web/choose.js
@@ -11,28 +11,59 @@ let loadPhotosBtn
 /** @type {HTMLSelectElement} */
 let albumSelect
 
+/** @type {HTMLParagraphElement} */
+let noticeP
+
+/** @type {HTMLDialogElement} */
+let noticeDialog
+
 function main() {
     albumSelect = document.getElementById("album_selector")
     loadAlbumsBtn = document.getElementById("load_albums_button")
     loadPhotosBtn = document.getElementById("load_photos_button")
+    noticeDialog = document.getElementById("notice_dialog")
+    noticeP = document.getElementById("notice_p")
     loadAlbumsBtn.onclick = () => loadAlbums()
     loadPhotosBtn.onclick = () => loadPhotos()
 }
 
 function loadAlbums() {
     (async () => {
-        const resp = await fetch("get-albums")
-        const albums = await resp.json()
-        albumSelect.replaceChildren() // This empties existing options
-        for(const album of albums) {
-            albumSelect.add(new Option(album.Title, album.UID))
+        try {
+            closeNotice()
+            const resp = await fetch("get-albums")
+            const albums = await resp.json()
+            if(albums.length == 0) {
+                showNotice("No Albums found")
+                return
+            }
+            albumSelect.replaceChildren() // This empties existing options
+            for(const album of albums) {
+                albumSelect.add(new Option(album.Title, album.UID))
+            }
+        } catch(e) {
+            console.log(e)
         }
     })();
 }
 
+function closeNotice() {
+    noticeDialog.close()
+}
+
+/**
+ * @param {string} notice
+ */
+function showNotice(notice) {
+    noticeP.textContent = notice
+    noticeDialog.show()
+}
+
 function loadPhotos() {
+    closeNotice()
     const selected = albumSelect.selectedOptions
     if(selected.length != 1) {
+        showNotice("Select an album to load photos")
         return
     }
     const [elem] = selected
