adam/potato-mesh
1
0
Fork 0
mirror of https://github.com/l5yth/potato-mesh.git synced 2026-08-07 09:22:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add auto-refresh toggle (#105)

Browse Source
This commit is contained in:
l5y
2025-09-16 19:21:54 +02:00
committed by GitHub
parent 9873f6105d
commit 4182a9f83c
1 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/views/index.erb
+28 -4
View File
@@ -58,6 +58,7 @@
.refresh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; width: 100%; }
.refresh-info { margin: 0; color: #555; }
.refresh-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-self: end; }
.auto-refresh-toggle { display: inline-flex; align-items: center; gap: 6px; }
.controls { display: flex; gap: 8px; align-items: center; }
.controls label { display: inline-flex; align-items: center; gap: 6px; }
button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
@@ -155,8 +156,9 @@
<div class="row meta">
<div class="meta-info">
<div class="refresh-row">
<p id="refreshInfo" class="refresh-info" aria-live="polite"><%= default_channel %> (<%= default_frequency %>) — active nodes: … — auto-refresh every <%= refresh_interval_seconds %> seconds.</p>
<p id="refreshInfo" class="refresh-info" aria-live="polite"><%= default_channel %> (<%= default_frequency %>) — active nodes: …</p>
<div class="refresh-actions">
<label class="auto-refresh-toggle"><input type="checkbox" id="autoRefresh" checked /> Auto-refresh every <%= refresh_interval_seconds %> seconds</label>
<button id="refreshBtn" type="button">Refresh now</button>
<span id="status" class="pill">loading…</span>
</div>
@@ -233,6 +235,7 @@
<script>
const statusEl = document.getElementById('status');
const fitBoundsEl = document.getElementById('fitBounds');
const autoRefreshEl = document.getElementById('autoRefresh');
const refreshBtn = document.getElementById('refreshBtn');
const filterInput = document.getElementById('filterInput');
const themeToggle = document.getElementById('themeToggle');
@@ -252,7 +255,19 @@
const NODE_LIMIT = 1000;
const CHAT_LIMIT = 1000;
const REFRESH_MS = <%= refresh_interval_seconds * 1000 %>;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes: … — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes: …`;
let refreshTimer = null;
function restartAutoRefresh() {
if (refreshTimer) {
clearInterval(refreshTimer);
refreshTimer = null;
}
if (autoRefreshEl && autoRefreshEl.checked) {
refreshTimer = setInterval(refresh, REFRESH_MS);
}
}
const MAP_CENTER = L.latLng(<%= map_center_lat %>, <%= map_center_lon %>);
const MAX_NODE_DISTANCE_KM = <%= max_node_distance_km %>;
@@ -613,9 +628,18 @@
}
refresh();
setInterval(refresh, REFRESH_MS);
restartAutoRefresh();
refreshBtn.addEventListener('click', refresh);
if (autoRefreshEl) {
autoRefreshEl.addEventListener('change', () => {
restartAutoRefresh();
if (autoRefreshEl.checked) {
refresh();
}
});
}
function updateCount(nodes, nowSec) {
const dayAgoSec = nowSec - 86400;
const count = nodes.filter(n => n.last_heard && Number(n.last_heard) >= dayAgoSec).length;
@@ -634,7 +658,7 @@
const c = nodes.filter(n => n.last_heard && nowSec - Number(n.last_heard) <= w.secs).length;
return `${c}/${w.label}`;
}).join(', ');
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes: ${counts} — auto-refresh every ${REFRESH_MS / 1000} seconds.`;
refreshInfo.textContent = `<%= default_channel %> (<%= default_frequency %>) — active nodes: ${counts}.`;
}
</script>
</body>