Implement photo selector

web/choose.js

@@ -17,14 +17,38 @@ let noticeP
 /** @type {HTMLDialogElement} */
 let noticeDialog
 
+/** @type {HTMLDivElement} */
+let albumPhotosDiv
+
+/** @type {HTMLDivElement} */
+let selectedPhotosDiv
+
+/** @type {HTMLImageElement} */
+let selectedPhotoImg
+
 function main() {
     albumSelect = document.getElementById("album_selector")
     loadAlbumsBtn = document.getElementById("load_albums_button")
     loadPhotosBtn = document.getElementById("load_photos_button")
     noticeDialog = document.getElementById("notice_dialog")
+    albumPhotosDiv = document.getElementById("album_photos")
+    selectedPhotosDiv = document.getElementById("selected_photos")
     noticeP = document.getElementById("notice_p")
     loadAlbumsBtn.onclick = () => loadAlbums()
     loadPhotosBtn.onclick = () => loadPhotos()
+
+    /**
+     * @type HTMLImageElement[]
+     */
+    const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
+    for (const img of selectedPhotos) {
+        img.onclick = () => {
+            selectedPhotoImg?.classList.remove("current")
+            selectedPhotoImg = img
+            selectedPhotoImg.classList.add("current")
+        }
+    }
+    selectedPhotos[0].click()
 }
 
 function loadAlbums() {
@@ -67,9 +91,38 @@ function loadPhotos() {
         return
     }
     const [elem] = selected
-    console.log(elem)
-    console.log(elem.text)
-    console.log(elem.value)
+
+    (async () => {
+        try {
+            const resp = await fetch(`load-photos/${elem.value}`)
+            /**
+             * @type String[]
+             */
+            const photos = await resp.json()
+            if(photos.length == 0) {
+                showNotice("No Photos found")
+                return
+            }
+            albumPhotosDiv.replaceChildren()
+            for(const url of photos) {
+                const img = new Image()
+                img.src =  url
+                albumPhotosDiv.appendChild(img)
+            }
+
+            /**
+             * @type HTMLImageElement[]
+             */
+            const photoImgs = albumPhotosDiv.children
+            for(const photo of photoImgs) {
+                photo.onclick = () => {
+                    selectedPhotoImg.src = photo.src
+                }
+            }
+        } catch(e) {
+            console.log(e)
+        }
+    })();
 }