249 lines
9.7 KiB
HTML
249 lines
9.7 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<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">
|
|
<span style="font-weight:600;font-size:0.95rem;">Schedule</span>
|
|
<span class="nav-username ms-auto" style="font-size:0.82rem;color:var(--text-muted);">User</span>
|
|
</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 class="nav-username" style="font-size:0.82rem;">User</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 id="noApiKeyBanner" class="alert alert-danger"
|
|
style="display:none;font-size:0.85rem;font-weight:600;text-align:center;">
|
|
<i class="fa-solid fa-circle-exclamation me-1"></i> No Clickatell API key configured —
|
|
<a href="index.html" class="alert-link">set one in Admin settings</a> before scheduling.
|
|
</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 & 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" id="addScheduleBtn" 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 & 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 src="assets/js/nav.js"></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>
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="attendees.html" class="bottom-nav-item">
|
|
<i class="fa-solid fa-users"></i>
|
|
<span>Attendees</span>
|
|
</a>
|
|
<a href="templates.html" class="bottom-nav-item">
|
|
<i class="fa-solid fa-comment-sms"></i>
|
|
<span>Templates</span>
|
|
</a>
|
|
<a href="schedule.html" class="bottom-nav-item active">
|
|
<i class="fa-solid fa-calendar-days"></i>
|
|
<span>Schedule</span>
|
|
</a>
|
|
<a href="delivery-log.html" class="bottom-nav-item">
|
|
<i class="fa-solid fa-list-check"></i>
|
|
<span>Log</span>
|
|
</a>
|
|
<a href="admin.html" class="bottom-nav-item admin-nav-link d-none">
|
|
<i class="fa-solid fa-user-shield"></i>
|
|
<span>Admin</span>
|
|
</a>
|
|
</nav>
|
|
</body>
|
|
|
|
</html>
|