v0.8.13
This commit is contained in:
Mateusz Gruszczyński
+646
-76
File diff suppressed because it is too large
Load Diff
+71
-44
@@ -18,15 +18,32 @@
|
||||
</div>
|
||||
<div class="toolbar-runtime-status" id="toolbarRuntimeStatus" aria-live="polite">0/0</div>
|
||||
<div class="top-actions">
|
||||
<select class="toolbar-select" id="languageSelect" data-i18n-aria="controls.language" aria-label="Language">
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
<select class="toolbar-select theme-select" id="themeSelect" data-i18n-aria="controls.theme" aria-label="Theme">
|
||||
<option value="system" data-i18n="theme.system">System</option>
|
||||
<option value="light" data-i18n="theme.light">Light</option>
|
||||
<option value="dark" data-i18n="theme.dark">Dark</option>
|
||||
</select>
|
||||
<button class="icon-button" id="refreshButton" data-i18n-title="actions.refresh" data-i18n-aria="actions.refresh" title="Refresh" aria-label="Refresh">↻</button>
|
||||
<div class="toolbar-picker" data-i18n-title="controls.language" title="Language">
|
||||
<span class="toolbar-picker-value" id="languageLabel" aria-hidden="true">EN</span>
|
||||
<span class="toolbar-picker-chevron" aria-hidden="true">⌄</span>
|
||||
<select class="toolbar-picker-select" id="languageSelect" data-i18n-aria="controls.language" aria-label="Language">
|
||||
<option value="en">English</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="toolbar-picker" data-i18n-title="controls.theme" title="Theme">
|
||||
<span class="toolbar-picker-value theme-picker-value" id="themeIcon" aria-hidden="true">◐</span>
|
||||
<span class="toolbar-picker-chevron" aria-hidden="true">⌄</span>
|
||||
<select class="toolbar-picker-select" id="themeSelect" data-i18n-aria="controls.theme" aria-label="Theme">
|
||||
<option value="system" data-i18n="theme.system">System</option>
|
||||
<option value="light" data-i18n="theme.light">Light</option>
|
||||
<option value="dark" data-i18n="theme.dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="icon-button toolbar-icon-control" id="refreshButton" data-i18n-title="actions.refresh" data-i18n-aria="actions.refresh" title="Refresh" aria-label="Refresh">↻</button>
|
||||
</div>
|
||||
<div class="connection-banner" id="connectionBanner" role="status" aria-live="polite" hidden>
|
||||
<span class="connection-banner-dot" aria-hidden="true"></span>
|
||||
<div><strong id="connectionBannerTitle">Disconnected</strong><span id="connectionBannerText">Live updates are unavailable. Displayed data may be stale.</span></div>
|
||||
<button class="secondary" type="button" id="connectionRetry" data-i18n="actions.retry">Retry</button>
|
||||
</div>
|
||||
<div class="simulation-mode-banner" id="simulationModeBanner" role="status" aria-live="polite" hidden>
|
||||
<strong data-i18n="simulation.bannerTitle">SIMULATION MODE</strong>
|
||||
<span data-i18n="simulation.bannerText">Simulation is enabled. Verify the mode before relying on controller output.</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -158,7 +175,7 @@
|
||||
<div class="panel chart-panel history-toolbar-panel">
|
||||
<div class="chart-toolbar">
|
||||
<div id="historyContextControls" class="history-context-controls"></div>
|
||||
<label class="history-range-control"><span data-i18n="history.range">Range</span><select id="historyHours" aria-label="History range">
|
||||
<label class="history-range-control"><span data-i18n="history.range">Range</span><select id="historyHours" data-i18n-aria="history.range" aria-label="History range">
|
||||
<option value="6" data-i18n="history.6h">6 hours</option>
|
||||
<option value="24" selected data-i18n="history.24h">24 hours</option>
|
||||
<option value="168" data-i18n="history.7d">7 days</option>
|
||||
@@ -228,28 +245,26 @@
|
||||
|
||||
<section class="view" data-view="settings">
|
||||
<div class="section-heading"><div><span class="eyebrow" data-i18n="settings.system">System</span><h1 data-i18n="nav.settings">Settings</h1></div></div>
|
||||
<form class="settings-form" id="settingsForm">
|
||||
<div class="settings-mode-tabs" role="tablist" data-i18n-aria="settings.settingsSections" aria-label="Settings sections">
|
||||
<button type="button" class="active" role="tab" aria-selected="true" data-settings-tab="app" data-i18n="settings.applicationSettings">Application</button>
|
||||
<button type="button" role="tab" aria-selected="false" data-settings-tab="gree" data-i18n="settings.greeSettings">GREE</button>
|
||||
</div>
|
||||
<form class="settings-form" id="settingsForm" novalidate>
|
||||
<div class="settings-pane" data-settings-pane="app">
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.controller">Controller</h3><p data-i18n="settings.controllerHint">Runtime and LAN discovery settings.</p></div></div>
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.applicationRuntime">Application runtime</h3><p data-i18n="settings.applicationRuntimeHint">Application-wide behavior that does not change GREE transport or discovery.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
<label><span data-i18n="settings.clientId">Client identifier</span><input name="controller_id" required></label>
|
||||
<label><span data-i18n="settings.pollInterval">Poll interval (s)</span><input type="number" name="poll_interval_seconds" min="2" max="3600" required></label>
|
||||
<label><span data-i18n="settings.zoneInterval">Zone interval (s)</span><input type="number" name="zone_interval_seconds" min="2" max="3600" required></label>
|
||||
<label><span data-i18n="settings.broadcast">Broadcast address</span><input name="discovery_broadcast" placeholder="255.255.255.255:7000" required></label>
|
||||
<label><span data-i18n="settings.discoveryTimeout">Discovery timeout (ms)</span><input type="number" name="discovery_timeout_ms" min="300" max="30000" required></label>
|
||||
<label class="check"><input type="checkbox" name="simulator_enabled"> <span data-i18n="settings.simulationMode">Simulation mode</span></label>
|
||||
<label class="check wide"><input type="checkbox" name="simulator_enabled"> <span data-i18n="settings.simulationMode">Simulation mode</span></label>
|
||||
<p class="field-note wide warning-note" data-i18n="settings.simulationModeHint">When enabled, a prominent warning is shown throughout the application.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="notifications.title">Notifications</h3><p data-i18n="notifications.hint">Send important events or only problems/anomalies.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
<label class="check wide"><input type="checkbox" name="notifications_enabled"> <span data-i18n="notifications.enable">Enable notifications</span></label>
|
||||
<label><span data-i18n="notifications.mode">Mode</span><select name="notifications_mode"><option value="problems" data-i18n="notifications.problems">Errors and anomalies only</option><option value="important" data-i18n="notifications.important">Important events + problems</option></select></label>
|
||||
<label><span data-i18n="notifications.provider">Provider</span><select name="notifications_provider"><option value="pushover">Pushover</option><option value="slack">Slack</option><option value="discord">Discord</option></select></label>
|
||||
<div class="wide notification-provider" data-notification-provider="pushover"><label><span data-i18n="notifications.pushoverToken">Pushover application token</span><input type="password" name="pushover_app_token" autocomplete="new-password" placeholder="Leave empty to keep saved secret"></label><label><span data-i18n="notifications.pushoverUser">Pushover user/group key</span><input type="password" name="pushover_user_key" autocomplete="new-password" placeholder="Leave empty to keep saved secret"></label></div>
|
||||
<div class="wide notification-provider" data-notification-provider="pushover"><label><span data-i18n="notifications.pushoverToken">Pushover application token</span><input type="password" name="pushover_app_token" autocomplete="new-password" data-i18n-placeholder="settings.secretKeep" placeholder="Leave empty to keep saved secret"></label><label><span data-i18n="notifications.pushoverUser">Pushover user/group key</span><input type="password" name="pushover_user_key" autocomplete="new-password" data-i18n-placeholder="settings.secretKeep" placeholder="Leave empty to keep saved secret"></label></div>
|
||||
<label class="wide notification-provider" data-notification-provider="slack"><span data-i18n="notifications.slackWebhook">Slack incoming webhook</span><input type="password" name="slack_webhook_url" autocomplete="new-password" placeholder="https://hooks.slack.com/services/…"></label>
|
||||
<label class="wide notification-provider" data-notification-provider="discord"><span data-i18n="notifications.discordWebhook">Discord webhook</span><input type="password" name="discord_webhook_url" autocomplete="new-password" placeholder="https://discord.com/api/webhooks/…"></label>
|
||||
<label><span data-i18n="notifications.cooldown">Cooldown (s)</span><input type="number" name="notification_cooldown_seconds" min="30" max="86400" value="300"></label>
|
||||
@@ -272,7 +287,6 @@
|
||||
<div class="form-actions wide"><button type="button" class="secondary" id="testNotifications" data-i18n="notifications.test">Send test notification</button></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.metricsAndLogs">Metrics and logs</h3><p data-i18n="settings.compactionHint">SQLite keeps recent data locally and compacts older samples to the resolution used by charts.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
@@ -281,17 +295,6 @@
|
||||
<label class="check wide"><input type="checkbox" name="history_compaction_enabled"> <span data-i18n="settings.compaction">Compact old metrics</span></label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.greeCommands">GREE commands</h3><p data-i18n="settings.suppressBeepHint">Only changed properties are sent. Buzzer suppression is also requested when supported by the unit firmware.</p></div></div>
|
||||
<div class="settings-grid"><label class="check wide"><input type="checkbox" name="suppress_device_beep"> <span data-i18n="settings.suppressBeep">Try to suppress command beeps</span></label></div>
|
||||
</section>
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.greeTraffic">GREE traffic</h3><p data-i18n="settings.greeTrafficHint">Live counters of UDP frames received from configured air conditioners since controller startup.</p></div></div>
|
||||
<div id="greeFrameStats" class="gree-frame-stats"></div>
|
||||
</section>
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.influx">Long-term InfluxDB history</h3><p data-i18n="settings.influxHint">Optional archive for older history. InfluxDB 1.x and 2.x are supported.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
@@ -311,7 +314,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.debug">On-screen debug</h3><p data-i18n="settings.debugHint">Live diagnostics displayed on every application page.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
@@ -319,24 +321,39 @@
|
||||
<label class="check"><input type="checkbox" name="debug_gree_frames"> <span data-i18n="settings.debugGreeFrames">Include GREE protocol frames</span></label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.backup">Configuration backup</h3><p class="warning-note" data-i18n="settings.backupHint">Export/import application configuration. Exported files can contain GREE device keys plus Home Assistant and InfluxDB secrets; metrics and API access tokens are not included.</p></div></div>
|
||||
<div class="form-actions backup-actions"><button type="button" class="secondary" id="exportSettings" data-i18n="settings.export">Export settings</button><button type="button" class="secondary" id="importSettings" data-i18n="settings.import">Import settings</button><input type="file" id="importSettingsFile" accept="application/json,.json" hidden></div>
|
||||
</section>
|
||||
|
||||
<div class="panel system-panel" id="systemInfo"></div>
|
||||
</div>
|
||||
<div class="settings-pane" data-settings-pane="gree" hidden>
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.greeConnection">GREE connection</h3><p data-i18n="settings.greeConnectionHint">Controller identity, polling intervals and LAN discovery transport.</p></div></div>
|
||||
<div class="settings-grid">
|
||||
<label><span data-i18n="settings.clientId">Client identifier</span><input name="controller_id" required></label>
|
||||
<label><span data-i18n="settings.pollInterval">Poll interval (s)</span><input type="number" name="poll_interval_seconds" min="2" max="3600" required></label>
|
||||
<label><span data-i18n="settings.zoneInterval">Zone interval (s)</span><input type="number" name="zone_interval_seconds" min="2" max="3600" required></label>
|
||||
<label><span data-i18n="settings.broadcast">Broadcast address</span><input name="discovery_broadcast" placeholder="255.255.255.255:7000" required></label>
|
||||
<label><span data-i18n="settings.discoveryTimeout">Discovery timeout (ms)</span><input type="number" name="discovery_timeout_ms" min="300" max="30000" required></label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.greeCommands">GREE commands</h3><p data-i18n="settings.suppressBeepHint">Only changed properties are sent. Buzzer suppression is also requested when supported by the unit firmware.</p></div></div>
|
||||
<div class="settings-grid"><label class="check wide"><input type="checkbox" name="suppress_device_beep"> <span data-i18n="settings.suppressBeep">Try to suppress command beeps</span></label></div>
|
||||
</section>
|
||||
<section class="panel settings-block">
|
||||
<div class="settings-block-head"><div><h3 data-i18n="settings.greeTraffic">GREE traffic</h3><p data-i18n="settings.greeTrafficHint">Live counters of UDP frames received from configured air conditioners since controller startup.</p></div></div>
|
||||
<div id="greeFrameStats" class="gree-frame-stats"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="settings-save-bar"><span data-i18n="settings.saveHint">Save changes made in the blocks above.</span><button class="primary" type="submit" data-i18n="actions.save">Save</button></div>
|
||||
</form>
|
||||
<div class="panel system-panel" id="systemInfo"></div>
|
||||
</section>
|
||||
|
||||
<section class="view" data-view="logs">
|
||||
<div class="section-heading"><div><span class="eyebrow" data-i18n="logs.diagnostics">Diagnostics</span><h1 data-i18n="nav.logs">Events</h1></div><button class="secondary" id="logsRefresh" data-i18n="actions.refresh">Refresh</button></div>
|
||||
<div class="panel logs-toolbar"><div><strong data-i18n="logs.retention">Log retention</strong><small data-i18n="logs.retentionHint">Old event rows are removed automatically during maintenance.</small></div><label><span data-i18n="logs.level">Level</span><select id="logLevelFilter"><option value="all" data-i18n="logs.all">All</option><option value="error" data-i18n="logs.errors">Errors</option><option value="warn" data-i18n="logs.warnings">Warnings</option><option value="info">Info</option></select></label><label><span data-i18n="logs.category">Category</span><select id="logCategoryFilter"><option value="all" data-i18n="logs.all">All</option><option value="device" data-i18n="nav.devices">Devices</option><option value="zone" data-i18n="nav.zones">Thermostats</option><option value="automation" data-i18n="nav.automations">Automations</option><option value="settings" data-i18n="nav.settings">Settings</option><option value="integration" data-i18n="logs.integrations">Integrations</option><option value="system" data-i18n="logs.systemOther">System/other</option></select></label><label><span data-i18n="logs.keepFor">Keep for</span><select id="logRetentionDays"><option value="7">7 days</option><option value="14">14 days</option><option value="30">30 days</option><option value="90">90 days</option><option value="180">180 days</option><option value="365">365 days</option></select></label><button class="secondary" id="saveLogRetention" data-i18n="actions.save">Save</button></div>
|
||||
<div class="panel logs-toolbar"><div><strong data-i18n="logs.retention">Log retention</strong><small data-i18n="logs.retentionHint">Old event rows are removed automatically during maintenance.</small></div><label><span data-i18n="logs.level">Level</span><select id="logLevelFilter"><option value="all" data-i18n="logs.all">All</option><option value="error" data-i18n="logs.errors">Errors</option><option value="warn" data-i18n="logs.warnings">Warnings</option><option value="info" data-i18n="logs.info">Info</option></select></label><label><span data-i18n="logs.category">Category</span><select id="logCategoryFilter"><option value="all" data-i18n="logs.all">All</option><option value="device" data-i18n="nav.devices">Devices</option><option value="zone" data-i18n="nav.zones">Thermostats</option><option value="automation" data-i18n="nav.automations">Automations</option><option value="settings" data-i18n="nav.settings">Settings</option><option value="integration" data-i18n="logs.integrations">Integrations</option><option value="system" data-i18n="logs.systemOther">System/other</option></select></label><label><span data-i18n="logs.keepFor">Keep for</span><select id="logRetentionDays"><option value="7" data-i18n="logs.days7">7 days</option><option value="14" data-i18n="logs.days14">14 days</option><option value="30" data-i18n="logs.days30">30 days</option><option value="90" data-i18n="logs.days90">90 days</option><option value="180" data-i18n="logs.days180">180 days</option><option value="365" data-i18n="logs.days365">365 days</option></select></label><button class="secondary" id="saveLogRetention" data-i18n="actions.save">Save</button></div>
|
||||
<div class="panel log-list" id="logList"></div>
|
||||
</section>
|
||||
</main>
|
||||
@@ -557,7 +574,17 @@
|
||||
</dialog>
|
||||
|
||||
<aside id="debugOverlay" class="debug-overlay" hidden>
|
||||
<div class="debug-overlay-head"><div><strong data-i18n="debug.title">Live debug</strong><small id="debugOverlayStatus"></small></div><button type="button" data-action="debug-clear" data-i18n="debug.clear">Clear</button></div>
|
||||
<div class="debug-overlay-head">
|
||||
<div class="debug-overlay-title"><strong data-i18n="debug.title">Live debug</strong><small id="debugOverlayStatus"></small></div>
|
||||
<div class="debug-overlay-actions">
|
||||
<div class="debug-source-tabs" role="tablist" data-i18n-aria="debug.filterAria" aria-label="Debug source">
|
||||
<button type="button" class="active" role="tab" aria-selected="true" data-debug-filter="all" data-i18n="debug.all">All</button>
|
||||
<button type="button" role="tab" aria-selected="false" data-debug-filter="requests" data-i18n="debug.requests">Requests</button>
|
||||
<button type="button" role="tab" aria-selected="false" data-debug-filter="gree" data-i18n="debug.gree">GREE</button>
|
||||
</div>
|
||||
<button type="button" class="debug-clear" data-action="debug-clear" data-i18n="debug.clear">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="debugOverlayLines" class="debug-overlay-lines"></div>
|
||||
</aside>
|
||||
<div id="toastStack" class="toast-stack" role="status" aria-live="polite" aria-atomic="false"></div>
|
||||
|
||||
+343
-12
@@ -203,8 +203,21 @@ input:focus, select:focus { border-color: var(--accent); outline: 2px solid colo
|
||||
.influx-fields[hidden] { display: none; }
|
||||
.influx-fields label:last-child:nth-child(odd) { grid-column: 1/-1; }
|
||||
.backup-actions { align-items: center; }
|
||||
.system-panel { margin-top: 14px; color: var(--muted); line-height: 1.7; }
|
||||
.system-panel strong { color: var(--text); }
|
||||
.system-panel { display:grid; gap:16px; margin-top:14px; padding:18px; }
|
||||
.system-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
|
||||
.system-panel-head h3 { margin:4px 0 5px; font-size:20px; }
|
||||
.system-panel-head p { max-width:700px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
|
||||
.system-health { display:inline-flex; align-items:center; min-height:30px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-muted); font-size:10px; font-weight:800; white-space:nowrap; }
|
||||
.system-health.ok { border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
|
||||
.system-health.warn { border-color:color-mix(in srgb,var(--warning) 35%,var(--line)); color:var(--warning); background:var(--warning-soft); }
|
||||
.system-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; }
|
||||
.system-status-item { min-width:0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-muted); }
|
||||
.system-status-item small,.system-status-item strong { display:block; }
|
||||
.system-status-item small { margin-bottom:5px; color:var(--muted); font-size:10px; }
|
||||
.system-status-item strong { overflow:hidden; color:var(--text); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.system-status-item.ok { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); }
|
||||
.system-status-item.warn { border-color:color-mix(in srgb,var(--warning) 28%,var(--line)); background:color-mix(in srgb,var(--warning-soft) 52%,var(--surface-muted)); }
|
||||
.system-status-item.mono strong { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:11px; }
|
||||
.gree-frame-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
|
||||
.gree-frame-stat { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
|
||||
.gree-frame-stat small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
|
||||
@@ -464,22 +477,38 @@ legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
|
||||
|
||||
.debug-overlay { position: fixed; z-index: 110; right: 18px; bottom: 92px; width: min(680px, calc(100vw - 36px)); max-height: min(46vh, 440px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 18px 60px rgba(0,0,0,.22); backdrop-filter: blur(18px); }
|
||||
.debug-overlay[hidden] { display: none; }
|
||||
.debug-overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
|
||||
.debug-overlay-head > div { display: grid; gap: 2px; }
|
||||
.debug-overlay-head strong { font-size: 12px; }
|
||||
.debug-overlay-head small { color: var(--muted); font-size: 10px; }
|
||||
.debug-overlay-head button { padding: 6px 9px; color: var(--muted); background: var(--surface-muted); font-size: 10px; }
|
||||
.debug-overlay-lines { max-height: min(38vh, 360px); overflow: auto; padding: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
|
||||
.debug-line { display: grid; grid-template-columns: 70px 46px 1fr; gap: 8px; padding: 5px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: 10px; line-height: 1.35; }
|
||||
.debug-line time, .debug-line b { color: var(--muted); font-weight: 600; }
|
||||
.debug-line span { overflow-wrap: anywhere; white-space: pre-wrap; }
|
||||
.debug-overlay-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line); }
|
||||
.debug-overlay-title { display:grid; flex:0 1 auto; gap:2px; min-width:90px; }
|
||||
.debug-overlay-head strong { font-size:12px; }
|
||||
.debug-overlay-head small { color:var(--muted); font-size:10px; }
|
||||
.debug-overlay-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; min-width:0; }
|
||||
.debug-source-tabs { display:flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
|
||||
.debug-source-tabs button,.debug-overlay-head .debug-clear { min-height:28px; padding:5px 8px; border-radius:7px; color:var(--muted); background:transparent; font-size:9px; font-weight:750; }
|
||||
.debug-source-tabs button.active { color:var(--accent); background:var(--accent-soft); }
|
||||
.debug-overlay-head .debug-clear { border:1px solid var(--line); background:var(--surface-muted); }
|
||||
.debug-overlay-lines { max-height:min(38vh,360px); overflow:auto; padding:7px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
|
||||
.debug-line { display:grid; grid-template-columns:70px 48px 1fr; gap:8px; margin:3px 0; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:color-mix(in srgb,var(--surface-muted) 76%,transparent); font-size:10px; line-height:1.35; }
|
||||
.debug-line.source-gree { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); }
|
||||
.debug-line.source-request { border-color:color-mix(in srgb,var(--info) 24%,var(--line)); }
|
||||
.debug-line time,.debug-line b { color:var(--muted); font-weight:650; }
|
||||
.debug-line.source-gree b { color:var(--accent); }
|
||||
.debug-line.source-request b { color:var(--info); }
|
||||
.debug-line span { overflow-wrap:anywhere; white-space:pre-wrap; }
|
||||
.debug-empty { padding: 18px; color: var(--muted); text-align: center; font-size: 11px; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.custom-chart-add, .custom-chart-save { align-items: stretch; flex-direction: column; }
|
||||
.toast-stack { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
|
||||
.debug-overlay { right: 12px; bottom: 88px; width: calc(100vw - 24px); }
|
||||
.debug-line { grid-template-columns: 58px 38px 1fr; }
|
||||
.debug-overlay-head { align-items:stretch; flex-direction:column; }
|
||||
.debug-overlay-actions { justify-content:space-between; }
|
||||
.debug-source-tabs { flex:1 1 auto; }
|
||||
.debug-source-tabs button { flex:1 1 auto; }
|
||||
.debug-line { grid-template-columns: 58px 42px 1fr; }
|
||||
.system-panel-head { align-items:stretch; flex-direction:column; }
|
||||
.system-health { align-self:flex-start; }
|
||||
.simulation-mode-banner { align-items:stretch; flex-direction:column; gap:3px; }
|
||||
.simulation-mode-banner strong { white-space:normal; }
|
||||
.influx-fields { grid-template-columns: 1fr; }
|
||||
.influx-fields label:last-child:nth-child(odd) { grid-column: auto; }
|
||||
}
|
||||
@@ -549,6 +578,11 @@ html[data-theme='light'] .simulation-metrics > div, html[data-theme='light'] .si
|
||||
.history-refresh-button { min-height:45px; align-self:end; }
|
||||
|
||||
.settings-form { display:grid; gap:14px; }
|
||||
.settings-mode-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 14px; padding:6px; border:1px solid var(--line); border-radius:17px; background:var(--surface); }
|
||||
.settings-mode-tabs button { min-height:42px; border:1px solid transparent; border-radius:12px; color:var(--muted); background:transparent; font-size:12px; font-weight:800; }
|
||||
.settings-mode-tabs button.active { border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft); }
|
||||
.settings-pane { display:grid; gap:14px; }
|
||||
.settings-pane[hidden] { display:none; }
|
||||
.settings-block { display:grid; gap:18px; }
|
||||
.settings-block-head { display:flex; align-items:flex-start; gap:13px; }
|
||||
.settings-block-head h3 { margin:1px 0 4px; font-size:18px; }
|
||||
@@ -971,3 +1005,300 @@ body.simulation-standalone [data-view="simulation"] { min-height:calc(100vh - 36
|
||||
}
|
||||
|
||||
/* 0.7.1+: quick thermostats and quick manual control use the shared quick-control classes above. */
|
||||
|
||||
/* 0.8.11 mobile toolbar and chart inspection UX */
|
||||
.topbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; }
|
||||
.top-actions { min-width: 0; }
|
||||
.language-picker {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
width: 58px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease;
|
||||
}
|
||||
.language-picker:hover { background: var(--surface-2); }
|
||||
.language-picker:active { transform: scale(.97); }
|
||||
.language-label { font-size: 11px; font-weight: 850; letter-spacing: .06em; line-height: 1; }
|
||||
.language-chevron { margin-top: -2px; color: var(--muted); font-size: 13px; line-height: 1; }
|
||||
.language-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.toolbar-icon-control {
|
||||
display: inline-grid;
|
||||
place-items: center;
|
||||
flex: 0 0 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.toolbar-icon-control:hover { background: var(--surface-2); }
|
||||
#refreshButton.toolbar-icon-control { font-size: 21px; }
|
||||
button:focus-visible,
|
||||
.language-picker:focus-within {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.chart-hover-line {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
width: 1px;
|
||||
background: color-mix(in srgb, var(--text) 40%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.chart-tooltip {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
min-width: 175px;
|
||||
max-width: min(290px, calc(100vw - 32px));
|
||||
padding: 10px 11px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--surface) 96%, transparent);
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
|
||||
color: var(--text);
|
||||
font-size: 11px;
|
||||
line-height: 1.35;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.chart-tooltip-time { display: block; margin-bottom: 7px; color: var(--text-soft); font-weight: 800; font-variant-numeric: tabular-nums; }
|
||||
.chart-tooltip-values { display: grid; gap: 5px; }
|
||||
.chart-tooltip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
|
||||
.chart-tooltip-label { display: inline-flex; min-width: 0; align-items: center; gap: 6px; color: var(--muted); }
|
||||
.chart-tooltip-label i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tooltip-color); }
|
||||
.chart-tooltip-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.chart-tooltip-value { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
|
||||
.chart-tooltip-sample-time { color: var(--muted); font-size: 9px; font-weight: 600; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.topbar { min-height: 64px; gap: 6px; padding: 9px 10px; }
|
||||
.brand strong { font-size: 13px; }
|
||||
.toolbar-runtime-status { padding: 6px 8px; font-size: 10px; }
|
||||
.top-actions { gap: 5px; }
|
||||
.language-picker { width: 50px; height: 38px; border-radius: 10px; }
|
||||
.toolbar-icon-control { flex-basis: 38px; width: 38px; height: 38px; min-height: 38px; border-radius: 10px; }
|
||||
.language-chevron { font-size: 11px; }
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
|
||||
.brand { grid-column: 1; grid-row: 1; }
|
||||
.top-actions { grid-column: 2; grid-row: 1; }
|
||||
.toolbar-runtime-status {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.chart-tooltip-sample-time { display:block; margin-top:1px; }
|
||||
@media (max-width: 700px) { .top-actions { width: auto; } }
|
||||
.chart-hover-hint { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
|
||||
.chart-tooltip-value { text-align:right; }
|
||||
.chart-wrap canvas:focus-visible { outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:-2px; }
|
||||
.toolbar-runtime-status { min-width:max-content; }
|
||||
|
||||
/* 0.8.13 settings separation, simulation warning, system status and debug filters */
|
||||
.toolbar-picker {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
flex: 0 0 54px;
|
||||
width: 54px;
|
||||
height: 40px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 11px;
|
||||
background: var(--surface-muted);
|
||||
color: var(--text-soft);
|
||||
transition: border-color .15s ease, background .15s ease, transform .15s ease;
|
||||
}
|
||||
.toolbar-picker:hover { background: var(--surface-2); }
|
||||
.toolbar-picker:active { transform: scale(.97); }
|
||||
.toolbar-picker:focus-within {
|
||||
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.toolbar-picker-value {
|
||||
min-width: 18px;
|
||||
color: var(--text-soft);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
letter-spacing: .06em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.theme-picker-value { font-size: 16px; letter-spacing: 0; }
|
||||
.toolbar-picker-chevron { margin-top: -2px; color: var(--muted); font-size: 12px; line-height: 1; }
|
||||
.toolbar-picker-select {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.connection-banner {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
|
||||
border-radius: 13px;
|
||||
background: color-mix(in srgb, var(--danger-soft) 78%, var(--surface));
|
||||
}
|
||||
.connection-banner[hidden] { display: none; }
|
||||
.simulation-mode-banner { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:14px; width:100%; padding:13px 16px; border:2px solid color-mix(in srgb,var(--warning) 62%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--warning-soft) 90%,var(--surface)); text-align:center; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warning) 10%,transparent),0 5px 18px color-mix(in srgb,var(--warning) 10%,transparent); }
|
||||
.simulation-mode-banner[hidden] { display:none; }
|
||||
.simulation-mode-banner strong { color:var(--warning); font-size:clamp(18px,2.6vw,26px); font-weight:950; letter-spacing:.09em; line-height:1; white-space:nowrap; }
|
||||
.simulation-mode-banner span { max-width:720px; color:var(--text-soft); font-size:12px; font-weight:700; line-height:1.35; }
|
||||
.connection-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
|
||||
.connection-banner > div { min-width: 0; }
|
||||
.connection-banner strong, .connection-banner span { display: block; }
|
||||
.connection-banner strong { margin-bottom: 1px; font-size: 11px; }
|
||||
.connection-banner > div span { overflow: hidden; color: var(--muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.connection-banner button { min-height: 32px; padding: 6px 10px; border-radius: 9px; font-size: 10px; }
|
||||
body.connection-lost .connection-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 13%, transparent); }
|
||||
|
||||
.field-error {
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
color: var(--danger);
|
||||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
}
|
||||
.has-error > input,
|
||||
.has-error > select,
|
||||
.has-error > textarea,
|
||||
input[aria-invalid="true"],
|
||||
select[aria-invalid="true"],
|
||||
textarea[aria-invalid="true"] {
|
||||
border-color: color-mix(in srgb, var(--danger) 68%, var(--line));
|
||||
outline: 2px solid color-mix(in srgb, var(--danger) 13%, transparent);
|
||||
}
|
||||
.form-error-summary {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--line));
|
||||
border-radius: 12px;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.settings-form > .form-error-summary { margin: 0 0 12px; }
|
||||
.dialog-form > .form-error-summary { margin-top: -2px; }
|
||||
.settings-form.is-saving,
|
||||
.dialog-form.is-saving { cursor: progress; }
|
||||
.button-spinner {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 7px;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
vertical-align: -2px;
|
||||
animation: button-spin .7s linear infinite;
|
||||
}
|
||||
@keyframes button-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.chart-title-row { align-items: flex-start; }
|
||||
.chart-zoom-controls {
|
||||
display: inline-grid;
|
||||
grid-template-columns: 32px minmax(52px, auto) 32px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
.chart-zoom-controls button {
|
||||
min-width: 0;
|
||||
height: 30px;
|
||||
padding: 0 7px;
|
||||
border-radius: 0;
|
||||
border-right: 1px solid var(--line);
|
||||
background: transparent;
|
||||
color: var(--text-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
.chart-zoom-controls button:last-child { border-right: 0; }
|
||||
.chart-zoom-controls button:hover:not(:disabled) { background: var(--surface-2); }
|
||||
.chart-zoom-controls button:disabled { cursor: default; opacity: .34; }
|
||||
.chart-zoom-reset { color: var(--muted) !important; font-size: 10px !important; font-variant-numeric: tabular-nums; }
|
||||
.chart-wrap { overscroll-behavior-inline: contain; scroll-behavior: smooth; }
|
||||
.chart-wrap canvas { touch-action: pan-x pan-y; }
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.toolbar-picker { flex-basis: 38px; width: 38px; height: 38px; border-radius: 10px; gap: 2px; }
|
||||
.toolbar-picker-value { min-width: 15px; font-size: 10px; }
|
||||
.theme-picker-value { font-size: 14px; }
|
||||
.toolbar-picker-chevron { font-size: 9px; }
|
||||
.connection-banner { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 9px; }
|
||||
.connection-banner > div span { white-space: normal; }
|
||||
.chart-title-row { align-items: stretch; flex-direction: column; }
|
||||
.chart-zoom-controls { align-self: flex-end; }
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.connection-banner { grid-column: 1 / -1; }
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.topbar {
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
}
|
||||
.brand { grid-column: 1; grid-row: 1; }
|
||||
.top-actions { grid-column: 2; grid-row: 1; }
|
||||
.toolbar-runtime-status {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
justify-self: stretch;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.connection-banner { grid-column: 1 / -1; grid-row: auto; }
|
||||
}
|
||||
.settings-form.has-unsaved-changes .settings-save-bar {
|
||||
border-color: color-mix(in srgb, var(--accent) 48%, var(--line-strong));
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
const CACHE = 'gree-controller-v0810-dashboard-alert-filters';
|
||||
const CACHE = 'gree-controller-v0813-settings-debug-docs';
|
||||
const SCOPE = new URL(self.registration.scope).pathname.replace(/\/$/, '');
|
||||
const path = value => `${SCOPE}${value.startsWith('/') ? value : `/${value}`}` || '/';
|
||||
const ASSETS = [path('/'), path('/styles.css'), path('/app.js'), path('/theme-init.js'), path('/favicon.svg'), path('/manifest.webmanifest'), path('/lang/index.json'), path('/lang/en.json')];
|
||||
const ASSETS = [path('/'), path('/styles.css'), path('/app.js'), path('/theme-init.js'), path('/favicon.svg'), path('/manifest.webmanifest'), path('/lang/index.json'), path('/lang/en.json'), path('/lang/pl.json')];
|
||||
self.addEventListener('install', event => event.waitUntil(caches.open(CACHE).then(cache => cache.addAll(ASSETS)).then(() => self.skipWaiting())));
|
||||
self.addEventListener('activate', event => event.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(key => key !== CACHE).map(key => caches.delete(key)))).then(() => self.clients.claim())));
|
||||
self.addEventListener('fetch', event => {
|
||||
|
||||
Reference in New Issue
Block a user