mirror of
https://github.com/agessaman/meshcore-bot.git
synced 2026-11-01 18:42:56 +00:00
agessaman
02868841dd
Screen-reader users skim a page by its headings, and several outlines were broken:
- The dashboard had no h1; it now has a visually hidden "Dashboard" heading ahead of the health strip.
- Feeds and Radio stat cards made the number the heading ("heading level 2, 4") under an h5 label. The label is now the h2 and the number a styled paragraph, and their card sections are h2s instead of h5s straight after the h1. Radio's uppercase group labels become h3s. Feeds' error count toggles its color classes instead of replacing them, which had dropped the readout size.
- Logs went from h1 to h6 for its stream card; it is an h2.
- Config's panel titles are h2s, their group labels h3s, and the database table names (built in JS) h4s.
Visual sizes are unchanged: each heading keeps its old look through Bootstrap's .h5/.h6 classes.
11 of 17 modals had no aria-labelledby, so they announced as an unnamed "dialog". Each now points at its modal title.
axe-core reports no violations on any of 15 pages in either theme.
414 lines
18 KiB
HTML
414 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Scheduled Messages - MeshCore Bot{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="mb-0">
|
|
<i class="fas fa-clock"></i> Scheduled Messages
|
|
</h1>
|
|
<button class="btn btn-primary" id="addScheduleBtn">
|
|
<i class="fas fa-plus"></i> New scheduled message
|
|
</button>
|
|
</div>
|
|
|
|
<div class="alert alert-info" role="alert">
|
|
Each scheduled message is a transmission on a shared medium. Pick the
|
|
longest interval that still does the job. Changes are written to
|
|
<code>config.ini</code> and applied without restarting the bot.
|
|
</div>
|
|
|
|
<div id="statusArea"></div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>Schedule</th>
|
|
<th>Next run</th>
|
|
<th>Channel</th>
|
|
<th>Message</th>
|
|
<th class="text-end">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="scheduleTableBody">
|
|
<tr><td colspan="5" class="text-muted">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add / edit modal -->
|
|
<div class="modal fade" id="scheduleModal" tabindex="-1" aria-hidden="true" aria-labelledby="scheduleModalTitle">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="scheduleModalTitle">New scheduled message</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label" for="scheduleMode">When should it send?</label>
|
|
<select class="form-select" id="scheduleMode">
|
|
<option value="daily">Every day at a time</option>
|
|
<option value="times">Several times a day</option>
|
|
<option value="weekly">Certain days of the week</option>
|
|
<option value="interval_hours">Every N hours</option>
|
|
<option value="interval_minutes">Every N minutes</option>
|
|
<option value="advanced">Advanced (cron)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-6" id="fieldTime">
|
|
<label class="form-label" for="scheduleTime">Time</label>
|
|
<input type="time" class="form-control" id="scheduleTime" value="08:00">
|
|
</div>
|
|
<div class="col-md-6 d-none" id="fieldTimes">
|
|
<label class="form-label" for="scheduleTimes">Hours (comma separated)</label>
|
|
<input type="text" class="form-control" id="scheduleTimes" value="6,12,18"
|
|
placeholder="6,12,18">
|
|
<div class="form-text">Whole hours in 24-hour form.</div>
|
|
</div>
|
|
<div class="col-md-6 d-none" id="fieldEveryHours">
|
|
<label class="form-label" for="scheduleEveryHours">Every N hours</label>
|
|
<input type="number" class="form-control" id="scheduleEveryHours"
|
|
min="1" max="23" value="2">
|
|
</div>
|
|
<div class="col-md-6 d-none" id="fieldEveryMinutes">
|
|
<label class="form-label" for="scheduleEveryMinutes">Every N minutes</label>
|
|
<input type="number" class="form-control" id="scheduleEveryMinutes"
|
|
min="1" max="59" value="30">
|
|
</div>
|
|
<div class="col-12 d-none" id="fieldDays">
|
|
<label class="form-label">Days</label>
|
|
<div id="dayToggles" class="d-flex flex-wrap gap-2"></div>
|
|
</div>
|
|
<div class="col-12 d-none" id="fieldCron">
|
|
<label class="form-label" for="scheduleCron">Cron expression</label>
|
|
<input type="text" class="form-control font-monospace" id="scheduleCron"
|
|
placeholder="0 6,12,18 * * *">
|
|
<div class="form-text">
|
|
Five fields: minute hour day-of-month month day-of-week.
|
|
Day-of-week is 0=Monday here, not Sunday. Presets like
|
|
<code>@daily</code> and <code>@hourly</code> also work.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="scheduleChannel">Channel</label>
|
|
<input type="text" class="form-control" id="scheduleChannel" placeholder="Public">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="scheduleScope">Flood scope <span class="text-muted">(optional)</span></label>
|
|
<input type="text" class="form-control" id="scheduleScope" placeholder="#sea">
|
|
<div class="form-text">Leave blank for global flood.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label" for="scheduleMessage">Message</label>
|
|
<textarea class="form-control" id="scheduleMessage" rows="3"
|
|
placeholder="Hello from the bot"></textarea>
|
|
<div class="form-text">
|
|
Use <code>\n</code> for a line break. <code>{cmd:wx Seattle}</code> sends a
|
|
command's output; those may not run more often than every 15 minutes.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card bg-body-tertiary">
|
|
<div class="card-body py-2">
|
|
<div class="small text-muted">Resolved schedule</div>
|
|
<div class="font-monospace" id="previewCron">—</div>
|
|
<div class="small text-muted mt-2">Next runs</div>
|
|
<div id="previewRuns" class="small">—</div>
|
|
<div id="previewError" class="small text-danger mt-2"></div>
|
|
<div id="previewWarning" class="small text-warning mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</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" id="saveScheduleBtn">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script nonce="{{ g.csp_nonce }}">
|
|
(function () {
|
|
'use strict';
|
|
|
|
// APScheduler day-of-week is 0=Monday, which is not the Vixie cron convention.
|
|
const DAYS = [
|
|
{ value: 'mon', label: 'Mon' }, { value: 'tue', label: 'Tue' },
|
|
{ value: 'wed', label: 'Wed' }, { value: 'thu', label: 'Thu' },
|
|
{ value: 'fri', label: 'Fri' }, { value: 'sat', label: 'Sat' },
|
|
{ value: 'sun', label: 'Sun' }
|
|
];
|
|
|
|
let modal = null;
|
|
let editingSchedule = null;
|
|
let previewTimer = null;
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
function showStatus(message, kind) {
|
|
const area = $('statusArea');
|
|
area.innerHTML = '<div class="alert alert-' + kind + ' alert-dismissible fade show">'
|
|
+ escapeHtml(message)
|
|
+ '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
const div = document.createElement('div');
|
|
div.textContent = value === null || value === undefined ? '' : String(value);
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function api(path, options) {
|
|
const opts = Object.assign({ headers: {} }, options || {});
|
|
opts.headers['Content-Type'] = 'application/json';
|
|
opts.headers['X-Requested-With'] = 'XMLHttpRequest';
|
|
return fetch(path, opts).then(async (resp) => {
|
|
const data = await resp.json().catch(() => ({}));
|
|
if (!resp.ok || data.success === false) {
|
|
throw new Error(data.error || ('Request failed (' + resp.status + ')'));
|
|
}
|
|
return data;
|
|
});
|
|
}
|
|
|
|
function buildDayToggles() {
|
|
$('dayToggles').innerHTML = DAYS.map((d) =>
|
|
'<div class="form-check form-check-inline">'
|
|
+ '<input class="form-check-input day-toggle" type="checkbox" value="' + d.value + '" id="day-' + d.value + '">'
|
|
+ '<label class="form-check-label" for="day-' + d.value + '">' + d.label + '</label>'
|
|
+ '</div>'
|
|
).join('');
|
|
document.querySelectorAll('.day-toggle').forEach((el) =>
|
|
el.addEventListener('change', schedulePreview));
|
|
}
|
|
|
|
function selectedDays() {
|
|
return Array.from(document.querySelectorAll('.day-toggle:checked')).map((el) => el.value);
|
|
}
|
|
|
|
/** Turn the friendly controls into a cron string the bot accepts. */
|
|
function composeCron() {
|
|
const mode = $('scheduleMode').value;
|
|
if (mode === 'advanced') return $('scheduleCron').value.trim();
|
|
|
|
if (mode === 'interval_minutes') {
|
|
const n = parseInt($('scheduleEveryMinutes').value, 10);
|
|
return Number.isFinite(n) && n > 0 ? '*/' + n + ' * * * *' : '';
|
|
}
|
|
if (mode === 'interval_hours') {
|
|
const n = parseInt($('scheduleEveryHours').value, 10);
|
|
return Number.isFinite(n) && n > 0 ? '0 */' + n + ' * * *' : '';
|
|
}
|
|
if (mode === 'times') {
|
|
const hours = $('scheduleTimes').value.split(',')
|
|
.map((h) => h.trim()).filter((h) => h !== '').join(',');
|
|
return hours ? '0 ' + hours + ' * * *' : '';
|
|
}
|
|
|
|
const time = $('scheduleTime').value || '08:00';
|
|
const [hh, mm] = time.split(':');
|
|
const minute = String(parseInt(mm, 10) || 0);
|
|
const hour = String(parseInt(hh, 10) || 0);
|
|
if (mode === 'weekly') {
|
|
const days = selectedDays();
|
|
return days.length ? minute + ' ' + hour + ' * * ' + days.join(',') : '';
|
|
}
|
|
return minute + ' ' + hour + ' * * *';
|
|
}
|
|
|
|
function syncModeFields() {
|
|
const mode = $('scheduleMode').value;
|
|
const show = (id, on) => $(id).classList.toggle('d-none', !on);
|
|
show('fieldTime', mode === 'daily' || mode === 'weekly');
|
|
show('fieldTimes', mode === 'times');
|
|
show('fieldEveryHours', mode === 'interval_hours');
|
|
show('fieldEveryMinutes', mode === 'interval_minutes');
|
|
show('fieldDays', mode === 'weekly');
|
|
show('fieldCron', mode === 'advanced');
|
|
schedulePreview();
|
|
}
|
|
|
|
function schedulePreview() {
|
|
clearTimeout(previewTimer);
|
|
previewTimer = setTimeout(runPreview, 250);
|
|
}
|
|
|
|
async function runPreview() {
|
|
const cron = composeCron();
|
|
$('previewCron').textContent = cron || '—';
|
|
$('previewError').textContent = '';
|
|
$('previewWarning').textContent = '';
|
|
if (!cron) {
|
|
$('previewRuns').textContent = '—';
|
|
return;
|
|
}
|
|
try {
|
|
const data = await api('/api/scheduled-messages/preview', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ schedule: cron, message: $('scheduleMessage').value, count: 5 })
|
|
});
|
|
if (data.valid) {
|
|
$('previewRuns').innerHTML = (data.next_runs || [])
|
|
.map((iso) => escapeHtml(new Date(iso).toLocaleString())).join('<br>') || '—';
|
|
} else {
|
|
$('previewRuns').textContent = '—';
|
|
$('previewError').textContent = data.error || 'Invalid schedule';
|
|
}
|
|
if (data.warning) $('previewWarning').textContent = data.warning;
|
|
} catch (err) {
|
|
$('previewRuns').textContent = '—';
|
|
$('previewError').textContent = err.message;
|
|
}
|
|
}
|
|
|
|
function openModal(entry) {
|
|
editingSchedule = entry ? entry.schedule : null;
|
|
$('scheduleModalTitle').textContent = entry ? 'Edit scheduled message' : 'New scheduled message';
|
|
$('scheduleChannel').value = entry ? entry.channel : '';
|
|
$('scheduleScope').value = entry && entry.scope ? entry.scope : '';
|
|
$('scheduleMessage').value = entry ? entry.message : '';
|
|
// Existing entries open in Advanced so the stored cron is never silently
|
|
// rewritten into something the friendly controls happen to produce.
|
|
$('scheduleMode').value = entry ? 'advanced' : 'daily';
|
|
$('scheduleCron').value = entry ? entry.schedule : '';
|
|
syncModeFields();
|
|
modal.show();
|
|
}
|
|
|
|
async function save() {
|
|
const cron = composeCron();
|
|
const payload = {
|
|
schedule: cron,
|
|
channel: $('scheduleChannel').value,
|
|
scope: $('scheduleScope').value,
|
|
message: $('scheduleMessage').value
|
|
};
|
|
const editing = editingSchedule !== null;
|
|
if (editing) payload.original_schedule = editingSchedule;
|
|
|
|
const btn = $('saveScheduleBtn');
|
|
btn.disabled = true;
|
|
try {
|
|
const result = await api('/api/scheduled-messages', {
|
|
method: editing ? 'PUT' : 'POST',
|
|
body: JSON.stringify(payload)
|
|
});
|
|
modal.hide();
|
|
// reload_queued false means the file changed but the running bot did not.
|
|
showStatus(
|
|
result.message || 'Saved.',
|
|
result.reload_queued === false ? 'warning' : 'success'
|
|
);
|
|
load();
|
|
} catch (err) {
|
|
showStatus(err.message, 'danger');
|
|
} finally {
|
|
btn.disabled = false;
|
|
}
|
|
}
|
|
|
|
async function remove(entry) {
|
|
if (!confirm('Delete this scheduled message?\n\n'
|
|
+ entry.schedule + '\n' + entry.channel + ': ' + entry.message)) return;
|
|
try {
|
|
const result = await api('/api/scheduled-messages', {
|
|
method: 'DELETE',
|
|
body: JSON.stringify({ schedule: entry.schedule })
|
|
});
|
|
showStatus(
|
|
result.message || 'Deleted.',
|
|
result.reload_queued === false ? 'warning' : 'success'
|
|
);
|
|
load();
|
|
} catch (err) {
|
|
showStatus(err.message, 'danger');
|
|
}
|
|
}
|
|
|
|
function renderRow(entry) {
|
|
const tr = document.createElement('tr');
|
|
|
|
const nextRun = (entry.next_runs && entry.next_runs.length)
|
|
? new Date(entry.next_runs[0]).toLocaleString()
|
|
: '—';
|
|
|
|
let scheduleCell = '<span class="font-monospace">' + escapeHtml(entry.schedule) + '</span>';
|
|
if (entry.error) {
|
|
scheduleCell += '<br><span class="badge bg-danger">Not scheduled</span>';
|
|
} else if (entry.deprecated) {
|
|
scheduleCell += '<br><span class="badge bg-warning text-dark">Deprecated format</span>';
|
|
}
|
|
|
|
const scopeBadge = entry.scope
|
|
? ' <span class="badge bg-secondary">' + escapeHtml(entry.scope) + '</span>' : '';
|
|
|
|
tr.innerHTML =
|
|
'<td>' + scheduleCell + '</td>'
|
|
+ '<td>' + escapeHtml(nextRun) + '</td>'
|
|
+ '<td>' + escapeHtml(entry.channel) + scopeBadge + '</td>'
|
|
+ '<td class="text-break">' + escapeHtml(entry.message)
|
|
+ (entry.error ? '<br><span class="small text-danger">' + escapeHtml(entry.error) + '</span>' : '')
|
|
+ '</td>'
|
|
+ '<td class="text-end text-nowrap">'
|
|
+ '<button class="btn btn-sm btn-outline-secondary me-1 edit-btn">Edit</button>'
|
|
+ '<button class="btn btn-sm btn-outline-danger delete-btn">Delete</button>'
|
|
+ '</td>';
|
|
|
|
tr.querySelector('.edit-btn').addEventListener('click', () => openModal(entry));
|
|
tr.querySelector('.delete-btn').addEventListener('click', () => remove(entry));
|
|
return tr;
|
|
}
|
|
|
|
async function load() {
|
|
const body = $('scheduleTableBody');
|
|
try {
|
|
const data = await api('/api/scheduled-messages');
|
|
body.innerHTML = '';
|
|
if (!data.entries || !data.entries.length) {
|
|
body.innerHTML = '<tr><td colspan="5" class="text-muted">'
|
|
+ 'No scheduled messages yet.</td></tr>';
|
|
return;
|
|
}
|
|
data.entries.forEach((entry) => body.appendChild(renderRow(entry)));
|
|
} catch (err) {
|
|
body.innerHTML = '<tr><td colspan="5" class="text-danger">'
|
|
+ escapeHtml(err.message) + '</td></tr>';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
modal = new bootstrap.Modal($('scheduleModal'));
|
|
buildDayToggles();
|
|
$('addScheduleBtn').addEventListener('click', () => openModal(null));
|
|
$('saveScheduleBtn').addEventListener('click', save);
|
|
$('scheduleMode').addEventListener('change', syncModeFields);
|
|
['scheduleTime', 'scheduleTimes', 'scheduleEveryHours', 'scheduleEveryMinutes',
|
|
'scheduleCron', 'scheduleMessage'].forEach((id) =>
|
|
$(id).addEventListener('input', schedulePreview));
|
|
syncModeFields();
|
|
load();
|
|
});
|
|
})();
|
|
</script>
|
|
{% endblock %}
|