jordanwalster/imf-sms-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: initial commit

Browse Source
This commit is contained in:
Jordan Walster
2026-06-06 00:03:51 +01:00
commit 99d7f7d3a4
29 changed files with 5183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/schedule.html
+513
View File
@@ -0,0 +1,513 @@
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schedule — IMFestival SMS Dashboard</title>
<link href="assets/vendor/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"
crossorigin="anonymous">
<link href="assets/css/dashboard.css" rel="stylesheet">
<style>
.mode-btn {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-muted);
border-radius: 8px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mode-btn.active-mode {
background: rgba(79, 142, 247, 0.14);
border-color: var(--accent);
color: var(--accent);
}
</style>
</head>
<body>
<!-- ─── Mobile top bar ─── -->
<div class="topbar">
<button class="hamburger" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-label="Open menu">
<i class="fa-solid fa-bars"></i>
</button>
<span style="font-weight:600;font-size:0.95rem;">Schedule</span>
</div>
<!-- ─── Mobile offcanvas sidebar ─── -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="mobileSidebar">
<div class="offcanvas-header">
<div class="brand"
style="border:none;margin:0;padding:0;flex-direction:column;align-items:flex-start;gap:0.5rem;">
<span>IMFestival SMS Dashboard</span>
</div>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-3">
<nav class="d-flex flex-column gap-1">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom active">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
</div>
</div>
<!-- ─── Desktop sidebar ─── -->
<div class="sidebar">
<div class="brand">
<span style="margin: 0 auto;">IMFestival SMS Dashboard</span>
</div>
<nav class="d-flex flex-column gap-1 mt-2">
<a href="index.html" class="nav-link-custom">
<i class="fa-solid fa-house fa-fw"></i>
Home
</a>
<a href="attendees.html" class="nav-link-custom">
<i class="fa-solid fa-users fa-fw"></i>
Attendees
</a>
<a href="templates.html" class="nav-link-custom">
<i class="fa-solid fa-comment-sms fa-fw"></i>
SMS Templates
</a>
<a href="schedule.html" class="nav-link-custom active">
<i class="fa-solid fa-calendar-days fa-fw"></i>
Schedule
</a>
<a href="delivery-log.html" class="nav-link-custom">
<i class="fa-solid fa-list-check fa-fw"></i>
Delivery Log
</a>
</nav>
<div class="mt-auto pt-3" style="border-top:1px solid var(--border);">
<div class="nav-link-custom" style="cursor:default;">
<i class="fa-solid fa-circle-user fa-fw"></i>
<span style="font-size:0.82rem;">Admin</span>
</div>
</div>
</div>
<!-- ─── Main content ─── -->
<div class="main">
<div class="main-inner">
<div id="sandboxBanner" class="alert alert-warning"
style="display:none;font-size:0.85rem;font-weight:600;text-align:center;">
<i class="fa-solid fa-flask me-1"></i> Sandbox mode is active — texts are tagged as a test and excluded from
cost calculations.
</div>
<div class="page-header">
<h1>Schedule</h1>
<p>Configure when messages are automatically sent to attendees.</p>
</div>
<div class="card p-4">
<h5>Schedule an SMS message</h5>
<!-- Timing mode toggle -->
<label class="form-label text-muted" style="font-size:0.82rem;">Send timing</label>
<div class="d-flex gap-2 mb-3">
<button type="button" id="modeSpecific" class="btn btn-sm mode-btn active-mode" onclick="setMode('specific')">
<i class="fa-solid fa-calendar-days me-1"></i> Specific date &amp; time
</button>
<button type="button" id="modeRelative" class="btn btn-sm mode-btn" onclick="setMode('relative')">
<i class="fa-solid fa-clock me-1"></i> Relative to workshop
</button>
</div>
<!-- Specific date/time options -->
<div id="specificFields">
<label class="form-label text-muted" style="font-size:0.82rem;">Send at</label>
<input type="datetime-local" class="form-control mb-3" id="specificDatetime">
</div>
<!-- Relative options -->
<div id="relativeFields" style="display:none;">
<label class="form-label text-muted" style="font-size:0.82rem;">Offset</label>
<div class="d-flex gap-2 mb-3">
<input type="number" class="form-control" id="offsetValue" value="1" min="1" style="width:90px;">
<select class="form-select" id="offsetUnit">
<option value="minutes">Minute(s) before</option>
<option value="hours" selected>Hour(s) before</option>
<option value="days">Day(s) before</option>
</select>
</div>
</div>
<label class="form-label text-muted" style="font-size:0.82rem;">Template to use</label>
<select class="form-select mb-3" id="templateSelect">
<option value="" disabled selected>Loading templates…</option>
</select>
<button class="btn btn-primary" onclick="addSchedule()">
<i class="fa-solid fa-plus me-1"></i> Add to Schedule
</button>
</div>
<!-- Scheduled sends -->
<div class="card p-4 mt-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="mb-0">Sending soon</h5>
<span class="text-muted" id="scheduleCount" style="font-size:0.82rem;">3 scheduled</span>
</div>
<div class="d-flex flex-column gap-3" id="scheduleList">
<!-- populated by JS -->
</div>
</div>
<!-- Previously scheduled -->
<div class="card p-4 mt-4" id="pastCard" style="display:none;">
<div class="d-flex align-items-center justify-content-between mb-3">
<h5 class="mb-0" style="color:var(--text-muted);">Previously Scheduled</h5>
<span class="text-muted" id="pastCount" style="font-size:0.82rem;"></span>
</div>
<div class="d-flex flex-column gap-3" id="pastList">
<!-- populated by JS -->
</div>
</div>
</div>
</div>
<!-- ─── Edit Rule Modal ─── -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Scheduled Rule</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input type="hidden" id="editId">
<label class="form-label text-muted" style="font-size:0.82rem;">Send timing</label>
<div class="d-flex gap-2 mb-3">
<button type="button" id="editModeSpecific" class="btn btn-sm mode-btn active-mode"
onclick="setEditMode('specific')">
<i class="fa-solid fa-calendar-days me-1"></i> Specific date &amp; time
</button>
<button type="button" id="editModeRelative" class="btn btn-sm mode-btn" onclick="setEditMode('relative')">
<i class="fa-solid fa-clock me-1"></i> Relative to workshop
</button>
</div>
<div id="editSpecificFields">
<label class="form-label text-muted" style="font-size:0.82rem;">Send at</label>
<input type="datetime-local" class="form-control mb-3" id="editSpecificDatetime">
</div>
<div id="editRelativeFields" style="display:none;">
<label class="form-label text-muted" style="font-size:0.82rem;">Offset</label>
<div class="d-flex gap-2 mb-3">
<input type="number" class="form-control" id="editOffsetValue" value="1" min="1" style="width:90px;">
<select class="form-select" id="editOffsetUnit">
<option value="minutes">Minute(s) before</option>
<option value="hours">Hour(s) before</option>
<option value="days">Day(s) before</option>
</select>
</div>
</div>
<label class="form-label text-muted" style="font-size:0.82rem;">Template to use</label>
<select class="form-select mb-1" id="editTemplateSelect"></select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="saveEdit()">
<i class="fa-solid fa-floppy-disk me-1"></i> Save changes
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script>
// ── Mode toggle ──────────────────────────────────────────
let currentMode = 'specific';
function setMode(mode) {
currentMode = mode;
document.getElementById('relativeFields').style.display = mode === 'relative' ? '' : 'none';
document.getElementById('specificFields').style.display = mode === 'specific' ? '' : 'none';
document.getElementById('modeRelative').classList.toggle('active-mode', mode === 'relative');
document.getElementById('modeSpecific').classList.toggle('active-mode', mode === 'specific');
}
// ── Load templates into select ───────────────────────────
async function loadTemplateOptions() {
const sel = document.getElementById('templateSelect');
try {
const data = await fetch('/api/templates.php').then(r => r.json());
const templates = data.templates ?? [];
if (templates.length === 0) {
sel.innerHTML = '<option value="" disabled selected>No templates — create one first</option>';
return;
}
sel.innerHTML = templates.map(t =>
`<option value="${t.id}">${esc(t.name)}</option>`
).join('');
} catch {
sel.innerHTML = '<option value="" disabled selected>Could not load templates</option>';
}
}
// ── Add a rule ───────────────────────────────────────────
async function addSchedule() {
const templateId = document.getElementById('templateSelect').value;
if (!templateId) { alert('Please select a template.'); return; }
const payload = { template_id: parseInt(templateId), mode: currentMode };
if (currentMode === 'relative') {
payload.offset_value = parseInt(document.getElementById('offsetValue').value) || 1;
payload.offset_unit = document.getElementById('offsetUnit').value;
} else {
const dt = document.getElementById('specificDatetime').value;
if (!dt) { alert('Please pick a date and time.'); return; }
payload.specific_datetime = dt;
}
const res = await fetch('/api/schedule.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!res.ok) {
const err = await res.json();
alert('Error: ' + (err.error ?? 'Unknown error'));
return;
}
loadSchedule();
}
// ── Edit modal ───────────────────────────────────────────
let editMode = 'specific';
function setEditMode(mode) {
editMode = mode;
document.getElementById('editRelativeFields').style.display = mode === 'relative' ? '' : 'none';
document.getElementById('editSpecificFields').style.display = mode === 'specific' ? '' : 'none';
document.getElementById('editModeRelative').classList.toggle('active-mode', mode === 'relative');
document.getElementById('editModeSpecific').classList.toggle('active-mode', mode === 'specific');
}
async function openEditModal(id) {
const rule = window._scheduleRules?.[id];
if (!rule) return;
document.getElementById('editId').value = rule.id;
setEditMode(rule.mode);
if (rule.mode === 'specific') {
// Convert stored datetime to datetime-local format (YYYY-MM-DDTHH:MM)
const dt = new Date(rule.specific_datetime.replace(' ', 'T'));
const pad = n => String(n).padStart(2, '0');
document.getElementById('editSpecificDatetime').value =
`${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}T${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
} else {
document.getElementById('editOffsetValue').value = rule.offset_value;
document.getElementById('editOffsetUnit').value = rule.offset_unit;
}
// Populate template select, mirroring the main select
const mainSel = document.getElementById('templateSelect');
const editSel = document.getElementById('editTemplateSelect');
editSel.innerHTML = mainSel.innerHTML;
editSel.value = rule.template_id;
bootstrap.Modal.getOrCreateInstance(document.getElementById('editModal')).show();
}
async function saveEdit() {
const id = parseInt(document.getElementById('editId').value);
const templateId = parseInt(document.getElementById('editTemplateSelect').value);
if (!templateId) { alert('Please select a template.'); return; }
const payload = { template_id: templateId, mode: editMode };
if (editMode === 'relative') {
payload.offset_value = parseInt(document.getElementById('editOffsetValue').value) || 1;
payload.offset_unit = document.getElementById('editOffsetUnit').value;
} else {
const dt = document.getElementById('editSpecificDatetime').value;
if (!dt) { alert('Please pick a date and time.'); return; }
payload.specific_datetime = dt;
}
const res = await fetch(`/api/schedule.php?id=${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!res.ok) {
const err = await res.json();
alert('Error: ' + (err.error ?? 'Unknown error'));
return;
}
bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
loadSchedule();
}
// ── Remove a rule ────────────────────────────────────────
async function removeSchedule(id) {
if (!confirm('Remove this scheduled rule?')) return;
const res = await fetch(`/api/schedule.php?id=${id}`, { method: 'DELETE' });
if (!res.ok) { alert('Could not remove rule.'); return; }
loadSchedule();
}
// ── Rendering ────────────────────────────────────────────
function relativeTime(date) {
const diffMs = date - Date.now();
const diffMin = Math.round(diffMs / 60000);
if (diffMin < 1) return 'now';
if (diffMin < 60) return `in ${diffMin} minute${diffMin !== 1 ? 's' : ''}`;
const diffHr = Math.round(diffMin / 60);
if (diffHr < 24) return `in ${diffHr} hour${diffHr !== 1 ? 's' : ''}`;
const diffDay = Math.round(diffHr / 24);
return `in ${diffDay} day${diffDay !== 1 ? 's' : ''}`;
}
function formatDateTime(date) {
return date.toLocaleString('en-GB', {
day: 'numeric', month: 'short', year: 'numeric',
hour: '2-digit', minute: '2-digit',
});
}
function ruleLabel(rule) {
if (rule.mode === 'specific') {
return 'Specific time: ' + formatDateTime(new Date(rule.specific_datetime));
}
const unit = { minutes: 'minute', hours: 'hour', days: 'day' }[rule.offset_unit] ?? rule.offset_unit;
const val = rule.offset_value;
return `${val} ${unit}${val !== 1 ? 's' : ''} before workshop`;
}
function esc(str) {
return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
async function loadSchedule() {
const list = document.getElementById('scheduleList');
const countEl = document.getElementById('scheduleCount');
const pastList = document.getElementById('pastList');
const pastCard = document.getElementById('pastCard');
const pastCountEl = document.getElementById('pastCount');
try {
const data = await fetch('/api/schedule.php').then(r => r.json());
const rules = data.rules ?? [];
// Store rules by id so edit button can look them up safely
window._scheduleRules = {};
rules.forEach(r => { window._scheduleRules[r.id] = r; });
const now = Date.now();
const upcoming = [];
const past = [];
rules.forEach(rule => {
if (rule.mode === 'specific') {
const t = new Date(rule.specific_datetime.replace(' ', 'T')).getTime();
(t > now ? upcoming : past).push(rule);
} else {
upcoming.push(rule);
}
});
// Sort upcoming: specific rules soonest first, relative rules after
upcoming.sort((a, b) => {
const aTime = a.mode === 'specific' ? new Date(a.specific_datetime.replace(' ', 'T')).getTime() : Infinity;
const bTime = b.mode === 'specific' ? new Date(b.specific_datetime.replace(' ', 'T')).getTime() : Infinity;
return aTime - bTime;
});
countEl.textContent = `${upcoming.length} scheduled`;
if (upcoming.length === 0) {
list.innerHTML = '<p class="text-muted" style="font-size:0.85rem;">No upcoming rules. Add one above.</p>';
} else {
list.innerHTML = upcoming.map(rule => renderRuleCard(rule, false)).join('');
}
if (past.length > 0) {
pastCard.style.display = '';
pastCountEl.textContent = `${past.length} past`;
pastList.innerHTML = past.map(rule => renderRuleCard(rule, true)).join('');
} else {
pastCard.style.display = 'none';
}
} catch {
list.innerHTML = '<p class="text-danger" style="font-size:0.85rem;">Could not load schedule.</p>';
}
}
function renderRuleCard(rule, isPast) {
const label = ruleLabel(rule);
const sendAt = rule.mode === 'specific' ? new Date(rule.specific_datetime.replace(' ', 'T')) : null;
const timeTag = sendAt
? isPast
? `<span style="font-size:0.75rem;background:rgba(139,148,158,0.12);color:var(--text-muted);border-radius:6px;padding:0.15em 0.6em;"><i class="fa-solid fa-circle-check me-1"></i>${formatDateTime(sendAt)}</span>`
: `<span style="font-size:0.75rem;background:rgba(79,142,247,0.12);color:var(--accent);border-radius:6px;padding:0.15em 0.6em;">${relativeTime(sendAt)}</span>`
: '';
const opacity = isPast ? 'opacity:0.6;' : '';
return `
<div style="background:var(--bg-surface);border:1px solid var(--border);border-radius:10px;padding:1rem;${opacity}">
<div class="d-flex align-items-start justify-content-between gap-2 mb-1">
<div>
<div style="font-weight:600;font-size:0.9rem;">${esc(rule.template_name)}</div>
<div class="text-muted" style="font-size:0.78rem;">${esc(label)}</div>
</div>
<div class="d-flex gap-2">
${!isPast ? `<button class="btn btn-sm btn-secondary" onclick="openEditModal(${rule.id})"><i class="fa-solid fa-pencil fa-fw"></i></button>` : `<button class="btn btn-sm btn-secondary" onclick="openEditModal(${rule.id})" title="Reschedule"><i class="fa-solid fa-rotate-right fa-fw"></i></button>`}
<button class="btn btn-sm btn-danger" onclick="removeSchedule(${rule.id})"><i class="fa-solid fa-trash fa-fw"></i></button>
</div>
</div>
${timeTag}
</div>
`;
}
loadTemplateOptions();
loadSchedule();
setInterval(loadSchedule, 60000);
// Set default datetime-local to now
const pad = n => String(n).padStart(2, '0');
const now = new Date();
document.getElementById('specificDatetime').value =
`${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
</script>
<script>
(async function () {
try {
const d = await fetch('/api/admin.php').then(r => r.json());
document.getElementById('sandboxBanner').style.display = d.sandbox_mode ? '' : 'none';
} catch { }
}());
</script>
</body>
</html>