beroth/gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

to spanish, also let delete

Browse Source
This commit is contained in:
beroth
2026-05-16 12:13:32 -06:00
parent 521bf5007f
commit 6eabf016c5
1 changed files with 121 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard.html
+121 -41
View File
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Campaign Dashboard</title>
<title>Panel de Campañas</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
@@ -19,21 +19,21 @@
<!-- ========================= -->
<div id="loginScreen" class="flex items-center justify-center min-h-screen p-6">
<div class="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-2xl shadow-lg p-6">
<h1 class="text-2xl font-bold mb-2">🏠 Campaign Dashboard</h1>
<h1 class="text-2xl font-bold mb-2">🏠 Panel de Campañas</h1>
<p class="text-zinc-400 text-sm mb-6">
Login to manage campaigns, sessions, and media uploads.
Inicia sesión para gestionar campañas, sesiones y archivos.
</p>
<div class="space-y-4">
<input id="loginEmail" type="email" placeholder="Email"
<input id="loginEmail" type="email" placeholder="Correo"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500"/>
<input id="loginPassword" type="password" placeholder="Password"
<input id="loginPassword" type="password" placeholder="Contraseña"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500"/>
<button id="loginBtn"
class="w-full bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold">
Login
Entrar
</button>
<div id="loginError" class="text-red-400 text-sm"></div>
@@ -49,13 +49,13 @@
<!-- Top Bar -->
<div class="flex items-center justify-between p-4 border-b border-zinc-800 bg-zinc-950 sticky top-0 z-50">
<div>
<h2 class="font-bold text-lg">Dashboard</h2>
<h2 class="font-bold text-lg">Panel</h2>
<p id="userEmail" class="text-xs text-zinc-400"></p>
</div>
<button id="logoutBtn"
class="bg-zinc-800 hover:bg-zinc-700 px-4 py-2 rounded-xl text-sm font-semibold">
Logout
Cerrar Sesión
</button>
</div>
@@ -63,13 +63,13 @@
<div class="p-4">
<div class="grid grid-cols-3 gap-2 bg-zinc-900 border border-zinc-800 rounded-2xl p-2">
<button class="tabBtn bg-indigo-600 rounded-xl py-2 text-sm font-semibold" data-tab="campaignsTab">
Campaigns
Campañas
</button>
<button class="tabBtn bg-zinc-800 rounded-xl py-2 text-sm font-semibold" data-tab="sessionsTab">
Sessions
Sesiones
</button>
<button class="tabBtn bg-zinc-800 rounded-xl py-2 text-sm font-semibold" data-tab="mediaTab">
Media
Archivos
</button>
</div>
</div>
@@ -80,18 +80,18 @@
<div id="campaignsTab" class="tabContent p-4 space-y-4">
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<h3 class="font-bold text-lg mb-3">Create Campaign</h3>
<h3 class="font-bold text-lg mb-3">Crear Campaña</h3>
<div class="space-y-3">
<input id="newCampaignName" placeholder="Campaign name"
<input id="newCampaignName" placeholder="Nombre de campaña"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none"/>
<textarea id="newCampaignNotes" placeholder="AI Prompt / Instructions (optional)"
<textarea id="newCampaignNotes" placeholder="Instrucciones para IA (opcional)"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none"></textarea>
<button id="createCampaignBtn"
class="w-full bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold">
Create Campaign
Crear Campaña
</button>
<div id="campaignCreateMsg" class="text-sm text-zinc-400"></div>
@@ -100,9 +100,9 @@
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-bold text-lg">Campaign List</h3>
<h3 class="font-bold text-lg">Lista de Campañas</h3>
<button id="toggleInactiveBtn" class="text-xs bg-zinc-800 hover:bg-zinc-700 px-3 py-1.5 rounded-lg border border-zinc-700 transition">
Show Inactive
Mostrar Inactivas
</button>
</div>
@@ -116,21 +116,21 @@
<div id="sessionsTab" class="tabContent hidden p-4 space-y-4">
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<h3 class="font-bold text-lg mb-3">Sessions</h3>
<h3 class="font-bold text-lg mb-3">Sesiones</h3>
<select id="sessionsCampaignFilter"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none mb-3">
<option value="">All campaigns</option>
<option value="">Todas las campañas</option>
</select>
<button id="refreshSessionsBtn"
class="w-full bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold">
Refresh Sessions
Actualizar Sesiones
</button>
</div>
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<h3 class="font-bold text-lg mb-3">Session List</h3>
<h3 class="font-bold text-lg mb-3">Lista de Sesiones</h3>
<div id="sessionList" class="space-y-3"></div>
</div>
</div>
@@ -141,43 +141,43 @@
<div id="mediaTab" class="tabContent hidden p-4 space-y-4">
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<h3 class="font-bold text-lg mb-3">Upload Media</h3>
<h3 class="font-bold text-lg mb-3">Subir Archivo</h3>
<select id="mediaCampaignSelect"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none mb-3">
<option value="">Select campaign</option>
<option value="">Seleccionar campaña</option>
</select>
<input id="mediaCategory" placeholder="Category (e.g. kitchen, front, bathroom)"
<input id="mediaCategory" placeholder="Categoría (ej. cocina, frente, baño)"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none mb-3 focus:ring-2 focus:ring-indigo-500"/>
<input id="mediaType" placeholder="Type (e.g. photo, video)"
<input id="mediaType" placeholder="Tipo (ej. foto, video)"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none mb-4 focus:ring-2 focus:ring-indigo-500"/>
<div class="mb-2 text-xs font-semibold text-zinc-400 uppercase tracking-wider">File Source</div>
<div class="mb-2 text-xs font-semibold text-zinc-400 uppercase tracking-wider">Fuente de archivo</div>
<input id="mediaFile" type="file" accept="image/*,video/*"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500"/>
<div class="py-2 flex items-center justify-center">
<div class="h-px bg-zinc-800 w-full"></div>
<span class="px-3 text-xs text-zinc-500 font-bold mb-1">OR</span>
<span class="px-3 text-xs text-zinc-500 font-bold mb-1">O</span>
<div class="h-px bg-zinc-800 w-full"></div>
</div>
<input id="mediaUrl" type="url" placeholder="Paste remote URL (e.g. Google Drive, Imgur)"
<input id="mediaUrl" type="url" placeholder="Pegar URL remota (ej. Google Drive, Imgur)"
class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none mb-5 focus:ring-2 focus:ring-indigo-500"/>
<button id="uploadMediaBtn"
class="w-full bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold text-white">
Save Media
Guardar Archivo
</button>
<div id="uploadMsg" class="text-sm text-zinc-400 mt-2"></div>
</div>
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl p-4">
<h3 class="font-bold text-lg mb-3">Media List</h3>
<h3 class="font-bold text-lg mb-3">Lista de Archivos</h3>
<div id="mediaList" class="columns-2 md:columns-3 lg:columns-4 gap-3 space-y-3"></div>
</div>
</div>
@@ -190,7 +190,7 @@
<div id="editCampaignModal" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl max-w-lg w-full p-6 shadow-2xl">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">Edit Campaign</h2>
<h2 class="text-xl font-bold">Editar Campaña</h2>
<button id="closeModalBtn" class="text-zinc-500 hover:text-white transition text-2xl">&times;</button>
</div>
@@ -198,39 +198,58 @@
<input type="hidden" id="editCampaignId" />
<div>
<label class="block text-xs font-semibold text-zinc-400 mb-1">Name</label>
<label class="block text-xs font-semibold text-zinc-400 mb-1">Nombre</label>
<input id="editCampaignName" class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500"/>
</div>
<div>
<label class="block text-xs font-semibold text-zinc-400 mb-1">Keywords (comma separated)</label>
<input id="editCampaignKeywords" class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500" placeholder="e.g. house, pool, garden"/>
<label class="block text-xs font-semibold text-zinc-400 mb-1">Palabras clave (separadas por coma)</label>
<input id="editCampaignKeywords" class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none focus:ring-2 focus:ring-indigo-500" placeholder="ej. casa, piscina, jardín"/>
</div>
<div>
<label class="block text-xs font-semibold text-zinc-400 mb-1">AI Prompt</label>
<textarea id="editCampaignPrompt" class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none h-24 focus:ring-2 focus:ring-indigo-500" placeholder="Instructions for AI..."></textarea>
<label class="block text-xs font-semibold text-zinc-400 mb-1">Instrucciones para IA</label>
<textarea id="editCampaignPrompt" class="w-full bg-zinc-950 border border-zinc-800 rounded-xl p-3 outline-none h-24 focus:ring-2 focus:ring-indigo-500" placeholder="Instrucciones para IA..."></textarea>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" id="editCampaignWelcomePhotos" class="w-4 h-4 rounded border-zinc-800 bg-zinc-950 text-indigo-600 focus:ring-indigo-500"/>
<label for="editCampaignWelcomePhotos" class="text-sm font-semibold text-zinc-300">Require Welcome Photos</label>
<label for="editCampaignWelcomePhotos" class="text-sm font-semibold text-zinc-300">Requerir Fotos de Bienvenida</label>
</div>
<div class="flex items-center gap-2">
<input type="checkbox" id="editCampaignActive" class="w-4 h-4 rounded border-zinc-800 bg-zinc-950 text-indigo-600 focus:ring-indigo-500"/>
<label for="editCampaignActive" class="text-sm font-semibold text-zinc-300">Campaign Active</label>
<label for="editCampaignActive" class="text-sm font-semibold text-zinc-300">Campaña Activa</label>
</div>
<div class="mt-6 flex gap-3">
<button id="saveCampaignBtn" class="flex-1 bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold text-white">Save Changes</button>
<button id="cancelModalBtn" class="flex-1 bg-zinc-800 hover:bg-zinc-700 transition rounded-xl p-3 font-semibold text-white">Cancel</button>
<button id="saveCampaignBtn" class="flex-1 bg-indigo-600 hover:bg-indigo-500 transition rounded-xl p-3 font-semibold text-white">Guardar Cambios</button>
<button id="cancelModalBtn" class="flex-1 bg-zinc-800 hover:bg-zinc-700 transition rounded-xl p-3 font-semibold text-white">Cancelar</button>
</div>
<div id="editModalMsg" class="text-sm text-center"></div>
</div>
</div>
</div>
<!-- ========================= -->
<!-- DELETE MEDIA MODAL -->
<!-- ========================= -->
<div id="deleteMediaModal" class="hidden fixed inset-0 z-50 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4">
<div class="bg-zinc-900 border border-zinc-800 rounded-2xl max-w-sm w-full p-6 shadow-2xl text-center">
<h2 class="text-xl font-bold mb-3">¿Eliminar Archivo?</h2>
<p class="text-sm text-zinc-400 mb-6">¿Estás seguro de que quieres eliminar esta foto? Esta acción no se puede deshacer.</p>
<input type="hidden" id="deleteMediaId" />
<input type="hidden" id="deleteMediaUrl" />
<div class="flex gap-3">
<button id="confirmDeleteMediaBtn" class="flex-1 bg-red-600 hover:bg-red-500 transition rounded-xl p-3 font-semibold text-white">Eliminar</button>
<button id="cancelDeleteMediaBtn" class="flex-1 bg-zinc-800 hover:bg-zinc-700 transition rounded-xl p-3 font-semibold text-white">Cancelar</button>
</div>
<div id="deleteMediaMsg" class="text-sm mt-3"></div>
</div>
</div>
<script>
// =============================
// CONFIG
@@ -737,7 +756,14 @@
card.className = "bg-zinc-950 border border-zinc-800 rounded-xl overflow-hidden break-inside-avoid mb-3";
card.innerHTML = `
<img src="${m.url}" class="w-full h-auto block" loading="lazy" />
<div class="relative group">
<img src="${m.url}" class="w-full h-auto block" loading="lazy" />
<button class="deleteMediaBtn absolute top-2 right-2 bg-black/60 hover:bg-black/90 text-white rounded-lg p-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity" data-id="${m.id}" data-url="${m.url}" title="Delete media">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="p-2.5">
<div class="text-[10px] font-bold text-indigo-400 uppercase tracking-tight mb-0.5">${m.category || "photo"} • ${m.type || "unknown"}</div>
<div class="text-xs font-semibold text-zinc-200 truncate">${campaignName}</div>
@@ -747,6 +773,57 @@
list.appendChild(card);
});
document.querySelectorAll(".deleteMediaBtn").forEach(btn => {
btn.addEventListener("click", () => {
openDeleteMediaModal(btn.dataset.id, btn.dataset.url);
});
});
}
function openDeleteMediaModal(id, url) {
document.getElementById("deleteMediaId").value = id;
document.getElementById("deleteMediaUrl").value = url;
setMessage(document.getElementById("deleteMediaMsg"), "");
show(document.getElementById("deleteMediaModal"));
}
function closeDeleteMediaModal() {
hide(document.getElementById("deleteMediaModal"));
}
async function confirmDeleteMedia() {
const id = document.getElementById("deleteMediaId").value;
const url = document.getElementById("deleteMediaUrl").value;
const msg = document.getElementById("deleteMediaMsg");
setMessage(msg, "Deleting...");
const { error: dbError } = await supabaseClient
.from("media")
.delete()
.eq("id", id);
if (dbError) {
setMessage(msg, "Error: " + dbError.message, true);
return;
}
if (url.includes(STORAGE_BUCKET)) {
try {
const parts = url.split(STORAGE_BUCKET + "/");
if (parts.length >= 2) {
const filePath = parts[1];
await supabaseClient.storage.from(STORAGE_BUCKET).remove([filePath]);
}
} catch (e) {
console.error("Failed to delete from storage", e);
}
}
setMessage(msg, "Deleted successfully!");
closeDeleteMediaModal();
await loadMedia();
}
// =============================
@@ -771,6 +848,9 @@
document.getElementById("uploadMediaBtn").addEventListener("click", uploadMedia);
document.getElementById("cancelDeleteMediaBtn").addEventListener("click", closeDeleteMediaModal);
document.getElementById("confirmDeleteMediaBtn").addEventListener("click", confirmDeleteMedia);
setupTabs();
// Keep session state updated