Frontend improvements

1. Simplify template css to use grid always and use ABCD for area names
2. Add 3 new templates
3. Set data attribute dynamically for templates
4. Minor reformatting in js files
5. Fix URL path

web/choose.js

@@ -30,21 +30,20 @@ let selectedPhotosDiv
 let selectedPhotoImg
 
 function main() {
-    albumSelect = document.getElementById("album_selector")
     loadAlbumsBtn = document.getElementById("load_albums_button")
     loadPhotosBtn = document.getElementById("load_photos_button")
     makeCollageBtn = document.getElementById("make_collage_button")
+    albumSelect = document.getElementById("album_selector")
+    noticeP = document.getElementById("notice_p")
     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()
     makeCollageBtn.onclick = () => gotoCollage()
 
-    /**
-     * @type HTMLImageElement[]
-     */
+    /** @type HTMLImageElement[] */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
     for (const img of selectedPhotos) {
         img.onclick = () => {
@@ -80,9 +79,7 @@ function closeNotice() {
     noticeDialog.close()
 }
 
-/**
- * @param {string} notice
- */
+/** @param {string} notice */
 function showNotice(notice) {
     noticeP.textContent = notice
     noticeDialog.show()
@@ -100,9 +97,7 @@ function loadPhotos() {
     (async () => {
         try {
             const resp = await fetch(`load-photos/${elem.value}`)
-            /**
-             * @type String[]
-             */
+            /** @type String[] */
             const photos = await resp.json()
             if(photos.length == 0) {
                 showNotice("No Photos found")
@@ -115,9 +110,7 @@ function loadPhotos() {
                 albumPhotosDiv.appendChild(img)
             }
 
-            /**
-             * @type HTMLImageElement[]
-             */
+            /** @type HTMLImageElement[] */
             const photoImgs = albumPhotosDiv.children
             for(const photo of photoImgs) {
                 photo.onclick = () => {
@@ -131,14 +124,10 @@ function loadPhotos() {
 }
 
 function gotoCollage() {
-    /**
-     * @type HTMLImageElement[]
-     */
+    /** @type HTMLImageElement[] */
     const selectedPhotos = selectedPhotosDiv.getElementsByTagName("img")
-    /**
-     * @type String[]
-     */
-    let photoUrls = [];
+    /** @type String[] */
+    const photoUrls = [];
 
     for (const img of selectedPhotos) {
         if (!img.src.endsWith("stock.svg")) {