Compare commits
3 Commits
3a3ff55893
...
bc18555432
| Author | SHA1 | Date | |
|---|---|---|---|
| bc18555432 | |||
| a6e07258c6 | |||
| 6f4167e7ab |
372
public/admin.html
Normal file
372
public/admin.html
Normal file
@@ -0,0 +1,372 @@
|
|||||||
|
<!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-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-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-delete" onclick="deleteOption('${o.id}')" title="Delete option">🗑</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
@@ -400,6 +400,86 @@
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── Results Leaderboard ───────────────────────────────── */
|
||||||
|
.results-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.results-header h2 { font-size: 1.1rem; color: var(--accent); margin-bottom: 4px; }
|
||||||
|
.results-header p { font-size: 0.75rem; color: var(--text-muted); }
|
||||||
|
.results-category {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 14px;
|
||||||
|
}
|
||||||
|
.results-category-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.results-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 7px 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.results-row:last-child { border-bottom: none; }
|
||||||
|
.results-rank {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 28px;
|
||||||
|
text-align: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.results-rank.gold { color: #ffd700; }
|
||||||
|
.results-rank.silver { color: #c0c0c0; }
|
||||||
|
.results-rank.bronze { color: #cd7f32; }
|
||||||
|
.results-name {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: var(--text);
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.results-name.winner {
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.results-votes {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.results-bar-bg {
|
||||||
|
flex: 2;
|
||||||
|
height: 4px;
|
||||||
|
background: var(--surface2);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.results-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
|
||||||
|
}
|
||||||
|
.results-share {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
/* ── Toast ──────────────────────────────────────────────── */
|
/* ── Toast ──────────────────────────────────────────────── */
|
||||||
.toast {
|
.toast {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -548,6 +628,30 @@
|
|||||||
|
|
||||||
/* Touch highlight */
|
/* Touch highlight */
|
||||||
.option-card { -webkit-tap-highlight-color: rgba(0,212,255,0.12); }
|
.option-card { -webkit-tap-highlight-color: rgba(0,212,255,0.12); }
|
||||||
|
|
||||||
|
/* ── Connection overlay ─────────────────────────────────── */
|
||||||
|
#wsOverlay {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(11,13,20,0.92);
|
||||||
|
z-index: 900;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
#wsOverlay.show { display: flex; }
|
||||||
|
#wsOverlay .spinner {
|
||||||
|
width: 40px; height: 40px;
|
||||||
|
border: 3px solid var(--border);
|
||||||
|
border-top-color: var(--accent);
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
#wsOverlay p { color: var(--text-muted); font-size: 0.85rem; text-align: center; }
|
||||||
|
#wsOverlay .sub { font-size: 0.72rem; color: var(--text-muted); opacity: 0.6; margin-top: -8px; }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -611,6 +715,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<!-- Connection lost overlay -->
|
||||||
|
<div id="wsOverlay">
|
||||||
|
<div class="spinner"></div>
|
||||||
|
<p>Connection lost</p>
|
||||||
|
<div class="sub">Attempting to reconnect…</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Toast -->
|
<!-- Toast -->
|
||||||
<div class="toast" id="toast"></div>
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
@@ -629,17 +740,32 @@
|
|||||||
|
|
||||||
// ── Init ───────────────────────────────────────────────────
|
// ── Init ───────────────────────────────────────────────────
|
||||||
function init() {
|
function init() {
|
||||||
|
// Check for ?view=results URL param — skip name modal, go to results
|
||||||
|
const params = new URLSearchParams(location.search);
|
||||||
|
const viewResults = params.get('view') === 'results';
|
||||||
|
|
||||||
if (state.voterName) {
|
if (state.voterName) {
|
||||||
applyVoterName(state.voterName);
|
applyVoterName(state.voterName);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// If view=results, skip name modal and go to results tab
|
||||||
|
if (viewResults) {
|
||||||
|
activeTab = 'results';
|
||||||
|
document.getElementById('nameModal').classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
connectWS();
|
connectWS();
|
||||||
renderTabs();
|
renderTabs();
|
||||||
|
render();
|
||||||
|
|
||||||
|
if (!viewResults) {
|
||||||
document.getElementById('voterNameInput').addEventListener('keydown', e => {
|
document.getElementById('voterNameInput').addEventListener('keydown', e => {
|
||||||
if (e.key === 'Enter') submitName();
|
if (e.key === 'Enter') submitName();
|
||||||
});
|
});
|
||||||
document.getElementById('voterNameInput').focus();
|
document.getElementById('voterNameInput').focus();
|
||||||
|
}
|
||||||
|
|
||||||
// Number keys 1-5 to switch tabs
|
// Number keys 1-6 to switch tabs
|
||||||
document.addEventListener('keydown', e => {
|
document.addEventListener('keydown', e => {
|
||||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||||||
const num = parseInt(e.key);
|
const num = parseInt(e.key);
|
||||||
@@ -650,7 +776,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── WebSocket ──────────────────────────────────────────────
|
// ── WebSocket ──────────────────────────────────────────────
|
||||||
|
const RECONNECT_BASE = 1000; // 1s initial
|
||||||
|
const RECONNECT_MAX = 30000; // 30s cap
|
||||||
|
let reconnectDelay = RECONNECT_BASE;
|
||||||
|
let reconnectTimer = null;
|
||||||
|
let offlineVoteQueue = []; // votes cast while disconnected
|
||||||
|
|
||||||
function connectWS() {
|
function connectWS() {
|
||||||
|
if (ws) { ws.onclose = ws.onerror = null; ws.close(); }
|
||||||
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
const wsUrl = `${protocol}//${location.host}`;
|
const wsUrl = `${protocol}//${location.host}`;
|
||||||
ws = new WebSocket(wsUrl);
|
ws = new WebSocket(wsUrl);
|
||||||
@@ -659,6 +792,17 @@
|
|||||||
state.wsConnected = true;
|
state.wsConnected = true;
|
||||||
updateWsStatus('Connected');
|
updateWsStatus('Connected');
|
||||||
document.getElementById('wsDot').classList.remove('offline');
|
document.getElementById('wsDot').classList.remove('offline');
|
||||||
|
document.getElementById('wsOverlay').classList.remove('show');
|
||||||
|
reconnectDelay = RECONNECT_BASE; // reset backoff
|
||||||
|
|
||||||
|
// Replay queued votes
|
||||||
|
if (offlineVoteQueue.length > 0) {
|
||||||
|
const queue = [...offlineVoteQueue];
|
||||||
|
offlineVoteQueue = [];
|
||||||
|
queue.forEach(msg => wsSend(msg));
|
||||||
|
}
|
||||||
|
|
||||||
|
showToast('✓ Reconnected', 'success');
|
||||||
};
|
};
|
||||||
|
|
||||||
ws.onmessage = (event) => {
|
ws.onmessage = (event) => {
|
||||||
@@ -673,10 +817,7 @@
|
|||||||
} else if (msg.type === 'vote_update') {
|
} else if (msg.type === 'vote_update') {
|
||||||
msg.results.forEach(r => {
|
msg.results.forEach(r => {
|
||||||
const opt = state.options.find(o => o.id === r.id);
|
const opt = state.options.find(o => o.id === r.id);
|
||||||
if (opt) {
|
if (opt) { opt.votes = r.votes; opt.voters = r.voters; }
|
||||||
opt.votes = r.votes;
|
|
||||||
opt.voters = r.voters;
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
render();
|
render();
|
||||||
} else if (msg.type === 'option_added' || msg.type === 'option_approved') {
|
} else if (msg.type === 'option_added' || msg.type === 'option_approved') {
|
||||||
@@ -685,6 +826,10 @@
|
|||||||
renderTabs();
|
renderTabs();
|
||||||
render();
|
render();
|
||||||
}
|
}
|
||||||
|
} else if (msg.type === 'option_deleted') {
|
||||||
|
state.options = state.options.filter(o => o.id !== msg.id);
|
||||||
|
renderTabs();
|
||||||
|
render();
|
||||||
} else if (msg.type === 'polls_status') {
|
} else if (msg.type === 'polls_status') {
|
||||||
state.pollsOpen = msg.open;
|
state.pollsOpen = msg.open;
|
||||||
updatePollsBadge();
|
updatePollsBadge();
|
||||||
@@ -695,12 +840,25 @@
|
|||||||
state.wsConnected = false;
|
state.wsConnected = false;
|
||||||
updateWsStatus('Reconnecting…');
|
updateWsStatus('Reconnecting…');
|
||||||
document.getElementById('wsDot').classList.add('offline');
|
document.getElementById('wsDot').classList.add('offline');
|
||||||
setTimeout(connectWS, 3000);
|
document.getElementById('wsOverlay').classList.add('show');
|
||||||
|
clearTimeout(reconnectTimer);
|
||||||
|
reconnectTimer = setTimeout(() => {
|
||||||
|
reconnectDelay = Math.min(reconnectDelay * 2, RECONNECT_MAX);
|
||||||
|
connectWS();
|
||||||
|
}, reconnectDelay);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function wsSend(obj) {
|
function wsSend(obj) {
|
||||||
if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(obj));
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||||
|
ws.send(JSON.stringify(obj));
|
||||||
|
} else {
|
||||||
|
// Queue vote if offline
|
||||||
|
if (obj.type === 'vote' && !offlineVoteQueue.find(m =>
|
||||||
|
m.type === 'vote' && m.optionId === obj.optionId && m.voterName === obj.voterName)) {
|
||||||
|
offlineVoteQueue.push(obj);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateWsStatus(text) {
|
function updateWsStatus(text) {
|
||||||
@@ -749,7 +907,7 @@
|
|||||||
onkeydown="handleTabKey(event, '${cat.id}')">
|
onkeydown="handleTabKey(event, '${cat.id}')">
|
||||||
<span class="tab-emoji">${cat.emoji}</span>
|
<span class="tab-emoji">${cat.emoji}</span>
|
||||||
${cat.name}
|
${cat.name}
|
||||||
<span class="tab-count" id="tab-count-${cat.id}">${state.options.filter(o => o.categoryId === cat.id).length}</span>
|
<span class="tab-count" id="tab-count-${cat.id}">${cat.id === 'results' ? '' : state.options.filter(o => o.categoryId === cat.id).length}</span>
|
||||||
</div>
|
</div>
|
||||||
`).join('');
|
`).join('');
|
||||||
bar.setAttribute('role', 'tablist');
|
bar.setAttribute('role', 'tablist');
|
||||||
@@ -782,7 +940,54 @@
|
|||||||
// ── Render options ────────────────────────────────────────
|
// ── Render options ────────────────────────────────────────
|
||||||
function render() {
|
function render() {
|
||||||
const list = document.getElementById('optionsList');
|
const list = document.getElementById('optionsList');
|
||||||
const opts = state.options.filter(o => o.categoryId === activeTab);
|
|
||||||
|
// ── Results tab ──────────────────────────────────────────
|
||||||
|
if (activeTab === 'results') {
|
||||||
|
const votingCats = state.categories.filter(c => c.id !== 'results');
|
||||||
|
const totalVotes = state.options.reduce((sum, o) => sum + o.votes.length, 0);
|
||||||
|
const statusText = state.pollsOpen
|
||||||
|
? `🏈 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''} · ${totalVotes} total votes · Polls OPEN`
|
||||||
|
: `🏆 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''} · ${totalVotes} total votes · Polls CLOSED`;
|
||||||
|
|
||||||
|
list.innerHTML = `
|
||||||
|
<div class="results-header">
|
||||||
|
<h2>🏆 Final Results</h2>
|
||||||
|
<p>${statusText}</p>
|
||||||
|
</div>
|
||||||
|
${votingCats.map(cat => {
|
||||||
|
const catOpts = state.options.filter(o => o.categoryId === cat.id && o.approved);
|
||||||
|
const sorted = [...catOpts].sort((a, b) => b.votes.length - a.votes.length);
|
||||||
|
const maxVotes = sorted[0]?.votes.length || 1;
|
||||||
|
if (sorted.length === 0) return '';
|
||||||
|
return `
|
||||||
|
<div class="results-category">
|
||||||
|
<div class="results-category-header">${cat.emoji} ${cat.name}</div>
|
||||||
|
${sorted.map((opt, i) => {
|
||||||
|
const pct = maxVotes > 0 ? (opt.votes.length / maxVotes * 100) : 0;
|
||||||
|
const rank = i + 1;
|
||||||
|
const medal = rank === 1 ? '🥇' : rank === 2 ? '🥈' : rank === 3 ? '🥉' : rank;
|
||||||
|
const medalClass = rank === 1 ? 'gold' : rank === 2 ? 'silver' : rank === 3 ? 'bronze' : '';
|
||||||
|
const winner = rank === 1 ? 'winner' : '';
|
||||||
|
const barColor = cat.id === 'hotel' ? 'var(--hotel)' : cat.id === 'golf' ? 'var(--golf)' : cat.id === 'nightlife' ? 'var(--nightlife)' : cat.id === 'excursion' ? 'var(--excursion)' : 'var(--itinerary)';
|
||||||
|
return `
|
||||||
|
<div class="results-row">
|
||||||
|
<div class="results-rank ${medalClass}">${medal}</div>
|
||||||
|
<div class="results-name ${winner}">${opt.name}</div>
|
||||||
|
<div class="results-votes">${opt.votes.length}</div>
|
||||||
|
<div class="results-bar-bg">
|
||||||
|
<div class="results-bar-fill" style="width:${pct}%; background:${barColor}"></div>
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}).join('')}
|
||||||
|
</div>`;
|
||||||
|
}).join('')}
|
||||||
|
<div class="results-share">Share this URL to show live results without voting</div>
|
||||||
|
`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Regular voting tabs ─────────────────────────────────
|
||||||
|
const opts = state.options.filter(o => o.categoryId === activeTab && o.approved);
|
||||||
|
|
||||||
document.getElementById('totalVotersCount').textContent =
|
document.getElementById('totalVotersCount').textContent =
|
||||||
state.totalVoters ? `👥 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''}` : '';
|
state.totalVoters ? `👥 ${state.totalVoters} voter${state.totalVoters !== 1 ? 's' : ''}` : '';
|
||||||
@@ -824,6 +1029,7 @@
|
|||||||
|
|
||||||
// ── Voting ────────────────────────────────────────────────
|
// ── Voting ────────────────────────────────────────────────
|
||||||
function toggleVote(optionId) {
|
function toggleVote(optionId) {
|
||||||
|
if (activeTab === 'results') return; // no voting on results tab
|
||||||
if (!state.voterName) {
|
if (!state.voterName) {
|
||||||
document.getElementById('nameModal').classList.remove('hidden');
|
document.getElementById('nameModal').classList.remove('hidden');
|
||||||
document.getElementById('voterNameInput').focus();
|
document.getElementById('voterNameInput').focus();
|
||||||
|
|||||||
19
server.js
19
server.js
@@ -15,6 +15,12 @@ const DATA_FILE = path.join(DATA_DIR, 'votes.json');
|
|||||||
|
|
||||||
app.use(cors());
|
app.use(cors());
|
||||||
app.use(express.json());
|
app.use(express.json());
|
||||||
|
|
||||||
|
// Admin panel
|
||||||
|
app.get('/admin', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, 'public', 'admin.html'));
|
||||||
|
});
|
||||||
|
|
||||||
app.use(express.static(path.join(__dirname, 'public')));
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
|
||||||
// ── Data helpers ──────────────────────────────────────────────
|
// ── Data helpers ──────────────────────────────────────────────
|
||||||
@@ -49,7 +55,8 @@ function buildSeedData() {
|
|||||||
{ id: 'golf', name: 'Golf', emoji: '⛳' },
|
{ id: 'golf', name: 'Golf', emoji: '⛳' },
|
||||||
{ id: 'nightlife', name: 'Nightlife', emoji: '🎧' },
|
{ id: 'nightlife', name: 'Nightlife', emoji: '🎧' },
|
||||||
{ id: 'excursion', name: 'Excursions', emoji: '🚤' },
|
{ id: 'excursion', name: 'Excursions', emoji: '🚤' },
|
||||||
{ id: 'itinerary', name: 'Full Itineraries', emoji: '🗺️' },
|
{ id: 'itinerary', name: 'Itineraries', emoji: '🗺️' },
|
||||||
|
{ id: 'results', name: 'Results', emoji: '🏆' },
|
||||||
],
|
],
|
||||||
options: [
|
options: [
|
||||||
// Hotels
|
// Hotels
|
||||||
@@ -188,6 +195,16 @@ app.post('/api/options/:id/approve', (req, res) => {
|
|||||||
res.json({ success: true });
|
res.json({ success: true });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Delete an option
|
||||||
|
app.delete('/api/options/:id', (req, res) => {
|
||||||
|
const idx = data.options.findIndex(o => o.id === req.params.id);
|
||||||
|
if (idx === -1) return res.status(404).json({ error: 'Not found' });
|
||||||
|
data.options.splice(idx, 1);
|
||||||
|
saveData(data);
|
||||||
|
broadcast({ type: 'option_deleted', id: req.params.id });
|
||||||
|
res.json({ success: true });
|
||||||
|
});
|
||||||
|
|
||||||
// Remove vote from an option
|
// Remove vote from an option
|
||||||
app.delete('/api/vote/:optionId', (req, res) => {
|
app.delete('/api/vote/:optionId', (req, res) => {
|
||||||
const { voterName } = req.body;
|
const { voterName } = req.body;
|
||||||
|
|||||||
Reference in New Issue
Block a user