fix: Update clock display to show timezone-adjusted time#6
Open
fix: Update clock display to show timezone-adjusted time#6
Conversation
## 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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_statusWebSocket message, but the client JavaScript was not updating the clock display with this data. TheupdateNTPStatus()function only updated the NTP status icon, ignoring thedata.timefield.Solution
Client (data/script.js)
updateNTPStatus()function to update the clock display (timeElement.textContent) with the timezone-adjusted time fromdata.timefield (lines 935-938)Web Interface (data/index.html)
?v=20251030to?v=20251030bto ensure browsers reload the updated JavaScriptTest Server (test-server/server.js)
currentTimezonevariable to track selected timezonegetFormattedTime()helper function to format time in the selected timezone using JavaScript's Intl APIset_timezoneaction handler to allow timezone changes (admin only)Testing
The fix can be tested with the test server:
cd test-server && npm startFixes issue where clock displayed local time instead of selected timezone.