Reworked flow

src/webui/js/main.js

@@ -1,29 +1,27 @@
-// Arrays to store gallery and hero images
+// --- Arrays to store gallery and hero images ---
 let galleryImages = [];
 let heroImages = [];
 
-// Load images data from server
+// --- Load images from server on page load ---
 async function loadData() {
   try {
-    // Fetch gallery images from API
     const galleryRes = await fetch('/api/gallery');
     galleryImages = await galleryRes.json();
-    renderGallery(); // Render gallery images
+    renderGallery();
 
-    // Fetch hero images from API
     const heroRes = await fetch('/api/hero');
     heroImages = await heroRes.json();
-    renderHero(); // Render hero images
+    renderHero();
   } catch(err) {
     console.error(err);
-    alert("Error while loading images!");
+    alert("Error loading images!");
   }
 }
 
-// Render gallery images in the page
+// --- Render gallery images with tags and delete buttons ---
 function renderGallery() {
   const container = document.getElementById('gallery');
-  container.innerHTML = ''; // Clear current content
+  container.innerHTML = '';
   galleryImages.forEach((img, i) => {
     const div = document.createElement('div');
     div.className = 'photo';
@@ -33,14 +31,14 @@ function renderGallery() {
         onchange="updateTags(${i}, this.value)">
       <button onclick="deleteGalleryImage(${i})">🗑 Delete</button>
     `;
-    container.appendChild(div); // Add image div to container
+    container.appendChild(div);
   });
 }
 
-// Render hero images in the page
+// --- Render hero images with delete buttons ---
 function renderHero() {
   const container = document.getElementById('hero');
-  container.innerHTML = ''; // Clear current content
+  container.innerHTML = '';
   heroImages.forEach((img, i) => {
     const div = document.createElement('div');
     div.className = 'photo';
@@ -48,104 +46,93 @@ function renderHero() {
       <img src="/photos/${img.src}">
       <button onclick="deleteHeroImage(${i})">🗑 Delete</button>
     `;
-    container.appendChild(div); // Add image div to container
+    container.appendChild(div);
   });
 }
 
-// Update tags for a gallery image
+// --- Update tags for gallery image ---
 function updateTags(index, value) {
-  // Split tags by comma, trim spaces, and remove empty values
   galleryImages[index].tags = value.split(',').map(t => t.trim()).filter(t => t);
 }
 
-// Delete a gallery image
+// --- Delete gallery image ---
 async function deleteGalleryImage(index) {
   const img = galleryImages[index];
   try {
-    // Send only the filename to the server for deletion
     const res = await fetch('/api/gallery/delete', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ src: img.src.split('/').pop() }) // Keep only filename
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ src: img.src.split('/').pop() })
     });
     const data = await res.json();
     if (res.ok) {
-      // Remove image from array and re-render gallery
       galleryImages.splice(index, 1);
       renderGallery();
-      await saveGallery(); // Save updated tags
-    } else {
-      alert("Error: " + data.error);
-    }
+      await saveGallery();
+    } else alert("Error: " + data.error);
   } catch(err) {
-    console.error(err);
-    alert("Server error!");
+    console.error(err); alert("Server error!");
   }
 }
 
-// Delete a hero image
+// --- Delete hero image ---
 async function deleteHeroImage(index) {
   const img = heroImages[index];
   try {
-    // Send only the filename to the server for deletion
     const res = await fetch('/api/hero/delete', {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ src: img.src.split('/').pop() }) // Keep only filename
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ src: img.src.split('/').pop() })
     });
     const data = await res.json();
     if (res.ok) {
-      // Remove image from array and re-render hero section
       heroImages.splice(index, 1);
       renderHero();
-      await saveHero(); // Save updated hero images
-    } else {
-      alert("Error: " + data.error);
-    }
+      await saveHero();
+    } else alert("Error: " + data.error);
   } catch(err) {
-    console.error(err);
-    alert("Server error!");
+    console.error(err); alert("Server error!");
   }
 }
 
-// Save gallery images (with tags) to the server
+// --- Save gallery to server ---
 async function saveGallery() {
   await fetch('/api/gallery/update', {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: {'Content-Type': 'application/json'},
     body: JSON.stringify(galleryImages)
   });
 }
 
-// Save hero images to the server
+// --- Save hero to server ---
 async function saveHero() {
   await fetch('/api/hero/update', {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+    headers: {'Content-Type': 'application/json'},
     body: JSON.stringify(heroImages)
   });
 }
 
-// Save both gallery and hero changes
+// --- Save all changes ---
 async function saveChanges() {
   await saveGallery();
   await saveHero();
   alert('✅ Changes saved!');
 }
 
-// Refresh gallery images from the server folder
+// --- Refresh gallery from folder ---
 async function refreshGallery() {
   await fetch('/api/gallery/refresh', { method: 'POST' });
-  await loadData(); // Reload data after refresh
+  await loadData();
   alert('🔄 Gallery updated from photos/gallery folder');
 }
 
-// Refresh hero images from the server folder
+// --- Refresh hero from folder ---
 async function refreshHero() {
   await fetch('/api/hero/refresh', { method: 'POST' });
-  await loadData(); // Reload data after refresh
+  await loadData();
   alert('🔄 Hero updated from photos/hero folder');
 }
 
-// Initial load of images when page opens
+// --- Initialize ---
 loadData();