Reworked flow
This commit is contained in:
Djeex
@@ -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();
|
||||
|
||||
@@ -1,61 +1,39 @@
|
||||
// Upload handler for gallery images
|
||||
// --- Upload gallery images ---
|
||||
document.getElementById('upload-gallery').addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return; // Exit if no file is selected
|
||||
const files = e.target.files;
|
||||
if (!files.length) return;
|
||||
|
||||
// Create a FormData object to send the file
|
||||
const formData = new FormData();
|
||||
formData.append('file', file); // Key must match what upload.py expects
|
||||
for (const file of files) formData.append('files', file);
|
||||
|
||||
try {
|
||||
// Send POST request to the gallery upload endpoint
|
||||
const res = await fetch('/api/gallery/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const res = await fetch('/api/gallery/upload', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
alert('✅ Gallery image uploaded!');
|
||||
refreshGallery(); // Refresh the gallery list from the server
|
||||
} else {
|
||||
alert('Error: ' + data.error); // Show server error if upload failed
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Server error!'); // Network or server failure
|
||||
} finally {
|
||||
e.target.value = ''; // Reset file input so the same file can be uploaded again if needed
|
||||
}
|
||||
alert(`✅ ${data.uploaded.length} gallery image(s) uploaded!`);
|
||||
refreshGallery();
|
||||
} else alert('Error: ' + data.error);
|
||||
} catch(err) {
|
||||
console.error(err); alert('Server error!');
|
||||
} finally { e.target.value = ''; }
|
||||
});
|
||||
|
||||
// Upload handler for hero images
|
||||
// --- Upload hero images ---
|
||||
document.getElementById('upload-hero').addEventListener('change', async (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return; // Exit if no file is selected
|
||||
const files = e.target.files;
|
||||
if (!files.length) return;
|
||||
|
||||
// Create a FormData object to send the file
|
||||
const formData = new FormData();
|
||||
formData.append('file', file); // Key must match what upload.py expects
|
||||
for (const file of files) formData.append('files', file);
|
||||
|
||||
try {
|
||||
// Send POST request to the hero upload endpoint
|
||||
const res = await fetch('/api/hero/upload', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const res = await fetch('/api/hero/upload', { method: 'POST', body: formData });
|
||||
const data = await res.json();
|
||||
if (res.ok) {
|
||||
alert('✅ Hero image uploaded!');
|
||||
refreshHero(); // Refresh the hero list from the server
|
||||
} else {
|
||||
alert('Error: ' + data.error); // Show server error if upload failed
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Server error!'); // Network or server failure
|
||||
} finally {
|
||||
e.target.value = ''; // Reset file input so the same file can be uploaded again if needed
|
||||
}
|
||||
alert(`✅ ${data.uploaded.length} hero image(s) uploaded!`);
|
||||
refreshHero();
|
||||
} else alert('Error: ' + data.error);
|
||||
} catch(err) {
|
||||
console.error(err); alert('Server error!');
|
||||
} finally { e.target.value = ''; }
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user