forked from HomeAssistant/xiaoshi-pad-card
Compare commits
9 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
53e06aacf7 | ||
|
|
9a59c2bb90 | ||
|
|
0ae5851361 | ||
|
|
a17033c0f0 | ||
|
|
44a1d81265 | ||
|
|
2de0668d37 | ||
|
|
a03a54663b | ||
|
|
6efa2864cc | ||
|
|
f4a37ff29c |
40
README.md
40
README.md
@@ -28,7 +28,7 @@ mode: 湿度 # 【温度】或者【湿度】
|
||||
**引用示例**
|
||||
~~~
|
||||
type: custom:xiaoshi-update-card
|
||||
width: 100p%
|
||||
width: 100%
|
||||
theme: on
|
||||
~~~
|
||||
|
||||
@@ -36,9 +36,45 @@ theme: on
|
||||
**引用示例**
|
||||
~~~
|
||||
type: custom:xiaoshi-offline-card
|
||||
width: 320px
|
||||
width: 100%
|
||||
theme: on
|
||||
exclude_devices:
|
||||
- *设备*
|
||||
exclude_entities:
|
||||
- *shiti*
|
||||
~~~
|
||||
|
||||
## 功能4:电话信息余额卡(手机平板端通用)
|
||||
**引用示例**
|
||||
~~~
|
||||
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
|
||||
~~~
|
||||
|
||||
@@ -91,6 +91,7 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.entity-details {
|
||||
@@ -146,10 +147,14 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.attribute-config {
|
||||
margin-top: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.attribute-input {
|
||||
@@ -161,6 +166,32 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.override-config {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.override-checkbox {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.override-input {
|
||||
flex: 1;
|
||||
padding: 2px 6px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.override-label {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
@@ -205,18 +236,7 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>预警值:低于此值的金额将显示为红色</label>
|
||||
<input
|
||||
type="number"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.warning !== undefined ? this.config.warning : 20}
|
||||
name="warning"
|
||||
placeholder="默认20"
|
||||
min="0"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label>主题</label>
|
||||
@@ -249,11 +269,11 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
@click=${() => this._toggleEntity(entity.entity_id)}
|
||||
>
|
||||
<div class="entity-info">
|
||||
<ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
|
||||
<div class="entity-details">
|
||||
<div class="entity-name">${entity.attributes.friendly_name || entity.entity_id}</div>
|
||||
<div class="entity-id">${entity.entity_id}</div>
|
||||
</div>
|
||||
<ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
|
||||
</div>
|
||||
${this.config.entities && this.config.entities.some(e => e.entity_id === entity.entity_id) ?
|
||||
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
|
||||
@@ -273,8 +293,8 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
return html`
|
||||
<div class="selected-entity-config">
|
||||
<div class="selected-entity">
|
||||
<ha-icon icon="${entity?.attributes.icon || 'mdi:help-circle'}"></ha-icon>
|
||||
<span>${entity?.attributes.friendly_name || entityConfig.entity_id}</span>
|
||||
<ha-icon icon="${entity?.attributes.icon || 'mdi:help-circle'}"></ha-icon>
|
||||
<button class="remove-btn" @click=${() => this._removeEntity(index)}>
|
||||
<ha-icon icon="mdi:close"></ha-icon>
|
||||
</button>
|
||||
@@ -287,6 +307,80 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
placeholder="留空使用实体状态,或输入属性名"
|
||||
class="attribute-input"
|
||||
/>
|
||||
|
||||
<div class="override-config">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="override-checkbox"
|
||||
@change=${(e) => this._updateEntityOverride(index, 'icon', e.target.checked)}
|
||||
.checked=${entityConfig.overrides?.icon !== undefined}
|
||||
/>
|
||||
<span class="override-label">图标:</span>
|
||||
<input
|
||||
type="text"
|
||||
class="override-input"
|
||||
@change=${(e) => this._updateEntityOverrideValue(index, 'icon', e.target.value)}
|
||||
.value=${entityConfig.overrides?.icon || ''}
|
||||
placeholder="mdi:icon-name"
|
||||
?disabled=${entityConfig.overrides?.icon === undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="override-config">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="override-checkbox"
|
||||
@change=${(e) => this._updateEntityOverride(index, 'name', e.target.checked)}
|
||||
.checked=${entityConfig.overrides?.name !== undefined}
|
||||
/>
|
||||
<span class="override-label">名称:</span>
|
||||
<input
|
||||
type="text"
|
||||
class="override-input"
|
||||
@change=${(e) => this._updateEntityOverrideValue(index, 'name', e.target.value)}
|
||||
.value=${entityConfig.overrides?.name || ''}
|
||||
placeholder="自定义名称"
|
||||
?disabled=${entityConfig.overrides?.name === undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="override-config">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="override-checkbox"
|
||||
@change=${(e) => this._updateEntityOverride(index, 'unit_of_measurement', e.target.checked)}
|
||||
.checked=${entityConfig.overrides?.unit_of_measurement !== undefined}
|
||||
/>
|
||||
<span class="override-label">单位:</span>
|
||||
<input
|
||||
type="text"
|
||||
class="override-input"
|
||||
@change=${(e) => this._updateEntityOverrideValue(index, 'unit_of_measurement', e.target.value)}
|
||||
.value=${entityConfig.overrides?.unit_of_measurement || ''}
|
||||
placeholder="自定义单位"
|
||||
?disabled=${entityConfig.overrides?.unit_of_measurement === undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="override-config">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="override-checkbox"
|
||||
@change=${(e) => this._updateEntityOverride(index, 'warning', e.target.checked)}
|
||||
.checked=${entityConfig.overrides?.warning !== undefined}
|
||||
/>
|
||||
<span class="override-label">预警:</span>
|
||||
<input
|
||||
type="number"
|
||||
class="override-input"
|
||||
@change=${(e) => this._updateEntityOverrideValue(index, 'warning', e.target.value)}
|
||||
.value=${entityConfig.overrides?.warning || ''}
|
||||
placeholder="预警值"
|
||||
min="0"
|
||||
step="0.01"
|
||||
?disabled=${entityConfig.overrides?.warning === undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -294,10 +388,13 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="help-text">
|
||||
搜索并选择要显示的设备余额实体,支持多选。每个实体可以配置要显示的属性:<br>
|
||||
• 留空:显示实体的状态值<br>
|
||||
• 输入属性名:显示指定属性的值<br>
|
||||
• 单位会自动从实体的 unit_of_measurement 属性获取,默认为"元"
|
||||
搜索并选择要显示的设备余额实体,支持多选。每个实体可以配置:<br>
|
||||
• 属性名:留空使用实体状态,或输入属性名<br>
|
||||
• 名称重定义:勾选后可自定义显示名称<br>
|
||||
• 图标重定义:勾选后可自定义图标(如 mdi:phone)<br>
|
||||
• 单位重定义:勾选后可自定义单位(如 元、$、kWh 等)<br>
|
||||
• 预警值:勾选后设置预警值,低于此值显示红色<br>
|
||||
• 未勾选重定义时,将使用实体的原始属性值
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -358,7 +455,11 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
newEntities = currentEntities.filter(e => e.entity_id !== entityId);
|
||||
} else {
|
||||
// 添加实体
|
||||
newEntities = [...currentEntities, { entity_id: entityId, attribute: null }];
|
||||
newEntities = [...currentEntities, {
|
||||
entity_id: entityId,
|
||||
attribute: null,
|
||||
overrides: undefined
|
||||
}];
|
||||
}
|
||||
|
||||
this.config = {
|
||||
@@ -418,6 +519,69 @@ class XiaoshiBalanceCardEditor extends LitElement {
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_updateEntityOverride(index, overrideType, enabled) {
|
||||
const currentEntities = this.config.entities || [];
|
||||
const newEntities = [...currentEntities];
|
||||
|
||||
if (newEntities[index]) {
|
||||
const overrides = { ...newEntities[index].overrides };
|
||||
|
||||
if (enabled) {
|
||||
// 启用覆盖,设置默认值
|
||||
overrides[overrideType] = '';
|
||||
} else {
|
||||
// 禁用覆盖,删除该属性
|
||||
delete overrides[overrideType];
|
||||
}
|
||||
|
||||
newEntities[index] = {
|
||||
...newEntities[index],
|
||||
overrides: Object.keys(overrides).length > 0 ? overrides : undefined
|
||||
};
|
||||
}
|
||||
|
||||
this.config = {
|
||||
...this.config,
|
||||
entities: newEntities
|
||||
};
|
||||
|
||||
this.dispatchEvent(new CustomEvent('config-changed', {
|
||||
detail: { config: this.config },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
_updateEntityOverrideValue(index, overrideType, value) {
|
||||
const currentEntities = this.config.entities || [];
|
||||
const newEntities = [...currentEntities];
|
||||
|
||||
if (newEntities[index] && newEntities[index].overrides && newEntities[index].overrides[overrideType] !== undefined) {
|
||||
const overrides = { ...newEntities[index].overrides };
|
||||
overrides[overrideType] = value.trim();
|
||||
|
||||
newEntities[index] = {
|
||||
...newEntities[index],
|
||||
overrides: overrides
|
||||
};
|
||||
}
|
||||
|
||||
this.config = {
|
||||
...this.config,
|
||||
entities: newEntities
|
||||
};
|
||||
|
||||
this.dispatchEvent(new CustomEvent('config-changed', {
|
||||
detail: { config: this.config },
|
||||
bubbles: true,
|
||||
composed: true
|
||||
}));
|
||||
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
// 点击外部关闭下拉列表
|
||||
firstUpdated() {
|
||||
document.addEventListener('click', (e) => {
|
||||
@@ -746,14 +910,39 @@ class XiaoshiBalanceCard extends LitElement {
|
||||
// 尝试从属性中获取单位
|
||||
if (attributes.unit_of_measurement) {
|
||||
unit = attributes.unit_of_measurement;
|
||||
} else {
|
||||
// 如果实体没有单位,则不显示单位
|
||||
unit = '';
|
||||
}
|
||||
|
||||
// 应用属性重定义
|
||||
let friendlyName = attributes.friendly_name || entityId;
|
||||
let icon = attributes.icon || 'mdi:help-circle';
|
||||
let warningThreshold = undefined;
|
||||
|
||||
// 应用用户自定义的重定义
|
||||
if (entityConfig.overrides) {
|
||||
if (entityConfig.overrides.name !== undefined && entityConfig.overrides.name !== '') {
|
||||
friendlyName = entityConfig.overrides.name;
|
||||
}
|
||||
if (entityConfig.overrides.icon !== undefined && entityConfig.overrides.icon !== '') {
|
||||
icon = entityConfig.overrides.icon;
|
||||
}
|
||||
if (entityConfig.overrides.unit_of_measurement !== undefined && entityConfig.overrides.unit_of_measurement !== '') {
|
||||
unit = entityConfig.overrides.unit_of_measurement;
|
||||
}
|
||||
if (entityConfig.overrides.warning !== undefined && entityConfig.overrides.warning !== '') {
|
||||
warningThreshold = parseFloat(entityConfig.overrides.warning);
|
||||
}
|
||||
}
|
||||
|
||||
balanceData.push({
|
||||
entity_id: entityId,
|
||||
friendly_name: attributes.friendly_name || entityId,
|
||||
friendly_name: friendlyName,
|
||||
value: value,
|
||||
unit: unit,
|
||||
icon: attributes.icon || 'mdi:help-circle'
|
||||
icon: icon,
|
||||
warning_threshold: warningThreshold
|
||||
});
|
||||
}
|
||||
|
||||
@@ -808,9 +997,10 @@ class XiaoshiBalanceCard extends LitElement {
|
||||
html`<div class="no-devices">请配置余额实体</div>` :
|
||||
html`
|
||||
${this._oilPriceData.map(balanceData => {
|
||||
const warningThreshold = this.config.warning || 20;
|
||||
const numericValue = parseFloat(balanceData.value);
|
||||
const isWarning = !isNaN(numericValue) && numericValue < warningThreshold;
|
||||
const isWarning = balanceData.warning_threshold !== undefined &&
|
||||
!isNaN(numericValue) &&
|
||||
numericValue < balanceData.warning_threshold;
|
||||
|
||||
return html`
|
||||
<div class="device-item" @click=${() => this._handleEntityClick(balanceData)}>
|
||||
|
||||
1285
xiaoshi-device-todo-card.js
Normal file
1285
xiaoshi-device-todo-card.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,10 +1,11 @@
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.0.5 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.0.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-device-update-card.js');
|
||||
await import('./xiaoshi-device-offline-card.js');
|
||||
await import('./xiaoshi-device-balance-card.js');
|
||||
await import('./xiaoshi-device-todo-card.js');
|
||||
|
||||
window.customCards = window.customCards || [];
|
||||
window.customCards.push(...cardConfigs);
|
||||
@@ -33,6 +34,12 @@ const cardConfigs = [
|
||||
name: '消逝电话余额卡',
|
||||
description: '消逝电话余额卡',
|
||||
preview: true
|
||||
},
|
||||
{
|
||||
type: 'xiaoshi-todo-card',
|
||||
name: '消逝待办事项',
|
||||
description: '消逝待办事项',
|
||||
preview: true
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user