Djeex/lumeex
1
1
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases 9 Wiki Activity

Remove all button

Browse Source
This commit is contained in:
Djeex
2025-08-17 10:57:59 +02:00
parent d3484a4b50
commit b56d03303e
4 changed files with 182 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/webui/index.html
View File

@@ -3,46 +3,40 @@
<head>
<meta charset="UTF-8">
<title>Photo WebUI</title>
<!-- Link to your CSS in the package -->
<link rel="stylesheet" href="{{ url_for('static', filename='style/style.css') }}">
</head>
<body>
<!-- Top bar -->
<div class="nav-bar">
<div class="content-inner nav">
<div class="nav-cta">
<div class="arrow">
→
</div>
<a class="button" href="#" target="_blank"><span id="step">🚀 Build !<i class="fa-solid fa-envelope"></i></span></a>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">
<img src="{{ url_for('static', filename='img/logo.svg') }}">
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<ul class="nav-list">
<li class="nav-item appear2"><a href="#">Site info</a>
<li class="nav-item appear2"><a href="#qui-suis-je">Theme info</a>
<li class="nav-item appear2"><a href="#mariages">Gallery</a>
</ul>
</div>
</div>
</div>
<div class="nav-bar">
<div class="content-inner nav">
<div class="nav-cta">
<div class="arrow">→</div>
<a class="button" href="#" target="_blank">
<span id="step">🚀 Build !<i class="fa-solid fa-envelope"></i></span>
</a>
</div>
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">
<img src="{{ url_for('static', filename='img/logo.svg') }}">
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<ul class="nav-list">
<li class="nav-item appear2"><a href="#">Site info</a>
<li class="nav-item appear2"><a href="#qui-suis-je">Theme info</a>
<li class="nav-item appear2"><a href="#mariages">Gallery</a>
</ul>
</div>
</div>
</div>
<!-- Toast container for notifications -->
<div class="content-inner">
<div id="toast-container"></div>
@@ -53,9 +47,12 @@
<div class="upload-section">
<h2>Title Carrousel</h2>
<p> Select photos to display in the Title Carrousel</p>
<label for="upload-hero" class="custom-upload-btn">
📸 Upload photos
</label>
<div class="upload-actions-row">
<label for="upload-hero" class="up-btn">
📸 Upload photos
</label>
<button id="remove-all-hero" class="up-btn">🗑 Remove All</button>
</div>
<input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
<div id="hero"></div>
</div>
@@ -64,14 +61,16 @@
<div class="upload-section">
<h2>Gallery</h2>
<p> Select and tags photos to display in the Gallery</p>
<label for="upload-gallery" class="custom-upload-btn">
📸 Upload photos
</label>
<div class="upload-actions-row">
<label for="upload-gallery" class="up-btn">
📸 Upload photos
</label>
<button id="remove-all-gallery" class="up-btn">🗑 Remove All</button>
</div>
<input type="file" id="upload-gallery" accept=".png,.jpg,.jpeg,.webp" multiple hidden>
<div id="gallery"></div>
</div>
<!-- JS files for rendering, uploading, and actions -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<script src="{{ url_for('static', filename='js/upload.js') }}"></script>
</div>
@@ -88,4 +87,4 @@
</div>
</div>
</body>
</html>
</html>

91
src/webui/js/main.js
View File

@@ -43,7 +43,7 @@ function renderGallery() {
</div>
<div class="tags-display" data-index="${i}"></div>
<div class="flex-item flex-full">
<div class="flex-item flex-end">
<div class="flex-item flex-end">
<button onclick="showDeleteModal('gallery', ${i})">🗑 Delete</button>
</div>
<div class="tag-input" data-index="${i}"></div>
@@ -53,6 +53,12 @@ function renderGallery() {
renderTags(i, img.tags || []);
});
// Show/hide Remove All button
const removeAllBtn = document.getElementById('remove-all-gallery');
if (removeAllBtn) {
removeAllBtn.style.display = galleryImages.length > 0 ? 'inline-block' : 'none';
}
}
// --- Render tags for a single image ---
@@ -60,11 +66,9 @@ function renderTags(imgIndex, tags) {
const tagsDisplay = document.querySelector(`.tags-display[data-index="${imgIndex}"]`);
const inputContainer = document.querySelector(`.tag-input[data-index="${imgIndex}"]`);
// vider
tagsDisplay.innerHTML = '';
inputContainer.innerHTML = '';
// --- rendre les tags (en haut) ---
tags.forEach(tag => {
const span = document.createElement('span');
span.className = 'tag';
@@ -83,13 +87,11 @@ function renderTags(imgIndex, tags) {
tagsDisplay.appendChild(span);
});
// --- input (en bas) ---
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Add tag...';
inputContainer.appendChild(input);
// suggestion box
const suggestionBox = document.createElement('ul');
suggestionBox.className = 'suggestions';
inputContainer.appendChild(suggestionBox);
@@ -208,13 +210,19 @@ function renderHero() {
</div>
<div class="flex-item flex-full">
<div class="flex-item flex-end">
<button onclick="showDeleteModal('hero', ${i})">🗑 Delete</button>
<button onclick="showDeleteModal('hero', ${i})">🗑 Delete</button>
</div>
</div>
`;
container.appendChild(div);
});
}
// Show/hide Remove All button
const removeAllBtn = document.getElementById('remove-all-hero');
if (removeAllBtn) {
removeAllBtn.style.display = heroImages.length > 0 ? 'inline-block' : 'none';
}
}
// --- Save gallery to server ---
async function saveGallery() {
@@ -273,11 +281,19 @@ function showToast(message, type = "success", duration = 3000) {
}, duration);
}
let pendingDelete = null; // { type: 'gallery'|'hero', index: number }
let pendingDelete = null; // { type: 'gallery'|'hero'|'gallery-all'|'hero-all', index: number|null }
// --- Show delete confirmation modal ---
function showDeleteModal(type, index) {
function showDeleteModal(type, index = null) {
pendingDelete = { type, index };
const modalText = document.getElementById('delete-modal-text');
if (type === 'gallery-all') {
modalText.textContent = "Are you sure you want to delete ALL gallery images?";
} else if (type === 'hero-all') {
modalText.textContent = "Are you sure you want to delete ALL hero images?";
} else {
modalText.textContent = "Are you sure you want to delete this image?";
}
document.getElementById('delete-modal').style.display = 'flex';
}
@@ -294,18 +310,14 @@ async function confirmDelete() {
await actuallyDeleteGalleryImage(pendingDelete.index);
} else if (pendingDelete.type === 'hero') {
await actuallyDeleteHeroImage(pendingDelete.index);
} else if (pendingDelete.type === 'gallery-all') {
await actuallyDeleteAllGalleryImages();
} else if (pendingDelete.type === 'hero-all') {
await actuallyDeleteAllHeroImages();
}
hideDeleteModal();
}
// --- Modal event listeners ---
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('delete-modal-close').onclick = hideDeleteModal;
document.getElementById('delete-modal-cancel').onclick = hideDeleteModal;
document.getElementById('delete-modal-confirm').onclick = confirmDelete;
});
// --- Actual delete functions ---
async function actuallyDeleteGalleryImage(index) {
const img = galleryImages[index];
@@ -349,14 +361,51 @@ async function actuallyDeleteHeroImage(index) {
}
}
// --- Modal event listeners ---
// --- Bulk delete functions ---
async function actuallyDeleteAllGalleryImages() {
try {
const res = await fetch('/api/gallery/delete_all', { method: 'POST' });
const data = await res.json();
if (res.ok) {
galleryImages = [];
renderGallery();
await saveGallery();
showToast("✅ All gallery images removed!", "success");
} else showToast("Error: " + data.error, "error");
} catch(err) {
console.error(err);
showToast("Server error!", "error");
}
}
async function actuallyDeleteAllHeroImages() {
try {
const res = await fetch('/api/hero/delete_all', { method: 'POST' });
const data = await res.json();
if (res.ok) {
heroImages = [];
renderHero();
await saveHero();
showToast("✅ All hero images removed!", "success");
} else showToast("Error: " + data.error, "error");
} catch(err) {
console.error(err);
showToast("Server error!", "error");
}
}
// --- Modal event listeners and bulk delete buttons ---
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('delete-modal-close').onclick = hideDeleteModal;
document.getElementById('delete-modal-cancel').onclick = hideDeleteModal;
document.getElementById('delete-modal-confirm').onclick = confirmDelete;
// Bulk delete buttons
const removeAllGalleryBtn = document.getElementById('remove-all-gallery');
const removeAllHeroBtn = document.getElementById('remove-all-hero');
if (removeAllGalleryBtn) removeAllGalleryBtn.onclick = () => showDeleteModal('gallery-all');
if (removeAllHeroBtn) removeAllHeroBtn.onclick = () => showDeleteModal('hero-all');
});
// --- Initialize ---
loadData();
loadData();

44
src/webui/style/style.css
View File

@@ -39,7 +39,6 @@ h1, h2 {
}
.upload-section label {
margin-right: 20px;
cursor: pointer;
}
@@ -108,7 +107,7 @@ h1, h2 {
/* Toast notifications */
#toast-container {
position: fixed;
top: 1rem;
bottom: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
@@ -120,12 +119,13 @@ h1, h2 {
background: rgba(0,0,0,0.85);
color: white;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
border-radius: 30px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
opacity: 0;
transform: translateY(-20px);
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
backdrop-filter: blur(20px);
}
.toast.show {
@@ -133,7 +133,7 @@ h1, h2 {
transform: translateY(0);
}
.toast.success { background-color: #28a745; }
.toast.success { background-color: #28a7468c; }
.toast.error { background-color: #dc3545; }
/* Tags */
@@ -351,7 +351,7 @@ h1, h2 {
}
/* Custom upload buttons */
.custom-upload-btn {
.up-btn {
display: inline-block;
background: #09A0C1;
color: #fff;
@@ -363,9 +363,11 @@ h1, h2 {
transition: all 0.1s ease;
user-select: none;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
font-size: 14px;
border: none;
}
.custom-upload-btn:hover {
.up-btn:hover {
background: #55c3ec;
}
@@ -425,4 +427,32 @@ h1, h2 {
}
.modal-btn.danger:hover {
background: #d32f2f;
}
/* Add this for horizontal alignment of upload and remove-all buttons */
.upload-actions-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 10px;
}
/* Style for Remove All buttons to match upload button look */
#remove-all-hero, #remove-all-gallery {
background: rgb(121, 26, 19);
}
#remove-all-gallery:hover,
#remove-all-hero:hover {
background: #d32f2f;
}
/* Responsive: stack buttons vertically on small screens */
@media (max-width: 500px) {
.upload-actions-row {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
}