367 lines
20 KiB
Plaintext
367 lines
20 KiB
Plaintext
<!-- dashboard_nav is rendered by the layout via renderTemplate to avoid unresolved Promise output -->
|
||
<div class="max-w-3xl mx-auto p-6">
|
||
<div class="relative flex justify-center">
|
||
<% if (!selectedGuild) { %>
|
||
<!-- Centered logo + selection card to match mock -->
|
||
<div class="flex flex-col items-center justify-start">
|
||
<!-- logo area -->
|
||
<div class="mt-10 mb-6">
|
||
<!-- reuse small logo SVG -->
|
||
<div class="w-12 h-12 mx-auto">
|
||
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
|
||
<defs>
|
||
<linearGradient id="g2" x1="0" x2="1">
|
||
<stop offset="0%" stop-color="#06b6d4" />
|
||
<stop offset="100%" stop-color="#3b82f6" />
|
||
</linearGradient>
|
||
</defs>
|
||
<circle cx="50" cy="50" r="42" fill="url(#g2)" opacity="0.95" />
|
||
<g transform="translate(50,50)">
|
||
<path d="M-18,-6 L0,-28 L18,-6 L0,18 Z" fill="white" opacity="0.95"/>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full max-w-lg">
|
||
<div class="mx-auto backdrop-blur-md bg-white/6 border border-white/8 rounded-xl p-6 shadow-lg glass-card">
|
||
<!-- user header inside card -->
|
||
<div class="flex items-center justify-center mb-4">
|
||
<div class="text-slate-200 text-sm">Logged in as</div>
|
||
<div class="ml-3 relative">
|
||
<button id="cardUserBtn" class="flex items-center gap-2 px-3 py-1 rounded-md hover:bg-white/5 focus:outline-none" aria-expanded="false">
|
||
<% if (user && user.id && user.avatar) { %>
|
||
<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png" class="w-8 h-8 rounded-full" alt="avatar">
|
||
<% } else { %>
|
||
<img src="/assets/images/snap1.svg" class="w-8 h-8 rounded-full" alt="avatar">
|
||
<% } %>
|
||
<span class="text-white font-medium"><%= user?.username || 'User' %></span>
|
||
<svg class="w-3 h-3 text-white/80" viewBox="0 0 20 20" fill="none"><path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
<div id="cardUserMenu" class="absolute right-0 mt-2 w-36 bg-white/6 backdrop-blur rounded-md p-2 hidden">
|
||
<a href="/auth/logout" class="block px-3 py-2 text-sm text-rose-300 hover:bg-white/5 rounded">Log out</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="cardList" class="divide-y divide-white/6 max-h-72 overflow-auto rounded">
|
||
<% if (guilds && guilds.length) { %>
|
||
<% guilds.sort((a,b)=> a.name.localeCompare(b.name)).forEach(g => { %>
|
||
<div class="p-3 cursor-pointer hover:bg-white/5 flex items-center justify-between text-white" data-id="<%= g.id %>">
|
||
<div class="flex items-center gap-3">
|
||
<% if (g.icon) { %>
|
||
<img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png" class="w-8 h-8 rounded-full" alt="icon">
|
||
<% } else { %>
|
||
<div class="w-8 h-8 rounded-full bg-white/8 flex items-center justify-center text-xs text-white">S</div>
|
||
<% } %>
|
||
<div class="text-left">
|
||
<div class="font-medium"><%= g.name %></div>
|
||
</div>
|
||
</div>
|
||
<div class="text-slate-300">›</div>
|
||
</div>
|
||
<% }) %>
|
||
<% } else { %>
|
||
<div class="p-4 text-slate-300">No servers available</div>
|
||
<% } %>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center text-xs text-slate-400 mt-6">© 2021–2025 Xge • Terms • Privacy • Legal Notice</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function(){
|
||
const card = document.querySelector('[data-id]')?.closest('.mx-auto');
|
||
// user menu toggle inside card
|
||
const userBtn = document.getElementById('cardUserBtn');
|
||
const userMenu = document.getElementById('cardUserMenu');
|
||
if (userBtn && userMenu) {
|
||
userBtn.addEventListener('click',(e)=>{ e.stopPropagation(); const open = userMenu.classList.contains('hidden'); if (open) { userMenu.classList.remove('hidden'); } else { userMenu.classList.add('hidden'); } });
|
||
document.addEventListener('click', ()=> userMenu.classList.add('hidden'));
|
||
}
|
||
|
||
// clicking a guild row navigates
|
||
document.getElementById('cardList')?.addEventListener('click', (e)=>{
|
||
let el = e.target;
|
||
while (el && !el.dataset?.id) el = el.parentElement;
|
||
if (el && el.dataset && el.dataset.id) {
|
||
const id = el.dataset.id;
|
||
window.location.href = `/dashboard/${id}/overview`;
|
||
}
|
||
});
|
||
})();
|
||
</script>
|
||
<% } %>
|
||
|
||
<% 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>
|
||
</div>
|
||
</div>
|
||
<% } %>
|
||
|
||
<div id="dashContent">
|
||
<% 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>
|
||
<% } %>
|
||
|
||
<% 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">
|
||
<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>
|
||
<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>
|
||
<label class="block text-sm text-slate-200 mb-1">Roles de staff</label>
|
||
<% if (typeof guildRoles !== 'undefined' && guildRoles && guildRoles.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">
|
||
<% 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 { %>
|
||
<% 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>
|
||
<% } %>
|
||
<% } %>
|
||
</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');
|
||
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';
|
||
}
|
||
});
|
||
}
|
||
form.addEventListener('submit', async (e)=>{
|
||
e.preventDefault();
|
||
status.textContent = 'Guardando...';
|
||
const prefix = document.getElementById('prefixInput').value.trim();
|
||
const aiRolePrompt = document.getElementById('aiRoleInput').value.trim();
|
||
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 };
|
||
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>
|
||
|
||
<% } %>
|
||
</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>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<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>
|
||
|
||
|