mirror of
https://github.com/xiaoshi930/xiaoshi-pad-card.git
synced 2026-02-12 14:43:49 +00:00
Compare commits
22 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
240ce4e4ef | ||
|
|
9d0fbaead4 | ||
|
|
b357b69fa5 | ||
|
|
0d61619f8d | ||
|
|
953e414a61 | ||
|
|
8974f122b6 | ||
|
|
6060663a24 | ||
|
|
22e7325a06 | ||
|
|
67f13a23ca | ||
|
|
56e85c834f | ||
|
|
367a47d33b | ||
|
|
6501aeead7 | ||
|
|
c93735be82 | ||
|
|
740bac1c63 | ||
|
|
85d413baa1 | ||
|
|
128d24328b | ||
|
|
de64a44599 | ||
|
|
cf3e37da9e | ||
|
|
cfc9618e87 | ||
|
|
fe22c85d3b | ||
|
|
13bcd1a702 | ||
|
|
1fb2f8dcb7 |
@@ -216,175 +216,219 @@ class XiaoshiBalanceButtonEditor extends LitElement {
|
||||
if (!this.hass) return html``;
|
||||
|
||||
return html`
|
||||
|
||||
<div class="form">
|
||||
|
||||
<!-- button新元素 开始-->
|
||||
<div class="form-group">
|
||||
<label>按钮显示图标
|
||||
|
||||
<div class="form-group">
|
||||
<label>显示模式</label>
|
||||
<select
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.display_mode || 'min_value'}
|
||||
name="display_mode"
|
||||
>
|
||||
<option value="min_value">显示最小值</option>
|
||||
<option value="specific_entity">显示指定实体</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>小数点精度:控制显示的小数位数,默认1位</label>
|
||||
<input
|
||||
type="number"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
|
||||
name="decimal_precision"
|
||||
placeholder="默认1"
|
||||
min="0"
|
||||
max="10"
|
||||
step="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
|
||||
<label>指定显示的实体</label>
|
||||
<div class="entity-selector">
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
|
||||
name="button_icon"
|
||||
placeholder="mdi:cellphone"
|
||||
/></label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>显示模式</label>
|
||||
<select
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.display_mode || 'min_value'}
|
||||
name="display_mode"
|
||||
>
|
||||
<option value="min_value">显示最小值</option>
|
||||
<option value="specific_entity">显示指定实体</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>小数点精度:控制显示的小数位数,默认1位</label>
|
||||
<input
|
||||
type="number"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.decimal_precision !== undefined ? this.config.decimal_precision : '1'}
|
||||
name="decimal_precision"
|
||||
placeholder="默认1"
|
||||
min="0"
|
||||
max="10"
|
||||
step="1"
|
||||
@input=${this._onSpecificEntitySearch}
|
||||
@focus=${this._onSpecificEntitySearch}
|
||||
.value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
|
||||
placeholder="搜索实体..."
|
||||
class="entity-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="${(this.config.display_mode || 'min_value') === 'specific_entity' ? '' : 'display: none;'}" id="specific_entity_group">
|
||||
<label>指定显示的实体</label>
|
||||
<div class="entity-selector">
|
||||
<input
|
||||
type="text"
|
||||
@input=${this._onSpecificEntitySearch}
|
||||
@focus=${this._onSpecificEntitySearch}
|
||||
.value=${this._showSpecificEntityList ? (this._specificSearchTerm || '') : this._getSpecificEntityDisplayName()}
|
||||
placeholder="搜索实体..."
|
||||
class="entity-search-input"
|
||||
/>
|
||||
${this._showSpecificEntityList ? html`
|
||||
<div class="entity-dropdown">
|
||||
${this._specificFilteredEntities.map(entity => html`
|
||||
<div
|
||||
class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
|
||||
@click=${() => this._selectSpecificEntity(entity.entity_id)}
|
||||
>
|
||||
<div class="entity-info">
|
||||
<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>
|
||||
${this._showSpecificEntityList ? html`
|
||||
<div class="entity-dropdown">
|
||||
${this._specificFilteredEntities.map(entity => html`
|
||||
<div
|
||||
class="entity-option ${this.config.specific_entity_id === entity.entity_id ? 'selected' : ''}"
|
||||
@click=${() => this._selectSpecificEntity(entity.entity_id)}
|
||||
>
|
||||
<div class="entity-info">
|
||||
<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>
|
||||
${this.config.specific_entity_id === entity.entity_id ?
|
||||
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
|
||||
<ha-icon icon="${entity.attributes.icon || 'mdi:help-circle'}"></ha-icon>
|
||||
</div>
|
||||
`)}
|
||||
${this._specificFilteredEntities.length === 0 ? html`
|
||||
<div class="no-results">未找到匹配的实体</div>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
${this.config.specific_entity_id === entity.entity_id ?
|
||||
html`<ha-icon icon="mdi:check" class="check-icon"></ha-icon>` : ''}
|
||||
</div>
|
||||
`)}
|
||||
${this._specificFilteredEntities.length === 0 ? html`
|
||||
<div class="no-results">未找到匹配的实体</div>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮宽度:默认65px, 支持像素(px)和百分比(%)</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
|
||||
name="button_width"
|
||||
placeholder="默认65px"
|
||||
<div class="form-group">
|
||||
<label>按钮显示图标
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_icon !== undefined ? this.config.button_icon : 'mdi:cellphone'}
|
||||
name="button_icon"
|
||||
placeholder="mdi:cellphone"
|
||||
/></label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.transparent_bg === true}
|
||||
name="transparent_bg"
|
||||
id="transparent_bg"
|
||||
/>
|
||||
<label for="transparent_bg" class="checkbox-label">
|
||||
(平板端特性)透明背景(勾选后按钮背景透明)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.lock_white_fg === true}
|
||||
name="lock_white_fg"
|
||||
id="lock_white_fg"
|
||||
/>
|
||||
<label for="lock_white_fg" class="checkbox-label">
|
||||
(平板端特性)白色图标文字(勾选后锁定显示白色)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.hide_icon === true}
|
||||
name="hide_icon"
|
||||
id="hide_icon"
|
||||
/>
|
||||
<label for="hide_icon" class="checkbox-label">
|
||||
( 平板端特性)隐藏图标(勾选后隐藏图标)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮宽度:默认65px, 支持像素(px)和百分比(%)</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_width !== undefined ? this.config.button_width : '65px'}
|
||||
name="button_width"
|
||||
placeholder="默认65px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮高度:支持像素(px)、百分比(%)和视窗高度(vh),默认24px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
|
||||
name="button_height"
|
||||
placeholder="默认24px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮文字大小:支持像素(px),默认11px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
|
||||
name="button_font_size"
|
||||
placeholder="默认11px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮图标大小:支持像素(px),默认13px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
|
||||
name="button_icon_size"
|
||||
placeholder="默认13px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮高度:支持像素(px)、百分比(%)和视窗高度(vh),默认24px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_height !== undefined ? this.config.button_height : '24px'}
|
||||
name="button_height"
|
||||
placeholder="默认24px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮文字大小:支持像素(px),默认11px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_font_size !== undefined ? this.config.button_font_size : '11px'}
|
||||
name="button_font_size"
|
||||
placeholder="默认11px"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮图标大小:支持像素(px),默认13px</label>
|
||||
<input
|
||||
type="text"
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.button_icon_size !== undefined ? this.config.button_icon_size : '13px'}
|
||||
name="button_icon_size"
|
||||
placeholder="默认13px"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>点击动作:点击按钮时触发的动作</label>
|
||||
<select
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
|
||||
name="tap_action"
|
||||
>
|
||||
<option value="tap_action">弹出余额信息卡片(默认)</option>
|
||||
<option value="none">无动作</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>点击动作:点击按钮时触发的动作</label>
|
||||
<select
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.tap_action !== 'none' ? 'tap_action' : 'none'}
|
||||
name="tap_action"
|
||||
>
|
||||
<option value="tap_action">弹出余额信息卡片(默认)</option>
|
||||
<option value="none">无动作</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
|
||||
<textarea
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.other_cards || ''}
|
||||
name="other_cards"
|
||||
placeholder='# 示例配置:添加button卡片
|
||||
<div class="form-group">
|
||||
<label>👇👇👇下方弹出的卡片可增加的其他卡片👇👇👇</label>
|
||||
<textarea
|
||||
@change=${this._entityChanged}
|
||||
.value=${this.config.other_cards || ''}
|
||||
name="other_cards"
|
||||
placeholder='# 示例配置:添加button卡片
|
||||
- type: custom:button-card
|
||||
template: 测试模板(最好引用模板,否则大概率会报错)
|
||||
template: 测试模板(最好引用模板,否则大概率会报错)
|
||||
- type: custom:button-card
|
||||
template: 测试模板(最好引用模板,否则大概率会报错)'>
|
||||
</textarea>
|
||||
</div>
|
||||
template: 测试模板(最好引用模板,否则大概率会报错)'>
|
||||
</textarea>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.no_preview === true}
|
||||
name="no_preview"
|
||||
id="no_preview"
|
||||
/>
|
||||
<label for="no_preview" class="checkbox-label" style="color: red;">
|
||||
📻显示预览📻( 请先勾选测试显示效果 )
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.no_preview === true}
|
||||
name="no_preview"
|
||||
id="no_preview"
|
||||
/>
|
||||
<label for="no_preview" class="checkbox-label" style="color: red;">
|
||||
📻显示预览📻( 请先勾选测试显示效果 )
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label> </label>
|
||||
<label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
|
||||
<label> </label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label> </label>
|
||||
<label>👇👇👇下方是弹出的主卡配置项👇👇👇</label>
|
||||
<label> </label>
|
||||
</div>
|
||||
|
||||
<!-- button新元素 结束-->
|
||||
<!-- button新元素 结束-->
|
||||
|
||||
<div class="form-group">
|
||||
<label>卡片宽度:支持像素(px)和百分比(%),默认100%</label>
|
||||
@@ -658,6 +702,7 @@ class XiaoshiBalanceButtonEditor extends LitElement {
|
||||
}
|
||||
}
|
||||
/*button新按钮方法 结束*/
|
||||
|
||||
this.config = {
|
||||
...this.config,
|
||||
[name]: finalValue
|
||||
@@ -978,7 +1023,6 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
background: var(--bg-color, #fff);
|
||||
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
@@ -1008,8 +1052,6 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/*标题统计数字*/
|
||||
@@ -1191,16 +1233,10 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
//button新元素 开始
|
||||
setTimeout(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 50);
|
||||
//button新元素 结束
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 300000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1613,11 +1649,14 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
/*button新元素 前9行和最后1行开始*/
|
||||
const showPreview = this.config.no_preview === true;
|
||||
|
||||
// 获取参数
|
||||
// 获取新参数
|
||||
const transparentBg = this.config.transparent_bg === true;
|
||||
const hideIcon = this.config.hide_icon === true;
|
||||
const lockWhiteFg = this.config.lock_white_fg === true;
|
||||
const buttonIcon = this.config.button_icon || 'mdi:cellphone';
|
||||
|
||||
// 设置背景颜色
|
||||
const buttonBgColor = bgColor;
|
||||
const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
|
||||
|
||||
// 获取显示模式
|
||||
const displayMode = this.config.display_mode || 'min_value';
|
||||
@@ -1707,13 +1746,22 @@ class XiaoshiBalanceButton extends LitElement {
|
||||
// 获取预警颜色
|
||||
const warningColor = this.config.warning_color || 'rgb(255, 0, 0)';
|
||||
|
||||
// 根据预警状态设置数字颜色
|
||||
const numberColor = isWarning ? warningColor : fgColor;
|
||||
// 根据预警状态设置数字颜色,应用锁定白色功能
|
||||
let numberColor, iconColor;
|
||||
if (isWarning) {
|
||||
// 预警状态:数字始终使用红色,图标根据锁定白色设置
|
||||
numberColor = warningColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 非预警状态:数字和图标都根据锁定白色设置
|
||||
numberColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
}
|
||||
|
||||
// 渲染按钮
|
||||
const buttonHtml = html`
|
||||
<div class="balance-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
|
||||
<div class="balance-status" style="--fg-color: ${numberColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
<span style="color: ${numberColor};">${displayText}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -262,7 +262,6 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮显示文本
|
||||
<input
|
||||
@@ -295,10 +294,24 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
|
||||
id="transparent_bg"
|
||||
/>
|
||||
<label for="transparent_bg" class="checkbox-label">
|
||||
透明背景(勾选后按钮背景透明)
|
||||
(平板端特性)透明背景(勾选后按钮背景透明)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.lock_white_fg === true}
|
||||
name="lock_white_fg"
|
||||
id="lock_white_fg"
|
||||
/>
|
||||
<label for="lock_white_fg" class="checkbox-label">
|
||||
(平板端特性)白色图标文字(勾选后锁定显示白色)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -309,10 +322,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
|
||||
id="hide_icon"
|
||||
/>
|
||||
<label for="hide_icon" class="checkbox-label">
|
||||
隐藏图标(勾选后隐藏图标)
|
||||
( 平板端特性)隐藏图标(勾选后隐藏图标)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -323,10 +336,10 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
|
||||
id="hide_colon"
|
||||
/>
|
||||
<label for="hide_colon" class="checkbox-label">
|
||||
隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -337,7 +350,7 @@ class XiaoshiConsumablesButtonEditor extends LitElement {
|
||||
id="hide_zero"
|
||||
/>
|
||||
<label for="hide_zero" class="checkbox-label">
|
||||
隐藏0值(勾选后数量为0时不显示数量)
|
||||
(平板端特性)隐藏0值(勾选后数量为0时不显示数量)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1288,17 +1301,11 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
//button新元素 开始
|
||||
setTimeout(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 50);
|
||||
//button新元素 结束
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadOilPriceData();
|
||||
}, 300000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1851,11 +1858,12 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
const hideColon = this.config.hide_colon === true;
|
||||
const hideZero = this.config.hide_zero === true;
|
||||
const autoHide = this.config.auto_hide === true;
|
||||
const lockWhiteFg = this.config.lock_white_fg === true;
|
||||
const buttonText = this.config.button_text || '耗材';
|
||||
const buttonIcon = this.config.button_icon || 'mdi:battery-sync';
|
||||
|
||||
// 设置背景颜色
|
||||
const buttonBgColor = transparentBg ? 'transparent' : bgColor;
|
||||
const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
|
||||
|
||||
// 检查是否需要自动隐藏(只有数据加载完成且数量为0时才考虑隐藏)
|
||||
const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0;
|
||||
@@ -1877,6 +1885,10 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
`;
|
||||
} else {
|
||||
// 普通模式
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
// 构建显示文本
|
||||
let displayText = buttonText;
|
||||
|
||||
@@ -1896,8 +1908,8 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
}
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="consumables-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
<div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
@@ -1915,7 +1927,17 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
`;
|
||||
} else {
|
||||
// 普通模式:显示文本和数量
|
||||
const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (warningCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
textColor = 'rgb(255, 0, 0)';
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
}
|
||||
|
||||
// 构建显示文本
|
||||
let displayText = buttonText;
|
||||
@@ -1937,7 +1959,7 @@ class XiaoshiConsumablesButton extends LitElement {
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="consumables-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -93,7 +93,6 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮显示文本
|
||||
<input
|
||||
@@ -126,7 +125,21 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
|
||||
id="transparent_bg"
|
||||
/>
|
||||
<label for="transparent_bg" class="checkbox-label">
|
||||
透明背景(勾选后按钮背景透明)
|
||||
(平板端特性)透明背景(勾选后按钮背景透明)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.lock_white_fg === true}
|
||||
name="lock_white_fg"
|
||||
id="lock_white_fg"
|
||||
/>
|
||||
<label for="lock_white_fg" class="checkbox-label">
|
||||
(平板端特性)白色图标文字(勾选后锁定显示白色)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -140,7 +153,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
|
||||
id="hide_icon"
|
||||
/>
|
||||
<label for="hide_icon" class="checkbox-label">
|
||||
隐藏图标(勾选后隐藏图标)
|
||||
( 平板端特性)隐藏图标(勾选后隐藏图标)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -154,7 +167,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
|
||||
id="hide_colon"
|
||||
/>
|
||||
<label for="hide_colon" class="checkbox-label">
|
||||
隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -168,7 +181,7 @@ class XiaoshiHaInfoButtonEditor extends LitElement {
|
||||
id="hide_zero"
|
||||
/>
|
||||
<label for="hide_zero" class="checkbox-label">
|
||||
隐藏0值(勾选后数量为0时不显示数量)
|
||||
(平板端特性)隐藏0值(勾选后数量为0时不显示数量)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -342,7 +355,7 @@ template: 测试模板(最好引用模板,否则大概率会报错)'>
|
||||
if (type === 'checkbox') {
|
||||
finalValue = checked;
|
||||
} else {
|
||||
if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action') return;
|
||||
if (!value && name !== 'theme' && name !== 'button_width' && name !== 'button_height' && name !== 'button_font_size' && name !== 'button_icon_size' && name !== 'width' && name !== 'tap_action' && name !== 'display_mode' && name !== 'decimal_precision') return;
|
||||
finalValue = value
|
||||
}
|
||||
|
||||
@@ -789,18 +802,11 @@ export class XiaoshiHaInfoButton extends LitElement {
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
//button新元素 开始
|
||||
setTimeout(() => {
|
||||
this._loadUpdateData();
|
||||
this._loadOfflineDevices();
|
||||
}, 50);
|
||||
//button新元素 结束
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadUpdateData();
|
||||
this._loadOfflineDevices();
|
||||
}, 300000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1781,11 +1787,12 @@ export class XiaoshiHaInfoButton extends LitElement {
|
||||
const hideColon = this.config.hide_colon === true;
|
||||
const hideZero = this.config.hide_zero === true;
|
||||
const autoHide = this.config.auto_hide === true;
|
||||
const lockWhiteFg = this.config.lock_white_fg === true;
|
||||
const buttonText = this.config.button_text || 'HA';
|
||||
const buttonIcon = this.config.button_icon || 'mdi:home-assistant';
|
||||
|
||||
// 设置背景颜色
|
||||
const buttonBgColor = transparentBg ? 'transparent' : bgColor;
|
||||
const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
|
||||
|
||||
// 检查是否需要自动隐藏(只有数据加载完成且数量为0时才考虑隐藏)
|
||||
const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0;
|
||||
@@ -1825,9 +1832,13 @@ export class XiaoshiHaInfoButton extends LitElement {
|
||||
displayText += '\u2002'; // 两个en空格,大约等于数字"0"的宽度
|
||||
}
|
||||
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="ha-info-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
<div class="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
@@ -1845,7 +1856,17 @@ export class XiaoshiHaInfoButton extends LitElement {
|
||||
`;
|
||||
} else {
|
||||
// 普通模式:显示文本和数量
|
||||
const textColor = warningCount === 0 ? fgColor : 'rgb(255, 0, 0)';
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (warningCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
textColor = 'rgb(255, 0, 0)';
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
}
|
||||
|
||||
// 构建显示文本
|
||||
let displayText = buttonText;
|
||||
@@ -1867,7 +1888,7 @@ export class XiaoshiHaInfoButton extends LitElement {
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="ha-info-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -213,7 +213,6 @@ class XiaoshiTodoButtonEditor extends LitElement {
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
<label>按钮显示文本
|
||||
<input
|
||||
@@ -246,10 +245,24 @@ class XiaoshiTodoButtonEditor extends LitElement {
|
||||
id="transparent_bg"
|
||||
/>
|
||||
<label for="transparent_bg" class="checkbox-label">
|
||||
透明背景(勾选后按钮背景透明)
|
||||
(平板端特性)透明背景(勾选后按钮背景透明)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox-input"
|
||||
@change=${this._entityChanged}
|
||||
.checked=${this.config.lock_white_fg === true}
|
||||
name="lock_white_fg"
|
||||
id="lock_white_fg"
|
||||
/>
|
||||
<label for="lock_white_fg" class="checkbox-label">
|
||||
(平板端特性)白色图标文字(勾选后锁定显示白色)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -260,10 +273,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
|
||||
id="hide_icon"
|
||||
/>
|
||||
<label for="hide_icon" class="checkbox-label">
|
||||
隐藏图标(勾选后隐藏图标)
|
||||
( 平板端特性)隐藏图标(勾选后隐藏图标)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -274,10 +287,10 @@ class XiaoshiTodoButtonEditor extends LitElement {
|
||||
id="hide_colon"
|
||||
/>
|
||||
<label for="hide_colon" class="checkbox-label">
|
||||
隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
(平板端特性)隐藏冒号(勾选后不显示冒号,改为空格)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -288,7 +301,7 @@ class XiaoshiTodoButtonEditor extends LitElement {
|
||||
id="hide_zero"
|
||||
/>
|
||||
<label for="hide_zero" class="checkbox-label">
|
||||
隐藏0值(勾选后数量为0时不显示数量)
|
||||
(平板端特性)隐藏0值(勾选后数量为0时不显示数量)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@@ -1109,19 +1122,13 @@ class XiaoshiTodoButton extends LitElement {
|
||||
super.connectedCallback();
|
||||
this._loadTodoData();
|
||||
|
||||
|
||||
//button新元素 开始
|
||||
setTimeout(() => {
|
||||
this._loadTodoData();
|
||||
}, 50);
|
||||
//button新元素 结束
|
||||
// 设置主题属性
|
||||
this.setAttribute('theme', this._evaluateTheme());
|
||||
|
||||
// 每300秒刷新一次数据,减少频繁刷新
|
||||
this._refreshInterval = setInterval(() => {
|
||||
this._loadTodoData();
|
||||
}, 300000);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
_evaluateTheme() {
|
||||
@@ -1618,11 +1625,12 @@ class XiaoshiTodoButton extends LitElement {
|
||||
const hideColon = this.config.hide_colon === true;
|
||||
const hideZero = this.config.hide_zero === true;
|
||||
const autoHide = this.config.auto_hide === true;
|
||||
const lockWhiteFg = this.config.lock_white_fg === true;
|
||||
const buttonText = this.config.button_text || '待办';
|
||||
const buttonIcon = this.config.button_icon || 'mdi:clipboard-list';
|
||||
|
||||
// 设置背景颜色
|
||||
const buttonBgColor = transparentBg ? 'transparent' : bgColor;
|
||||
const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
|
||||
|
||||
// 检查是否需要自动隐藏(只有数据加载完成且数量为0时才考虑隐藏)
|
||||
const shouldAutoHide = this._dataLoaded && autoHide && totalIncompleteCount === 0;
|
||||
@@ -1644,6 +1652,10 @@ class XiaoshiTodoButton extends LitElement {
|
||||
`;
|
||||
} else {
|
||||
// 普通模式
|
||||
// 应用锁定白色功能
|
||||
const iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
const textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
|
||||
// 构建显示文本
|
||||
let displayText = buttonText;
|
||||
|
||||
@@ -1663,8 +1675,8 @@ class XiaoshiTodoButton extends LitElement {
|
||||
}
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="todo-status" style="--fg-color: ${fgColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
<div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
@@ -1682,7 +1694,17 @@ class XiaoshiTodoButton extends LitElement {
|
||||
`;
|
||||
} else {
|
||||
// 普通模式:显示文本和数量
|
||||
const textColor = totalIncompleteCount === 0 ? fgColor : 'rgb(255, 0, 0)';
|
||||
// 应用锁定白色功能,但预警颜色(红色)不受影响
|
||||
let textColor, iconColor;
|
||||
if (totalIncompleteCount === 0) {
|
||||
// 非预警状态:根据锁定白色设置决定颜色
|
||||
textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
} else {
|
||||
// 预警状态:始终使用红色,不受锁定白色影响
|
||||
textColor = 'rgb(255, 0, 0)';
|
||||
iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
|
||||
}
|
||||
|
||||
// 构建显示文本
|
||||
let displayText = buttonText;
|
||||
@@ -1704,7 +1726,7 @@ class XiaoshiTodoButton extends LitElement {
|
||||
|
||||
buttonHtml = html`
|
||||
<div class="todo-status" style="--fg-color: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${fgColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
|
||||
${displayText}
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.2.0 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
|
||||
console.info("%c 消逝卡-平板端 \n%c v 0.2.4 ", "color: red; font-weight: bold; background: black", "color: white; font-weight: bold; background: black");
|
||||
|
||||
const loadCards = async () => {
|
||||
await import('./xiaoshi-pad-grid-card.js');
|
||||
|
||||
Reference in New Issue
Block a user