Folder reorganize 1

overviews/dashboard.js

@@ -0,0 +1,95 @@
+(() => {
+    const REFRESH_INTERVAL = 5000;
+    const root = document.querySelector('[data-board-root]');
+    const statusEl = document.querySelector('[data-refresh-status]');
+    const errorEl = document.querySelector('[data-refresh-error]');
+    const clockEl = document.querySelector('[data-board-clock]');
+
+    if (!root) {
+        return;
+    }
+
+    const formatTime = (date) =>
+        date.toLocaleTimeString([], {
+            hour: 'numeric',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+
+    const setError = (message) => {
+        if (!errorEl) return;
+        if (message) {
+            errorEl.textContent = message;
+            errorEl.setAttribute('aria-hidden', 'false');
+        } else {
+            errorEl.textContent = '';
+            errorEl.setAttribute('aria-hidden', 'true');
+        }
+    };
+
+    const updateStatus = (timestamp) => {
+        if (!statusEl) return;
+        if (timestamp) {
+            const parsed = new Date(timestamp);
+            if (!Number.isNaN(parsed.getTime())) {
+                statusEl.textContent = formatTime(parsed);
+                return;
+            }
+        }
+        statusEl.textContent = formatTime(new Date());
+    };
+
+    const updateClock = () => {
+        if (!clockEl) return;
+        clockEl.textContent = new Date().toLocaleString([], {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            second: '2-digit',
+        });
+    };
+
+    const refresh = async () => {
+        try {
+            const response = await fetch('data/main.php', {
+                cache: 'no-store',
+                headers: { 'X-Requested-With': 'XMLHttpRequest' },
+            });
+
+            if (!response.ok) {
+                throw new Error(`Request failed: ${response.status}`);
+            }
+
+            const html = await response.text();
+            root.innerHTML = html;
+
+            const generatedAt = root.querySelector('[data-generated-at]');
+            if (generatedAt) {
+                updateStatus(generatedAt.getAttribute('data-generated-at'));
+            } else {
+                updateStatus();
+            }
+
+            setError('');
+            root.removeAttribute('data-refresh-error');
+        } catch (error) {
+            console.error('Failed to refresh overview data', error);
+            setError('Connection lost — retrying');
+            root.setAttribute('data-refresh-error', 'true');
+        }
+    };
+
+    refresh();
+    updateClock();
+
+    setInterval(refresh, REFRESH_INTERVAL);
+    setInterval(updateClock, 1000);
+
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+            refresh();
+        }
+    });
+})();