diff --git a/custom_components/sigmesh_gateway/light.py b/custom_components/sigmesh_gateway/light.py index 977fc26..dff615e 100644 --- a/custom_components/sigmesh_gateway/light.py +++ b/custom_components/sigmesh_gateway/light.py @@ -8,7 +8,7 @@ from typing import Any from homeassistant import config_entries from homeassistant.components.light import ( ATTR_BRIGHTNESS, - ATTR_COLOR_TEMP, + ATTR_COLOR_TEMP_KELVIN, ATTR_RGB_COLOR, ColorMode, LightEntity, diff --git a/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js b/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js index ddfc427..dffabb0 100644 --- a/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js +++ b/custom_components/sigmesh_gateway/sigmesh-gateway-panel.js @@ -1,10 +1,8 @@ /** - * SigMesh Gateway 配网控制面板 - * - * 这是一个自定义 Lovelace 卡片，用于管理 SigMesh 网关的配网和分组功能 + * SigMesh Gateway 配网控制面板 - Lovelace 自定义卡片 * * 使用方法: - * 1. 将此文件保存到 HA 的 www/community/sigmesh_gateway/ 目录 + * 1. 将此文件复制到 HA 的 www/community/sigmesh_gateway/ 目录 * 2. 在 HA 的 configuration.yaml 中添加: * frontend: * extra_module_url: @@ -14,15 +12,32 @@ // 配置常量 const API_BASE = '/api/sigmesh_gateway'; -const POLL_INTERVAL = 3000; // 3 秒轮询一次 +const POLL_INTERVAL = 3000; /** - * 主面板组件 + * Lovelace 卡片组件 */ -class SigMeshGatewayPanel extends HTMLElement { +class SigMeshGatewayCard extends HTMLElement { + static get placeholder() { + return { + type: 'custom:sigmesh-gateway-panel', + label: 'SigMesh Gateway 配网管理' + }; + } + + static getConfigElement() { + // 返回配置元素（如果需要配置界面） + return document.createElement('div'); + } + + static getStubConfig() { + return {}; + } + constructor() { super(); this._hass = null; + this._config = null; this._state = 'idle'; this._devices = []; this._groups = []; @@ -33,6 +48,19 @@ class SigMeshGatewayPanel extends HTMLElement { set hass(hass) { this._hass = hass; + if (!this.hasAttribute('rendered')) { + this._render(); + this.setAttribute('rendered', 'true'); + } + this._updateState(); + } + + setConfig(config) { + this._config = config; + } + + getCardSize() { + return 10; } connectedCallback() { @@ -56,6 +84,8 @@ class SigMeshGatewayPanel extends HTMLElement { } async _fetchStatus() { + if (!this._hass) return; + try { const response = await fetch(`${API_BASE}/status`, { headers: { @@ -67,21 +97,52 @@ class SigMeshGatewayPanel extends HTMLElement { this._state = data.state; this._devices = data.devices || []; this._groups = data.groups || []; - this._render(); + this._updateState(); } catch (error) { console.error('获取状态失败:', error); } } + _updateState() { + if (!this.shadowRoot) return; + + // 更新状态徽章 + const statusBadge = this.shadowRoot.querySelector('.status-badge'); + if (statusBadge) { + statusBadge.textContent = this._state; + statusBadge.style.background = this._getStateColor(); + } + + // 更新设备列表 + this._renderDeviceList(); + + // 更新组列表 + this._renderGroupList(); + } + + _getStateColor() { + const colors = { + idle: '#4caf50', + scanning: '#2196f3', + prov_starting: '#ff9800', + prov_in_progress: '#ff9800', + prov_completed: '#4caf50', + prov_failed: '#f44336', + timeout: '#f44336', + }; + return colors[this._state] || '#757575'; + } + _render() { - this.innerHTML = ` + this.attachShadow({ mode: 'open' }); + + this.shadowRoot.innerHTML = ` -
-

SigMesh Gateway 配网管理

- ${this._state} -
+ +
+

SigMesh Gateway 配网管理

+ ${this._state} +
- ${this._renderScanSection()} - ${this._renderDeviceList()} - ${this._renderProvActions()} - ${this._renderGroupManagement()} - ${this._renderGroupList()} + ${this._renderScanSection()} + ${this._renderDeviceList()} + ${this._renderProvActions()} + ${this._renderGroupManagement()} + ${this._renderGroupList()} + `; this._attachEventListeners(); } - _getStateColor() { - const colors = { - idle: '#4caf50', - scanning: '#2196f3', - prov_starting: '#ff9800', - prov_in_progress: '#ff9800', - prov_completed: '#4caf50', - prov_failed: '#f44336', - timeout: '#f44336', - }; - return colors[this._state] || '#757575'; - } - _renderScanSection() { const isScanning = this._state === 'scanning'; return `
设备扫描
-
-
-