diff --git a/app/static/auto_refresh.js b/app/static/auto_refresh.js new file mode 100644 index 0000000..fa5ad57 --- /dev/null +++ b/app/static/auto_refresh.js @@ -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(); +})(); diff --git a/app/static/styles.css b/app/static/styles.css index 5632f4b..52efe22 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -31,6 +31,7 @@ a { top: 0; z-index: 10; display: flex; + flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; @@ -62,6 +63,18 @@ a { 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 { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; @@ -305,6 +318,15 @@ th { } @media (max-width: 900px) { + .topbar { + align-items: flex-start; + } + + .refresh-status { + width: 100%; + white-space: normal; + } + .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } diff --git a/app/templates/base.html b/app/templates/base.html index 5c5f242..5c39e9d 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -6,16 +6,21 @@ {% block title %}SwitchBot Temps{% endblock %} - +
SwitchBot Temps +

{% block content %}{% endblock %}
+ diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index 4f69c63..95735dd 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -17,6 +17,7 @@ {% for device in devices %} {% set reading = latest.get(device.id) %} {% set stat = stats.get(device.id) %} + {% set collected_age = latest_relative.get(device.id) %}

{{ device.name }}

@@ -27,6 +28,7 @@ {{ "%.1f"|format(reading.temperature) if reading.temperature is not none else "n/a" }}°C {{ reading.humidity if reading.humidity is not none else "n/a" }}% RH
+

{{ collected_age or "n/a" }}

Day low
diff --git a/app/web.py b/app/web.py index 4335c99..e9b7cc9 100644 --- a/app/web.py +++ b/app/web.py @@ -22,6 +22,10 @@ def create_app() -> Flask: app.secret_key = config.flask_secret_key init_db() + @app.context_processor + def inject_common_template_vars() -> dict[str, int]: + return {"collect_interval_seconds": config.collect_interval_seconds} + @app.get("/") def dashboard() -> str: tz = ZoneInfo(config.app_timezone) @@ -43,10 +47,10 @@ def create_app() -> Flask: "dashboard.html", devices=devices, latest=latest, + latest_relative=latest_ages_for_display(latest, tz), stats=stats_by_device(readings), chart_json=json.dumps(chart_payload(readings, tz)), timezone=config.app_timezone, - collect_interval_seconds=config.collect_interval_seconds, ) @app.get("/devices/") @@ -262,6 +266,34 @@ def readings_for_display(readings: list[Reading], tz: ZoneInfo) -> list[dict[str 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( session: Session, start_utc: datetime,