'use strict'; const getCookie = name => { const row = document.cookie.split('; ').find(item => item.startsWith(`${name}=`)); return row ? decodeURIComponent(row.split('=').slice(1).join('=')) : ''; }; const setCookie = (name, value) => { document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=31536000; Path=/; SameSite=Lax`; }; const DEFAULT_LANGUAGE = 'en'; const preferredLanguage = getCookie('gree_controller_language') || DEFAULT_LANGUAGE; const preferredTheme = ['system', 'light', 'dark'].includes(getCookie('gree_controller_theme')) ? getCookie('gree_controller_theme') : 'system'; const app = { devices: [], zones: [], schedules: [], automations: [], accessTokens: [], settings: null, system: {}, outdoorTemperature: null, token: localStorage.getItem('gree_controller_token') || '', ws: null, wsTimer: null, currentView: 'dashboard', loading: false, language: preferredLanguage, theme: preferredTheme, connectionStatus: 'connecting', languages: [], translations: {}, locales: {}, historyReadings: [], historyZone: 'all', }; const $ = (selector, root = document) => root.querySelector(selector); const $$ = (selector, root = document) => [...root.querySelectorAll(selector)]; const clamp = (value, min, max) => Math.min(max, Math.max(min, value)); const esc = value => String(value ?? '').replace(/[&<>'"]/g, char => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[char])); const locale = () => app.locales[app.language] || app.locales[DEFAULT_LANGUAGE] || 'en-GB'; const tr = (key, params = {}) => { const template = app.translations[app.language]?.[key] ?? app.translations[DEFAULT_LANGUAGE]?.[key] ?? key; return String(template).replace(/\{([a-zA-Z0-9_]+)\}/g, (_, name) => params[name] ?? `{${name}}`); }; const fmtTemp = value => value !== null && value !== undefined && value !== '' && Number.isFinite(Number(value)) ? `${Number(value).toFixed(1)}°C` : '--'; const historyNumber = value => value === null || value === undefined || value === '' ? NaN : Number(value); const modeLabel = mode => tr(`mode.${mode}`) === `mode.${mode}` ? mode : tr(`mode.${mode}`); const fanLabel = value => ({0:'fan.auto',1:'fan.low',2:'fan.mediumLow',3:'fan.medium',4:'fan.mediumHigh',5:'fan.high'}[value] ? tr({0:'fan.auto',1:'fan.low',2:'fan.mediumLow',3:'fan.medium',4:'fan.mediumHigh',5:'fan.high'}[value]) : value); const dateTime = value => value ? new Intl.DateTimeFormat(locale(), {dateStyle:'short', timeStyle:'short'}).format(new Date(value)) : '—'; function applyTheme() { const resolved = app.theme === 'light' || app.theme === 'dark' ? app.theme : (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); document.documentElement.dataset.theme = resolved; const meta = $('#themeColorMeta'); if (meta) meta.content = resolved === 'light' ? '#f8faf9' : '#151515'; const select = $('#themeSelect'); if (select) select.value = app.theme; drawCurrentChartIfVisible(); } function applyTranslations() { document.documentElement.lang = app.language; $$('[data-i18n]').forEach(node => { node.textContent = tr(node.dataset.i18n); }); $$('[data-i18n-placeholder]').forEach(node => { node.placeholder = tr(node.dataset.i18nPlaceholder); }); $$('[data-i18n-title]').forEach(node => { node.title = tr(node.dataset.i18nTitle); }); $$('[data-i18n-aria]').forEach(node => { node.setAttribute('aria-label', tr(node.dataset.i18nAria)); }); $$('[data-i18n-content]').forEach(node => { node.setAttribute('content', tr(node.dataset.i18nContent)); }); $$('[data-day]').forEach(node => { node.textContent = tr(`day.${node.dataset.day}`); }); $('#languageSelect').value = app.language; $('#themeSelect').value = app.theme; const connectionLabel = $('#connectionLabel'); if (connectionLabel) connectionLabel.textContent = tr(`status.${app.connectionStatus}`); renderAll(); if (app.currentView === 'logs') loadLogs(); if (app.currentView === 'history' && app.zones.length) loadHistory(); } function setLanguage(language) { const available = app.languages.some(item => item.code === language); app.language = available ? language : DEFAULT_LANGUAGE; setCookie('gree_controller_language', app.language); applyTranslations(); } function renderLanguageOptions() { const select = $('#languageSelect'); if (!select) return; select.innerHTML = app.languages.map(item => { const label = item.native_name || item.name || item.code.toUpperCase(); return ``; }).join(''); select.value = app.language; } async function loadLanguages() { try { const response = await fetch('/lang/index.json', {cache: 'no-cache'}); if (!response.ok) throw new Error(`Language index HTTP ${response.status}`); const manifest = await response.json(); const languages = Array.isArray(manifest.languages) ? manifest.languages : []; if (!languages.some(item => item.code === DEFAULT_LANGUAGE)) throw new Error('Default English language pack is missing'); const loaded = await Promise.all(languages.map(async item => { const packResponse = await fetch(item.path || `/lang/${encodeURIComponent(item.code)}.json`, {cache: 'no-cache'}); if (!packResponse.ok) throw new Error(`Language ${item.code} HTTP ${packResponse.status}`); const pack = await packResponse.json(); return {item, pack}; })); app.languages = loaded.map(({item}) => item); app.translations = Object.fromEntries(loaded.map(({item, pack}) => [item.code, pack.translations || {}])); app.locales = Object.fromEntries(loaded.map(({item, pack}) => [item.code, pack.meta?.locale || item.locale || item.code])); app.language = app.languages.some(item => item.code === preferredLanguage) ? preferredLanguage : (manifest.default || DEFAULT_LANGUAGE); if (!app.languages.some(item => item.code === app.language)) app.language = DEFAULT_LANGUAGE; renderLanguageOptions(); } catch (error) { console.error('Unable to load language packs:', error); app.languages = [{code: DEFAULT_LANGUAGE, name: 'English', native_name: 'English', locale: 'en-GB'}]; app.translations = {[DEFAULT_LANGUAGE]: {}}; app.locales = {[DEFAULT_LANGUAGE]: 'en-GB'}; app.language = DEFAULT_LANGUAGE; renderLanguageOptions(); } } function setTheme(theme) { app.theme = ['system', 'light', 'dark'].includes(theme) ? theme : 'system'; setCookie('gree_controller_theme', app.theme); applyTheme(); } async function api(path, options = {}) { const headers = new Headers(options.headers || {}); headers.set('Accept', 'application/json'); if (app.token) headers.set('Authorization', `Bearer ${app.token}`); let body = options.body; if (body !== undefined && body !== null && typeof body !== 'string') { headers.set('Content-Type', 'application/json'); body = JSON.stringify(body); } const response = await fetch(path, {...options, headers, body}); if (response.status === 401) { showTokenDialog(); throw new Error(tr('auth.invalid')); } if (!response.ok) { let message = tr('error.http', {status: response.status}); try { message = (await response.json()).error || message; } catch (_) {} throw new Error(message); } if (response.status === 204) return null; return response.json(); } function toast(message, error = false) { const node = $('#toast'); node.textContent = message; node.className = error ? 'show error' : 'show'; clearTimeout(node._timer); node._timer = setTimeout(() => node.className = '', 3200); } function showTokenDialog() { const dialog = $('#tokenDialog'); if (!dialog.open) dialog.showModal(); } async function loadBootstrap(showMessage = false) { if (app.loading) return; app.loading = true; try { const data = await api('/api/bootstrap'); app.devices = data.devices || []; app.zones = data.zones || []; app.schedules = data.schedules || []; app.automations = data.automations || []; app.accessTokens = data.access_tokens || []; app.settings = data.settings || null; app.system = data.system || {}; app.outdoorTemperature = Number.isFinite(Number(data.outdoor_temperature)) ? Number(data.outdoor_temperature) : null; renderAll(); if (showMessage) toast(tr('common.updated')); if ($('#tokenDialog').open) $('#tokenDialog').close(); connectWebSocket(); } catch (error) { if (!String(error.message).toLowerCase().includes('token')) toast(error.message, true); } finally { app.loading = false; } } function renderAll() { renderSummary(); renderHouseClimate(); renderDevices(); renderZones(); renderSchedules(); renderAutomations(); renderAccessTokens(); fillSelects(); renderSettings(); } function renderSummary() { const temperatures = app.devices.map(d => d.current_temperature).filter(Number.isFinite); const average = temperatures.length ? temperatures.reduce((a,b) => a+b, 0) / temperatures.length : null; const online = app.devices.filter(d => d.online).length; const active = app.devices.filter(d => d.power).length; const demand = app.zones.filter(z => z.enabled && z.demand).length; $('#heroTemperature').innerHTML = `${average === null ? '--' : average.toFixed(1)}°C`; const activeSuffix = active ? tr('dashboard.summaryActive', {count: active}) : ''; $('#summaryText').textContent = app.devices.length ? tr('dashboard.summary', {online, total: app.devices.length, active: activeSuffix}) : tr('dashboard.empty'); $('#metrics').innerHTML = [ [tr('dashboard.metricOnline'), `${online}/${app.devices.length}`], [tr('dashboard.metricActive'), active], [tr('dashboard.metricDemand'), demand], ].map(([label,value]) => `
${esc(label)}${esc(value)}
`).join(''); } function renderHouseClimate() { const node = $('#houseClimate'); if (!node || !app.settings) return; const mode = app.settings.house_mode || 'cool'; const outdoor = app.outdoorTemperature == null ? tr('common.unavailable') : fmtTemp(app.outdoorTemperature); node.innerHTML = `
${esc(tr('house.seasonMode'))}

${esc(tr('house.smartThermostat'))}

${esc(tr('house.setpointStrategy'))}

${esc(tr('house.outdoor'))}${esc(outdoor)}
${['auto','comfort','sleep','away'].map(p=>``).join('')}
`; } function deviceCard(device, detailed = false) { const modes = ['auto','cool','dry','fan','heat']; const fans = [0,1,3,5]; const error = device.last_error ? `${esc(device.last_error)}` : `${esc(device.ip)}:${esc(device.port)} · ${device.simulated ? tr('devices.simulator') : device.protocol_version === 2 ? 'V2 GCM' : device.protocol_version === 1 ? 'V1 ECB' : tr('devices.protocolAuto')}`; return `

${esc(device.name)}

${esc(tr(device.online ? 'status.online' : 'status.offline'))} · ${esc(device.model || device.mac)}

${Number(device.target_temperature).toFixed(1)}°C
${esc(tr('devices.currentTemperature'))}: ${fmtTemp(device.current_temperature)}${device.outdoor_temperature == null ? '' : ` · ${esc(tr('devices.outdoor'))} ${fmtTemp(device.outdoor_temperature)}`}
${modes.map(mode => ``).join('')}
${fans.map(fan => ``).join('')}
${detailed ? `
${error}
${device.simulated ? '' : ``}
` : ''}
`; } function renderDevices() { const empty = `
${esc(tr('devices.emptyTitle'))}${esc(tr('devices.emptyText'))}
`; $('#dashboardDevices').innerHTML = app.devices.length ? app.devices.map(d => deviceCard(d, false)).join('') : empty; $('#deviceList').innerHTML = app.devices.length ? app.devices.map(d => deviceCard(d, true)).join('') : empty; } function zoneStrategyLabel(zone) { if (zone.sensor_source === 'combined') return tr('zones.combinedSource'); if (zone.sensor_source === 'home_assistant') return tr('zones.externalSource'); return tr('zones.greeSource'); } function zoneControlSourceLabel(source) { return ({ device: tr('zones.sourceDevice'), external: tr('zones.sourceExternal'), combined: tr('zones.sourceCombined'), device_fallback: tr('zones.sourceFallback'), device_discrepancy_fallback: tr('zones.sourceDiscrepancy'), unavailable: tr('zones.sourceUnavailable'), })[source] || source || tr('zones.sourceUnavailable'); } function zonePresetLabel(preset) { const key = `preset.${preset || 'comfort'}`; return tr(key) === key ? (preset || 'comfort') : tr(key); } function zoneCard(zone, detailed = true) { const device = app.devices.find(d => d.id === zone.device_id); const state = zone.enabled ? tr('common.active') : tr('common.disabled'); const sensorDetails = zone.sensor_source === 'device' ? `${tr('zones.greeTemp')}: ${fmtTemp(zone.device_temperature ?? device?.current_temperature)}` : `${tr('zones.greeTemp')}: ${fmtTemp(zone.device_temperature)} · ${tr('zones.externalTemp')}: ${fmtTemp(zone.external_temperature)} · ${tr('zones.usedSource')}: ${zoneControlSourceLabel(zone.control_temperature_source)}`; const target = Number(zone.effective_setpoint ?? zone.setpoint); const manual = zone.manual_preset || 'auto'; const mode = zone.inherit_house_mode ? 'house' : zone.mode; const override = zone.manual_override_until ? `${tr('zones.overrideUntil')} ${new Date(zone.manual_override_until).toLocaleTimeString(locale(), {hour:'2-digit',minute:'2-digit'})}` : tr('zones.scheduleControl'); return `

${esc(zone.name)}

${esc(device?.name || tr('common.noDevice'))} · ${esc(zonePresetLabel(zone.active_preset))}

${esc(state)}
${esc(tr('zones.measurement'))}${fmtTemp(zone.current_temperature)}
${Number.isFinite(target)?target.toFixed(1):'--'}°C
${esc(tr('zones.deviceTarget'))}${fmtTemp(zone.device_setpoint)}
${['auto','comfort','sleep','away'].map(preset=>``).join('')}
${zone.demand ? esc(tr('zones.requesting')) : esc(tr('zones.satisfied'))}${esc(override)}
${detailed ? `
${esc(sensorDetails)}
${esc(tr('zones.quickHintSmart'))}
` : ''}
`; } function renderZones() { const empty = `
${esc(tr('zones.emptyTitle'))}${esc(tr('zones.emptyText'))}
`; $('#zoneList').innerHTML = app.zones.length ? app.zones.map(zone => zoneCard(zone, true)).join('') : empty; const dashboard = $('#dashboardZones'); if (dashboard) dashboard.innerHTML = app.zones.length ? app.zones.map(zone => zoneCard(zone, false)).join('') : empty; } function renderSchedules() { const dayNames = Array.from({length:7}, (_, index) => tr(`day.${index + 1}`)); $('#scheduleList').innerHTML = app.schedules.length ? app.schedules.map(item => { const zone = app.zones.find(z => z.id === item.zone_id); const days = item.weekdays.map(day => dayNames[day-1]).join(', '); return `

${esc(item.name)}

${esc(zone?.name || tr('common.noZone'))} · ${esc(days)}

${esc(item.enabled ? tr('common.enabled') : tr('common.disabled'))}
${esc(tr('common.from'))}${esc(item.start_time)}
${esc(tr('common.to'))}${esc(item.end_time)}
${esc(tr('schedules.profile'))}${esc(item.preset === 'custom' ? fmtTemp(item.setpoint) : zonePresetLabel(item.preset))}
${esc(tr('schedules.crossMidnight'))}
`; }).join('') : `
${esc(tr('schedules.emptyTitle'))}${esc(tr('schedules.emptyText'))}
`; } function renderAutomations() { const triggerLabel = item => item.trigger_kind === 'time' ? tr('automations.triggerAt', {time: item.at_time}) : tr(item.trigger_kind === 'temperature_above' ? 'automations.triggerAbove' : 'automations.triggerBelow', {temperature: fmtTemp(item.threshold)}); $('#automationList').innerHTML = app.automations.length ? app.automations.map(item => { const actionDevice = app.devices.find(d => d.id === item.action_device_id); return `

${esc(item.name)}

${esc(tr('automations.triggerSummary', {trigger: triggerLabel(item), device: actionDevice?.name || tr('common.noDevice')}))}

${esc(item.enabled ? tr('common.active') : tr('common.disabled'))}
${esc(tr('common.power'))}${item.action.power == null ? '—' : item.action.power ? tr('common.on') : tr('common.off')}
${esc(tr('common.mode'))}${item.action.mode ? esc(modeLabel(item.action.mode)) : '—'}
${esc(tr('automations.last'))}${item.last_fired_at ? new Date(item.last_fired_at).toLocaleTimeString(locale(),{hour:'2-digit',minute:'2-digit'}) : '—'}
${esc(tr('common.cooldown'))} ${item.cooldown_seconds}s
`; }).join('') : `
${esc(tr('automations.emptyTitle'))}${esc(tr('automations.emptyText'))}
`; } function fillSelects() { const deviceOptions = app.devices.map(d => ``).join(''); const zoneOptions = app.zones.map(z => ``).join(''); ['#zoneForm [name=device_id]', '#automationForm [name=trigger_device_id]', '#automationForm [name=action_device_id]'].forEach(selector => { const select = $(selector); if (!select) return; const current = select.value; select.innerHTML = deviceOptions; if ([...select.options].some(o => o.value === current)) select.value = current; }); const zoneSelect = $('#scheduleForm [name=zone_id]'); if (zoneSelect) { const currentZone = zoneSelect.value; zoneSelect.innerHTML = zoneOptions; if ([...zoneSelect.options].some(o => o.value === currentZone)) zoneSelect.value = currentZone; } const presetZone = $('#schedulePresetZone'); if (presetZone) { const currentZone = presetZone.value; presetZone.innerHTML = zoneOptions; if ([...presetZone.options].some(o => o.value === currentZone)) presetZone.value = currentZone; } const history = $('#historyZone'); if (history) { const historyCurrent = history.value || 'all'; history.innerHTML = `${zoneOptions}`; if ([...history.options].some(o => o.value === historyCurrent)) history.value = historyCurrent; } } function renderAccessTokens() { const list = $('#accessTokenList'); if (!list) return; list.innerHTML = app.accessTokens.length ? app.accessTokens.map(item => `
${esc(item.name)}${esc(item.token_prefix)}${esc(tr('settings.created'))}: ${esc(dateTime(item.created_at))}
`).join('') : `
${esc(tr('settings.noTokens'))}${esc(tr('settings.noTokensHint'))}
`; } function renderSettings() { if (!app.settings) return; const form = $('#settingsForm'); form.controller_id.value = app.settings.controller_id || ''; form.poll_interval_seconds.value = app.settings.poll_interval_seconds || 15; form.zone_interval_seconds.value = app.settings.zone_interval_seconds || 5; form.discovery_broadcast.value = app.settings.discovery_broadcast || '255.255.255.255:7000'; form.discovery_timeout_ms.value = app.settings.discovery_timeout_ms || 3000; form.simulator_enabled.checked = !!app.settings.simulator_enabled; form.ha_url.value = app.settings.home_assistant?.url || ''; form.ha_token.value = ''; form.ha_token.placeholder = app.settings.home_assistant?.token_configured ? tr('settings.haTokenSaved') : tr('settings.haLongLivedToken'); form.ha_entity_id.value = app.settings.home_assistant?.default_entity_id || ''; form.ha_outdoor_entity_id.value = app.settings.home_assistant?.outdoor_entity_id || ''; form.ha_allow_invalid_tls.checked = !!app.settings.home_assistant?.allow_invalid_tls; form.outdoor_assist_enabled.checked = !!app.settings.outdoor_assist_enabled; $('#systemInfo').innerHTML = `

${esc(tr('settings.systemState'))}

${esc(tr('settings.version'))}: ${esc(app.system.version || '—')}
${esc(tr('settings.uptime'))}: ${esc(formatDuration(app.system.uptime_seconds || 0))}
${esc(tr('settings.apiAuth'))}: ${esc(app.system.auth_required ? tr('settings.enabled') : tr('settings.disabled'))}
`; } function formatDuration(seconds) { const days = Math.floor(seconds / 86400), hours = Math.floor((seconds % 86400) / 3600), minutes = Math.floor((seconds % 3600) / 60); return `${days ? `${days}d ` : ''}${hours}h ${minutes}m`; } function showView(name) { app.currentView = name; $$('.view').forEach(view => view.classList.toggle('active', view.dataset.view === name)); $$('.bottom-nav button').forEach(button => button.classList.toggle('active', button.dataset.nav === name || (button.dataset.nav === 'more' && ['schedules','automations','settings','logs'].includes(name)))); window.scrollTo({top: 0, behavior: 'smooth'}); if (name === 'history' && app.zones.length) loadHistory(); if (name === 'logs') loadLogs(); } async function sendDeviceCommand(id, command) { try { const device = await api(`/api/devices/${encodeURIComponent(id)}/command`, {method:'POST', body:command}); updateDevice(device); renderAll(); } catch (error) { toast(error.message, true); } } function updateDevice(device) { const index = app.devices.findIndex(item => item.id === device.id); if (index >= 0) app.devices[index] = device; else app.devices.push(device); } async function sendZoneControl(id, patch) { try { const zone = await api(`/api/zones/${encodeURIComponent(id)}/control`, {method:'POST', body:patch}); const index = app.zones.findIndex(item => item.id === zone.id); if (index >= 0) app.zones[index] = zone; else app.zones.push(zone); renderSummary(); renderZones(); } catch (error) { toast(error.message, true); } } function showDiscoveryNames(ids) { const wanted = new Set(Array.isArray(ids) ? ids : []); const devices = app.devices.filter(device => wanted.has(device.id)); if (!devices.length) return; const list = $('#discoveryNamesList'); list.innerHTML = devices.map(device => ` `).join(''); openDialog('discoveryNamesDialog'); } function populateDeviceRename(id) { const device = app.devices.find(item => item.id === id); if (!device) return; const form = $('#renameDeviceForm'); form.reset(); form.id.value = device.id; form.name.value = device.name; form.protocol_version.value = String(device.protocol_version ?? 0); openDialog('renameDeviceDialog'); } async function deleteEntity(type, id, labelKey) { if (!confirm(tr('confirm.delete', {label: tr(labelKey)}))) return; try { await api(`/api/${type}/${encodeURIComponent(id)}`, {method:'DELETE'}); await loadBootstrap(); toast(tr('common.removed')); } catch (error) { toast(error.message, true); } } function openDialog(id) { fillSelects(); const dialog = document.getElementById(id); if (dialog && !dialog.open) dialog.showModal(); } function updateZoneSensorFields() { const form = $('#zoneForm'); if (!form) return; const external = form.sensor_source.value !== 'device'; $('#externalSensorFields').hidden = !external; form.ha_entity_id.required = external; } function updateSchedulePresetField() { const form = $('#scheduleForm'); if (!form) return; $('#scheduleSetpointField').hidden = form.preset.value !== 'custom'; form.setpoint.required = form.preset.value === 'custom'; } function populateZone(id) { const item = app.zones.find(v => v.id === id); if (!item) return; const form = $('#zoneForm'); form.reset(); fillSelects(); Object.entries(item).forEach(([key,value]) => { if (form.elements[key] && value != null && typeof value !== 'object') form.elements[key].value = value; }); form.mode_policy.value = item.inherit_house_mode ? 'house' : (item.mode || 'cool'); if (Number(item.profile_version || 0) === 0) { if ((item.mode || 'cool') === 'heat') form.heat_comfort_setpoint.value = Number(item.setpoint ?? 21); else form.cool_comfort_setpoint.value = Number(item.setpoint ?? 23); } form.external_sensor_weight_percent.value = Math.round(Number(item.external_sensor_weight ?? 0.4) * 100); form.max_sensor_difference.value = Number(item.max_sensor_difference ?? 3); form.min_adjust_seconds.value = Number(item.min_adjust_seconds ?? 120); form.standby_offset_c.value = Number(item.standby_offset_c ?? 2); form.smart_fan.checked = item.smart_fan !== false; form.enabled.checked = item.enabled; updateZoneSensorFields(); openDialog('zoneDialog'); } function populateSchedule(id) { const item = app.schedules.find(v => v.id === id); if (!item) return; const form = $('#scheduleForm'); form.reset(); fillSelects(); ['id','name','zone_id','start_time','end_time','setpoint','preset'].forEach(key => { if (form.elements[key] && item[key] != null) form.elements[key].value = item[key]; }); form.enabled.checked = item.enabled; $$('[name=weekday]', form).forEach(input => input.checked = item.weekdays.includes(Number(input.value))); updateSchedulePresetField(); openDialog('scheduleDialog'); } function populateAutomation(id) { const item = app.automations.find(v => v.id === id); if (!item) return; const form = $('#automationForm'); form.reset(); fillSelects(); ['id','name','trigger_kind','trigger_device_id','threshold','at_time','action_device_id','cooldown_seconds'].forEach(key => { if (form.elements[key] && item[key] != null) form.elements[key].value = item[key]; }); form.action_power.value = item.action.power == null ? '' : String(item.action.power); form.action_mode.value = item.action.mode || ''; form.action_target_temperature.value = item.action.target_temperature ?? ''; form.enabled.checked = item.enabled; openDialog('automationDialog'); } async function loadHistory() { const zoneId = $('#historyZone')?.value || 'all'; const hours = $('#historyHours')?.value || '24'; try { const data = await api(`/api/history?zone_id=${encodeURIComponent(zoneId)}&hours=${encodeURIComponent(hours)}&limit=12000`); const readings = data.readings || []; app.historyReadings = readings; app.historyZone = zoneId; renderHistorySummary(readings, zoneId); drawHistoryCharts(readings, zoneId); } catch (error) { toast(error.message, true); } } const HISTORY_COLORS = ['--accent','--info','--warning','--purple','--danger','--teal','--orange','--blue']; function cssColor(name, fallback) { const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); return value || fallback; } function latestByZone(readings) { const map = new Map(); readings.forEach(row => map.set(row.zone_id, row)); return map; } function renderHistorySummary(readings, zoneId) { const host = $('#historySummary'); if (!host) return; if (!readings.length) { host.innerHTML = `
${esc(tr('history.noData'))}
`; return; } if (zoneId === 'all') { const latest = latestByZone(readings); host.innerHTML = app.zones.filter(z => latest.has(z.id)).map(zone => { const row = latest.get(zone.id); return `
${esc(zone.name)}${fmtTemp(row.control_temperature)}${esc(tr('history.targetShort'))} ${fmtTemp(row.target_temperature)}
`; }).join(''); return; } const row = readings[readings.length - 1]; const cards = [ [tr('history.greeSensor'), fmtTemp(row.gree_temperature), tr('history.sensor')], [tr('history.roomSensor'), fmtTemp(row.external_temperature), tr('history.homeAssistant')], [tr('history.controlTemperature'), fmtTemp(row.control_temperature), row.control_source || '—'], [tr('history.comfortTarget'), fmtTemp(row.target_temperature), row.active_preset || '—'], [tr('history.deviceSetpoint'), fmtTemp(row.device_setpoint), (row.mode || '—').toUpperCase()], [tr('history.outdoorTemperature'), fmtTemp(row.outdoor_temperature), tr('history.assist')], ]; host.innerHTML = cards.map(([label,value,detail]) => `
${esc(label)}${esc(value)}${esc(detail)}
`).join(''); } function timeLabel(ts, hours) { const options = Number(hours) > 48 ? {day:'2-digit', month:'2-digit', hour:'2-digit'} : {hour:'2-digit', minute:'2-digit'}; return new Date(ts).toLocaleString(locale(), options); } function prepareCanvas(canvas, height) { const rect = canvas.getBoundingClientRect(); const width = Math.max(720, Math.floor(rect.width || 720)); const dpr = window.devicePixelRatio || 1; canvas.width = width * dpr; canvas.height = height * dpr; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext('2d'); ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,width,height); return {ctx,width,height}; } function drawEmptyChart(canvas, height=340) { const {ctx,width} = prepareCanvas(canvas,height); ctx.fillStyle = cssColor('--muted','#888'); ctx.font = '13px system-ui'; ctx.textAlign='center'; ctx.fillText(tr('history.noData'), width/2, height/2); } function drawLineChart(canvas, series, rows, {height=340, minValue=null, maxValue=null, binaryLabels=false}={}) { if (!canvas || !rows.length || !series.length) return drawEmptyChart(canvas, height); const {ctx,width} = prepareCanvas(canvas,height); const text=cssColor('--muted','#888'), grid=cssColor('--grid','#333'), panel=cssColor('--surface','#111'); const pad={left:54,right:20,top:20,bottom:42}; const allValues=[]; series.forEach(s => rows.forEach(r => { const v=s.value(r); if(Number.isFinite(v)) allValues.push(v); })); if (!allValues.length) return drawEmptyChart(canvas,height); let min = minValue == null ? Math.floor(Math.min(...allValues)-1) : minValue; let max = maxValue == null ? Math.ceil(Math.max(...allValues)+1) : maxValue; if (max-min < 2) { min-=1; max+=1; } const firstTs = new Date(rows[0].timestamp).getTime(); const lastTs = new Date(rows[rows.length-1].timestamp).getTime(); const span = Math.max(1,lastTs-firstTs); const x = row => pad.left + (new Date(row.timestamp).getTime()-firstTs)/span*(width-pad.left-pad.right); const y = value => pad.top + (max-value)/(max-min)*(height-pad.top-pad.bottom); ctx.font='10px system-ui'; ctx.fillStyle=text; ctx.strokeStyle=grid; ctx.lineWidth=1; for(let i=0;i<=5;i++){ const value=min+(max-min)*i/5, py=y(value); ctx.beginPath();ctx.moveTo(pad.left,py);ctx.lineTo(width-pad.right,py);ctx.stroke(); ctx.textAlign='right'; ctx.fillText(binaryLabels ? value.toFixed(0) : `${value.toFixed(1)}°`,pad.left-8,py+3); } const ticks=5; for(let i=0;i<=ticks;i++){ const idx=Math.min(rows.length-1,Math.round(i*(rows.length-1)/ticks)); const px=x(rows[idx]); ctx.textAlign='center'; ctx.fillText(timeLabel(rows[idx].timestamp,$('#historyHours')?.value),px,height-14); } series.forEach(s => { ctx.beginPath(); ctx.strokeStyle=s.color; ctx.lineWidth=s.width||2; ctx.setLineDash(s.dash||[]); let started=false, prev=null; rows.forEach(row => { const value=s.value(row); if(!Number.isFinite(value)) return; const px=x(row),py=y(value); if(!started||prev===null){ctx.moveTo(px,py);started=true;} else if(s.step){ctx.lineTo(px,y(prev));ctx.lineTo(px,py);} else ctx.lineTo(px,py); prev=value; }); ctx.stroke(); ctx.setLineDash([]); }); canvas._history={rows,series}; } function renderLegend(host, series) { if (!host) return; host.innerHTML=series.map(s=>`${esc(s.label)}`).join(''); } function drawHistoryCharts(readings, zoneId) { const tempCanvas=$('#historyTemperatureChart'), opCanvas=$('#historyOperationChart'); if (!readings.length) { drawEmptyChart(tempCanvas,360); drawEmptyChart(opCanvas,260); $('#historyTemperatureLegend').innerHTML=''; $('#historyOperationLegend').innerHTML=''; return; } if (zoneId === 'all') { const zones=app.zones.filter(z=>readings.some(r=>r.zone_id===z.id)); const rows=readings; const tempSeries=zones.map((zone,index)=>({ label:zone.name, color:cssColor(HISTORY_COLORS[index%HISTORY_COLORS.length],`hsl(${index*67%360} 70% 55%)`), value:r=>r.zone_id===zone.id?historyNumber(r.control_temperature):NaN, })); const outdoorColor=cssColor('--muted-strong','#999'); tempSeries.push({label:tr('history.outdoorTemperature'),color:outdoorColor,dash:[6,5],value:r=>historyNumber(r.outdoor_temperature)}); drawLineChart(tempCanvas,tempSeries,rows,{height:360}); renderLegend($('#historyTemperatureLegend'),tempSeries); const targetSeries=zones.map((zone,index)=>({ label:`${zone.name} · ${tr('history.targetShort')}`, color:cssColor(HISTORY_COLORS[index%HISTORY_COLORS.length],`hsl(${index*67%360} 70% 55%)`), dash:[5,4], value:r=>r.zone_id===zone.id?historyNumber(r.target_temperature):NaN, })); drawLineChart(opCanvas,targetSeries,rows,{height:260}); renderLegend($('#historyOperationLegend'),targetSeries); return; } const temperatureSeries=[ {label:tr('history.greeSensor'),color:cssColor('--accent','#3ecf8e'),value:r=>historyNumber(r.gree_temperature)}, {label:tr('history.roomSensor'),color:cssColor('--info','#60a5fa'),value:r=>historyNumber(r.external_temperature)}, {label:tr('history.controlTemperature'),color:cssColor('--teal','#2dd4bf'),width:2.8,value:r=>historyNumber(r.control_temperature)}, {label:tr('history.comfortTarget'),color:cssColor('--warning','#f59e0b'),dash:[7,5],value:r=>historyNumber(r.target_temperature)}, {label:tr('history.deviceSetpoint'),color:cssColor('--purple','#a78bfa'),dash:[3,4],value:r=>historyNumber(r.device_setpoint)}, {label:tr('history.outdoorTemperature'),color:cssColor('--muted-strong','#9ca3af'),dash:[2,5],value:r=>historyNumber(r.outdoor_temperature)}, ]; drawLineChart(tempCanvas,temperatureSeries,readings,{height:360}); renderLegend($('#historyTemperatureLegend'),temperatureSeries); const operationSeries=[ {label:tr('history.fanSpeed'),color:cssColor('--info','#60a5fa'),step:true,value:r=>historyNumber(r.fan_speed)}, {label:tr('history.demand'),color:cssColor('--accent','#3ecf8e'),step:true,width:2.4,value:r=>r.demand?4.5:0.5}, {label:tr('history.power'),color:cssColor('--warning','#f59e0b'),step:true,dash:[5,4],value:r=>r.power?3.5:0.5}, ]; drawLineChart(opCanvas,operationSeries,readings,{height:260,minValue:0,maxValue:5,binaryLabels:true}); renderLegend($('#historyOperationLegend'),operationSeries); } function drawCurrentChartIfVisible() { if (app.currentView === 'history') drawHistoryCharts(app.historyReadings || [], app.historyZone || 'all'); } async function loadLogs() { try { const data = await api('/api/events?limit=150'); const logs = data.events || []; $('#logList').innerHTML = logs.length ? logs.map(item => `
${esc(item.kind)}${esc(item.message)}
`).join('') : `
${esc(tr('logs.emptyTitle'))}${esc(tr('logs.emptyText'))}
`; } catch (error) { toast(error.message, true); } } function connectWebSocket() { if (app.ws && [WebSocket.OPEN, WebSocket.CONNECTING].includes(app.ws.readyState)) return; clearTimeout(app.wsTimer); const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:'; const query = app.token ? `?token=${encodeURIComponent(app.token)}` : ''; const ws = new WebSocket(`${protocol}//${location.host}/ws${query}`); app.ws = ws; ws.onopen = () => { app.connectionStatus = 'connected'; $('#connectionLabel').textContent = tr('status.connected'); }; ws.onclose = () => { app.connectionStatus = 'disconnected'; $('#connectionLabel').textContent = tr('status.disconnected'); app.wsTimer = setTimeout(connectWebSocket, 3000); }; ws.onerror = () => { app.connectionStatus = 'connectionError'; $('#connectionLabel').textContent = tr('status.connectionError'); }; ws.onmessage = event => { try { const message = JSON.parse(event.data); if (message.event === 'bootstrap') { const data=message.data; app.devices=data.devices||[]; app.zones=data.zones||[]; app.schedules=data.schedules||[]; app.automations=data.automations||[]; app.settings=data.settings||app.settings; app.system=data.system||app.system; app.outdoorTemperature=Number.isFinite(Number(data.outdoor_temperature))?Number(data.outdoor_temperature):app.outdoorTemperature; renderAll(); return; } const data = message.data || {}; if (['device.updated','device.created'].includes(message.event)) { updateDevice(data); renderSummary(); renderDevices(); } else if (message.event === 'device.deleted') { app.devices=app.devices.filter(v=>v.id!==data.id); renderAll(); } else if (message.event === 'devices.discovered') { (data.devices||[]).forEach(updateDevice); renderAll(); } else if (message.event === 'zone.updated') { const i=app.zones.findIndex(v=>v.id===data.id); if(i>=0) app.zones[i]=data; else app.zones.push(data); renderSummary(); renderHouseClimate(); renderZones(); } else if (message.event === 'settings.updated') { app.settings=data; renderSettings(); renderHouseClimate(); } else if (message.event === 'outdoor.updated') { app.outdoorTemperature=Number.isFinite(Number(data.temperature))?Number(data.temperature):null; renderHouseClimate(); } else if (message.event === 'log.created' && app.currentView === 'logs') loadLogs(); } catch (_) {} }; } document.addEventListener('click', async event => { const button = event.target.closest('button'); if (!button) return; if (button.dataset.nav) { if (button.dataset.nav === 'more') openDialog('moreDialog'); else showView(button.dataset.nav); return; } if (button.dataset.go) { $('#moreDialog').close(); showView(button.dataset.go); return; } if (button.dataset.open) { const form = document.getElementById(button.dataset.open.replace('Dialog','Form')); if (form) form.reset(); if (button.dataset.open === 'zoneDialog') updateZoneSensorFields(); if (button.dataset.open === 'scheduleDialog') updateSchedulePresetField(); openDialog(button.dataset.open); return; } if (button.hasAttribute('data-close')) { button.closest('dialog')?.close(); return; } if (button.dataset.scheduleTemplate) { const zoneId = $('#schedulePresetZone')?.value; if (!zoneId) return toast(tr('schedules.chooseZone'), true); if (!confirm(tr('schedules.replaceConfirm'))) return; try { button.disabled = true; await api(`/api/zones/${encodeURIComponent(zoneId)}/schedule-template`, {method:'POST', body:{template:button.dataset.scheduleTemplate}}); await loadBootstrap(); toast(tr('schedules.templateApplied')); } catch (error) { toast(error.message, true); } finally { button.disabled = false; } return; } const action = button.dataset.action; if (!action) return; const device = app.devices.find(v => v.id === button.dataset.device); if (action === 'power' && device) return sendDeviceCommand(device.id, {power:!device.power}); if (action === 'temperature' && device) return sendDeviceCommand(device.id, {target_temperature:clamp(Number(device.target_temperature)+Number(button.dataset.delta),8,30)}); if (action === 'mode' && device) return sendDeviceCommand(device.id, {mode:button.dataset.value, power:true}); if (action === 'fan' && device) return sendDeviceCommand(device.id, {fan_speed:Number(button.dataset.value)}); if (action === 'toggle' && device) return sendDeviceCommand(device.id, {[button.dataset.field]:!device[button.dataset.field]}); if (action === 'poll' && device) { try { button.disabled=true; updateDevice(await api(`/api/devices/${encodeURIComponent(device.id)}/poll`,{method:'POST'})); renderAll(); toast(tr('devices.readDone')); } catch(e){toast(e.message,true);} finally{button.disabled=false;} return; } if (action === 'bind' && device) { try { button.disabled=true; updateDevice(await api(`/api/devices/${encodeURIComponent(device.id)}/bind`,{method:'POST'})); renderAll(); toast(tr('devices.bound')); } catch(e){toast(e.message,true);} finally{button.disabled=false;} return; } if (action === 'rename-device' && device) return populateDeviceRename(device.id); if (action === 'delete-device') return deleteEntity('devices', button.dataset.device, 'label.device'); if (action === 'house-mode') { try { app.settings = await api('/api/house/control',{method:'POST',body:{mode:button.dataset.value}}); renderHouseClimate(); toast(tr('house.modeUpdated')); } catch(error){ toast(error.message,true); } return; } if (action === 'house-preset') { try { const result=await api('/api/house/preset',{method:'POST',body:{preset:button.dataset.value}}); app.zones=result.zones||app.zones; renderZones(); toast(tr('house.presetUpdated')); } catch(error){ toast(error.message,true); } return; } if (action === 'zone-temperature') { const zone=app.zones.find(v=>v.id===button.dataset.id); if(zone) { const base=Number(zone.effective_setpoint ?? zone.setpoint); return sendZoneControl(zone.id,{setpoint:clamp(base+Number(button.dataset.delta),8,30)}); } } if (action === 'zone-mode') return sendZoneControl(button.dataset.id,{mode:button.dataset.value}); if (action === 'zone-preset') return sendZoneControl(button.dataset.id,{preset:button.dataset.value}); if (action === 'edit-zone') return populateZone(button.dataset.id); if (action === 'delete-zone') return deleteEntity('zones', button.dataset.id, 'label.zone'); if (action === 'edit-schedule') return populateSchedule(button.dataset.id); if (action === 'delete-schedule') return deleteEntity('schedules', button.dataset.id, 'label.schedule'); if (action === 'edit-automation') return populateAutomation(button.dataset.id); if (action === 'delete-automation') return deleteEntity('automations', button.dataset.id, 'label.automation'); if (action === 'revoke-access-token') { if (!confirm(tr('confirm.revokeToken'))) return; try { await api(`/api/access-tokens/${encodeURIComponent(button.dataset.id)}`, {method:'DELETE'}); app.accessTokens = app.accessTokens.filter(item => item.id !== button.dataset.id); renderAccessTokens(); toast(tr('toast.tokenRevoked')); } catch (error) { toast(error.message, true); } return; } }); $('#refreshButton').addEventListener('click', () => loadBootstrap(true)); $('#discoverButton').addEventListener('click', () => { const form=$('#discoverForm'); form.reset(); form.protocol_version.value='0'; form.passes.value='3'; form.timeout_ms.value=String(Math.max(6000, Number(app.settings?.discovery_timeout_ms || 3000))); openDialog('discoverDialog'); }); $('#historyRefresh').addEventListener('click', loadHistory); $('#historyZone').addEventListener('change', loadHistory); $('#historyHours').addEventListener('change', loadHistory); $('#historyHours').addEventListener('change', loadHistory); $('#logsRefresh').addEventListener('click', loadLogs); $('#languageSelect').addEventListener('change', event => setLanguage(event.target.value)); $('#themeSelect').addEventListener('change', event => setTheme(event.target.value)); $('#zoneForm [name=sensor_source]').addEventListener('change', updateZoneSensorFields); $('#scheduleForm [name=preset]').addEventListener('change', updateSchedulePresetField); $('#tokenForm').addEventListener('submit', event => { event.preventDefault(); app.token = new FormData(event.currentTarget).get('token').trim(); localStorage.setItem('gree_controller_token', app.token); if (app.ws) app.ws.close(); loadBootstrap(); }); $('#discoverForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, raw=Object.fromEntries(new FormData(form)); const submit=form.querySelector('button[type=submit]'); submit.disabled=true; submit.textContent=tr('actions.discovering'); try { const result=await api('/api/discovery',{method:'POST',body:{protocol_version:Number(raw.protocol_version),passes:Number(raw.passes),timeout_ms:Number(raw.timeout_ms)}}); form.closest('dialog').close(); await loadBootstrap(); toast(tr('toast.found',{count:result.count})); showDiscoveryNames(result.new_device_ids || []); } catch(error){toast(error.message,true);} finally {submit.disabled=false;submit.textContent=tr('actions.discover');} }); $('#discoveryNamesForm').addEventListener('submit', async event => { event.preventDefault(); const form = event.currentTarget; const inputs = $$('input[data-device-id]', form); try { const updated = await Promise.all(inputs.map(input => api(`/api/devices/${encodeURIComponent(input.dataset.deviceId)}`, {method:'PATCH', body:{name:input.value.trim()}}))); updated.forEach(updateDevice); form.closest('dialog').close(); renderAll(); toast(tr('common.saved')); } catch (error) { toast(error.message, true); } }); $('#renameDeviceForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, raw=Object.fromEntries(new FormData(form)); try { const device=await api(`/api/devices/${encodeURIComponent(raw.id)}`,{method:'PATCH',body:{name:raw.name.trim(),protocol_version:Number(raw.protocol_version)}}); updateDevice(device); form.closest('dialog').close(); renderAll(); toast(tr('common.saved')); } catch(error){toast(error.message,true);} }); $('#deviceForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, data=Object.fromEntries(new FormData(form)); data.port=Number(data.port); data.protocol_version=Number(data.protocol_version); data.simulated=form.simulated.checked; try { await api('/api/devices',{method:'POST',body:data}); form.closest('dialog').close(); form.reset(); await loadBootstrap(); toast(tr('devices.added')); } catch(error){toast(error.message,true);} }); $('#zoneForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, raw=Object.fromEntries(new FormData(form)); const id=raw.id; const body={ name:raw.name,device_id:raw.device_id,enabled:form.enabled.checked, mode:raw.mode_policy==='house'?'cool':raw.mode_policy,inherit_house_mode:raw.mode_policy==='house',setpoint:Number(raw.setpoint), cool_comfort_setpoint:Number(raw.cool_comfort_setpoint),cool_sleep_setpoint:Number(raw.cool_sleep_setpoint),cool_away_setpoint:Number(raw.cool_away_setpoint), heat_comfort_setpoint:Number(raw.heat_comfort_setpoint),heat_sleep_setpoint:Number(raw.heat_sleep_setpoint),heat_away_setpoint:Number(raw.heat_away_setpoint), hysteresis:Number(raw.hysteresis),min_on_seconds:Number(raw.min_on_seconds),min_off_seconds:Number(raw.min_off_seconds), min_adjust_seconds:Number(raw.min_adjust_seconds),standby_offset_c:Number(raw.standby_offset_c),smart_fan:form.smart_fan.checked, sensor_source:raw.sensor_source,ha_entity_id:raw.ha_entity_id||null,external_sensor_weight:Number(raw.external_sensor_weight_percent)/100,max_sensor_difference:Number(raw.max_sensor_difference) }; try { await api(id?`/api/zones/${encodeURIComponent(id)}`:'/api/zones',{method:id?'PUT':'POST',body}); form.closest('dialog').close(); form.reset(); await loadBootstrap(); toast(tr('common.saved')); } catch(error){toast(error.message,true);} }); $('#scheduleForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, raw=Object.fromEntries(new FormData(form)); const id=raw.id, weekdays=$$('[name=weekday]:checked',form).map(v=>Number(v.value)); const body={name:raw.name,zone_id:raw.zone_id,enabled:form.enabled.checked,weekdays,start_time:raw.start_time,end_time:raw.end_time,preset:raw.preset,setpoint:Number(raw.setpoint||23)}; try { await api(id?`/api/schedules/${encodeURIComponent(id)}`:'/api/schedules',{method:id?'PUT':'POST',body}); form.closest('dialog').close(); form.reset(); await loadBootstrap(); toast(tr('common.saved')); } catch(error){toast(error.message,true);} }); $('#automationForm').addEventListener('submit', async event => { event.preventDefault(); const form=event.currentTarget, raw=Object.fromEntries(new FormData(form)); const id=raw.id; const action={}; if(raw.action_power!=='') action.power=raw.action_power==='true'; if(raw.action_mode) action.mode=raw.action_mode; if(raw.action_target_temperature!=='') action.target_temperature=Number(raw.action_target_temperature); const body={name:raw.name,enabled:form.enabled.checked,trigger_kind:raw.trigger_kind,trigger_device_id:raw.trigger_device_id||null,threshold:raw.threshold===''?null:Number(raw.threshold),at_time:raw.at_time||null,action_device_id:raw.action_device_id,action,cooldown_seconds:Number(raw.cooldown_seconds)}; try { await api(id?`/api/automations/${encodeURIComponent(id)}`:'/api/automations',{method:id?'PUT':'POST',body}); form.closest('dialog').close(); form.reset(); await loadBootstrap(); toast(tr('common.saved')); } catch(error){toast(error.message,true);} }); function settingsBodyFromForm(form) { const raw=Object.fromEntries(new FormData(form)); return {controller_id:raw.controller_id,simulator_enabled:form.simulator_enabled.checked,poll_interval_seconds:Number(raw.poll_interval_seconds),zone_interval_seconds:Number(raw.zone_interval_seconds),discovery_timeout_ms:Number(raw.discovery_timeout_ms),discovery_broadcast:raw.discovery_broadcast,house_mode:app.settings?.house_mode||'cool',control_strategy:'setpoint',outdoor_assist_enabled:form.outdoor_assist_enabled.checked,home_assistant:{url:raw.ha_url,token:raw.ha_token,default_entity_id:raw.ha_entity_id,outdoor_entity_id:raw.ha_outdoor_entity_id,allow_invalid_tls:form.ha_allow_invalid_tls.checked}}; } async function saveSettingsForm(form, notify=true) { app.settings=await api('/api/settings',{method:'PUT',body:settingsBodyFromForm(form)}); renderSettings(); renderHouseClimate(); if(notify) toast(tr('common.saved')); return app.settings; } $('#settingsForm').addEventListener('submit', async event => { event.preventDefault(); try { await saveSettingsForm(event.currentTarget, true); } catch(error){toast(error.message,true);} }); $('#createAccessToken').addEventListener('click', async event => { const button = event.currentTarget; button.disabled = true; try { const result = await api('/api/access-tokens', {method:'POST', body:{name:'Home Assistant'}}); if (result.item) app.accessTokens.unshift(result.item); renderAccessTokens(); $('#generatedAccessToken').value = result.token || ''; openDialog('generatedTokenDialog'); toast(tr('toast.tokenCreated')); } catch (error) { toast(error.message, true); } finally { button.disabled = false; } }); $('#copyAccessToken').addEventListener('click', async () => { const input = $('#generatedAccessToken'); try { await navigator.clipboard.writeText(input.value); toast(tr('toast.tokenCopied')); } catch (_) { input.select(); document.execCommand('copy'); toast(tr('toast.tokenCopied')); } }); $('#haTest').addEventListener('click', async () => { const form=$('#settingsForm'); try { await saveSettingsForm(form, false); const entity = form.ha_entity_id.value || form.ha_outdoor_entity_id.value || null; const result=await api('/api/integrations/home-assistant/test',{method:'POST',body:{entity_id:entity}}); toast(tr('toast.haTemperature',{temperature:result.temperature_c.toFixed(1)})); } catch(error){toast(error.message,true);} }); let historyResizeTimer; window.addEventListener('resize', () => { if (app.currentView === 'history') { clearTimeout(historyResizeTimer); historyResizeTimer=setTimeout(drawCurrentChartIfVisible,120); } }); window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', () => { if (app.theme === 'system') applyTheme(); }); if ('serviceWorker' in navigator) window.addEventListener('load', () => navigator.serviceWorker.register('/sw.js').catch(()=>{})); async function startApplication() { applyTheme(); await loadLanguages(); applyTranslations(); updateZoneSensorFields(); updateSchedulePresetField(); await loadBootstrap(); } startApplication().catch(error => console.error('Application startup failed:', error));