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/index.js

@@ -51,16 +51,8 @@ let collageUrlA
 
 let crops = [];
 let pageSize = "letter-landscape";
-let imageUrls = [
-    , // images start with index 1
-    "images/img1.jpg",
-    "images/img2.jpg",
-    "images/img3.jpg",
-    "images/img4.jpg",
-    "images/img5.jpg",
-    "images/img6.jpg",
-    "images/img7.jpg",
-]
+/** @type {String[]} */
+let imageUrls = []
 
 
 function main() {
@@ -73,9 +65,13 @@ function main() {
     pageSizeSelect.onchange  = () => pageSizeChange()
 
     for(const tmpl of document.getElementsByClassName("template")) {
+        // Assumes second class in the template is the collage's template
+        const [_, collageTemplate] = tmpl.classList
+        tmpl.dataset.collageTemplate = collageTemplate
         tmpl.onclick = () => applyTemplate(tmpl)
     }
     const queryUrls = loadImageUrlsFromQuery()
+    // Skipping first entry in array to make the images start with index 1
     imageUrls = [,].concat(queryUrls)
 
     applyTemplate(document.getElementById("default_template"))
@@ -148,12 +144,8 @@ function snap() {
         const fsx = elem.offsetLeft - col
         const fsy = elem.offsetTop - cot
         const [sx, sy, ex, ey] = cpie.get().points;
-        const imageFile = (() => {
-            const u = new URL(elem.dataset.collageImageUrl)
-            return u.pathname.slice("/photos/".length)
-        })();
         const photo = {
-            image: imageFile,
+            image: elem.dataset.collageImageUrl.slice("/photos/".length),
             crop: {
                 start: {
                     x: parseInt(sx),
@@ -179,6 +171,7 @@ function snap() {
     }
 
     (async () => {
+        collageUrlA.text = "Collage is being generated...";
         const collagFile = await makeCollage(req)
         collageUrlA.href = `collages/${collagFile}`;
         collageUrlA.text = `${collagFile} generated`;
@@ -191,9 +184,7 @@ function pageSizeChange() {
     initCollage()
 }
 
-/** 
- * @param {HTMLDivElement} templateDiv 
- */
+/** @param {HTMLDivElement} templateDiv */
 function applyTemplate(templateDiv) {
     document.getElementsByClassName("template-selected").item(0)?.classList.remove("template-selected")
     /** @type {HTMLDivElement} */