2025-10-15 00:45:55 -05:00
<!-- dashboard_nav is rendered by the layout via renderTemplate to avoid unresolved Promise output -->
2025-10-15 00:39:22 -05:00
<div class="max-w-3xl mx-auto p-6">
<div class="relative flex justify-center">
<% if (!selectedGuild) { %>
2025-10-15 01:56:02 -05:00
<!-- Show server selection UI inline (replaces /dashboard/select-guild) -->
2025-10-15 00:39:22 -05:00
<div class="w-full">
2025-10-15 01:56:02 -05:00
<div class="mx-auto backdrop-blur-md bg-white/6 border border-white/10 rounded-xl p-6 shadow-lg glass-card max-w-xl text-center">
<h2 class="text-2xl font-bold mb-2"><%= appName %></h2>
<p class="text-sm text-slate-200/80 mb-4">Selecciona un servidor desde la lista abajo para administrar sus ajustes.</p>
<div class="mt-4 text-left">
<label class="block text-xs text-slate-300 mb-2">Servidor</label>
<div class="relative">
<input id="guildInput" aria-controls="guildList" aria-expanded="false" aria-autocomplete="list" autocomplete="off" placeholder="Busca o selecciona un servidor..." class="w-full rounded-md p-3 bg-white/6 text-white placeholder:text-slate-400 focus:outline-none" />
<button id="clearBtn" aria-label="Limpiar" class="absolute right-2 top-2 text-slate-300 hover:text-white hidden">✕</button>
<div id="guildList" role="listbox" class="mt-2 max-h-64 overflow-auto rounded-md bg-white/4 backdrop-blur divide-y divide-white/6 hidden">
<% if (guilds && guilds.length) { %>
<% guilds.sort((a,b)=> a.name.localeCompare(b.name)).forEach(g => { %>
<div role="option" data-id="<%= g.id %>" class="p-3 cursor-pointer hover:bg-white/6 text-white flex items-center gap-3">
<div class="w-8 h-8 rounded-md bg-white/10 flex items-center justify-center text-sm text-white/80">#</div>
<div class="truncate">
<div class="font-medium"><%= g.name %></div>
<div class="text-xs text-slate-300"><%= g.id %></div>
</div>
</div>
<% }) %>
<% } else { %>
<div class="p-3 text-slate-300">No tienes servidores gestionados</div>
<% } %>
</div>
</div>
2025-10-15 00:39:22 -05:00
</div>
</div>
</div>
2025-10-15 01:56:02 -05:00
<script>
(() => {
const input = document.getElementById('guildInput');
const list = document.getElementById('guildList');
const clearBtn = document.getElementById('clearBtn');
if (!input || !list) return;
const items = Array.from(list.querySelectorAll('[role="option"]'));
function showList() { list.classList.remove('hidden'); input.setAttribute('aria-expanded','true'); }
function hideList() { list.classList.add('hidden'); input.setAttribute('aria-expanded','false'); }
function filter(q) {
const v = String(q || '').toLowerCase().trim();
let any = 0;
items.forEach(it => {
const name = (it.querySelector('.font-medium')?.textContent || '').toLowerCase();
const id = (it.dataset.id || '');
if (!v || name.includes(v) || id.includes(v)) { it.style.display = ''; any++; } else { it.style.display = 'none'; }
});
return any;
}
let focused = -1;
function focusItem(idx) {
items.forEach((it,i)=> it.classList.toggle('ring-2 ring-white/20', i===idx));
focused = idx;
if (idx>=0) { const el = items[idx]; el.scrollIntoView({ block:'nearest' }); }
}
input.addEventListener('input', (e) => { const v = (e.target).value; filter(v); showList(); clearBtn.classList.toggle('hidden', !v); focused = -1; });
input.addEventListener('focus', () => { filter(input.value); showList(); });
input.addEventListener('blur', () => setTimeout(hideList, 150));
clearBtn?.addEventListener('click', (e)=>{ e.preventDefault(); input.value=''; filter(''); input.focus(); clearBtn.classList.add('hidden'); });
// click selection
items.forEach((it)=>{ it.addEventListener('click', ()=>{ const id = it.getAttribute('data-id'); if (id) window.location.href = `/dashboard/${id}/overview`; }); });
// keyboard navigation
input.addEventListener('keydown', (e)=>{
const visible = items.filter(it => it.style.display !== 'none');
if (e.key === 'ArrowDown') { e.preventDefault(); if (visible.length) { focused = Math.min(visible.length-1, (focused+1)); const idx = items.indexOf(visible[focused]); focusItem(idx); } }
else if (e.key === 'ArrowUp') { e.preventDefault(); if (visible.length) { focused = Math.max(0, (focused-1)); const idx = items.indexOf(visible[focused]); focusItem(idx); } }
else if (e.key === 'Enter') { e.preventDefault(); if (focused>=0) { const sel = items[focused]; const id = sel.getAttribute('data-id'); if (id) window.location.href = `/dashboard/${id}/overview`; } }
});
})();
</script>
2025-10-15 00:39:22 -05:00
<% } %>
2025-10-14 22:39:14 -05:00
2025-10-15 00:39:22 -05:00
<% if (typeof selectedGuild !== 'undefined' && selectedGuild) { %>
<!-- Floating sidebar for guild actions -->
<aside class="absolute right-6 top-12 hidden lg:block transform translate-y-1">
<nav class="bg-white/6 backdrop-blur rounded-xl p-4 glass-card w-48">
<ul class="flex flex-col gap-3">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul>
</nav>
</aside>
<!-- Mobile drawer/backdrop -->
<div id="drawerBackdrop" class="fixed inset-0 bg-black/40 z-40 hidden"></div>
<div id="mobileDrawer" class="fixed left-0 top-0 bottom-0 w-64 bg-white/6 backdrop-blur z-50 transform -translate-x-full transition-transform duration-300">
<div class="p-4">
<h4 class="text-white font-semibold mb-3">Servidor: <%= selectedGuildName || selectedGuild %></h4>
<ul class="flex flex-col gap-3">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded-md hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded-md hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded-md hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded-md hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded-md hover:bg-white/5">Mobs</a></li>
</ul>
2025-10-14 23:31:55 -05:00
</div>
</div>
2025-10-15 00:39:22 -05:00
<% } %>
2025-10-14 23:31:55 -05:00
2025-10-15 01:24:21 -05:00
<div id="dashContent">
2025-10-15 01:39:05 -05:00
<% if (typeof page !== 'undefined' && page === 'overview' && selectedGuild) { %>
<div class="w-full max-w-7xl mx-auto mt-6 px-4">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
<!-- Left sidebar -->
<aside class="lg:col-span-3">
<div class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20">
<h3 class="text-slate-200 font-semibold mb-3">Menú</h3>
<ul class="space-y-2 text-slate-200">
<li><a href="/dashboard/<%= selectedGuild %>/overview" class="block p-2 rounded hover:bg-white/5">Overview</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/members" class="block p-2 rounded hover:bg-white/5">Miembros</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/settings" class="block p-2 rounded hover:bg-white/5">Ajustes</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/areas" class="block p-2 rounded hover:bg-white/5">Game Areas</a></li>
<li><a href="/dashboard/<%= selectedGuild %>/mobs" class="block p-2 rounded hover:bg-white/5">Mobs</a></li>
</ul>
</div>
</aside>
<!-- Main content -->
<main class="lg:col-span-6">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-3xl font-bold text-white">Welcome <span class="text-indigo-400"><%= user?.username || 'Admin' %></span></h1>
<p class="text-slate-300">find commonly used dashboard pages below.</p>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-white/6 rounded-xl p-4">
<h4 class="text-white font-semibold">Custom messages</h4>
<p class="text-slate-300 text-sm mt-2">Create fully customized messages called templates and pack them with your very own embeds, buttons and select menus.</p>
<div class="mt-3"><a href="#" class="inline-block pixel-btn">Create template</a></div>
</div>
<div class="bg-white/6 rounded-xl p-4">
<h4 class="text-white font-semibold">Moderation cases</h4>
<p class="text-slate-300 text-sm mt-2">View and edit all moderation cases using the dashboard.</p>
<div class="mt-3"><a href="#" class="inline-block pixel-btn">View cases</a></div>
</div>
<div class="bg-white/6 rounded-xl p-4">
<h4 class="text-white font-semibold">User reports</h4>
<p class="text-slate-300 text-sm mt-2">Allow users to report others and fully customize how to handle them.</p>
<div class="mt-3"><a href="#" class="inline-block pixel-btn">Configure reports</a></div>
</div>
<div class="bg-white/6 rounded-xl p-4">
<h4 class="text-white font-semibold">Role greetings</h4>
<p class="text-slate-300 text-sm mt-2">Welcome users to their new role by using role assignment messages.</p>
<div class="mt-3"><a href="#" class="inline-block pixel-btn">Show role messages</a></div>
</div>
</div>
</main>
<!-- Right column (info / notices) -->
<aside class="lg:col-span-3">
<div class="bg-white/4 border border-white/6 rounded-xl p-4 sticky top-20">
<h4 class="text-white font-semibold mb-2">Notices</h4>
<div class="text-slate-300 text-sm">You are not in the support server. It is recommended to join for updates and support.</div>
</div>
</aside>
</div>
</div>
<% } %>
2025-10-15 01:09:21 -05:00
<% if (typeof page !== 'undefined' && page === 'settings' && selectedGuild) { %>
<div class="w-full max-w-3xl mt-6">
<div class="backdrop-blur-md bg-white/6 border border-white/8 rounded-xl p-6 glass-card">
2025-10-15 01:17:46 -05:00
<div class="flex items-center justify-between mb-4">
<h2 class="text-xl font-semibold">Ajustes del servidor</h2>
<a href="/dashboard/<%= selectedGuild %>/overview" class="text-sm text-slate-200/80 hover:underline">← Volver al overview</a>
</div>
2025-10-15 01:09:21 -05:00
<form id="guildSettingsForm" class="space-y-4">
<div>
<label class="block text-sm text-slate-200 mb-1">Prefix del bot</label>
<input type="text" name="prefix" id="prefixInput" value="<%= (guildConfig && guildConfig.prefix) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="!" />
</div>
<div>
<label class="block text-sm text-slate-200 mb-1">AI Role Prompt (opcional)</label>
<textarea name="aiRolePrompt" id="aiRoleInput" rows="4" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="E.g. Actúa como un moderador amigable..."><%= (guildConfig && guildConfig.aiRolePrompt) || '' %></textarea>
</div>
<div>
2025-10-15 01:13:26 -05:00
<label class="block text-sm text-slate-200 mb-1">Roles de staff</label>
<% if (typeof guildRoles !== 'undefined' && guildRoles && guildRoles.length) { %>
2025-10-15 01:17:46 -05:00
<div class="mb-2">
<input id="staffFilter" type="search" placeholder="Filtrar roles..." class="w-full rounded p-2 bg-transparent border border-white/6" />
</div>
2025-10-15 01:13:26 -05:00
<select id="staffSelect" name="staffSelect" multiple class="w-full rounded p-2 bg-transparent border border-white/6 h-36">
<% const selectedStaff = (guildConfig && Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String) : (guildConfig && guildConfig.staff ? String(guildConfig.staff).split(',') : [])) || []; %>
<% guildRoles.forEach(r => { %>
<option value="<%= r.id %>" <%= selectedStaff.includes(String(r.id)) ? 'selected' : '' %>><%= r.name %> — <%= r.id %></option>
<% }) %>
</select>
<% } else { %>
2025-10-15 01:24:21 -05:00
<% const fallbackStaff = (guildConfig && Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String) : (guildConfig && guildConfig.staff ? String(guildConfig.staff).split(',') : [])) || []; %>
<% if (fallbackStaff.length) { %>
<div class="mb-2">
<input id="staffFilter" type="search" placeholder="Filtrar roles..." class="w-full rounded p-2 bg-transparent border border-white/6" />
</div>
<select id="staffSelect" name="staffSelect" multiple class="w-full rounded p-2 bg-transparent border border-white/6 h-36">
<% fallbackStaff.forEach(id => { %>
<option value="<%= id %>" <%= (Array.isArray(guildConfig.staff) ? guildConfig.staff.map(String).includes(String(id)) : String(guildConfig.staff || '').split(',').map(s=>s.trim()).includes(String(id))) ? 'selected' : '' %>>ID: <%= id %></option>
<% }) %>
</select>
<% } else { %>
<input type="text" name="staff" id="staffInput" value="<%= (guildConfig && (Array.isArray(guildConfig.staff) ? guildConfig.staff.join(',') : guildConfig.staff)) || '' %>" class="w-full rounded p-2 bg-transparent border border-white/6" placeholder="123... , 456..." />
<div class="text-xs text-slate-300 mt-1">No se pudo obtener roles desde la API ni hay roles guardados. Introduce IDs manualmente separadas por coma.</div>
<% } %>
2025-10-15 01:13:26 -05:00
<% } %>
2025-10-15 01:09:21 -05:00
</div>
<div class="flex items-center gap-3">
<button type="submit" class="pixel-btn">Guardar</button>
<span id="saveStatus" class="text-sm text-slate-300"></span>
</div>
</form>
</div>
</div>
<script>
(function(){
const form = document.getElementById('guildSettingsForm');
const status = document.getElementById('saveStatus');
2025-10-15 01:17:46 -05:00
const staffFilter = document.getElementById('staffFilter');
if (staffFilter) {
staffFilter.addEventListener('input', ()=>{
const q = staffFilter.value.trim().toLowerCase();
const sel = document.getElementById('staffSelect');
if (!sel) return;
for (const opt of Array.from(sel.options)) {
const txt = (opt.textContent || '').toLowerCase();
opt.style.display = (!q || txt.indexOf(q) !== -1) ? '' : 'none';
}
});
}
2025-10-15 01:13:26 -05:00
form.addEventListener('submit', async (e)=>{
2025-10-15 01:09:21 -05:00
e.preventDefault();
status.textContent = 'Guardando...';
const prefix = document.getElementById('prefixInput').value.trim();
const aiRolePrompt = document.getElementById('aiRoleInput').value.trim();
2025-10-15 01:13:26 -05:00
let staffArr = [];
const staffSelect = document.getElementById('staffSelect');
if (staffSelect) {
for (const o of staffSelect.selectedOptions) staffArr.push(o.value);
} else {
const staffRaw = (document.getElementById('staffInput') && document.getElementById('staffInput').value) ? document.getElementById('staffInput').value.trim() : '';
staffArr = staffRaw ? staffRaw.split(',').map(s=>s.trim()).filter(Boolean) : [];
}
const payload = { prefix: prefix, aiRolePrompt: aiRolePrompt.length ? aiRolePrompt : null, staff: staffArr };
2025-10-15 01:09:21 -05:00
try {
const res = await fetch(`/api/dashboard/${encodeURIComponent('<%= selectedGuild %>')}/settings`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
const json = await res.json();
if (res.ok && json.ok) {
status.textContent = 'Guardado';
setTimeout(()=> status.textContent = '', 2500);
} else {
status.textContent = json.error || 'Error';
}
} catch (err) {
status.textContent = 'Error de red';
}
});
})();
</script>
2025-10-15 01:24:21 -05:00
2025-10-15 01:09:21 -05:00
<% } %>
2025-10-15 01:24:21 -05:00
</div>
<script>
// Simple fragment navigation for a SPA-like feel inside /dashboard
(function(){
async function loadFragment(href, push=true) {
try {
const url = new URL(href, location.origin);
url.searchParams.set('fragment','1');
const res = await fetch(url.toString(), { headers: { 'X-Requested-With':'XMLHttpRequest' } });
if (!res.ok) throw new Error('fetch-failed');
const html = await res.text();
const container = document.getElementById('dashContent');
if (!container) return;
container.innerHTML = html;
// execute inline scripts inside fragment
Array.from(container.querySelectorAll('script')).forEach(s=>{
try {
const n = document.createElement('script');
if (s.src) { n.src = s.src; n.async = false; document.head.appendChild(n); }
else { n.textContent = s.textContent; document.head.appendChild(n); document.head.removeChild(n); }
} catch(e){}
});
if (push) history.pushState({ href: href }, '', href);
} catch (err) {
console.warn('Fragment load failed', err);
location.href = href; // fallback full navigation
}
}
document.addEventListener('click', (e)=>{
const a = e.target.closest && e.target.closest('a');
if (!a) return;
const href = a.getAttribute('href');
if (!href) return;
// intercept internal dashboard links
if (href.startsWith('/dashboard') || href.indexOf(location.origin + '/dashboard') === 0) {
e.preventDefault();
loadFragment(href);
}
});
window.addEventListener('popstate', (e)=>{
const href = (e.state && e.state.href) || location.pathname + location.search;
loadFragment(href, false);
});
})();
</script>
2025-10-15 01:09:21 -05:00
2025-10-14 22:39:14 -05:00
</div>
</div>
2025-10-14 23:01:54 -05:00
2025-10-14 23:31:55 -05:00
<script>
// Drawer toggle logic
const drawerToggle = document.getElementById('drawerToggle');
const mobileDrawer = document.getElementById('mobileDrawer');
const drawerBackdrop = document.getElementById('drawerBackdrop');
function openDrawer() {
mobileDrawer.classList.remove('-translate-x-full');
drawerBackdrop.classList.remove('hidden');
}
function closeDrawer() {
mobileDrawer.classList.add('-translate-x-full');
drawerBackdrop.classList.add('hidden');
}
drawerToggle?.addEventListener('click', openDrawer);
drawerBackdrop?.addEventListener('click', closeDrawer);
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeDrawer();
});
</script>
