HomeAssistant/xiaoshi-pad-card
1
0
Fork 1
mirror of https://github.com/xiaoshi930/xiaoshi-pad-card.git synced 2026-01-13 07:04:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update xiaoshi-device-ha-info-button.js

Browse Source
This commit is contained in:
xiaoshi
2026-01-01 15:44:59 +08:00
committed by GitHub
parent e4c9bcfe32
commit b5dfe6ac0a
1 changed files with 48 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
xiaoshi-device-ha-info-button.js
View File

@@ -416,7 +416,6 @@ class XiaoshiHaInfoButton extends LitElement {
_offlineEntities: Array, _offlineEntities: Array,
_loading: Boolean, _loading: Boolean,
_refreshInterval: Number, _refreshInterval: Number,
_dataLoaded: Boolean, //button新元素
theme: { type: String } theme: { type: String }
}; };
} }
@@ -785,7 +784,6 @@ class XiaoshiHaInfoButton extends LitElement {
this._offlineDevices = []; this._offlineDevices = [];
this._offlineEntities = []; this._offlineEntities = [];
this._loading = false; this._loading = false;
this._dataLoaded = false; //button新元素
this._refreshInterval = null; this._refreshInterval = null;
this.theme = 'on'; this.theme = 'on';
} }
@@ -801,12 +799,12 @@ class XiaoshiHaInfoButton extends LitElement {
// 设置主题属性 // 设置主题属性
this.setAttribute('theme', this._evaluateTheme()); this.setAttribute('theme', this._evaluateTheme());
// 每300秒刷新一次数据，减少频繁刷新 // 每300秒刷新一次数据，减少频繁刷新
this._refreshInterval = setInterval(() => { this._refreshInterval = setInterval(() => {
this._loadUpdateData(); this._loadUpdateData();
this._loadOfflineDevices(); this._loadOfflineDevices();
}, 3000); }, 300000);
} }
_evaluateTheme() { _evaluateTheme() {
@@ -983,11 +981,9 @@ class XiaoshiHaInfoButton extends LitElement {
this._offlineDevices = offlineDevices; this._offlineDevices = offlineDevices;
this._offlineEntities = offlineEntities; this._offlineEntities = offlineEntities;
this._dataLoaded = true; //button新元素
} catch (error) { } catch (error) {
console.error('加载离线设备失败:', error); console.error('加载离线设备失败:', error);
this._offlineDevices = []; this._offlineDevices = [];
this._dataLoaded = true; //button新元素
} }
this._loading = false; this._loading = false;
@@ -1219,7 +1215,7 @@ class XiaoshiHaInfoButton extends LitElement {
const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写 const regex = new RegExp(`^${regexPattern}$`, 'i'); // 不区分大小写
return regex.test(str); return regex.test(str);
} }
async _loadUpdateData() { _loadUpdateData() {
if (!this.hass) return; if (!this.hass) return;
this._loading = true; this._loading = true;
@@ -1544,8 +1540,6 @@ class XiaoshiHaInfoButton extends LitElement {
return html`${backupElements}`; return html`${backupElements}`;
} }
/*button新元素 开始*/ /*button新元素 开始*/
_handleButtonClick() { _handleButtonClick() {
const tapAction = this.config.tap_action; const tapAction = this.config.tap_action;
@@ -1795,7 +1789,7 @@ class XiaoshiHaInfoButton extends LitElement {
const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)'; const buttonBgColor = transparentBg ? 'transparent' : theme === 'on' ? 'rgb(255, 255, 255, 0.6)' : 'rgb(83, 83, 83, 0.6)';
// 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏） // 检查是否需要自动隐藏（只有数据加载完成且数量为0时才考虑隐藏）
const shouldAutoHide = this._dataLoaded && autoHide && warningCount === 0; const shouldAutoHide = autoHide && warningCount === 0;
// 如果需要自动隐藏，返回空div // 如果需要自动隐藏，返回空div
if (shouldAutoHide) { if (shouldAutoHide) {
@@ -1804,95 +1798,53 @@ class XiaoshiHaInfoButton extends LitElement {
// 渲染按钮 // 渲染按钮
let buttonHtml; let buttonHtml;
if (!this._dataLoaded) { if (badgeMode) {
if (badgeMode) { // 角标模式：只显示图标，根据数量显示角标
// 角标模式：只显示图标，数量为0时不显示角标 const hasWarning = warningCount > 0;
buttonHtml = html` buttonHtml = html`
<div class="ha-info-status badge-mode" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}> <div class="ha-info-status badge-mode ${hasWarning ? 'has-warning' : ''}" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon> <ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon>
</div> ${hasWarning ? html`<div class="badge-number">${warningCount}</div>` : ''}
`; </div>
} else { `;
// 普通模式
// 构建显示文本
let displayText = buttonText;
// 根据hide_colon参数决定是否显示冒号
if (!hideColon) {
displayText += ':';
} else {
displayText += ' ';
}
// 根据hide_zero参数决定是否显示0值
if (!hideZero) {
displayText += ' 0';
} else {
// 隐藏0值时使用CSS空格占位符，保持布局稳定
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: ${textColor}; --bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}>
${!hideIcon ? html`<ha-icon class="status-icon" style="color: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
}
} else { } else {
// 数据加载完成后 // 普通模式：显示文本和数量
if (badgeMode) { // 应用锁定白色功能，但预警颜色（红色）不受影响
// 角标模式：只显示图标，根据数量显示角标 let textColor, iconColor;
const hasWarning = warningCount > 0; if (warningCount === 0) {
buttonHtml = html` // 非预警状态：根据锁定白色设置决定颜色
<div class="ha-info-status badge-mode ${hasWarning ? 'has-warning' : ''}" style="--bg-color: ${buttonBgColor};" @click=${this._handleButtonClick}> textColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
<ha-icon class="status-icon" icon="${buttonIcon}"></ha-icon> iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
${hasWarning ? html`<div class="badge-number">${warningCount}</div>` : ''}
</div>
`;
} else { } else {
// 普通模式：显示文本和数量 // 预警状态：始终使用红色，不受锁定白色影响
// 应用锁定白色功能，但预警颜色（红色）不受影响 textColor = 'rgb(255, 0, 0)';
let textColor, iconColor; iconColor = lockWhiteFg ? 'rgb(255, 255, 255)' : fgColor;
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;
// 根据hide_colon参数决定是否显示冒号
if (!hideColon) {
displayText += ':';
} else {
displayText += ' ';
}
// 根据hide_zero参数和实际数量决定是否显示数量
if (hideZero && warningCount === 0) {
// 隐藏0值时使用CSS空格占位符，保持布局稳定
displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
} else {
displayText += ` ${warningCount}`;
}
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: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
} }
// 构建显示文本
let displayText = buttonText;
// 根据hide_colon参数决定是否显示冒号
if (!hideColon) {
displayText += ':';
} else {
displayText += ' ';
}
// 根据hide_zero参数和实际数量决定是否显示数量
if (hideZero && warningCount === 0) {
// 隐藏0值时使用CSS空格占位符，保持布局稳定
displayText += '\u2002'; // 两个en空格，大约等于数字"0"的宽度
} else {
displayText += ` ${warningCount}`;
}
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: ${iconColor};" icon="${buttonIcon}"></ha-icon>` : ''}
${displayText}
</div>
`;
} }
return html` return html`