frontend for get-albums

2024-08-03 00:38:54 -04:00
parent fa1c8e6963
commit bf6bdf9b72
2 changed files with 64 additions and 0 deletions
--- a/web/choose.html
+++ b/web/choose.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+  <head>
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <!-- DEVONLY --> <script src="http://localhost:35729/livereload.js"></script>
+    <script src="choose.js" defer></script>
+  </head>
+  <body>
+      <label>
+        <span>Select Album</span>
+        <select id="album_selector" size="8">
+        </select>
+      </label>
+      <button id="load_albums_button">Load Albums</button>
+      <button id="load_photos_button">Load Photos</button>
+      <div id="selected_photos"></div>
+      <div id="album_photos"></div>
+  </body>
+</html>
--- a/web/choose.js
+++ b/web/choose.js
@@ -0,0 +1,45 @@
+"use strict";
+
+// elements
+
+/** @type {HTMLButtonElement} */
+let loadAlbumsBtn
+
+/** @type {HTMLButtonElement} */
+let loadPhotosBtn
+
+/** @type {HTMLSelectElement} */
+let albumSelect
+
+function main() {
+    albumSelect = document.getElementById("album_selector")
+    loadAlbumsBtn = document.getElementById("load_albums_button")
+    loadPhotosBtn = document.getElementById("load_photos_button")
+    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))
+        }
+    })();
+}
+
+function loadPhotos() {
+    const selected = albumSelect.selectedOptions
+    if(selected.length != 1) {
+        return
+    }
+    const [elem] = selected
+    console.log(elem)
+    console.log(elem.text)
+    console.log(elem.value)
+}
+
+
+main()