jamesp/mt-vet-temps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Auto refresh

Browse Source
This commit is contained in:
James Pattinson
2026-06-02 04:02:00 -04:00
parent 278303f541
commit 1fd7803f12
5 changed files with 114 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/auto_refresh.js
+51
View File
@@ -0,0 +1,51 @@
(function () {
const body = document.body;
if (!body) return;
if (body.dataset.autoRefresh !== "true") return;
const statusEl = document.getElementById("refreshStatus");
const intervalSeconds = Number(body.dataset.collectIntervalSeconds || "0");
if (!Number.isFinite(intervalSeconds) || intervalSeconds <= 0) return;
const intervalMs = Math.max(60000, intervalSeconds * 1000);
const graceMs = 8000;
const timeFmt = new Intl.DateTimeFormat([], {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
function setStatus(lastRefreshAt, nextRefreshAt) {
if (!statusEl) return;
statusEl.textContent = `Last refresh: ${timeFmt.format(lastRefreshAt)} | Next refresh: ${timeFmt.format(nextRefreshAt)}`;
}
function reloadWhenVisible() {
if (document.visibilityState === "visible") {
window.location.reload();
return;
}
function onVisibilityChange() {
if (document.visibilityState !== "visible") return;
document.removeEventListener("visibilitychange", onVisibilityChange);
window.location.reload();
}
document.addEventListener("visibilitychange", onVisibilityChange);
}
function scheduleAlignedRefresh() {
const now = Date.now();
const nextBoundary = Math.ceil(now / intervalMs) * intervalMs;
const runAt = nextBoundary + graceMs;
setStatus(new Date(now), new Date(runAt));
const delay = Math.max(1000, runAt - now);
window.setTimeout(reloadWhenVisible, delay);
}
scheduleAlignedRefresh();
})();
app/static/styles.css
+22
View File
@@ -31,6 +31,7 @@ a {
top: 0; top: 0;
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 16px; gap: 16px;
@@ -62,6 +63,18 @@ a {
color: #fff; color: #fff;
} }
.refresh-status {
margin: 0;
color: var(--muted);
font-size: 0.82rem;
font-weight: 700;
white-space: nowrap;
}
.refresh-status:empty {
display: none;
}
.page { .page {
width: min(1180px, calc(100vw - 32px)); width: min(1180px, calc(100vw - 32px));
margin: 0 auto; margin: 0 auto;
@@ -305,6 +318,15 @@ th {
} }
@media (max-width: 900px) { @media (max-width: 900px) {
.topbar {
align-items: flex-start;
}
.refresh-status {
width: 100%;
white-space: normal;
}
.cards { .cards {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
app/templates/base.html
+6 -1
View File
@@ -6,16 +6,21 @@
<title>{% block title %}SwitchBot Temps{% endblock %}</title> <title>{% block title %}SwitchBot Temps{% endblock %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head> </head>
<body> <body
data-collect-interval-seconds="{{ collect_interval_seconds }}"
data-auto-refresh="{{ 'true' if request.path == '/' or request.path.startswith('/devices/') else 'false' }}"
>
<header class="topbar"> <header class="topbar">
<a class="brand" href="/">SwitchBot Temps</a> <a class="brand" href="/">SwitchBot Temps</a>
<nav class="nav"> <nav class="nav">
<a href="/" {% if request.path == "/" %}aria-current="page"{% endif %}>Dashboard</a> <a href="/" {% if request.path == "/" %}aria-current="page"{% endif %}>Dashboard</a>
<a href="/reports" {% if request.path == "/reports" %}aria-current="page"{% endif %}>Reports</a> <a href="/reports" {% if request.path == "/reports" %}aria-current="page"{% endif %}>Reports</a>
</nav> </nav>
<p class="refresh-status" id="refreshStatus" aria-live="polite"></p>
</header> </header>
<main class="page"> <main class="page">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
<script src="{{ url_for('static', filename='auto_refresh.js') }}"></script>
</body> </body>
</html> </html>
app/templates/dashboard.html
+2
View File
@@ -17,6 +17,7 @@
{% for device in devices %} {% for device in devices %}
{% set reading = latest.get(device.id) %} {% set reading = latest.get(device.id) %}
{% set stat = stats.get(device.id) %} {% set stat = stats.get(device.id) %}
{% set collected_age = latest_relative.get(device.id) %}
<a class="metric-card metric-link" href="/devices/{{ device.id }}"> <a class="metric-card metric-link" href="/devices/{{ device.id }}">
<div class="card-heading"> <div class="card-heading">
<h2>{{ device.name }}</h2> <h2>{{ device.name }}</h2>
@@ -27,6 +28,7 @@
<strong>{{ "%.1f"|format(reading.temperature) if reading.temperature is not none else "n/a" }}&deg;C</strong> <strong>{{ "%.1f"|format(reading.temperature) if reading.temperature is not none else "n/a" }}&deg;C</strong>
<span>{{ reading.humidity if reading.humidity is not none else "n/a" }}% RH</span> <span>{{ reading.humidity if reading.humidity is not none else "n/a" }}% RH</span>
</div> </div>
<p class="muted">{{ collected_age or "n/a" }}</p>
<dl class="mini-stats"> <dl class="mini-stats">
<div> <div>
<dt>Day low</dt> <dt>Day low</dt>
app/web.py
+33 -1
View File
@@ -22,6 +22,10 @@ def create_app() -> Flask:
app.secret_key = config.flask_secret_key app.secret_key = config.flask_secret_key
init_db() init_db()
@app.context_processor
def inject_common_template_vars() -> dict[str, int]:
return {"collect_interval_seconds": config.collect_interval_seconds}
@app.get("/") @app.get("/")
def dashboard() -> str: def dashboard() -> str:
tz = ZoneInfo(config.app_timezone) tz = ZoneInfo(config.app_timezone)
@@ -43,10 +47,10 @@ def create_app() -> Flask:
"dashboard.html", "dashboard.html",
devices=devices, devices=devices,
latest=latest, latest=latest,
latest_relative=latest_ages_for_display(latest, tz),
stats=stats_by_device(readings), stats=stats_by_device(readings),
chart_json=json.dumps(chart_payload(readings, tz)), chart_json=json.dumps(chart_payload(readings, tz)),
timezone=config.app_timezone, timezone=config.app_timezone,
collect_interval_seconds=config.collect_interval_seconds,
) )
@app.get("/devices/<device_id>") @app.get("/devices/<device_id>")
@@ -262,6 +266,34 @@ def readings_for_display(readings: list[Reading], tz: ZoneInfo) -> list[dict[str
return rows return rows
def latest_ages_for_display(latest: dict[str, Reading], tz: ZoneInfo) -> dict[str, str]:
now_local = datetime.now(tz)
ages: dict[str, str] = {}
for device_id, reading in latest.items():
collected_local = reading.recorded_at.replace(tzinfo=timezone.utc).astimezone(tz)
delta_seconds = max(0, int((now_local - collected_local).total_seconds()))
if delta_seconds < 60:
ages[device_id] = "just now"
continue
minutes = delta_seconds // 60
if minutes < 60:
ages[device_id] = f"{minutes} min ago"
continue
hours = minutes // 60
if hours < 24:
ages[device_id] = f"{hours} h ago"
continue
days = hours // 24
ages[device_id] = f"{days} d ago"
return ages
def report_rows( def report_rows(
session: Session, session: Session,
start_utc: datetime, start_utc: datetime,