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

chore: move js to single file

Browse Source
This commit is contained in:
Jordan Walster
2026-06-10 17:23:09 +01:00
parent 4cefa3be76
commit ed65314fa5
9 changed files with 65 additions and 1508 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/schedule.html
+3 -282
View File
@@ -214,288 +214,9 @@
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"></script>
<script src="assets/js/nav.js"></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 checkAuth() {
try {
const r = await fetch('/api/admin.php', { redirect: 'manual' });
if (r.type === 'opaqueredirect' || !r.ok) { window.location.reload(); return; }
const d = await r.json();
document.getElementById('sandboxBanner').style.display = d.sandbox_mode ? '' : 'none';
document.querySelectorAll('.admin-nav-link').forEach(el => el.classList.toggle('d-none', !d.is_admin));
const name = d.name || d.username;
if (name) {
document.querySelectorAll('.nav-username').forEach(el => { el.textContent = name; });
}
} catch { }
}
checkAuth();
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') checkAuth(); });
async function checkApiKey() {
try {
const r = await fetch('/api/settings.php?key=clickatell_api_key').then(res => res.json());
const missing = !r.set;
document.getElementById('noApiKeyBanner').style.display = missing ? '' : 'none';
document.getElementById('addScheduleBtn').disabled = missing;
} catch { }
}
checkApiKey();
</script>
<script src="assets/js/app.js"></script>
<nav class="bottom-nav" aria-label="Navigation">
<a href="index.html" class="bottom-nav-item">
<i class="fa-solid fa-house"></i>