Update xiaoshi-pad-card.js

README.md

@@ -1,7 +1,7 @@
 # 消逝卡（平板端）
 ## 配置资源文件
 ~~~ 
-- url: /hacsfiles/xiaoshi-pad-card/xiaoshi-card.js
+- url: /hacsfiles/xiaoshi-pad-card/xiaoshi-pad-card.js
   type: module
 ~~~
 
@@ -24,18 +24,76 @@ max: 80                      # 当前地区最大值
 mode: 湿度                   # 【温度】或者【湿度】
 ~~~
 
-## 功能2：进度条
+## 功能2：HA信息卡(手机平板端通用)
 **引用示例**
 ~~~
-type: custom:xiaoshi-pad-slider-card
-entity: number.xxxxxxx
-style:
-  slider-width: 110px                 # 总宽度，默认100px
-  slider-height: 10px                 # 总高度，默认30px
-  track-color: rgba(200,200,200,0.5)  # 背景色，默认rgba(255,255,255,0.3)
-  thumb-size: 15px                    # 进度点大小，默认15px
-  thumb-color: rgb(255,255,255)       # 进度点颜色，默认，白色
-  slider-color: rgb(25,155,125)       # 进度条背景色，默认，浅蓝色
-  track-height: 20px                  # 进度条高度，默认5px
-  track-radius: 4px                   # 圆角大小，默认2px
+type: custom:xiaoshi-update-card
+width: 100%
+skip_updates: false    #是否包含已跳过的更新
+theme: on
+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-pad-card.js

@@ -1,8 +1,15 @@
-console.info("%c 消逝卡-平板端 \n%c      v 0.0.0 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
+console.info("%c 消逝卡-平板端 \n%c      v 0.1.8 ", "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-pad-slider-card.js');
+    await import('./xiaoshi-device-balance-card.js');
+    await import('./xiaoshi-device-balance-button.js');
+    await import('./xiaoshi-device-todo-card.js');
+    await import('./xiaoshi-device-todo-button.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-ha-info-button.js'); 
     
     window.customCards = window.customCards || [];
     window.customCards.push(...cardConfigs);
@@ -15,10 +22,53 @@ const cardConfigs = [
     description: '温度分布、湿度分布'
   },
   {
-    type: 'xiaoshi-pad-slider-card',
-    name: '消逝卡(平板端)-进度条',
-    description: '进度条'
+    type: 'xiaoshi-ha-info-card',
+    name: '消逝HA信息卡片',
+    description: '消逝HA信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-ha-info-button',
+    name: '消逝HA信息按钮',
+    description: '消逝HA信息按钮',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-balance-card',
+    name: '消逝余额信息卡片',
+    description: '消逝余额信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-balance-button',
+    name: '消逝余额信息按钮',
+    description: '消逝余额信息按钮',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-todo-card',
+    name: '消逝待办信息卡片',
+    description: '消逝待办信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-todo-button',
+    name: '消逝待办信息按钮',
+    description: '消逝待办信息按钮',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-consumables-card',
+    name: '消逝耗材信息卡片',
+    description: '消逝耗材信息卡片',
+    preview: true
+  },
+  {
+    type: 'xiaoshi-consumables-button',
+    name: '消逝耗材信息按钮',
+    description: '消逝耗材信息按钮',
+    preview: true
   }
 ];
 
-loadCards();
+loadCards();

xiaoshi-pad-slider-card.js

@@ -1,163 +0,0 @@
-import { LitElement, html, css } from "https://unpkg.com/lit-element@2.4.0/lit-element.js?module";
-
-export class XiaoshiPadSliderCard extends LitElement {
-  static get properties() {
-    return {
-      hass: Object,
-      config: Object,
-      _value: Number,
-      _min: Number,
-      _max: Number,
-      _dragging: Boolean
-    };
-  }
-
-  static get styles() {
-    return css`
-      .slider-root {
-        position: relative;
-        width: var(--slider-width, 100%);
-        height: var(--slider-height, 30px);
-        touch-action: none;
-      }
-      .slider-track {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 100%;
-        height: var(--track-height, 5px);
-        background: var(--track-color, rgba(255,255,255,0.3));
-        border-radius: var(--track-radius, 2px);
-      }
-      .slider-fill {
-        position: absolute;
-        height: 100%;
-        background: var(--slider-color, #f00);
-        border-radius: inherit;
-      }
-      .slider-thumb {
-        position: absolute;
-        top: 50%;
-        width: var(--thumb-size, 15px);
-        height: var(--thumb-size, 15px);
-        background: var(--thumb-color, #fff);
-        border-radius: 50%;
-        transform: translate(-50%, -50%);
-        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-      }
-    `;
-  }
-
-  constructor() {
-    super();
-    this._value = 0;
-    this._min = 0;
-    this._max = 100;
-    this._dragging = false;
-    this._startX = 0;
-    this._startValue = 0;
-    this._moveHandler = (e) => this._handleDrag(e);
-    this._endHandler = () => this._endDrag();
-  }
-
-  setConfig(config) {
-    if (!config.entity) throw new Error('必须指定实体');
-    this.config = config;
-    if (config.style) {
-      Object.keys(config.style).forEach(key => {
-        this.style.setProperty(`--${key}`, config.style[key]);
-      });
-    }
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('hass')) {
-      const state = this.hass.states[this.config.entity];
-      if (state) {
-        this._value = Number(state.state);
-        this._min = Number(state.attributes.min || 0);
-        this._max = Number(state.attributes.max || 100);
-      }
-    }
-  }
-
-  render() {
-    const percent = Math.max(0, Math.min(100, (this._value - this._min) / (this._max - this._min) * 100));
-    return html`
-      <div class="slider-root"\n
-           @mousedown=${this._startDrag}\n
-           @touchstart=${this._startDrag}>
-        <div class="slider-track">
-          <div class="slider-fill"\nstyle="width: ${percent}%"></div>
-          <div class="slider-thumb"\nstyle="left: ${percent}%"></div>
-        </div>
-      </div>
-    `;
-  }
-
-  _startDrag(e) {
-    e.preventDefault();
-    this._dragging = true;
-    const slider = this.shadowRoot.querySelector('.slider-track');
-    const rect = slider.getBoundingClientRect();
-    this._sliderLeft = rect.left;
-    this._sliderWidth = rect.width;
-    window.addEventListener('mousemove', this._moveHandler);
-    window.addEventListener('touchmove', this._moveHandler, { passive: false });
-    window.addEventListener('mouseup', this._endHandler);
-    window.addEventListener('touchend', this._endHandler);
-    const clientX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
-    this._updateValue((clientX - this._sliderLeft) / this._sliderWidth);
-  }
-
-  _endDrag() {
-    if (!this._dragging) return;
-    this._dragging = false;
-    this._removeEventListeners();
-  }
-
-  _handleDrag(e) {
-    if (!this._dragging) return;
-    e.preventDefault();
-    const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
-    this._updateValue((clientX - this._sliderLeft) / this._sliderWidth);
-  }
-
-  _removeEventListeners() {
-    window.removeEventListener('mousemove', this._moveHandler);
-    window.removeEventListener('touchmove', this._moveHandler);
-    window.removeEventListener('mouseup', this._endHandler);
-    window.removeEventListener('touchend', this._endHandler);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._removeEventListeners();
-  }
-  
-  _updateValue(ratio) {
-    const safeRatio = Math.max(0, Math.min(1, ratio));
-    const newValue = this._min + safeRatio * (this._max - this._min);
-    const roundedValue = Math.round(newValue);
-    if (roundedValue !== this._value) {
-      this._value = roundedValue;
-      this._debouncedSetValue(roundedValue);
-    }
-  }
-
-  _debouncedSetValue(value) {
-    clearTimeout(this._debounceTimer);
-    this._debounceTimer = setTimeout(() => {
-      this._callService(value);
-    }, 50);
-  }
-
-  _callService(value) {
-    const service = this.config.entity.split('.')[0];
-    this.hass.callService(service, 'set_value', {
-      entity_id: this.config.entity,
-      value: value
-    });
-  }
-}
-customElements.define('xiaoshi-pad-slider-card', XiaoshiPadSliderCard);