From badd542bd7082b5509f9d99a7c0d1f9d4e39260e Mon Sep 17 00:00:00 2001 From: josh Date: Sat, 28 Mar 2026 14:53:20 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20timezone=20setting=20=E2=80=94=20displa?= =?UTF-8?q?y=20timestamps=20in=20selected=20local=20timezone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a Display section to the settings modal with a timezone dropdown. Selection is persisted to localStorage and applied to all timestamps via fmtDate (date-only) and fmtDateFull (date + time + TZ abbreviation, e.g. "Mar 28, 2026, 2:48 PM EDT"). Changing the timezone live-re-renders the current page. Defaults to UTC. Co-Authored-By: Claude Sonnet 4.6 --- css/app.css | 3 +++ index.html | 7 +++++++ js/ui.js | 49 +++++++++++++++++++++++++++++++++++++++++-- tests/helpers.test.js | 16 ++++++++++++-- 4 files changed, 71 insertions(+), 4 deletions(-) diff --git a/css/app.css b/css/app.css index eac9a12..c0f1a23 100644 --- a/css/app.css +++ b/css/app.css @@ -665,6 +665,9 @@ select:focus { border-color: var(--accent); } margin-bottom: 8px; } .settings-desc { font-size: 12px; color: var(--text2); margin: 0 0 14px; line-height: 1.6; } +.settings-row { display: flex; align-items: center; gap: 12px; } +.settings-label { font-size: 13px; color: var(--text2); white-space: nowrap; min-width: 80px; } +.settings-select { flex: 1; } .import-row { display: flex; gap: 10px; align-items: center; } .import-file-input { flex: 1; } diff --git a/index.html b/index.html index f15f9db..246f199 100644 --- a/index.html +++ b/index.html @@ -180,6 +180,13 @@
+
+
Display
+
+ + +
+
Export

Download all instance data as a JSON backup file.

diff --git a/js/ui.js b/js/ui.js index af30325..5478a9d 100644 --- a/js/ui.js +++ b/js/ui.js @@ -3,6 +3,34 @@ let editingVmid = null; let currentVmid = null; let toastTimer = null; +// ── Timezone ────────────────────────────────────────────────────────────────── + +const TIMEZONES = [ + { label: 'UTC', tz: 'UTC' }, + { label: 'Hawaii (HST)', tz: 'Pacific/Honolulu' }, + { label: 'Alaska (AKT)', tz: 'America/Anchorage' }, + { label: 'Pacific (PT)', tz: 'America/Los_Angeles' }, + { label: 'Mountain (MT)', tz: 'America/Denver' }, + { label: 'Central (CT)', tz: 'America/Chicago' }, + { label: 'Eastern (ET)', tz: 'America/New_York' }, + { label: 'Atlantic (AT)', tz: 'America/Halifax' }, + { label: 'London (GMT/BST)', tz: 'Europe/London' }, + { label: 'Paris / Berlin (CET)', tz: 'Europe/Paris' }, + { label: 'Helsinki (EET)', tz: 'Europe/Helsinki' }, + { label: 'Istanbul (TRT)', tz: 'Europe/Istanbul' }, + { label: 'Dubai (GST)', tz: 'Asia/Dubai' }, + { label: 'India (IST)', tz: 'Asia/Kolkata' }, + { label: 'Singapore (SGT)', tz: 'Asia/Singapore' }, + { label: 'China (CST)', tz: 'Asia/Shanghai' }, + { label: 'Japan / Korea (JST/KST)', tz: 'Asia/Tokyo' }, + { label: 'Sydney (AEST)', tz: 'Australia/Sydney' }, + { label: 'Auckland (NZST)', tz: 'Pacific/Auckland' }, +]; + +function getTimezone() { + return localStorage.getItem('catalyst_tz') || 'UTC'; +} + // ── Helpers ─────────────────────────────────────────────────────────────────── function esc(str) { @@ -14,14 +42,14 @@ function esc(str) { function fmtDate(d) { if (!d) return '—'; try { - return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); + return new Date(d).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', timeZone: getTimezone() }); } catch (e) { return d; } } function fmtDateFull(d) { if (!d) return '—'; try { - return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }); + return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', timeZone: getTimezone(), timeZoneName: 'short' }); } catch (e) { return d; } } @@ -289,6 +317,16 @@ function showToast(msg, type = 'success') { // ── Settings Modal ──────────────────────────────────────────────────────────── function openSettingsModal() { + const sel = document.getElementById('tz-select'); + if (!sel.options.length) { + for (const { label, tz } of TIMEZONES) { + const opt = document.createElement('option'); + opt.value = tz; + opt.textContent = label; + sel.appendChild(opt); + } + } + sel.value = getTimezone(); document.getElementById('settings-modal').classList.add('open'); } @@ -353,3 +391,10 @@ document.getElementById('confirm-overlay').addEventListener('click', e => { document.getElementById('settings-modal').addEventListener('click', e => { if (e.target === document.getElementById('settings-modal')) closeSettingsModal(); }); + +document.getElementById('tz-select').addEventListener('change', e => { + localStorage.setItem('catalyst_tz', e.target.value); + const m = window.location.pathname.match(/^\/instance\/(\d+)/); + if (m) renderDetailPage(parseInt(m[1], 10)); + else renderDashboard(); +}); diff --git a/tests/helpers.test.js b/tests/helpers.test.js index 26bdd4d..d6c1a4a 100644 --- a/tests/helpers.test.js +++ b/tests/helpers.test.js @@ -88,24 +88,36 @@ describe('fmtDate', () => { // ── fmtDateFull() ───────────────────────────────────────────────────────────── -function fmtDateFull(d) { +function fmtDateFull(d, tz = 'UTC') { if (!d) return '—' try { return new Date(d).toLocaleString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', + timeZone: tz, timeZoneName: 'short', }) } catch (e) { return d } } describe('fmtDateFull', () => { it('includes date and time components', () => { - const result = fmtDateFull('2024-03-15T14:30:00') + const result = fmtDateFull('2024-03-15T14:30:00Z') expect(result).toMatch(/Mar/) expect(result).toMatch(/2024/) expect(result).toMatch(/\d{1,2}:\d{2}/) }) + it('includes the timezone abbreviation', () => { + expect(fmtDateFull('2024-03-15T14:30:00Z', 'UTC')).toMatch(/UTC/) + }) + + it('converts to the given timezone', () => { + // 2024-03-15 18:30 UTC = 2024-03-15 14:30 EDT (UTC-4 in March) + const result = fmtDateFull('2024-03-15T18:30:00Z', 'America/New_York') + expect(result).toMatch(/2:30/) + expect(result).toMatch(/EDT/) + }) + it('returns — for null', () => { expect(fmtDateFull(null)).toBe('—') })