Skip to content

fix: Update clock display to show timezone-adjusted time#6

Open
ispyisail wants to merge 1 commit intomainfrom
claude/fix-timezone-clock-display-011CUdnvGzjnbsuFgYyoAj9S
Open

fix: Update clock display to show timezone-adjusted time#6
ispyisail wants to merge 1 commit intomainfrom
claude/fix-timezone-clock-display-011CUdnvGzjnbsuFgYyoAj9S

Conversation

@ispyisail
Copy link
Owner

Problem

The time clock in the top right corner was displaying the user's local browser time instead of the timezone-adjusted time from the ESP32 server, even though the timezone was changed in settings.

Root Cause

The server was correctly sending timezone-adjusted time every 5 seconds in the ntp_status WebSocket message, but the client JavaScript was not updating the clock display with this data. The updateNTPStatus() function only updated the NTP status icon, ignoring the data.time field.

Solution

Client (data/script.js)

  • Modified updateNTPStatus() function to update the clock display (timeElement.textContent) with the timezone-adjusted time from data.time field (lines 935-938)

Web Interface (data/index.html)

  • Updated cache-busting parameter from ?v=20251030 to ?v=20251030b to ensure browsers reload the updated JavaScript

Test Server (test-server/server.js)

  • Added currentTimezone variable to track selected timezone
  • Added getFormattedTime() helper function to format time in the selected timezone using JavaScript's Intl API
  • Added set_timezone action handler to allow timezone changes (admin only)
  • Updated NTP status broadcasts to use the selected timezone
  • Broadcasts updated time to all clients when timezone is changed

Testing

The fix can be tested with the test server:

  1. Start test server: cd test-server && npm start
  2. Login as admin (username: admin, password: admin)
  3. Open Settings and change the timezone
  4. Clock should immediately update to show the new timezone's time
  5. Clock updates every 5 seconds with the correct timezone

Fixes issue where clock displayed local time instead of selected timezone.

## Problem
The time clock in the top right corner was displaying the user's local
browser time instead of the timezone-adjusted time from the ESP32 server,
even though the timezone was changed in settings.

## Root Cause
The server was correctly sending timezone-adjusted time every 5 seconds
in the `ntp_status` WebSocket message, but the client JavaScript was not
updating the clock display with this data. The `updateNTPStatus()` function
only updated the NTP status icon, ignoring the `data.time` field.

## Solution
### Client (data/script.js)
- Modified `updateNTPStatus()` function to update the clock display
  (`timeElement.textContent`) with the timezone-adjusted time from
  `data.time` field (lines 935-938)

### Web Interface (data/index.html)
- Updated cache-busting parameter from `?v=20251030` to `?v=20251030b`
  to ensure browsers reload the updated JavaScript

### Test Server (test-server/server.js)
- Added `currentTimezone` variable to track selected timezone
- Added `getFormattedTime()` helper function to format time in the
  selected timezone using JavaScript's Intl API
- Added `set_timezone` action handler to allow timezone changes (admin only)
- Updated NTP status broadcasts to use the selected timezone
- Broadcasts updated time to all clients when timezone is changed

## Testing
The fix can be tested with the test server:
1. Start test server: `cd test-server && npm start`
2. Login as admin (username: admin, password: admin)
3. Open Settings and change the timezone
4. Clock should immediately update to show the new timezone's time
5. Clock updates every 5 seconds with the correct timezone

Fixes issue where clock displayed local time instead of selected timezone.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants