v0.3.0-prod

internal/web/assets/app.js

@@ -1,17 +1,69 @@
 (function () {
+  'use strict';
+
+  // --- theme (dark/light), persisted per browser -------------------------
+  var THEME_KEY = 'ts3monolith-theme';
+  var root = document.documentElement;
+  var toggle = document.querySelector('.theme-toggle');
+  var graphs = document.querySelectorAll('.js-live-graph');
+  var openers = document.querySelectorAll('.js-graph-open');
+
+  function currentTheme() {
+    return root.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+  }
+
+  // RRD graphs are static PNGs rendered server-side in both a dark and a
+  // light palette (see internal/rrd/rrd.go); swap to the variant matching
+  // the active theme so panel graphs never clash with the page around them.
+  function applyGraphTheme(theme) {
+    var stamp = Date.now();
+    graphs.forEach(function (img) {
+      var src = theme === 'light' ? img.dataset.srcLight : img.dataset.src;
+      if (src) img.src = src + '?v=' + stamp;
+    });
+    openers.forEach(function (button) {
+      var full = theme === 'light' ? button.getAttribute('data-full-light') : button.getAttribute('data-full');
+      if (full) button.setAttribute('data-full-active', full);
+    });
+  }
+
+  function applyTheme(mode) {
+    if (mode === 'light') root.setAttribute('data-theme', 'light');
+    else root.removeAttribute('data-theme');
+    applyGraphTheme(mode === 'light' ? 'light' : 'dark');
+  }
+  try {
+    var saved = window.localStorage.getItem(THEME_KEY);
+    if (saved) applyTheme(saved);
+    else applyGraphTheme(currentTheme());
+  } catch (e) {
+    applyGraphTheme(currentTheme());
+  }
+
+  if (toggle) {
+    toggle.addEventListener('click', function () {
+      var next = currentTheme() === 'light' ? 'dark' : 'light';
+      applyTheme(next);
+      try { window.localStorage.setItem(THEME_KEY, next); } catch (e) { /* ignore */ }
+    });
+  }
+
+  // --- live stats + graph refresh -----------------------------------------
   var count = document.getElementById('online-count');
   var status = document.getElementById('refresh-status');
-  var graphs = document.querySelectorAll('.js-live-graph');
-  var lightbox = document.getElementById('graph-lightbox');
-  var lightboxImage = document.getElementById('lightbox-image');
-  var openers = document.querySelectorAll('.js-graph-open');
-  var closeButtons = document.querySelectorAll('[data-lightbox-close]');
+  var progress = document.getElementById('route-progress');
+
+  function setBusy(busy) {
+    if (progress) progress.hidden = !busy;
+  }
 
   function refresh() {
+    setBusy(true);
     if (status) status.textContent = 'Odświeżanie…';
 
+    var done = Promise.resolve();
     if (count) {
-      fetch('/stats/live', {cache: 'no-store'})
+      done = fetch('/stats/live', { cache: 'no-store' })
         .then(function (response) {
           if (!response.ok) throw new Error('stats');
           return response.json();
@@ -25,13 +77,21 @@
         });
     }
 
-    var stamp = Date.now();
-    graphs.forEach(function (img) {
-      var src = img.dataset.src;
-      if (src) img.src = src + '?v=' + stamp;
-    });
+    applyGraphTheme(currentTheme());
+
+    done.then(function () { setBusy(false); });
   }
 
+  if (count || graphs.length) {
+    window.setInterval(refresh, 60000);
+  }
+
+  // --- graph lightbox -------------------------------------------------------
+  var lightbox = document.getElementById('graph-lightbox');
+  var lightboxImage = document.getElementById('lightbox-image');
+  var openers = document.querySelectorAll('.js-graph-open');
+  var closeButtons = document.querySelectorAll('[data-lightbox-close]');
+
   function openLightbox(src) {
     if (!lightbox || !lightboxImage) return;
     lightboxImage.src = src + (src.indexOf('?') === -1 ? '?' : '&') + 'v=' + Date.now();
@@ -50,7 +110,7 @@
 
   openers.forEach(function (button) {
     button.addEventListener('click', function () {
-      var src = button.getAttribute('data-full');
+      var src = button.getAttribute('data-full-active') || button.getAttribute('data-full');
       if (src) openLightbox(src);
     });
   });
@@ -62,6 +122,4 @@
   document.addEventListener('keydown', function (event) {
     if (event.key === 'Escape' && lightbox && !lightbox.hidden) closeLightbox();
   });
-
-  window.setInterval(refresh, 60000);
 })();