From ed10a2b65ca735ca185b2c018f13dcde0cd90431 Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Wed, 11 Jun 2025 20:47:06 +0200
Subject: [PATCH] Enhance UptimeStatusIsland component with improved time
 formatting and timezone support

- Updated formatLocalTime function to accept a timezone parameter, allowing for dynamic local time display.
- Modified heartbeat time display to include both local and UTC formats for better user clarity.
- Ensured handling of invalid date scenarios to improve robustness of date formatting.
---
 src/components/UptimeStatusIsland.jsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/UptimeStatusIsland.jsx b/src/components/UptimeStatusIsland.jsx
index 835bbef..a1b13d8 100644
--- a/src/components/UptimeStatusIsland.jsx
+++ b/src/components/UptimeStatusIsland.jsx
@@ -44,12 +44,15 @@ function getUptime24hBg(uptime) {
   return 'bg-red-600 text-white dark:bg-red-800 dark:text-white';
 }
 
-function formatLocalTime(rawTime) {
+function formatLocalTime(rawTime, zone = 'utc') {
   if (!rawTime) return '';
   // Parse the API's custom format as UTC
   const dt = DateTime.fromFormat(rawTime, 'yyyy-MM-dd HH:mm:ss.SSS', { zone: 'utc' });
-  // Always show in UTC, format: dd-MM-yyyy, HH:mm:ss UTC
-  return dt.isValid ? dt.toFormat('dd-MM-yyyy, HH:mm:ss') + ' UTC' : 'Invalid DateTime UTC';
+  // Convert to user's zone if provided and valid
+  const localDt = dt.isValid ? dt.setZone(zone) : null;
+  return localDt && localDt.isValid
+    ? localDt.toFormat('dd-MM-yyyy, HH:mm:ss z')
+    : 'Invalid DateTime';
 }
 
 export default function UptimeStatusIsland() {
@@ -236,11 +239,16 @@ export default function UptimeStatusIsland() {
                           {Array.from({ length: 40 }).map((_, i) => {
                             const hbArr = monitor.heartbeatHistory ?? [];
                             const hb = hbArr.slice(-40)[i];
-                            const localTime = hb ? formatLocalTime(hb.time) : '';
+                            const localTime = hb ? formatLocalTime(hb.time, userZone) : '';
+                            const utcTime = hb ? formatLocalTime(hb.time, 'utc') : '';
                             return (
                               <span
                                 key={i}
-                                title={hb ? `Status: ${hb.status === 1 ? 'Up' : 'Down'}\nTime: ${localTime}` : ''}
+                                title={
+                                  hb
+                                    ? `Status: ${hb.status === 1 ? 'Up' : 'Down'}\nLocal: ${localTime}\nUTC: ${utcTime}`
+                                    : ''
+                                }
                                 className={`w-full h-4 rounded-sm ${hb ? getHeartbeatColor(hb.status) : 'bg-gray-400 dark:bg-gray-600'} block`}
                               ></span>
                             );