Auto refresh

2026-06-02 04:02:00 -04:00
parent 278303f541
commit 1fd7803f12
5 changed files with 114 additions and 2 deletions
@@ -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();
+})();
@@ -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));
  }
@@ -6,16 +6,21 @@
    <title>{% block title %}SwitchBot Temps{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
  </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">
      <a class="brand" href="/">SwitchBot Temps</a>
      <nav class="nav">
        <a href="/" {% if request.path == "/" %}aria-current="page"{% endif %}>Dashboard</a>
        <a href="/reports" {% if request.path == "/reports" %}aria-current="page"{% endif %}>Reports</a>
      </nav>
+      <p class="refresh-status" id="refreshStatus" aria-live="polite"></p>
    </header>
    <main class="page">
      {% block content %}{% endblock %}
    </main>
+    <script src="{{ url_for('static', filename='auto_refresh.js') }}"></script>
  </body>
 </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) %}
        <a class="metric-card metric-link" href="/devices/{{ device.id }}">
          <div class="card-heading">
            <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>
              <span>{{ reading.humidity if reading.humidity is not none else "n/a" }}% RH</span>
            </div>
+            <p class="muted">{{ collected_age or "n/a" }}</p>
            <dl class="mini-stats">
              <div>
                <dt>Day low</dt>
@@ -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/<device_id>")
@@ -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,