Update xiaoshi-device-update-card.js

README.md

@@ -24,21 +24,76 @@ max: 80                      # 当前地区最大值
 mode: 湿度                   # 【温度】或者【湿度】
 ~~~
 
-## 功能2：HA版本更新卡(手机平板端通用)
+## 功能2：HA信息卡(手机平板端通用)
 **引用示例**
 ~~~
 type: custom:xiaoshi-update-card
-width: 100p%  
+width: 100%
+skip_updates: false    #是否包含已跳过的更新
 theme: on
-~~~
-
-## 功能3：HA离线设备卡(手机平板端通用)
-**引用示例**
-~~~
-type: custom:xiaoshi-offline-card
-width: 320px
 exclude_devices:
   - *设备*
 exclude_entities:
   - *shiti*
 ~~~
+
+## 功能3：电话信息余额卡(手机平板端通用)
+**引用示例**
+~~~
+type: custom:xiaoshi-balance-card
+name: 电话余额信息
+width: 100%
+theme: on
+entities:
+  - entity_id: sensor.999
+    attribute: null
+    overrides:
+      icon: ""
+      name: ""
+      unit_of_measurement: ""
+      warning: ""
+  - entity_id: input_boolean.777
+    attribute: friendly_name
+    overrides:
+      name: ""
+      icon: ""
+      unit_of_measurement: ""
+      warning: "99"
+~~~
+
+## 功能4：待办事项卡(手机平板端通用)
+**引用示例**
+~~~
+type: custom:xiaoshi-todo-card
+width: 100%
+theme: on
+entities:
+  - todo.kuai_di
+  - todo.ji_shi_ben
+~~~
+
+## 功能5：耗材信息卡片(手机平板端通用)
+**引用示例**
+~~~
+type: custom:xiaoshi-consumables-card
+width: 100%
+global_warning: <8
+columns: "2"
+entities:
+  - entity_id: input_text.aaa
+    overrides:
+      name: 奥斯卡德拉萨达实打实实打实
+      unit_of_measurement: "%"
+      warning: <10
+      conversion: "*2"
+      icon: ""
+  - entity_id: input_text.aaa1
+  - entity_id: input_text.aaa2
+  - entity_id: input_text.aaa3
+  - entity_id: input_text.aaa4
+  - entity_id: input_text.aaa5
+  - entity_id: input_text.aaa6
+  - entity_id: input_text.aaa7
+~~~
+
+

xiaoshi-device-offline-card.js

@@ -281,7 +281,7 @@ export class XiaoshiOfflineCard extends LitElement {
         align-items: center;
         padding: 0px;
         border-bottom: 1px solid rgb(150,150,150,0.2);
-        margin: 0 32px 8px 32px;
+        margin: 0 32px 0px 32px;
       }
 
       /*设备、实体明细背景*/
@@ -289,7 +289,7 @@ export class XiaoshiOfflineCard extends LitElement {
         flex: 1;
         overflow-y: auto;
         min-height: 0;
-        padding: 0 0 8px  0;
+        padding: 0 0 8px 0;
       }
 
       .device-icon {
@@ -304,7 +304,7 @@ export class XiaoshiOfflineCard extends LitElement {
       .device-name {
         font-weight: 500;
         color: var(--fg-color, #000);
-        margin-bottom: 4px;
+        padding: 6px 0 0 0;
       }
 
       .device-entity {
@@ -316,7 +316,6 @@ export class XiaoshiOfflineCard extends LitElement {
       .device-details {
         font-size: 10px;
         color: var(--fg-color, #000);
-        margin-top: 4px;
       }
 
       .device-last-seen {
@@ -327,7 +326,7 @@ export class XiaoshiOfflineCard extends LitElement {
 
       .no-devices {
         text-align: center;
-        padding: 0px;
+        padding: 8px 0 0 0;
         color: var(--fg-color, #000);
       }
 
@@ -426,6 +425,12 @@ export class XiaoshiOfflineCard extends LitElement {
 
       const offlineDevices = [];
 
+      // 获取设备排除模式
+      const excludeDevicePatterns = this.config.exclude_devices || [];
+      
+      // 记录被排除的设备ID集合
+      const excludedDeviceIds = new Set();
+      
       // 并行检查所有设备
       const deviceChecks = devices.map(device => {
         const deviceEntities = entitiesByDevice[device.id] || [];
@@ -435,12 +440,6 @@ export class XiaoshiOfflineCard extends LitElement {
           isOffline: this._checkDeviceAvailabilitySync(device, deviceEntities, entityMap)
         };
       });
-
-      // 获取设备排除模式
-      const excludeDevicePatterns = this.config.exclude_devices || [];
-      
-      // 记录被排除的设备ID集合
-      const excludedDeviceIds = new Set();
       
       // 过滤离线设备并构建数据
       deviceChecks.forEach(({ device, deviceEntities, isOffline }) => {
@@ -454,16 +453,25 @@ export class XiaoshiOfflineCard extends LitElement {
             return; // 跳过匹配排除模式的设备
           }
           
-          offlineDevices.push({
-            device_id: device.id,
-            name: deviceName,
-            model: device.model,
-            manufacturer: device.manufacturer,
-            area_id: device.area_id,
-            entities: deviceEntities,
-            last_seen: this._getDeviceLastSeen(deviceEntities, entityMap),
-            icon: this._getDeviceIcon(device, deviceEntities)
+          // 再次确保设备有有效实体
+          const validEntities = deviceEntities.filter(entityReg => {
+            const entity = entityMap[entityReg.entity_id];
+            return entity && !entityReg.disabled_by;
           });
+          
+          // 只有当设备有有效实体时才添加到离线设备列表
+          if (validEntities.length > 0) {
+            offlineDevices.push({
+              device_id: device.id,
+              name: deviceName,
+              model: device.model,
+              manufacturer: device.manufacturer,
+              area_id: device.area_id,
+              entities: validEntities, // 使用有效实体而不是所有实体
+              last_seen: this._getDeviceLastSeen(validEntities, entityMap),
+              icon: this._getDeviceIcon(device, validEntities)
+            });
+          }
         }
       });
 
@@ -538,7 +546,7 @@ export class XiaoshiOfflineCard extends LitElement {
 
   _checkDeviceAvailabilitySync(device, deviceEntities, entityMap) {
     if (!deviceEntities || deviceEntities.length === 0) {
-      return true; // 没有实体的设备视为离线
+      return false; // 没有实体的设备不视为离线，直接排除
     }
 
     // 检查设备的可用性状态
@@ -546,16 +554,23 @@ export class XiaoshiOfflineCard extends LitElement {
       return false; // 被禁用的设备不算离线
     }
 
+    // 过滤出有效的实体（未被禁用且在entityMap中存在）
+    const validEntities = deviceEntities.filter(entityReg => {
+      const entity = entityMap[entityReg.entity_id];
+      return entity && !entityReg.disabled_by;
+    });
+
+    // 如果没有有效实体，则不视为离线设备，直接排除
+    if (validEntities.length === 0) {
+      return false;
+    }
+
     let hasAvailableEntity = false;
     let hasUnavailableEntity = false;
 
-    for (const entityReg of deviceEntities) {
+    for (const entityReg of validEntities) {
       const entity = entityMap[entityReg.entity_id];
-      if (!entity) continue;
-
-      // 跳过被禁用的实体
-      if (entityReg.disabled_by) continue;
-
+      
       if (entity.state !== 'unavailable' ) {
         hasAvailableEntity = true;
         break; // 找到一个可用实体就可以停止检查
@@ -564,7 +579,7 @@ export class XiaoshiOfflineCard extends LitElement {
       }
     }
 
-    // 如果设备有实体但所有实体都不可用，则设备离线
+    // 如果设备有有效实体但所有实体都不可用，则设备离线
     return hasUnavailableEntity && !hasAvailableEntity;
   }
 
@@ -652,12 +667,12 @@ export class XiaoshiOfflineCard extends LitElement {
   }
 
   _handleRefresh() {
+    this._handleClick();
     this._loadOfflineDevices();
-    navigator.vibrate(50);
   }
 
   _handleDeviceClick(device) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击设备时跳转到设备详情页
     if (device.device_id) {
       // 先关闭当前弹窗/界面
@@ -681,7 +696,7 @@ export class XiaoshiOfflineCard extends LitElement {
   }
   
   _handleEntityClick(entity) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击实体时打开实体详情页
     if (entity.entity_id) {
       // 使用您建议的第一种方式
@@ -690,7 +705,18 @@ export class XiaoshiOfflineCard extends LitElement {
       this.dispatchEvent(evt);
     }
   }
-  
+
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   _closeCurrentDialog() {
     // 查找并关闭当前可能的弹窗或对话框
     const dialogs = document.querySelectorAll('ha-dialog, .mdc-dialog, paper-dialog, vaadin-dialog');

xiaoshi-device-update-card.js

@@ -68,6 +68,19 @@ class XiaoshiUpdateCardEditor extends LitElement {
           </select>
         </div>
         
+        <div class="form-group">
+          <label>
+            <input 
+              type="checkbox" 
+              @change=${this._entityChanged}
+              .checked=${this.config.skip_updates !== false}
+              name="skip_updates"
+            />
+            包含已跳过的更新
+          </label>
+          <div class="help-text">如果勾选，将包含标记为跳过的版本更新</div>
+        </div>
+        
 
       </div>
 
@@ -75,10 +88,17 @@ class XiaoshiUpdateCardEditor extends LitElement {
   }
 
   _entityChanged(e) {
-    const { name, value } = e.target;
-    if (!value && name !== 'theme' && name !== 'width') return;
+    const { name, value, type, checked } = e.target;
     
-    let finalValue = value;
+    let finalValue;
+    
+    // 处理复选框
+    if (type === 'checkbox') {
+      finalValue = checked;
+    } else {
+      if (!value && name !== 'theme' && name !== 'width') return;
+      finalValue = value;
+    }
     
     // 处理不同字段的默认值
     if (name === 'width') {
@@ -139,7 +159,6 @@ export class XiaoshiUpdateCard extends LitElement {
         align-items: center;
         padding: 16px;
         background: var(--bg-color, #fff);
-        
         border-radius: 12px;
       }
 
@@ -169,7 +188,6 @@ export class XiaoshiUpdateCard extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-
       }
 
       /*标题统计数字*/
@@ -251,7 +269,8 @@ export class XiaoshiUpdateCard extends LitElement {
         align-items: center;
         padding: 0px;
         border-bottom: 1px solid rgb(150,150,150,0.2);
-        margin: 0 24px 8px 32px;
+        margin: 0 32px 4px 32px;
+        padding: 4px 0 0 0;
       }
 
       /*设备、实体明细背景*/
@@ -259,7 +278,7 @@ export class XiaoshiUpdateCard extends LitElement {
         flex: 1;
         overflow-y: auto;
         min-height: 0;
-        padding: 0 0 8px  0;
+        padding: 4px 0;
       }
 
       .device-icon {
@@ -274,7 +293,7 @@ export class XiaoshiUpdateCard extends LitElement {
       .device-name {
         font-weight: 500;
         color: var(--fg-color, #000);
-        margin-bottom: 4px;
+        margin: 2px 0;
       }
 
       .device-entity {
@@ -286,7 +305,6 @@ export class XiaoshiUpdateCard extends LitElement {
       .device-details {
         font-size: 10px;
         color: var(--fg-color, #000);
-        margin-top: 4px;
       }
 
       .device-last-seen { 
@@ -307,13 +325,13 @@ export class XiaoshiUpdateCard extends LitElement {
 
       .no-devices {
         text-align: center;
-        padding: 0px;
+        padding: 8px 0;
         color: var(--fg-color, #000);
       }
 
       .loading {
         text-align: center;
-        padding: 0px;
+        padding: 10px 0px;
         color: var(--fg-color, #000);
       }
 
@@ -342,6 +360,10 @@ export class XiaoshiUpdateCard extends LitElement {
         text-overflow: ellipsis;
       }
 
+      .current-version.outdated {
+        color: rgb(255,20,0);
+      }
+
       .latest-version {
         color: var(--fg-color, #000);
         font-size: 10px;
@@ -385,12 +407,12 @@ export class XiaoshiUpdateCard extends LitElement {
       /* 备份信息独立容器 */
       .backup-info {
         padding: 4px 0 4px 16px;
-        margin: 0 16px 0 30px;
-        border-bottom: 1px solid rgb(150,150,150,0.2);
+        margin: 0 32px 8px 32px;
         display: grid;
         grid-template-columns: auto auto auto;
         gap: 4px;
         align-items: center;
+        border-bottom: 1px solid rgb(150,150,150,0.2);
       }
     `;
   }
@@ -445,6 +467,28 @@ export class XiaoshiUpdateCard extends LitElement {
     }
   }
 
+  _handleEntityClick(entity) {
+    this._handleClick();
+    // 点击实体时打开实体详情页
+    if (entity.entity_id) {
+      // 使用您建议的第一种方式
+      const evt = new Event('hass-more-info', { composed: true });
+      evt.detail = { entityId: entity.entity_id };
+      this.dispatchEvent(evt);
+    }
+  }
+
+  _handleClick(){
+    if (navigator.vibrate) {
+      navigator.vibrate(50);
+    }
+    else if (navigator.webkitVibrate) {
+        navigator.webkitVibrate(50); 
+    }
+    else {
+    }
+  }
+
   async _loadUpdateData() {
     if (!this.hass) return;
     
@@ -455,19 +499,10 @@ export class XiaoshiUpdateCard extends LitElement {
       const haUpdates = [];
       const otherUpdates = [];
 
-      
-
-      
-
-      
-
-      
-
-      
-
       // 获取update.开头的实体更新信息
       try {
         const entities = Object.values(this.hass.states);
+        const skipUpdates = this.config.skip_updates !== false; // 默认为true
         
         entities.forEach(entity => {
           // 筛选以update.开头的实体
@@ -480,6 +515,20 @@ export class XiaoshiUpdateCard extends LitElement {
                 attributes.installed_version &&
                 attributes.latest_version !== attributes.installed_version) {
               
+              // 如果不跳过更新，检查skipped_version属性
+              if (!skipUpdates) {
+                const skippedVersion = attributes.skipped_version;
+                // 如果skipped_version不为null且等于latest_version，则跳过此更新
+                if (skippedVersion !== null && skippedVersion === attributes.latest_version) {
+                  return; // 跳过此更新
+                }
+              }
+              // 新增规则：如果skipped_version为null情况下，当latest_version !== installed_version时，
+              // 且实体状态为off时，有可能是安装的版本比latest_version还高，这种不算更新的实体
+              if (attributes.skipped_version === null && entity.state === 'off') {
+                return; // 跳过此更新
+              }
+              
               const updateData = {
                 name: attributes.friendly_name || entity.entity_id.replace('update.', ''),
                 current_version: attributes.installed_version,
@@ -489,7 +538,8 @@ export class XiaoshiUpdateCard extends LitElement {
                 entity_id: entity.entity_id,
                 title: attributes.title || '',
                 release_url: attributes.release_url || '',
-                entity_picture: attributes.entity_picture || ''
+                entity_picture: attributes.entity_picture || '',
+                skipped_version: attributes.skipped_version || null
               };
               
               // 检查是否为home_assistant开头的实体
@@ -517,17 +567,13 @@ export class XiaoshiUpdateCard extends LitElement {
     this._loading = false;
   }
 
-
-
   _handleRefresh() {
+    this._handleClick();
     this._loadUpdateData();
-    navigator.vibrate(50);
   }
-
-
   
   _handleUpdateClick(update) {
-    navigator.vibrate(50);
+    this._handleClick();
     // 点击更新项时弹出实体详情
     
     // 如果有entity_id，弹出实体详情
@@ -549,13 +595,17 @@ export class XiaoshiUpdateCard extends LitElement {
   _handleConfirmUpdate(update, event) {
     event.stopPropagation(); // 阻止事件冒泡
     event.preventDefault(); // 阻止默认行为
-    navigator.vibrate(50);
+    this._handleClick();
     
     // 弹出确认对话框
     const confirmed = confirm(`确认要更新 ${update.name} 吗？\n当前版本: ${update.current_version}\n最新版本: ${update.latest_version}`);
     
     if (confirmed) {
       this._executeUpdate(update);
+      // 延迟3秒后刷新数据，给更新操作足够时间完成
+      setTimeout(() => {
+        this._loadUpdateData();
+      }, 1000);
     }
   }
 
@@ -690,9 +740,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (osEntity) {
       const current = osEntity.attributes.installed_version || '未知';
       const latest = osEntity.attributes.latest_version || '未知';
+      const osCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">OS</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${osCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }
@@ -702,9 +753,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (coreEntity) {
       const current = coreEntity.attributes.installed_version || '未知';
       const latest = coreEntity.attributes.latest_version || '未知';
+      const coreCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">Core</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${coreCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }
@@ -714,9 +766,10 @@ export class XiaoshiUpdateCard extends LitElement {
     if (supervisorEntity) {
       const current = supervisorEntity.attributes.installed_version || '未知';
       const latest = supervisorEntity.attributes.latest_version || '未知';
+      const supervisorCurrentVersionClass = (current !== '未知' && latest !== '未知' && current !== latest) ? 'outdated' : '';
       versionElements.push(html`
         <div class="version-label">Supervisor</div>
-        <div class="current-version">当前版本：${current}</div>
+        <div class="current-version ${supervisorCurrentVersionClass}">当前版本：${current}</div>
         <div class="latest-version">最新版本：${latest}</div>
       `);
     }
@@ -758,9 +811,6 @@ export class XiaoshiUpdateCard extends LitElement {
     return html`${backupElements}`;
   }
 
-
-
-
   render() {
     if (!this.hass) {
       return html`<div class="loading">等待Home Assistant连接...</div>`;
@@ -797,19 +847,9 @@ export class XiaoshiUpdateCard extends LitElement {
           ${this._renderHAVersionInfo()}
         </div>
         
-        <!-- 备份信息 -->
-        <div class="section-divider">
-          <div class="section-title">
-            <span> • 备份信息</span>
-          </div>
-        </div>
-        <div class="backup-info">
-          ${this._renderBackupInfo()}
-        </div>
-        
         <div class="devices-list">
           ${this._loading ? 
-            html`<div class="loading">加载中...</div>` :
+            html`<div class="loading">HA版本信息加载中...</div>` :
             
             (this._haUpdates.length === 0 && this._otherUpdates.length === 0) ? 
               html`<div class="no-devices">✅ 所有组件都是最新版本</div>` :
@@ -822,7 +862,7 @@ export class XiaoshiUpdateCard extends LitElement {
                     </div>
                   </div>
                   ${this._haUpdates.map(update => html`
-                    <div class="device-item">
+                    <div class="device-item" @click=${() => this._handleEntityClick(update)}>
                       <div class="device-icon">
                         <ha-icon icon="${update.icon}"></ha-icon>
                       </div>
@@ -830,6 +870,7 @@ export class XiaoshiUpdateCard extends LitElement {
                         <div class="device-name">${update.name}</div>
                         <div class="device-details">
                           当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
+                          ${update.skipped_version ? html`<br><span style="color: #ff9800;">已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
                       <div class="device-last-seen" @click=${(e) => this._handleConfirmUpdate(update, e)}>
@@ -841,12 +882,12 @@ export class XiaoshiUpdateCard extends LitElement {
                 ${this._otherUpdates.length > 0 ? html`
                   <div class="section-divider">
                     <div class="section-title">
-                      <span> • 加载项、卡片更新</span>
+                      <span> • HACS更新</span>
                       <span class="section-count ${this._otherUpdates.length > 0 ? 'non-zero' : 'zero'}">${this._otherUpdates.length}</span>
                     </div>
                   </div>
                   ${this._otherUpdates.map(update => html`
-                    <div class="device-item">
+                    <div class="device-item" @click=${() => this._handleEntityClick(update)}>
                       <div class="device-icon">
                         <ha-icon icon="${update.icon}"></ha-icon>
                       </div>
@@ -854,6 +895,7 @@ export class XiaoshiUpdateCard extends LitElement {
                         <div class="device-name">${update.name}</div>
                         <div class="device-details">
                           当前版本: ${update.current_version} → 最新版本: ${update.latest_version}
+                          ${update.skipped_version ? html`<br><span style="color: #ff9800;"> 已跳过版本: ${update.skipped_version}</span>` : ''}
                         </div>
                       </div>
                       <div class="device-last-seen" @click=${(e) => this._handleConfirmUpdate(update, e)}>
@@ -863,8 +905,18 @@ export class XiaoshiUpdateCard extends LitElement {
                   `)}\n                ` : ''}
               `
           }
+
         </div>
-      </ha-card>
+        <!-- 备份信息 -->
+        <div class="section-divider">
+          <div class="section-title">
+            <span> • 备份信息</span>
+          </div>
+        </div>
+        <div class="backup-info">
+          ${this._renderBackupInfo()}
+        </div>
+        </ha-card>
     `;
   }
 

xiaoshi-pad-card.js

@@ -1,7 +1,12 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.0.1 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.1.5 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
 
 const loadCards = async () => {
     await import('./xiaoshi-pad-grid-card.js');
+    await import('./xiaoshi-device-balance-card.js');
+    await import('./xiaoshi-device-todo-card.js');
+    await import('./xiaoshi-device-consumables-card.js');
+    await import('./xiaoshi-device-consumables-button.js');
+    await import('./xiaoshi-device-ha-info-card.js'); 
     await import('./xiaoshi-device-update-card.js');
     await import('./xiaoshi-device-offline-card.js');
     
@@ -16,15 +21,27 @@ const cardConfigs = [
     description: '温度分布、湿度分布'
   },
   {
-    type: 'xiaoshi-update-card',
-    name: '消逝卡HA更新监控卡片',
-    description: '显示需要更新的组件和版本',
+    type: 'xiaoshi-ha-info-card',
+    name: '消逝卡HA信息卡片',
+    description: '消逝卡HA信息卡片',
     preview: true
   },
   {
-    type: 'xiaoshi-offline-card',
-    name: '消逝卡HA离线设备卡片',
-    description: '显示所有离线的设备和实体',
+    type: 'xiaoshi-balance-card',
+    name: '消逝电话余额卡',
+    description: '消逝电话余额卡',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-todo-card',
+    name: '消逝待办事项',
+    description: '消逝待办事项',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-consumables-card',
+    name: '消逝耗材统计',
+    description: '消逝耗材统计',
     preview: true
   }
 ];