87 lines
3.7 KiB
HTML
87 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Manage Files</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen p-6">
|
|
<div class="max-w-2xl mx-auto bg-white rounded-xl shadow-lg p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Gallery Manager</h1>
|
|
<p class="text-gray-500 text-sm">Select files to remove from the slideshow</p>
|
|
</div>
|
|
<a href="/" class="text-sm text-blue-600 hover:underline">← Back to Upload</a>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between bg-gray-50 p-4 rounded-t-lg border-b border-gray-200">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" id="selectAll" onclick="toggleAll(this)" class="w-4 h-4 rounded text-blue-600">
|
|
<span class="text-sm font-medium text-gray-700">Select All</span>
|
|
</label>
|
|
<button onclick="deleteSelected()" class="bg-red-500 hover:bg-red-600 text-white text-xs font-bold py-2 px-4 rounded-lg transition-all shadow-sm">
|
|
Delete Selected
|
|
</button>
|
|
</div>
|
|
|
|
<div id="fileContainer" class="border border-gray-200 border-t-0 rounded-b-lg max-h-[500px] overflow-y-auto">
|
|
<div class="p-8 text-center text-gray-400">Loading files...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
async function fetchFiles() {
|
|
const res = await fetch('/api/images');
|
|
const files = await res.json();
|
|
const container = document.getElementById('fileContainer');
|
|
container.innerHTML = '';
|
|
|
|
if (files.length === 0) {
|
|
container.innerHTML = '<div class="p-8 text-center text-gray-400">No images found.</div>';
|
|
return;
|
|
}
|
|
|
|
files.forEach(file => {
|
|
const div = document.createElement('div');
|
|
div.className = "flex items-center gap-4 p-4 border-b border-gray-100 hover:bg-gray-50 transition-colors";
|
|
div.innerHTML = `
|
|
<input type="checkbox" name="fileCheck" value="${file}" class="file-checkbox w-4 h-4 rounded text-blue-600">
|
|
<img src="/uploads/${file}" class="w-12 h-12 object-cover rounded shadow-sm">
|
|
<span class="text-sm text-gray-700 truncate flex-1">${file}</span>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
}
|
|
|
|
function toggleAll(source) {
|
|
checkboxes = document.getElementsByClassName('file-checkbox');
|
|
for(var i=0, n=checkboxes.length;i<n;i++) {
|
|
checkboxes[i].checked = source.checked;
|
|
}
|
|
}
|
|
|
|
async function deleteSelected() {
|
|
const checked = document.querySelectorAll('.file-checkbox:checked');
|
|
const filesToDelete = Array.from(checked).map(cb => cb.value);
|
|
|
|
if (filesToDelete.length === 0) return alert("Select files first!");
|
|
if (!confirm(`Delete ${filesToDelete.length} files?`)) return;
|
|
|
|
const res = await fetch('/api/delete', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(filesToDelete)
|
|
});
|
|
|
|
if (res.ok) {
|
|
fetchFiles(); // Refresh list
|
|
document.getElementById('selectAll').checked = false;
|
|
}
|
|
}
|
|
|
|
fetchFiles();
|
|
</script>
|
|
</body>
|
|
</html> |