v0.14.0
This commit is contained in:
Mateusz Gruszczyński
+113
-8
@@ -1,11 +1,12 @@
|
||||
function deviceFeaturePanel(device) {
|
||||
const features = [
|
||||
const allFeatures = [
|
||||
['light', 'supports_light', tr('devices.light')],
|
||||
['xfan', 'supports_xfan', tr('devices.xfan')],
|
||||
['health', 'supports_health', tr('devices.health')],
|
||||
['air', 'supports_air', tr('devices.air')],
|
||||
['sleep', 'supports_sleep', tr('devices.sleep')],
|
||||
].filter(([, support]) => device[support] === true);
|
||||
];
|
||||
const features = allFeatures.filter(([, support]) => device[support] === true);
|
||||
if (!features.length) return `<div class="device-capability-panel"><small>${esc(tr('devices.features'))}</small><span class="muted">${esc(tr('devices.noExtraFeatures'))}</span></div>`;
|
||||
return `<div class="device-capability-panel"><small>${esc(tr('devices.features'))}</small><div class="device-capability-buttons">${features.map(([field, , label]) => `<button class="${device[field] ? 'active' : ''}" data-action="toggle" data-field="${field}" data-device="${esc(device.id)}">${esc(label)}</button>`).join('')}</div></div>`;
|
||||
}
|
||||
@@ -19,7 +20,23 @@ function disabledZoneForDevice(deviceId) {
|
||||
return app.zones.find(zone => zone.device_id === deviceId && zone.enabled === false) || null;
|
||||
}
|
||||
|
||||
function deviceTransportLabel(device) {
|
||||
return device.connection_type === 'gree_cloud' ? 'GREE Cloud' : 'Local';
|
||||
}
|
||||
|
||||
function deviceConnectionStatusLabel(device) {
|
||||
const key = {
|
||||
online: 'status.online',
|
||||
offline: 'status.offline',
|
||||
cloud_disconnected: 'status.cloudDisconnected',
|
||||
authentication_error: 'status.authenticationError',
|
||||
unknown: 'status.unknown',
|
||||
}[device.connection_status || (device.online ? 'online' : 'offline')];
|
||||
return key ? tr(key) : String(device.connection_status || tr('status.unknown')).replaceAll('_', ' ');
|
||||
}
|
||||
|
||||
function deviceProtocolLabel(device) {
|
||||
if (device.connection_type === 'gree_cloud') return 'MQTT / TLS';
|
||||
return device.simulated ? tr('devices.simulator') : device.protocol_version === 2 ? 'V2 AES-GCM' : device.protocol_version === 1 ? 'V1 AES-ECB' : tr('devices.protocolAuto');
|
||||
}
|
||||
|
||||
@@ -28,6 +45,15 @@ function deviceResponseTimeLabel(device) {
|
||||
return Number.isFinite(value) ? `${Math.max(0, Math.round(value))} ms` : '— ms';
|
||||
}
|
||||
|
||||
function manualDeviceStatus(device) {
|
||||
const label = deviceConnectionStatusLabel(device);
|
||||
const detail = device.last_error ? `<span class="manual-device-status-error" title="${esc(device.last_error)}">${esc(device.last_error)}</span>` : '';
|
||||
const pending = device.pending_command ? `<span class="manual-device-status-pending">${esc(tr('common.pending'))}</span>` : '';
|
||||
return `<p class="manual-device-status" role="status"><span class="status ${device.online ? 'online' : ''}">${esc(label)}</span>${detail}${pending}</p>`;
|
||||
}
|
||||
|
||||
// Keep Local Manual Control visually and behaviorally identical to the pre-Cloud UI.
|
||||
// The only transport-specific addition is the existing Local badge in the title row.
|
||||
function manualDeviceProblem(device) {
|
||||
if (!device.enabled) {
|
||||
return `<div class="manual-device-problem error" role="status"><strong>${esc(tr('devices.manualDeviceDisabled'))}</strong></div>`;
|
||||
@@ -41,7 +67,7 @@ function manualDeviceProblem(device) {
|
||||
return '';
|
||||
}
|
||||
|
||||
function manualDeviceCard(device) {
|
||||
function manualLocalDeviceCard(device) {
|
||||
const modes = ['auto', 'cool', 'dry', 'fan', 'heat'];
|
||||
const fans = [0, 1, 3, 5];
|
||||
const disabledZone = disabledZoneForDevice(device.id);
|
||||
@@ -49,7 +75,7 @@ function manualDeviceCard(device) {
|
||||
const warning = disabledZone ? `<div class="manual-zone-warning" role="note"><strong>${esc(tr('devices.manualDisabledZoneTitle'))}</strong><p>${esc(tr('devices.manualDisabledZoneWarning', { zone: disabledZone.name }))}</p></div>` : '';
|
||||
return `<article class="device-card quick-control-card quick-device-control ${device.power ? '' : 'off'} ${disabledZone ? 'manual-zone-blocked' : ''}" data-device-card="${esc(device.id)}">
|
||||
<div class="device-head">
|
||||
<div class="device-title"><h3>${esc(device.name)}</h3></div>
|
||||
<div class="device-title"><h3>${esc(device.name)}</h3><span class="badge">Local</span></div>
|
||||
<button class="power-button ${device.power ? 'on' : ''}" data-action="power" data-device="${esc(device.id)}" aria-label="${esc(tr('devices.power'))}">⏻</button>
|
||||
</div>
|
||||
${warning}
|
||||
@@ -72,7 +98,50 @@ function manualDeviceCard(device) {
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function manualCloudDeviceCard(device) {
|
||||
const caps = device.capabilities || {};
|
||||
const modes = caps.mode === false ? [] : ['auto', 'cool', 'dry', 'fan', 'heat'];
|
||||
const reportedFans = Array.isArray(caps.fan_modes) ? caps.fan_modes.map(Number).filter(Number.isFinite) : [];
|
||||
const fans = reportedFans.length ? reportedFans : [0, 1, 3, 5];
|
||||
const tempStep = Number(caps.temperature_step) > 0 ? Number(caps.temperature_step) : 1;
|
||||
const minTemp = Number.isFinite(Number(caps.min_temperature)) ? Number(caps.min_temperature) : 8;
|
||||
const maxTemp = Number.isFinite(Number(caps.max_temperature)) ? Number(caps.max_temperature) : 30;
|
||||
const disabledZone = disabledZoneForDevice(device.id);
|
||||
const managedZone = app.zones.find(zone => zone.device_id === device.id && zone.compressor_pending_action) || zoneForDevice(device.id);
|
||||
const warning = disabledZone ? `<div class="manual-zone-warning" role="note"><strong>${esc(tr('devices.manualDisabledZoneTitle'))}</strong><p>${esc(tr('devices.manualDisabledZoneWarning', { zone: disabledZone.name }))}</p></div>` : '';
|
||||
return `<article class="device-card quick-control-card quick-device-control cloud-manual-device ${device.pending_command ? 'cloud-command-pending' : ''} ${device.power ? '' : 'off'} ${disabledZone ? 'manual-zone-blocked' : ''}" data-device-card="${esc(device.id)}">
|
||||
<div class="device-head">
|
||||
<div class="device-title">
|
||||
<div class="manual-device-title-row"><h3>${esc(device.name)}</h3><span class="badge">GREE Cloud</span></div>
|
||||
${manualDeviceStatus(device)}
|
||||
</div>
|
||||
<button class="power-button ${device.power ? 'on' : ''}" data-action="power" data-device="${esc(device.id)}" aria-label="${esc(tr('devices.power'))}">⏻</button>
|
||||
</div>
|
||||
${warning}
|
||||
<div class="temperature-control">
|
||||
<button data-action="temperature" data-delta="${-tempStep}" data-device="${esc(device.id)}">−</button>
|
||||
<div class="target-temp editable-target" data-temperature-kind="device" data-id="${esc(device.id)}" data-value="${Number(device.target_temperature)}" data-temp-step="${tempStep}" data-temp-min="${minTemp}" data-temp-max="${maxTemp}" data-editable="true" tabindex="0" role="button" title="${esc(tr('common.clickTemperatureToEdit'))}">${Number(device.target_temperature).toFixed(1)}<small>°C</small></div>
|
||||
<button data-action="temperature" data-delta="${tempStep}" data-device="${esc(device.id)}">+</button>
|
||||
</div>
|
||||
<div class="current-line">${esc(tr('devices.currentTemperature'))}: <strong>${fmtTemp(device.current_temperature)}</strong>${device.outdoor_temperature == null ? '' : ` · ${esc(tr('devices.outdoor'))} ${fmtTemp(device.outdoor_temperature)}`}</div>
|
||||
${compressorQueuePanel(managedZone)}
|
||||
${modes.length ? `<div class="mode-row quick-control-row quick-control-row-5">${modes.map(mode => `<button class="${device.mode === mode ? 'active' : ''}" data-action="mode" data-value="${mode}" data-device="${esc(device.id)}">${esc(modeLabel(mode))}</button>`).join('')}</div>` : ''}
|
||||
${fans.length ? `<div class="fan-row quick-control-row quick-control-row-${Math.min(6, fans.length)}">${fans.map(fan => `<button class="${Number(device.fan_speed) === fan ? 'active' : ''}" data-action="fan" data-value="${fan}" data-device="${esc(device.id)}">${esc(fanLabel(fan))}</button>`).join('')}</div>` : ''}
|
||||
<div class="device-toggles quick-control-row quick-control-row-3">
|
||||
${caps.vertical_swing === false ? '' : `<button class="${device.swing_vertical ? 'active' : ''}" data-action="toggle" data-field="swing_vertical" data-device="${esc(device.id)}">${esc(tr('devices.swing'))}</button>`}
|
||||
${device.supports_quiet === false ? '' : `<button class="${device.quiet ? 'active' : ''}" data-action="toggle" data-field="quiet" data-device="${esc(device.id)}">${esc(tr('devices.quiet'))}</button>`}
|
||||
${device.supports_turbo === false ? '' : `<button class="${device.turbo ? 'active' : ''}" data-action="toggle" data-field="turbo" data-device="${esc(device.id)}">${esc(tr('devices.turbo'))}</button>`}
|
||||
</div>
|
||||
${deviceFeaturePanel(device)}
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function manualDeviceCard(device) {
|
||||
return device.connection_type === 'gree_cloud' ? manualCloudDeviceCard(device) : manualLocalDeviceCard(device);
|
||||
}
|
||||
|
||||
function technicalDeviceCard(device) {
|
||||
if (device.connection_type === 'gree_cloud') return cloudTechnicalDeviceCard(device);
|
||||
const protocol = deviceProtocolLabel(device);
|
||||
const responseTime = deviceResponseTimeLabel(device);
|
||||
const lastSeen = device.last_seen ? dateTime(device.last_seen) : tr('common.unavailable');
|
||||
@@ -82,11 +151,11 @@ function technicalDeviceCard(device) {
|
||||
const error = device.last_error ? `<div class="technical-device-error"><span>${esc(tr('devices.lastError'))}</span><strong title="${esc(device.last_error)}">${esc(device.last_error)}</strong></div>` : '';
|
||||
return `<article class="device-card technical-device-card" data-device-card="${esc(device.id)}">
|
||||
<div class="technical-device-head">
|
||||
<div class="device-title"><span class="eyebrow">${esc(tr('devices.technicalUnit'))}</span><h3>${esc(device.name)}</h3><p><span class="status ${device.online ? 'online' : ''}">${esc(tr(device.online ? 'status.online' : 'status.offline'))}</span> · ${esc(model)}</p></div>
|
||||
<button class="device-ping-button" type="button" data-action="open-ping" data-device="${esc(device.id)}" title="${esc(tr('devices.pingOpen'))}"><span>${esc(tr('devices.ping'))}</span><strong>${esc(responseTime)}</strong></button>
|
||||
<div class="device-title"><span class="eyebrow">${esc(tr('devices.technicalUnit'))} · ${esc(deviceTransportLabel(device))}</span><h3>${esc(device.name)}</h3><p><span class="status ${device.online ? 'online' : ''}">${esc(device.connection_type === 'gree_cloud' ? (device.connection_status || 'unknown').replaceAll('_', ' ') : tr(device.online ? 'status.online' : 'status.offline'))}</span> · ${esc(model)}</p></div>
|
||||
${device.connection_type === 'gree_cloud' ? `<span class="badge">GREE Cloud</span>` : `<button class="device-ping-button" type="button" data-action="open-ping" data-device="${esc(device.id)}" title="${esc(tr('devices.pingOpen'))}"><span>${esc(tr('devices.ping'))}</span><strong>${esc(responseTime)}</strong></button>`}
|
||||
</div>
|
||||
<div class="technical-device-grid">
|
||||
<div><span>${esc(tr('devices.address'))}</span><strong>${esc(device.ip)}:${esc(device.port)}</strong></div>
|
||||
<div><span>${esc(tr('devices.address'))}</span><strong>${device.connection_type === 'gree_cloud' ? 'GREE Cloud' : `${esc(device.ip)}:${esc(device.port)}`}</strong></div>
|
||||
<div><span>MAC</span><strong>${esc(device.mac)}</strong></div>
|
||||
<div><span>CID</span><strong>${esc(cid)}</strong></div>
|
||||
<div><span>${esc(tr('devices.protocol'))}</span><strong>${esc(protocol)}</strong></div>
|
||||
@@ -98,7 +167,43 @@ function technicalDeviceCard(device) {
|
||||
<div class="technical-device-actions">
|
||||
<button type="button" data-action="poll" data-device="${esc(device.id)}">${esc(tr('devices.readStatus'))}</button>
|
||||
<button type="button" data-action="rename-device" data-device="${esc(device.id)}">${esc(tr('devices.technicalConfig'))}</button>
|
||||
${device.simulated ? '' : `<button type="button" data-action="bind" data-device="${esc(device.id)}">${esc(tr('actions.bind'))}</button>`}
|
||||
<button type="button" data-action="energy-config" data-device="${esc(device.id)}">${esc(tr('energy.title'))}</button>
|
||||
${device.simulated || device.connection_type === 'gree_cloud' ? '' : `<button type="button" data-action="bind" data-device="${esc(device.id)}">${esc(tr('actions.bind'))}</button>`}
|
||||
<details class="card-overflow"><summary aria-label="${esc(tr('actions.more'))}" title="${esc(tr('actions.more'))}">•••</summary><div class="card-overflow-menu"><button class="danger" data-action="delete-device" data-device="${esc(device.id)}">${esc(tr('actions.delete'))}</button></div></details>
|
||||
</div>
|
||||
</article>`;
|
||||
}
|
||||
|
||||
function cloudTechnicalDeviceCard(device) {
|
||||
const lastSync = device.last_cloud_sync ? dateTime(device.last_cloud_sync) : tr('devices.noCloudSyncYet');
|
||||
const lastSeen = device.last_seen ? dateTime(device.last_seen) : tr('devices.noCloudResponseYet');
|
||||
const cloudId = device.cloud_device_id || device.mac || tr('common.unavailable');
|
||||
const status = deviceConnectionStatusLabel(device);
|
||||
const responseTime = deviceResponseTimeLabel(device);
|
||||
const modelCell = device.model ? `<div><span>${esc(tr('devices.model'))}</span><strong>${esc(device.model)}</strong></div>` : '';
|
||||
const firmwareCell = device.firmware ? `<div><span>${esc(tr('devices.firmware'))}</span><strong>${esc(device.firmware)}</strong></div>` : '';
|
||||
const error = device.last_error ? `<div class="technical-device-error"><span>${esc(tr('devices.lastError'))}</span><strong title="${esc(device.last_error)}">${esc(device.last_error)}</strong></div>` : '';
|
||||
return `<article class="device-card technical-device-card" data-device-card="${esc(device.id)}">
|
||||
<div class="technical-device-head">
|
||||
<div class="device-title"><span class="eyebrow">${esc(tr('devices.cloudUnit'))}</span><h3>${esc(device.name)}</h3><p><span class="status ${device.online ? 'online' : ''}">${esc(status)}</span> · GREE Cloud</p></div>
|
||||
<span class="badge">GREE Cloud</span>
|
||||
</div>
|
||||
<div class="technical-device-grid">
|
||||
<div><span>${esc(tr('devices.connection'))}</span><strong>GREE Cloud</strong></div>
|
||||
<div><span>${esc(tr('devices.transport'))}</span><strong>MQTT / TLS</strong></div>
|
||||
<div><span>${esc(tr('devices.cloudDeviceId'))}</span><strong>${esc(cloudId)}</strong></div>
|
||||
<div><span>MAC</span><strong>${esc(device.mac || cloudId)}</strong></div>
|
||||
${modelCell}
|
||||
${firmwareCell}
|
||||
<div><span>${esc(tr('devices.lastSync'))}</span><strong>${esc(lastSync)}</strong></div>
|
||||
<div><span>${esc(tr('devices.lastResponse'))}</span><strong>${esc(lastSeen)}</strong><small>${esc(responseTime)}</small></div>
|
||||
<div><span>${esc(tr('devices.communicationFailures'))}</span><strong>${esc(device.communication_failures ?? 0)}</strong></div>
|
||||
</div>
|
||||
${error}
|
||||
<div class="technical-device-actions">
|
||||
<button type="button" data-action="poll" data-device="${esc(device.id)}">${esc(tr('devices.readStatus'))}</button>
|
||||
<button type="button" data-action="cloud-details" data-device="${esc(device.id)}">${esc(tr('devices.cloudDetails'))}</button>
|
||||
<button type="button" data-action="cloud-diagnostics" data-device="${esc(device.id)}">${esc(tr('devices.cloudDiagnostics'))}</button>
|
||||
<details class="card-overflow"><summary aria-label="${esc(tr('actions.more'))}" title="${esc(tr('actions.more'))}">•••</summary><div class="card-overflow-menu"><button class="danger" data-action="delete-device" data-device="${esc(device.id)}">${esc(tr('actions.delete'))}</button></div></details>
|
||||
</div>
|
||||
</article>`;
|
||||
|
||||
Reference in New Issue
Block a user