rick/LEDMatrix
1
0
Fork 0
mirror of https://github.com/ChuckBuilds/LEDMatrix.git synced 2026-05-16 10:23:31 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
4f126d6133b445c49bb2ba78b998d3d29d18fae2
LEDMatrix/web_interface/static/v3/js/widgets/timezone-selector.js
Chuck 05b3fa56cb fix: Codacy security fixes, CVE dependency bumps, and code quality cleanup (#331) 
* fix(deps): bump minimum versions to address CVEs

Pillow 10.4.0 → 12.2.0: CVE-2026-40192 (DoS via FITS decompression bomb),
CVE-2026-25990 (OOB write via PSD image), CVE-2026-42311/42308/42310

requests 2.32.0 → 2.33.0: CVE-2026-25645 (temp file security bypass),
CVE-2024-47081 (.netrc credentials leak)

werkzeug 3.0.0 → 3.1.6: CVE-2023-46136, CVE-2024-49766/49767,
CVE-2025-66221, CVE-2026-21860/27199 (DoS, path traversal, safe_join bypass)

Flask 3.0.0 → 3.1.3: CVE-2026-27205 (session data caching info disclosure)

spotipy 2.24.0 → 2.25.2: CVE-2025-27154, CVE-2025-66040

python-socketio 5.11.0 → 5.14.0: CVE-2025-61765

pytest 7.4.0 → 9.0.3: CVE-2025-71176 (insecure temp dir handling)

Updated in requirements.txt, web_interface/requirements.txt,
plugin-repos/starlark-apps/requirements.txt, and
plugin-repos/march-madness/requirements.txt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: resolve Pylint errors in executor, data service, and odds call

Rename TimeoutError to PluginTimeoutError in plugin_executor.py to
avoid shadowing the built-in; no external callers affected.

Remove dead try/except in BackgroundDataService.shutdown: executor.shutdown()
never accepted a timeout kwarg so the try branch always raised TypeError.
Simplify to a direct shutdown(wait=wait) call.

Remove is_live kwarg from odds_manager.get_odds() call in sports.py;
BaseOddsManager.get_odds() has no such parameter. The live update interval
is already encoded in the update_interval_seconds argument passed alongside.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: MD5→SHA-256, shellcheck warnings, and broken doc links

config_service.py: replace MD5 with SHA-256 for config change detection;
same semantics (equality comparison), no stored hashes affected.

Shell scripts — shellcheck warnings:
- diagnose_web_interface.sh: remove useless cat (SC2002)
- dev_plugin_setup.sh: restructure A&&B||C into if/then (SC2015)
- fix_assets_permissions.sh: remove unused REAL_HOME block (SC2034)
- install_web_service.sh: remove unused USER_HOME assignment (SC2034)
- diagnose_web_ui.sh: remove unused SUDO assignments (SC2034)
- diagnose_plugin_permissions.sh: remove unused BLUE color var (SC2034)
- first_time_install.sh: remove unused CLEAR var, PACKAGE_NAME
  assignment, and replace loop variable with _ (SC2034)

docs/PLUGIN_ARCHITECTURE_SPEC.md: fix 10 broken TOC anchor links to
include section numbers matching the actual headings (MD051).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: remove unused imports and bare exception aliases (pyflakes F401/F841)

Remove unused imports across 86 files in src/, web_interface/, test/,
and scripts/ using autoflake. No logic changes — only dead import
statements and unused names in from-imports are removed.

Also remove bare exception aliases where the variable is never
referenced in the handler body:
- src/cache/disk_cache.py: except (IOError, OSError, PermissionError) as e
- src/cache_manager.py: except (OSError, IOError, PermissionError) as perm_error
- src/plugin_system/resource_monitor.py: except Exception as e
- web_interface/app.py: except Exception as read_err

86 files changed, 205 lines removed, 18 pre-existing test failures unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: remove unused local variable assignments (pyflakes F841)

Dead assignments removed across src/ and web_interface/:

- background_data_service: drop future= on fire-and-forget executor.submit
- base_classes/baseball: drop font= (all rendering uses self.fonts['time'])
- base_classes/hockey: drop status_short= (never referenced after assignment)
- common/cli: drop game_helper=/config_helper= bindings in import-test block;
  constructors called for instantiation-only validation
- common/display_helper: drop text_width= (x_position uses display_width
  directly); drop draw= in create_error_image (uses _draw_centered_text)
- config_manager: remove dead secrets_content loading block in migration path
  (comment already noted save_config_atomic handles secrets internally)
- display_manager: drop setup_start= (timing was never completed or read)
- font_manager: drop target_path= (catalog uses font_file_path directly);
  drop face=/font= bindings in validate_font (validation by construction —
  TypeError on failure is the signal, not the return value)
- font_test_manager: drop width=/height= (draw_text uses display_manager directly)
- plugin_system/state_reconciliation: drop manager= (only config/disk/state_mgr used)
- plugin_system/store_manager: drop result= on pip install subprocess.run
  (check=True raises on failure; stdout unused)
- web_interface/blueprints/pages_v3: drop main_config_path=""/secrets_config_path=""
  (render_template uses config_manager.get_*_path() inline)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(js): resolve ESLint no-undef warnings across 6 JS files

Three distinct patterns:

1. Vendor library globals — htmx is injected by <script> before these
   extension files load; ESLint lints files in isolation and doesn't know.
   Fix: add /* global htmx */ to htmx-sse.js and htmx-json-enc.js.

2. Cross-file globals — showNotification is defined as window.showNotification
   in app.js/notification.js but called bare in app.js and error_handler.js.
   ESLint doesn't connect window.X = Y with a bare call to X.
   Fix: add /* global showNotification */ to app.js and error_handler.js.

3. Forward-reference window.* functions — in array-table.js, checkbox-group.js,
   and custom-feeds.js, functions like removeArrayTableRow are called early
   inside event-handler closures but assigned to window.* later in the file.
   At runtime this works (the handler fires after the assignment), but ESLint
   sees the bare name at the call site.
   Fix: change bare calls to window.removeArrayTableRow(this) etc. so the
   reference is explicit and ESLint-safe.

Also guard the updateSystemStats call in app.js reconnectSSE: the function
is called but defined nowhere in the codebase. Guard with typeof check so
it won't throw ReferenceError if the reconnect path is hit.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(js): resolve Biome lint warnings across 9 JS files

noUnusedVariables (catch bindings → optional catch syntax):
- app.js, file-upload.js, timezone-selector.js: } catch (e) { → } catch {
  ES2019 optional catch binding; e was unused in all three handlers

noUnusedVariables (dead assignments):
- app.js: remove const data= in display SSE stub (handler does nothing yet)
- api_client.js: remove const timeoutId= (setTimeout ID never used to cancel)
- custom-feeds.js: remove const oldIndex= (getAttribute result never read)
- schedule-picker.js: remove const compactMode= (never used in HTML build)
- select-dropdown.js: remove const icons= (icons not yet rendered in options)

noPrototypeBuiltins:
- day-selector.js: DAY_LABELS.hasOwnProperty(x) →
  Object.prototype.hasOwnProperty.call(DAY_LABELS, x)
  Safe form that works even on null-prototype objects

useIterableCallbackReturn:
- file-upload.js, notification.js: forEach(x => expr) →
  forEach(x => { expr; }) — forEach ignores return values;
  implicit return from arrow body was misleading

htmx-sse.js is a vendor extension file with old-style var/== patterns
that are correct for it; 18 Biome issues suppressed via Codacy API
rather than modifying the vendor source.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(security): escape user input in raw HTML responses in pages_v3.py

plugin_id comes directly from the URL path
(/partials/plugin-config/<plugin_id>) and was interpolated into an HTML
fragment without escaping. A crafted URL like
/partials/plugin-config/<script>alert(1)</script> would inject that
tag into the DOM via the HTMX partial response.

Fix: wrap all user-controlled values in markupsafe.escape() before
embedding in raw HTML strings. Affects the plugin-not-found 404
response and both error 500 responses in the plugin config partial.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address Bandit B108/B110 across production code

B110 (try/except/pass):
- display_controller.py: narrow 'except Exception' to 'except AttributeError'
  for get_offset_frame() — plugins not having this optional method is the
  expected case, not all exceptions
- config_manager.py: B110 already resolved by the earlier removal of the
  dead secrets-loading block (the except/pass was inside it)
- All other except/pass blocks in src/ and web_interface/ are intentional
  (last-resort recovery, best-effort fallbacks, non-critical startup probes).
  Annotated each with # nosec B110 and a brief inline reason so the decision
  is explicit for future reviewers.
- Test files and plugin-repos B110 suppressed via Codacy API (not prod code).

B108 (/tmp usage):
- permission_utils.py: /tmp listed to PREVENT permission changes on it — not
  used as a temp path. Annotated # nosec B108.
- display_manager.py: fixed snapshot path is intentional (web UI reads same
  path); path-check guard also annotated.
- wifi_manager.py: named /tmp files match the sudoers allowlist installed with
  the system (the paths are hard-coded in both places by design). Annotated
  all six open/cp references # nosec B108.
- scripts/render_plugin.py: dev script default overridable by user. Annotated.
- web_interface/app.py: reads the same fixed path written by display_manager.
  Annotated # nosec B108.
- Test files suppressed via Codacy API.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address remaining Codacy security findings

Flask debug=True (real fix):
- web_interface/app.py: debug=True in __main__ block exposes the Werkzeug
  interactive debugger (arbitrary code execution). Changed to
  os.environ.get('FLASK_DEBUG', '0') == '1' — off by default, opt-in
  via environment variable for local development.

nosec annotations (accepted risk with documented rationale):
- disk_cache.py: os.chmod(0o660) is intentional — web UI and LED matrix
  service share a group, 660 gives group write while denying world access
  (B103 + Semgrep insecure-file-permissions suppressed in Codacy)
- wifi_manager.py: urlopen to hardcoded connectivity-check.ubuntu.com URL
  (B310 — no user input involved)
- font_manager.py: urlretrieve URL comes from user's own config file on
  their local device (B310)
- start_web_conditionally.py: os.execvp with both sys.executable and a
  fixed PROJECT_DIR-relative constant (B606)

Confirmed false positives suppressed via Codacy API (15 issues):
- SSRF (3x): client-side JS fetch — SSRF is server-side; browser fetch
  is CORS-restricted to same origin
- B105 (3x): test fixtures use dummy secrets by design; store_manager
  checks for the placeholder string, it is not itself a secret
- PMD numeric literal (2x): 10000000 is within Number.MAX_SAFE_INTEGER
- Prototype pollution (1x): read-only schema traversal, no writes
- no-unsanitized_method (1x): dynamic import() is CORS-restricted
- detect-unsafe-regex (1x): operates on server-controlled config values
- plugin-repos B103 (1x): vendor code chmod on executable
- Semgrep insecure-file-permissions (3x): same disk_cache 0o660 as above

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: remove unnecessary f prefix from f-strings without placeholders (F541)

Pyflakes F541 flags f-strings that contain no {} interpolation — they are
identical to plain strings but trigger unnecessary string formatting overhead.

Fixed in production code:
- src/base_classes/data_sources.py (2 debug log calls)
- src/logo_downloader.py (1 error log)
- src/plugin_system/store_manager.py (5 strings across 3 log calls)
- src/web_interface/validators.py (1 return value)
- src/wifi_manager.py (4 log/message strings)
- web_interface/start.py (1 print)

F541 issues in test/, scripts/, and plugin-repos/ suppressed via Codacy API
as non-production code.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* chore(dev): add Pillow compatibility smoke test script

Covers all Pillow APIs used in LEDMatrix — image creation, drawing,
font metrics, LANCZOS resampling, paste/alpha_composite, and PNG I/O.
Run after any Pillow version bump to catch regressions before deploy.

    python3 scripts/dev/test_pillow_compat.py

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: resolve 8 new Codacy issues introduced by PR changes

shellcheck SC2034:
- first_time_install.sh: 'type' loop variable also unused in the wifi
  status loop (we previously fixed 'device' → '_' but left 'type').
  Changed to '_ _ state' since neither device nor type is referenced.

ESLint no-undef:
- app.js: typeof guards don't satisfy no-undef; added updateSystemStats
  to the /* global */ declaration alongside showNotification.

nosec annotation:
- web_interface/app.py: app.run(host='0.0.0.0') line changed when we
  fixed debug=True, giving it a new issue ID. Re-added # nosec B104.

pyflakes F401:
- scripts/dev/test_pillow_compat.py: ImageFilter was imported but never
  used in the smoke test. Removed from the import.

Codacy API suppressions (false positives on changed lines):
- disk_cache.py 0o660 chmod (2x): lines changed when # nosec B103 was
  added, producing new Semgrep issue IDs. Re-suppressed.
- pages_v3.py raw-html-concat: Semgrep does not recognise escape() as
  a sanitizer; the escape() call IS the correct fix.
- app.py flask 0.0.0.0: same line as B104 above; Semgrep rule also
  re-suppressed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: address PR review findings

Fix (10 of 15 findings):

plugin-repos/march-madness/requirements.txt:
  Add urllib3>=1.26.0 — manager.py directly imports from urllib3; it was
  an undeclared transitive dependency via requests.

scripts/dev/dev_plugin_setup.sh:
  Restore subshell form (cd "$target_dir" && git pull --rebase) || true
  so the shell's working directory is not permanently changed after the
  if-cd block. Previous fix for SC2015 leaked cwd into the remainder of
  the script.

src/base_classes/sports.py:
  Narrow 'except Exception' to 'except RuntimeError as e' and log via
  self.logger.debug — Path.home() raises only RuntimeError for service
  users; other exceptions should not be silently swallowed.

src/config_service.py:
  Fix stale "MD5 checksum" in ConfigVersion.__init__ docstring (line 40);
  the implementation uses SHA-256 since the Codacy fix.

src/wifi_manager.py:
  Log the last-resort AP enable failure with exc_info=True instead of
  silently passing — failure here means the device may be unreachable.

web_interface/blueprints/pages_v3.py:
  Log the outer metadata pre-load exception at debug level instead of
  swallowing it silently; schema still loads fully below.

src/background_data_service.py:
  Remove unused 'timeout' parameter from shutdown() — executor.shutdown()
  does not accept timeout; update __del__ caller accordingly.

src/font_manager.py:
  Validate URL scheme before urlretrieve — reject non-http/https schemes
  (e.g. file://) to prevent reading local files from config-supplied URLs.

src/plugin_system/plugin_executor.py:
  Simplify redundant except tuple: (PluginTimeoutError, PluginError,
  Exception) → Exception, which already covers the others.

test/test_display_controller.py:
  Mark empty test_plugin_discovery_and_loading as @pytest.mark.skip with
  reason. Move duplicate 'from datetime import datetime' to module header
  and remove the stray mid-module copy.

Skip (5 of 15 findings, with reasons):
  - pytest 9.0.3 concerns: full suite already verified (467 pass, 18 pre-existing)
  - Pillow 12.2.0 API concerns: no deprecated APIs in codebase; tests + Pi smoke test pass
  - diagnose_web_ui.sh sudo validation: set -e already ensures fail-fast on any sudo failure
  - app.py request-logging except: must stay silent (recursive logging risk); annotated
  - app.py SSE file-read except: genuinely transient I/O; annotated

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-15 10:19:55 -04:00

420 lines
18 KiB
JavaScript
Raw Blame History

/**
* LEDMatrix Timezone Selector Widget
*
* Dropdown for selecting IANA timezone with grouped regions.
*
* Schema example:
* {
* "timezone": {
* "type": "string",
* "x-widget": "timezone-selector",
* "x-options": {
* "showOffset": true,
* "placeholder": "Select timezone..."
* }
* }
* }
*
* @module TimezoneSelectorWidget
*/
(function() {
'use strict';
const base = window.BaseWidget ? new window.BaseWidget('TimezoneSelector', '1.0.0') : null;
function escapeHtml(text) {
if (base) return base.escapeHtml(text);
const div = document.createElement('div');
div.textContent = String(text);
return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}
function sanitizeId(id) {
if (base) return base.sanitizeId(id);
return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
}
function triggerChange(fieldId, value) {
if (base) {
base.triggerChange(fieldId, value);
} else {
const event = new CustomEvent('widget-change', {
detail: { fieldId, value },
bubbles: true,
cancelable: true
});
document.dispatchEvent(event);
}
}
// IANA timezone list grouped by region
const TIMEZONE_GROUPS = {
'US & Canada': [
{ value: 'America/New_York', label: 'Eastern Time (New York)' },
{ value: 'America/Chicago', label: 'Central Time (Chicago)' },
{ value: 'America/Denver', label: 'Mountain Time (Denver)' },
{ value: 'America/Phoenix', label: 'Mountain Time - Arizona (Phoenix)' },
{ value: 'America/Los_Angeles', label: 'Pacific Time (Los Angeles)' },
{ value: 'America/Anchorage', label: 'Alaska Time (Anchorage)' },
{ value: 'Pacific/Honolulu', label: 'Hawaii Time (Honolulu)' },
{ value: 'America/Detroit', label: 'Eastern Time (Detroit)' },
{ value: 'America/Indiana/Indianapolis', label: 'Eastern Time (Indianapolis)' },
{ value: 'America/Toronto', label: 'Eastern Time (Toronto)' },
{ value: 'America/Vancouver', label: 'Pacific Time (Vancouver)' },
{ value: 'America/Edmonton', label: 'Mountain Time (Edmonton)' },
{ value: 'America/Winnipeg', label: 'Central Time (Winnipeg)' },
{ value: 'America/Halifax', label: 'Atlantic Time (Halifax)' },
{ value: 'America/St_Johns', label: 'Newfoundland Time (St. Johns)' }
],
'Mexico & Central America': [
{ value: 'America/Mexico_City', label: 'Mexico City' },
{ value: 'America/Cancun', label: 'Cancun' },
{ value: 'America/Tijuana', label: 'Tijuana' },
{ value: 'America/Guatemala', label: 'Guatemala' },
{ value: 'America/Costa_Rica', label: 'Costa Rica' },
{ value: 'America/Panama', label: 'Panama' },
{ value: 'America/El_Salvador', label: 'El Salvador' },
{ value: 'America/Tegucigalpa', label: 'Honduras' },
{ value: 'America/Managua', label: 'Nicaragua' },
{ value: 'America/Belize', label: 'Belize' }
],
'South America': [
{ value: 'America/Sao_Paulo', label: 'Sao Paulo' },
{ value: 'America/Buenos_Aires', label: 'Buenos Aires' },
{ value: 'America/Santiago', label: 'Santiago' },
{ value: 'America/Lima', label: 'Lima' },
{ value: 'America/Bogota', label: 'Bogota' },
{ value: 'America/Caracas', label: 'Caracas' },
{ value: 'America/La_Paz', label: 'La Paz' },
{ value: 'America/Montevideo', label: 'Montevideo' },
{ value: 'America/Asuncion', label: 'Asuncion' },
{ value: 'America/Guayaquil', label: 'Guayaquil' }
],
'Europe': [
{ value: 'Europe/London', label: 'London (GMT/BST)' },
{ value: 'Europe/Dublin', label: 'Dublin' },
{ value: 'Europe/Paris', label: 'Paris' },
{ value: 'Europe/Berlin', label: 'Berlin' },
{ value: 'Europe/Madrid', label: 'Madrid' },
{ value: 'Europe/Rome', label: 'Rome' },
{ value: 'Europe/Amsterdam', label: 'Amsterdam' },
{ value: 'Europe/Brussels', label: 'Brussels' },
{ value: 'Europe/Vienna', label: 'Vienna' },
{ value: 'Europe/Zurich', label: 'Zurich' },
{ value: 'Europe/Stockholm', label: 'Stockholm' },
{ value: 'Europe/Oslo', label: 'Oslo' },
{ value: 'Europe/Copenhagen', label: 'Copenhagen' },
{ value: 'Europe/Helsinki', label: 'Helsinki' },
{ value: 'Europe/Warsaw', label: 'Warsaw' },
{ value: 'Europe/Prague', label: 'Prague' },
{ value: 'Europe/Budapest', label: 'Budapest' },
{ value: 'Europe/Athens', label: 'Athens' },
{ value: 'Europe/Bucharest', label: 'Bucharest' },
{ value: 'Europe/Sofia', label: 'Sofia' },
{ value: 'Europe/Lisbon', label: 'Lisbon' },
{ value: 'Europe/Moscow', label: 'Moscow' },
{ value: 'Europe/Kyiv', label: 'Kyiv' },
{ value: 'Europe/Istanbul', label: 'Istanbul' }
],
'UK & Ireland': [
{ value: 'Europe/London', label: 'London' },
{ value: 'Europe/Dublin', label: 'Dublin' },
{ value: 'Europe/London', label: 'Belfast' } // Belfast uses Europe/London (canonical IANA identifier)
],
'Asia': [
{ value: 'Asia/Tokyo', label: 'Tokyo' },
{ value: 'Asia/Seoul', label: 'Seoul' },
{ value: 'Asia/Shanghai', label: 'Shanghai' },
{ value: 'Asia/Hong_Kong', label: 'Hong Kong' },
{ value: 'Asia/Taipei', label: 'Taipei' },
{ value: 'Asia/Singapore', label: 'Singapore' },
{ value: 'Asia/Kuala_Lumpur', label: 'Kuala Lumpur' },
{ value: 'Asia/Bangkok', label: 'Bangkok' },
{ value: 'Asia/Ho_Chi_Minh', label: 'Ho Chi Minh City' },
{ value: 'Asia/Jakarta', label: 'Jakarta' },
{ value: 'Asia/Manila', label: 'Manila' },
{ value: 'Asia/Kolkata', label: 'India (Kolkata)' },
{ value: 'Asia/Mumbai', label: 'Mumbai' },
{ value: 'Asia/Dhaka', label: 'Dhaka' },
{ value: 'Asia/Karachi', label: 'Karachi' },
{ value: 'Asia/Dubai', label: 'Dubai' },
{ value: 'Asia/Riyadh', label: 'Riyadh' },
{ value: 'Asia/Jerusalem', label: 'Jerusalem' },
{ value: 'Asia/Tehran', label: 'Tehran' },
{ value: 'Asia/Kabul', label: 'Kabul' },
{ value: 'Asia/Kathmandu', label: 'Kathmandu' },
{ value: 'Asia/Colombo', label: 'Colombo' },
{ value: 'Asia/Yangon', label: 'Yangon' }
],
'Australia & Pacific': [
{ value: 'Australia/Sydney', label: 'Sydney' },
{ value: 'Australia/Melbourne', label: 'Melbourne' },
{ value: 'Australia/Brisbane', label: 'Brisbane' },
{ value: 'Australia/Perth', label: 'Perth' },
{ value: 'Australia/Adelaide', label: 'Adelaide' },
{ value: 'Australia/Darwin', label: 'Darwin' },
{ value: 'Australia/Hobart', label: 'Hobart' },
{ value: 'Pacific/Auckland', label: 'Auckland' },
{ value: 'Pacific/Fiji', label: 'Fiji' },
{ value: 'Pacific/Guam', label: 'Guam' },
{ value: 'Pacific/Port_Moresby', label: 'Port Moresby' },
{ value: 'Pacific/Noumea', label: 'Noumea' }
],
'Africa': [
{ value: 'Africa/Cairo', label: 'Cairo' },
{ value: 'Africa/Johannesburg', label: 'Johannesburg' },
{ value: 'Africa/Lagos', label: 'Lagos' },
{ value: 'Africa/Nairobi', label: 'Nairobi' },
{ value: 'Africa/Casablanca', label: 'Casablanca' },
{ value: 'Africa/Algiers', label: 'Algiers' },
{ value: 'Africa/Tunis', label: 'Tunis' },
{ value: 'Africa/Accra', label: 'Accra' },
{ value: 'Africa/Addis_Ababa', label: 'Addis Ababa' },
{ value: 'Africa/Dar_es_Salaam', label: 'Dar es Salaam' }
],
'Atlantic': [
{ value: 'Atlantic/Reykjavik', label: 'Reykjavik (Iceland)' },
{ value: 'Atlantic/Azores', label: 'Azores' },
{ value: 'Atlantic/Cape_Verde', label: 'Cape Verde' },
{ value: 'Atlantic/Bermuda', label: 'Bermuda' }
],
'UTC': [
{ value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
{ value: 'Etc/GMT', label: 'GMT (Greenwich Mean Time)' },
{ value: 'Etc/GMT+0', label: 'GMT+0' },
{ value: 'Etc/GMT-1', label: 'GMT-1 (UTC+1)' },
{ value: 'Etc/GMT-2', label: 'GMT-2 (UTC+2)' },
{ value: 'Etc/GMT+1', label: 'GMT+1 (UTC-1)' },
{ value: 'Etc/GMT+2', label: 'GMT+2 (UTC-2)' }
]
};
// Check if a timezone value exists in TIMEZONE_GROUPS
function isValidTimezone(value) {
if (!value || typeof value !== 'string') return false;
for (const timezones of Object.values(TIMEZONE_GROUPS)) {
for (const tz of timezones) {
if (tz.value === value) return true;
}
}
return false;
}
// Get current UTC offset for a timezone
function getTimezoneOffset(tz) {
try {
const now = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: tz,
timeZoneName: 'shortOffset'
});
const parts = formatter.formatToParts(now);
const offsetPart = parts.find(p => p.type === 'timeZoneName');
return offsetPart ? offsetPart.value : '';
} catch (e) {
return '';
}
}
window.LEDMatrixWidgets.register('timezone-selector', {
name: 'Timezone Selector Widget',
version: '1.0.0',
render: function(container, config, value, options) {
const fieldId = sanitizeId(options.fieldId || container.id || 'timezone_selector');
const xOptions = config['x-options'] || config['x_options'] || {};
const showOffset = xOptions.showOffset !== false;
const placeholder = xOptions.placeholder || 'Select timezone...';
const disabled = xOptions.disabled === true;
// Validate current value - must be a recognized timezone from TIMEZONE_GROUPS
const trimmedValue = (typeof value === 'string' && value.trim()) ? value.trim() : '';
const currentValue = isValidTimezone(trimmedValue) ? trimmedValue : '';
let html = `<div id="${fieldId}_widget" class="timezone-selector-widget" data-field-id="${fieldId}">`;
// Hidden input for form submission
html += `<input type="hidden" id="${fieldId}_data" name="${escapeHtml(options.name || fieldId)}" value="${escapeHtml(currentValue)}">`;
html += `
<select id="${fieldId}_input"
${disabled ? 'disabled' : ''}
onchange="window.LEDMatrixWidgets.getHandlers('timezone-selector').onChange('${fieldId}')"
class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black">
`;
// Placeholder option
html += `<option value="" ${!currentValue ? 'selected' : ''} disabled>${escapeHtml(placeholder)}</option>`;
// Build options grouped by region
for (const [groupName, timezones] of Object.entries(TIMEZONE_GROUPS)) {
html += `<optgroup label="${escapeHtml(groupName)}">`;
for (const tz of timezones) {
const isSelected = currentValue === tz.value;
let displayLabel = tz.label;
// Add UTC offset if enabled
if (showOffset) {
const offset = getTimezoneOffset(tz.value);
if (offset) {
displayLabel = `${tz.label} (${offset})`;
}
}
html += `<option value="${escapeHtml(tz.value)}" ${isSelected ? 'selected' : ''}>${escapeHtml(displayLabel)}</option>`;
}
html += '</optgroup>';
}
html += '</select>';
// Show current time in selected timezone
html += `<div id="${fieldId}_preview" class="text-sm text-gray-500 mt-2 ${currentValue ? '' : 'hidden'}">
<span class="font-medium">Current time:</span>
<span id="${fieldId}_time"></span>
</div>`;
html += '</div>';
container.innerHTML = html;
// Update time preview if value is set
if (currentValue) {
this.handlers.updateTimePreview(fieldId, currentValue);
}
},
getValue: function(fieldId) {
const safeId = sanitizeId(fieldId);
const input = document.getElementById(`${safeId}_input`);
return input ? input.value : '';
},
setValue: function(fieldId, value) {
const safeId = sanitizeId(fieldId);
const select = document.getElementById(`${safeId}_input`);
const hiddenInput = document.getElementById(`${safeId}_data`);
// Validate incoming value against known timezones
const requestedValue = (typeof value === 'string' && value.trim()) ? value.trim() : '';
const validValue = isValidTimezone(requestedValue) ? requestedValue : '';
if (select) {
// Only set to a value that exists in the select options
select.value = validValue;
}
// Read the actual selected value from the select element
const actualValue = select ? select.value : '';
if (hiddenInput) {
// Synchronize hidden input to the actual selected value
hiddenInput.value = actualValue;
}
this.handlers.updateTimePreview(fieldId, actualValue);
},
handlers: {
onChange: function(fieldId) {
const safeId = sanitizeId(fieldId);
const widget = window.LEDMatrixWidgets.get('timezone-selector');
const value = widget.getValue(fieldId);
// Update hidden input for form submission
const hiddenInput = document.getElementById(`${safeId}_data`);
if (hiddenInput) {
hiddenInput.value = value;
}
widget.handlers.updateTimePreview(fieldId, value);
triggerChange(fieldId, value);
},
updateTimePreview: function(fieldId, timezone) {
const safeId = sanitizeId(fieldId);
const previewEl = document.getElementById(`${safeId}_preview`);
const timeEl = document.getElementById(`${safeId}_time`);
if (!previewEl || !timeEl) return;
if (!timezone) {
previewEl.classList.add('hidden');
return;
}
try {
const now = new Date();
const formatter = new Intl.DateTimeFormat('en-US', {
timeZone: timezone,
weekday: 'short',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
});
timeEl.textContent = formatter.format(now);
previewEl.classList.remove('hidden');
} catch {
previewEl.classList.add('hidden');
}
}
}
});
// Expose timezone data for external use
window.LEDMatrixWidgets.get('timezone-selector').TIMEZONE_GROUPS = TIMEZONE_GROUPS;
// HTMX form submission protection - preserve timezone selection across requests
// This handles cases where HTMX or other form handling might reset select values
(function setupHtmxProtection() {
let savedTimezoneValues = {};
// Before any HTMX request, save timezone select values (including empty selections)
document.body.addEventListener('htmx:beforeRequest', function(event) {
document.querySelectorAll('.timezone-selector-widget').forEach(function(widget) {
const fieldId = widget.dataset.fieldId;
if (fieldId) {
const select = document.getElementById(fieldId + '_input');
// Record value even if empty to preserve cleared selections
savedTimezoneValues[fieldId] = select ? select.value : '';
}
});
});
// After any HTMX request, restore timezone select values
document.body.addEventListener('htmx:afterRequest', function(event) {
// Delay to ensure any DOM updates have completed
setTimeout(function() {
Object.keys(savedTimezoneValues).forEach(function(fieldId) {
const select = document.getElementById(fieldId + '_input');
const hidden = document.getElementById(fieldId + '_data');
const savedValue = savedTimezoneValues[fieldId];
// Check for undefined, not truthiness, so empty strings are restored
if (select && savedValue !== undefined) {
// Set value directly (handles empty string and placeholders correctly)
select.value = savedValue;
// Dispatch change event to trigger timezone preview update
select.dispatchEvent(new Event('change'));
// Force browser to repaint by temporarily modifying a style
select.style.display = 'none';
void select.offsetHeight;
select.style.display = '';
}
if (hidden && savedValue !== undefined) {
hidden.value = savedValue;
}
});
}, 50);
});
})();
console.log('[TimezoneSelectorWidget] Timezone selector widget registered');
})();
Reference in New Issue View Git Blame Copy Permalink