409 lines
16 KiB
HTML
409 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cabo Voting — Admin</title>
|
|
<style>
|
|
:root {
|
|
--bg: #0b0d14;
|
|
--surface: #13161f;
|
|
--surface2: #1a1e2a;
|
|
--border: #252a38;
|
|
--accent: #00d4ff;
|
|
--text: #e0e6f0;
|
|
--text-muted: #7a8499;
|
|
--green: #34d399;
|
|
--red: #f87171;
|
|
--amber: #fbbf24;
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding: 20px; }
|
|
a { color: var(--accent); }
|
|
h1 { font-size: 1.3rem; color: var(--accent); margin-bottom: 6px; }
|
|
h2 { font-size: 1rem; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; }
|
|
|
|
.container { max-width: 900px; margin: 0 auto; }
|
|
|
|
/* Password gate */
|
|
#passwordGate {
|
|
position: fixed; inset: 0; background: var(--bg);
|
|
display: flex; align-items: center; justify-content: center; z-index: 1000;
|
|
}
|
|
#passwordGate.hidden { display: none; }
|
|
#passwordGate .box {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 16px; padding: 32px; width: 320px; text-align: center;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
|
|
}
|
|
#passwordGate .box h2 { font-size: 1.2rem; color: var(--accent); margin-bottom: 8px; }
|
|
#passwordGate .box p { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 20px; }
|
|
#passwordGate input {
|
|
width: 100%; padding: 10px 14px; background: var(--surface2);
|
|
border: 1px solid var(--border); border-radius: 8px; color: var(--text);
|
|
font-size: 1rem; outline: none; margin-bottom: 12px; text-align: center;
|
|
}
|
|
#passwordGate input:focus { border-color: var(--accent); }
|
|
#passwordGate button {
|
|
width: 100%; padding: 10px; background: var(--accent); color: var(--bg);
|
|
border: none; border-radius: 8px; font-size: 0.9rem; font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
#passwordGate button:hover { opacity: 0.85; }
|
|
#passwordGate .error { color: var(--red); font-size: 0.78rem; margin-top: 8px; }
|
|
|
|
/* Header */
|
|
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
|
|
.header-links { display: flex; gap: 12px; font-size: 0.8rem; }
|
|
.header-links a { color: var(--text-muted); }
|
|
.header-links a:hover { color: var(--text); }
|
|
|
|
/* Stat cards */
|
|
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
|
.stat-card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 12px; padding: 14px 16px; text-align: center;
|
|
}
|
|
.stat-card .val { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
|
|
.stat-card .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
|
|
|
|
/* Polls toggle */
|
|
.polls-toggle {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 12px; padding: 16px 20px; margin-bottom: 24px;
|
|
}
|
|
.polls-toggle .label { font-size: 0.85rem; font-weight: 600; }
|
|
.polls-toggle .sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
|
|
.btn-toggle {
|
|
padding: 8px 20px; border: none; border-radius: 8px;
|
|
font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s;
|
|
}
|
|
.btn-toggle:hover { opacity: 0.85; }
|
|
.btn-toggle.open { background: var(--red); color: #fff; }
|
|
.btn-toggle.closed { background: var(--green); color: #000; }
|
|
|
|
/* Sections */
|
|
.section { margin-bottom: 32px; }
|
|
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
|
|
.section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.badge {
|
|
background: var(--surface2); border-radius: 10px; padding: 2px 8px;
|
|
font-size: 0.65rem; color: var(--text-muted);
|
|
}
|
|
.badge.pending { background: rgba(251,191,36,0.15); color: var(--amber); }
|
|
|
|
/* Option rows */
|
|
.option-list { display: flex; flex-direction: column; gap: 8px; }
|
|
.option-row {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: 10px; padding: 12px 14px;
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.option-row.pending { border-color: rgba(251,191,36,0.4); }
|
|
.option-row .cat-tag {
|
|
font-size: 0.65rem; padding: 2px 7px; border-radius: 4px;
|
|
background: var(--surface2); color: var(--text-muted); flex-shrink: 0;
|
|
}
|
|
.option-row .name { flex: 1; font-size: 0.85rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.option-row .meta { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
|
|
.option-row .votes-badge {
|
|
background: rgba(0,212,255,0.1); color: var(--accent);
|
|
border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; flex-shrink: 0;
|
|
}
|
|
.btn {
|
|
padding: 6px 14px; border: none; border-radius: 6px;
|
|
font-size: 0.75rem; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: opacity 0.2s;
|
|
}
|
|
.btn:hover { opacity: 0.85; }
|
|
.btn-approve { background: var(--green); color: #000; }
|
|
.btn-reject { background: var(--red); color: #fff; }
|
|
.btn-delete { background: transparent; border: 1px solid var(--border); color: var(--text-muted); }
|
|
.btn-delete:hover { border-color: var(--red); color: var(--red); }
|
|
.btn-edit { background: transparent; border: 1px solid var(--border); color: var(--amber); }
|
|
.btn-edit:hover { border-color: var(--amber); color: #fcd34d; }
|
|
.btn-row { display: flex; gap: 6px; flex-shrink: 0; }
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
|
|
background: var(--surface2); border: 1px solid var(--border);
|
|
border-radius: 10px; padding: 10px 20px; font-size: 0.82rem; z-index: 500;
|
|
transition: transform 0.3s; color: var(--text);
|
|
}
|
|
.toast.show { transform: translateX(-50%) translateY(0); }
|
|
.toast.success { border-color: var(--green); color: var(--green); }
|
|
.toast.error { border-color: var(--red); color: var(--red); }
|
|
|
|
/* Loading */
|
|
.loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.85rem; }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.option-row { flex-wrap: wrap; }
|
|
.btn-row { width: 100%; justify-content: flex-end; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Password Gate -->
|
|
<div id="passwordGate">
|
|
<div class="box">
|
|
<h2>🔐 Admin Access</h2>
|
|
<p>Enter the admin password to manage the voting app.</p>
|
|
<input type="password" id="pwdInput" placeholder="Password" onkeydown="if(event.key==='Enter')tryLogin()" />
|
|
<button onclick="tryLogin()">Unlock →</button>
|
|
<div class="error" id="pwdError"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container" id="adminPanel" style="display:none">
|
|
<div class="header">
|
|
<div>
|
|
<h1>🏄 Cabo Voting — Admin</h1>
|
|
<h2 id="appStatus">Connecting…</h2>
|
|
</div>
|
|
<div class="header-links">
|
|
<a href="/">← Back to Voting</a>
|
|
<a href="/?view=results" target="_blank">View Results ↗</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="stats">
|
|
<div class="stat-card"><div class="val" id="statVoters">—</div><div class="label">Voters</div></div>
|
|
<div class="stat-card"><div class="val" id="statOptions">—</div><div class="label">Options</div></div>
|
|
<div class="stat-card"><div class="val" id="statVotes">—</div><div class="label">Total Votes</div></div>
|
|
<div class="stat-card"><div class="val" id="statPending">—</div><div class="label">Pending</div></div>
|
|
</div>
|
|
|
|
<!-- Polls Toggle -->
|
|
<div class="polls-toggle">
|
|
<div>
|
|
<div class="label" id="pollsLabel">Polls: OPEN</div>
|
|
<div class="sub">Click to toggle open/closed state</div>
|
|
</div>
|
|
<button class="btn-toggle open" id="pollsBtn" onclick="togglePolls()">Close Polls</button>
|
|
</div>
|
|
|
|
<!-- Pending Options -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<span class="section-title">⏳ Pending Approvals</span>
|
|
<span class="badge pending" id="pendingBadge">0</span>
|
|
</div>
|
|
<div class="option-list" id="pendingList"><div class="loading">Loading…</div></div>
|
|
</div>
|
|
|
|
<!-- All Options -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<span class="section-title">📋 All Options</span>
|
|
<span class="badge" id="allBadge">0</span>
|
|
</div>
|
|
<div class="option-list" id="allList"><div class="loading">Loading…</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const API = '';
|
|
const PWD_KEY = 'cabo_admin_pwd';
|
|
const CORRECT_PWD = 'cabo2026';
|
|
let allData = null;
|
|
|
|
function toast(msg, type='') {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.className = 'toast' + (type ? ' ' + type : '');
|
|
t.classList.add('show');
|
|
setTimeout(() => t.classList.remove('show'), 3000);
|
|
}
|
|
|
|
function tryLogin() {
|
|
const pwd = document.getElementById('pwdInput').value;
|
|
const err = document.getElementById('pwdError');
|
|
if (pwd === CORRECT_PWD) {
|
|
sessionStorage.setItem(PWD_KEY, pwd);
|
|
document.getElementById('passwordGate').classList.add('hidden');
|
|
document.getElementById('adminPanel').style.display = 'block';
|
|
loadData();
|
|
} else {
|
|
err.textContent = 'Incorrect password — try "cabo2026"';
|
|
}
|
|
}
|
|
|
|
async function loadData() {
|
|
try {
|
|
const [cats, opts] = await Promise.all([
|
|
fetch(API + '/api/categories').then(r => r.json()),
|
|
fetch(API + '/api/options?includeUnapproved=true').then(r => r.json()),
|
|
]);
|
|
allData = { categories: cats, options: opts };
|
|
renderStats();
|
|
renderPending();
|
|
renderAll();
|
|
document.getElementById('appStatus').textContent = 'Connected';
|
|
} catch(e) {
|
|
document.getElementById('appStatus').textContent = 'Connection error — is the server running?';
|
|
}
|
|
}
|
|
|
|
function renderStats() {
|
|
const voters = new Set();
|
|
let totalVotes = 0;
|
|
let pending = 0;
|
|
allData.options.forEach(o => {
|
|
if (!o.approved) { pending++; return; }
|
|
o.votes.forEach(v => voters.add(v.name));
|
|
totalVotes += o.votes.length;
|
|
});
|
|
document.getElementById('statVoters').textContent = voters.size;
|
|
document.getElementById('statOptions').textContent = allData.options.length - pending;
|
|
document.getElementById('statVotes').textContent = totalVotes;
|
|
document.getElementById('statPending').textContent = pending;
|
|
}
|
|
|
|
function renderPending() {
|
|
const pending = allData.options.filter(o => !o.approved);
|
|
const list = document.getElementById('pendingList');
|
|
document.getElementById('pendingBadge').textContent = pending.length;
|
|
if (pending.length === 0) {
|
|
list.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-muted);font-size:0.8rem">No pending options ✓</div>';
|
|
return;
|
|
}
|
|
list.innerHTML = pending.map(o => `
|
|
<div class="option-row pending">
|
|
<span class="cat-tag">${o.categoryId}</span>
|
|
<div class="name">${o.name}</div>
|
|
<div class="meta">by ${o.addedBy || 'unknown'}</div>
|
|
<div class="btn-row">
|
|
<button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
|
|
<button class="btn btn-approve" onclick="approve('${o.id}')">✓ Approve</button>
|
|
<button class="btn btn-reject" onclick="reject('${o.id}')">✕ Reject</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function renderAll() {
|
|
const approved = allData.options.filter(o => o.approved);
|
|
document.getElementById('allBadge').textContent = approved.length;
|
|
document.getElementById('allList').innerHTML = approved.map(o => `
|
|
<div class="option-row">
|
|
<span class="cat-tag">${o.categoryId}</span>
|
|
<div class="name">${o.name}</div>
|
|
<div class="votes-badge">${o.votes.length} vote${o.votes.length !== 1 ? 's' : ''}</div>
|
|
<div class="meta">${o.addedBy !== 'system' ? 'by ' + o.addedBy : 'system'}</div>
|
|
<div class="btn-row">
|
|
<button class="btn btn-edit" onclick="editOption('${o.id}')">✎ Edit</button>
|
|
<button class="btn btn-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
async function editOption(id) {
|
|
const current = allData.options.find(o => o.id === id);
|
|
if (!current) return;
|
|
const nextName = prompt('Option name', current.name);
|
|
if (nextName === null) return;
|
|
const nextDesc = prompt('Short description', current.desc || '');
|
|
if (nextDesc === null) return;
|
|
const nextDetails = prompt('Details, one per line', Array.isArray(current.details) ? current.details.join('\\n') : '');
|
|
if (nextDetails === null) return;
|
|
const nextUrl = prompt('Website URL', current.url || '');
|
|
if (nextUrl === null) return;
|
|
const nextCategory = prompt('Category id', current.categoryId);
|
|
if (nextCategory === null) return;
|
|
const nextApproved = confirm('Approve this option now? Click OK to approve, Cancel to keep it pending.');
|
|
try {
|
|
await fetch(API + '/api/options/' + id, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: nextName.trim(),
|
|
desc: nextDesc.trim(),
|
|
details: nextDetails,
|
|
url: nextUrl.trim(),
|
|
categoryId: nextCategory.trim(),
|
|
approved: nextApproved,
|
|
})
|
|
});
|
|
toast('Option updated', 'success');
|
|
await loadData();
|
|
} catch(e) { toast('Failed to update option', 'error'); }
|
|
}
|
|
|
|
async function togglePolls() {
|
|
try {
|
|
// Get current state first
|
|
const res = await fetch(API + '/api/results');
|
|
const data = await res.json();
|
|
const newState = !data.pollsOpen;
|
|
await fetch(API + '/api/polls', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ open: newState })
|
|
});
|
|
updatePollsUI(newState);
|
|
toast(newState ? 'Polls are now OPEN' : 'Polls are now CLOSED', 'success');
|
|
} catch(e) {
|
|
toast('Failed to toggle polls', 'error');
|
|
}
|
|
}
|
|
|
|
async function loadPollsState() {
|
|
try {
|
|
const res = await fetch(API + '/api/results');
|
|
const data = await res.json();
|
|
updatePollsUI(data.pollsOpen);
|
|
} catch(e) {}
|
|
}
|
|
|
|
function updatePollsUI(open) {
|
|
document.getElementById('pollsLabel').textContent = 'Polls: ' + (open ? 'OPEN' : 'CLOSED');
|
|
const btn = document.getElementById('pollsBtn');
|
|
btn.textContent = open ? 'Close Polls' : 'Open Polls';
|
|
btn.className = 'btn-toggle ' + (open ? 'open' : 'closed');
|
|
}
|
|
|
|
async function approve(id) {
|
|
try {
|
|
await fetch(API + '/api/options/' + id + '/approve', { method: 'POST' });
|
|
toast('Option approved!', 'success');
|
|
await loadData();
|
|
} catch(e) { toast('Failed to approve', 'error'); }
|
|
}
|
|
|
|
async function reject(id) {
|
|
if (!confirm('Remove this option permanently?')) return;
|
|
try {
|
|
await fetch(API + '/api/options/' + id, { method: 'DELETE' });
|
|
toast('Option removed', 'success');
|
|
await loadData();
|
|
} catch(e) { toast('Failed to remove option', 'error'); }
|
|
}
|
|
|
|
async function deleteOption(id) {
|
|
if (!confirm('Delete this option permanently?')) return;
|
|
try {
|
|
await fetch(API + '/api/options/' + id, { method: 'DELETE' });
|
|
toast('Option deleted', 'success');
|
|
await loadData();
|
|
} catch(e) { toast('Failed to delete', 'error'); }
|
|
}
|
|
|
|
// Check session password on load
|
|
if (sessionStorage.getItem(PWD_KEY) === CORRECT_PWD) {
|
|
document.getElementById('passwordGate').classList.add('hidden');
|
|
document.getElementById('adminPanel').style.display = 'block';
|
|
loadData();
|
|
}
|
|
loadPollsState();
|
|
</script>
|
|
</body>
|
|
</html>
|