1325 lines
49 KiB
JavaScript
1325 lines
49 KiB
JavaScript
// WashData - Home Assistant integration for appliance cycle monitoring via smart plugs.
|
|
// Copyright (C) 2026 Lukas Bandura
|
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published
|
|
// by the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
const CARD_TAG = "ha-washdata-card";
|
|
const EDITOR_TAG = "ha-washdata-card-editor";
|
|
const DOMAIN = "ha_washdata";
|
|
|
|
// Gesture timing (ms) and movement tolerance (px) for tap / hold / double-tap,
|
|
// chosen to match Home Assistant's own action handler conventions.
|
|
const HOLD_MS = 500;
|
|
const DOUBLE_TAP_MS = 250;
|
|
const TAP_MOVE_TOLERANCE = 10;
|
|
|
|
// Sibling entities of a WashData device are resolved from the device registry by
|
|
// their stable translation_key (which never changes even if the user renames the
|
|
// entity), so pointing the card at any one entity auto-wires all the rest.
|
|
const ROLE_TKEYS = {
|
|
state: "washer_state",
|
|
program: "washer_program",
|
|
time: "time_remaining",
|
|
progress: "cycle_progress",
|
|
power: "current_power",
|
|
energy: "energy_total",
|
|
phase: "current_phase",
|
|
};
|
|
const BUTTON_TKEYS = {
|
|
pause: "pause_cycle",
|
|
resume: "resume_cycle",
|
|
terminate: "force_end_cycle",
|
|
record_start: "record_start",
|
|
record_stop: "record_stop",
|
|
};
|
|
const BUTTON_ICONS = {
|
|
pause: "mdi:pause",
|
|
resume: "mdi:play",
|
|
terminate: "mdi:stop",
|
|
record_start: "mdi:record-circle-outline",
|
|
record_stop: "mdi:stop-circle-outline",
|
|
open_panel: "mdi:open-in-new",
|
|
};
|
|
const BUTTON_ORDER = ["pause", "resume", "terminate", "record_start", "record_stop", "program", "open_panel"];
|
|
|
|
const ACTIVE_STATES = ["running", "paused", "user_paused", "ending", "starting", "anti_wrinkle", "rinse"];
|
|
const INACTIVE_STATES = ["off", "unknown", "unavailable", "idle"];
|
|
const SPARK_MAX_POINTS = 60;
|
|
|
|
// ── Shared, module-level resource caches ────────────────────────────────────
|
|
// One WebSocket round-trip per HA connection for the shared display constants
|
|
// (STATE_COLORS is the single source of truth in const.py), and one fetch per
|
|
// language for the panel translation dictionaries the card reuses for its own
|
|
// chrome. Both are shared across every card instance on the page.
|
|
const _constantsCache = new WeakMap(); // hass.connection -> Promise<{stateColors}>
|
|
function loadConstants(hass) {
|
|
const conn = hass && hass.connection;
|
|
if (!conn) return Promise.resolve({ stateColors: {} });
|
|
if (_constantsCache.has(conn)) return _constantsCache.get(conn);
|
|
const p = hass
|
|
.callWS({ type: DOMAIN + "/get_constants" })
|
|
.then((c) => ({ stateColors: (c && c.state_colors) || {} }))
|
|
.catch(() => ({ stateColors: {} }));
|
|
_constantsCache.set(conn, p);
|
|
return p;
|
|
}
|
|
|
|
const _panelTrans = {}; // lang -> dict
|
|
const _panelTransPending = {}; // lang -> Promise
|
|
function _panelTransUrl(lang) {
|
|
return "/" + DOMAIN + "/panel-translations/" + encodeURIComponent(lang) + ".json";
|
|
}
|
|
async function _fetchPanelLang(lang) {
|
|
if (!lang) return null;
|
|
const candidates = [lang];
|
|
const dash = lang.indexOf("-");
|
|
if (dash > 0) candidates.push(lang.slice(0, dash));
|
|
for (const cand of candidates) {
|
|
try {
|
|
const r = await fetch(_panelTransUrl(cand));
|
|
if (r.ok) {
|
|
const j = await r.json();
|
|
if (j && typeof j === "object") return j;
|
|
}
|
|
} catch (_) {
|
|
/* try next candidate */
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
async function loadPanelLang(lang) {
|
|
if (!lang || _panelTrans[lang]) return;
|
|
if (_panelTransPending[lang]) {
|
|
await _panelTransPending[lang];
|
|
return;
|
|
}
|
|
const p = _fetchPanelLang(lang).then((d) => {
|
|
if (d) _panelTrans[lang] = d;
|
|
});
|
|
_panelTransPending[lang] = p;
|
|
await p;
|
|
}
|
|
|
|
class WashDataCard extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this._cfg = null;
|
|
this._hass = null;
|
|
this._builtSig = null; // structure signature the current shell was built for
|
|
this._constantsLoaded = false;
|
|
this._langEnsured = "";
|
|
this._constants = null;
|
|
// Rolling in-memory buffer of {t, w} power samples for the live sparkline.
|
|
this._spark = [];
|
|
this._sparkState = null;
|
|
// Gesture state for tap / hold / double-tap recognition.
|
|
this._holdTimer = null;
|
|
this._holdTriggered = false;
|
|
this._tapTimer = null;
|
|
this._lastTapTime = 0;
|
|
this._pointerStart = null;
|
|
this._pointerCanceled = false;
|
|
this._onPointerDown = this._onPointerDown.bind(this);
|
|
this._onPointerMove = this._onPointerMove.bind(this);
|
|
this._onPointerUp = this._onPointerUp.bind(this);
|
|
this._onPointerCancel = this._onPointerCancel.bind(this);
|
|
}
|
|
|
|
static getStubConfig() {
|
|
return {
|
|
entity: "sensor.washing_machine_state",
|
|
layout: "tile",
|
|
tap_action: { action: "more-info" },
|
|
hold_action: { action: "none" },
|
|
double_tap_action: { action: "none" },
|
|
};
|
|
}
|
|
|
|
static getConfigElement() {
|
|
return document.createElement(EDITOR_TAG);
|
|
}
|
|
|
|
setConfig(config) {
|
|
if (!config) throw new Error("Invalid configuration");
|
|
const layout = config.layout || "tile";
|
|
if (layout !== "glance" && !config.entity) {
|
|
throw new Error("Please define an entity");
|
|
}
|
|
if (layout === "glance" && !(Array.isArray(config.entities) && config.entities.length) && !config.entity) {
|
|
throw new Error("Please define entities for the glance layout");
|
|
}
|
|
this._cfg = { ...config, layout };
|
|
// Rebuild the shell when the structural signature changes - not only on a
|
|
// layout switch, but also when the progress bar, sparkline, buttons, or the
|
|
// glance entity count change (HA reuses the element and re-calls setConfig on
|
|
// editor edits / Lovelace reloads). Otherwise the _update* helpers early-return
|
|
// because their elements don't exist and the new options only appear after a
|
|
// layout switch or page reload (removed entities also leave orphan glance rows).
|
|
if (this._builtSig !== this._structureSig()) {
|
|
this._builtSig = null;
|
|
if (this.shadowRoot) this.shadowRoot.innerHTML = "";
|
|
}
|
|
this._render();
|
|
}
|
|
|
|
// Signature of every config field that changes which elements the shell emits
|
|
// (see _buildTile/_buildDetail/_buildGlance). A change here forces a rebuild.
|
|
_structureSig() {
|
|
const c = this._cfg || {};
|
|
const f = this._flags();
|
|
const layout = c.layout || "tile";
|
|
return [
|
|
layout,
|
|
f.showBar ? "bar" : "",
|
|
f.showSparkline ? "spark" : "",
|
|
f.buttons.join("+"),
|
|
layout === "glance" ? String(this._glanceEntities().length) : "",
|
|
].join("|");
|
|
}
|
|
|
|
set hass(hass) {
|
|
this._hass = hass;
|
|
this._ensureResources();
|
|
this._render();
|
|
}
|
|
|
|
// Reserve enough vertical space for whatever the detail layout is showing, so
|
|
// the sections-view grid (which clips to the reserved rows) never cuts off the
|
|
// action buttons or the sparkline at the bottom of the card.
|
|
_detailRows() {
|
|
const f = this._flags();
|
|
let rows = 2; // header + progress bar + meta chips (content-hugging card)
|
|
if (f.buttons.length) rows += 1;
|
|
if (f.showSparkline) rows += 1;
|
|
return rows;
|
|
}
|
|
|
|
getCardSize() {
|
|
const layout = this._cfg && this._cfg.layout;
|
|
if (layout === "detail") return this._detailRows();
|
|
if (layout === "glance") return this._glanceEntities().length || 1;
|
|
return 1;
|
|
}
|
|
|
|
getGridOptions() {
|
|
const layout = this._cfg && this._cfg.layout;
|
|
if (layout === "detail") {
|
|
const rows = this._detailRows();
|
|
return { rows, min_rows: rows, columns: 12, min_columns: 6 };
|
|
}
|
|
if (layout === "glance") {
|
|
const n = Math.max(1, this._glanceEntities().length);
|
|
return { rows: n, min_rows: 1, columns: 12, min_columns: 6 };
|
|
}
|
|
return { rows: 1, min_rows: 1, columns: 6, min_columns: 3 };
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._clearHoldTimer();
|
|
if (this._tapTimer) {
|
|
window.clearTimeout(this._tapTimer);
|
|
this._tapTimer = null;
|
|
}
|
|
}
|
|
|
|
// ── Localization ──────────────────────────────────────────────────────────
|
|
_lang() {
|
|
const raw =
|
|
(this._hass && this._hass.locale && this._hass.locale.language) ||
|
|
(this._hass && this._hass.language) ||
|
|
"en";
|
|
return typeof raw === "string" && raw ? raw : "en";
|
|
}
|
|
|
|
_tLookup(key, lang) {
|
|
const dict = _panelTrans[lang];
|
|
if (!dict) return null;
|
|
const val = key.split(".").reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), dict);
|
|
return val && typeof val === "string" ? val : null;
|
|
}
|
|
|
|
_t(key, vars, fallback) {
|
|
const lang = this._lang();
|
|
let s = (lang && this._tLookup(key, lang)) || this._tLookup(key, "en") || fallback || key;
|
|
if (vars) {
|
|
for (const [k, v] of Object.entries(vars)) {
|
|
s = s.replace(new RegExp("\\{" + k + "\\}", "g"), String(v));
|
|
}
|
|
}
|
|
return s;
|
|
}
|
|
|
|
_ensureResources() {
|
|
if (!this._hass) return;
|
|
const lang = this._lang();
|
|
const needsConstants = !this._constantsLoaded;
|
|
const needsLang = lang !== this._langEnsured;
|
|
if (!needsConstants && !needsLang) return;
|
|
const tasks = [];
|
|
if (needsConstants) {
|
|
this._constantsLoaded = true;
|
|
tasks.push(
|
|
loadConstants(this._hass).then((c) => { this._constants = c; }),
|
|
loadPanelLang("en"),
|
|
);
|
|
}
|
|
if (needsLang) {
|
|
this._langEnsured = lang;
|
|
if (lang && lang !== "en") tasks.push(loadPanelLang(lang));
|
|
}
|
|
Promise.all(tasks)
|
|
.then(() => this._update())
|
|
.catch(() => {
|
|
/* card degrades gracefully to English fallbacks + theme colors */
|
|
});
|
|
}
|
|
|
|
// ── Entity discovery ──────────────────────────────────────────────────────
|
|
_resolveRoles(primaryEntity) {
|
|
const hass = this._hass;
|
|
const cfg = this._cfg || {};
|
|
const reg = (hass && hass.entities) || {};
|
|
const primary = primaryEntity || cfg.entity;
|
|
const primaryReg = reg[primary];
|
|
const deviceId = cfg.device_id || (primaryReg && primaryReg.device_id) || null;
|
|
|
|
const roles = { state: primary };
|
|
const buttons = {};
|
|
let selectEntity = null;
|
|
|
|
if (deviceId) {
|
|
for (const [eid, ent] of Object.entries(reg)) {
|
|
if (!ent || ent.device_id !== deviceId) continue;
|
|
if (ent.platform && ent.platform !== DOMAIN) continue;
|
|
const tk = ent.translation_key;
|
|
// Display roles are always sensors; restrict the match so a like-named
|
|
// entity in another domain can never hijack a display role.
|
|
if (eid.startsWith("sensor.")) {
|
|
for (const [role, want] of Object.entries(ROLE_TKEYS)) {
|
|
if (tk === want && !roles[role]) roles[role] = eid;
|
|
}
|
|
}
|
|
for (const [btn, want] of Object.entries(BUTTON_TKEYS)) {
|
|
if (tk === want && !buttons[btn]) buttons[btn] = eid;
|
|
}
|
|
if (!selectEntity && eid.startsWith("select.")) selectEntity = eid;
|
|
}
|
|
}
|
|
|
|
// Legacy explicit overrides always win over auto-discovery.
|
|
if (cfg.program_entity) roles.program = cfg.program_entity;
|
|
if (cfg.time_entity) roles.time = cfg.time_entity;
|
|
if (cfg.pct_entity) roles.progress = cfg.pct_entity;
|
|
if (cfg.power_entity) roles.power = cfg.power_entity;
|
|
if (cfg.energy_entity) roles.energy = cfg.energy_entity;
|
|
if (cfg.phase_entity) roles.phase = cfg.phase_entity;
|
|
|
|
// Suffix fallback for the common case where the primary is the state sensor
|
|
// but the registry lookup came up empty (e.g. template entity, no device).
|
|
if (!roles.time || !roles.progress || !roles.program) {
|
|
const m = /^sensor\.(.+)_state$/.exec(primary);
|
|
if (m) {
|
|
const base = "sensor." + m[1] + "_";
|
|
const st = hass && hass.states;
|
|
const guess = (suffix) => (st && st[base + suffix] ? base + suffix : null);
|
|
roles.time = roles.time || guess("time_remaining");
|
|
roles.progress = roles.progress || guess("cycle_progress");
|
|
roles.program = roles.program || guess("program");
|
|
}
|
|
}
|
|
|
|
roles._buttons = buttons;
|
|
roles._select = selectEntity;
|
|
roles._deviceId = deviceId;
|
|
return roles;
|
|
}
|
|
|
|
// ── View model ────────────────────────────────────────────────────────────
|
|
_fmtState(stateObj) {
|
|
if (!stateObj) return "";
|
|
const hass = this._hass;
|
|
if (hass && typeof hass.formatEntityState === "function") {
|
|
try {
|
|
return hass.formatEntityState(stateObj);
|
|
} catch (_) {
|
|
/* fall through */
|
|
}
|
|
}
|
|
const s = stateObj.state || "";
|
|
return s ? s.charAt(0).toUpperCase() + s.slice(1) : s;
|
|
}
|
|
|
|
_vm(roles) {
|
|
const hass = this._hass;
|
|
const cfg = this._cfg;
|
|
const states = hass.states;
|
|
const stateObj = states[roles.state];
|
|
if (!stateObj) {
|
|
return { missing: true, missingEntity: roles.state };
|
|
}
|
|
|
|
const sk = String(stateObj.state || "").toLowerCase();
|
|
const isInactive = INACTIVE_STATES.includes(sk);
|
|
const isActive = ACTIVE_STATES.includes(sk);
|
|
const attr = stateObj.attributes || {};
|
|
|
|
// Program: prefer the dedicated program entity, then the state sensor's guess.
|
|
let program = "";
|
|
const progObj = roles.program ? states[roles.program] : null;
|
|
if (progObj) {
|
|
const pv = String(progObj.state || "").toLowerCase();
|
|
if (!["unknown", "none", "off", "unavailable", ""].includes(pv)) program = this._fmtState(progObj);
|
|
}
|
|
if (!program && attr.current_program_guess) {
|
|
const pv = String(attr.current_program_guess).toLowerCase();
|
|
if (!["unknown", "none", "off", "unavailable"].includes(pv)) program = attr.current_program_guess;
|
|
}
|
|
|
|
// Phase: dedicated phase entity, else the program sensor's active_phase attr.
|
|
let phase = "";
|
|
const phaseObj = roles.phase ? states[roles.phase] : null;
|
|
if (phaseObj) {
|
|
const pv = String(phaseObj.state || "").toLowerCase();
|
|
if (!["unknown", "none", "off", "unavailable", ""].includes(pv)) phase = this._fmtState(phaseObj);
|
|
}
|
|
if (!phase && progObj && progObj.attributes && progObj.attributes.active_phase) {
|
|
phase = progObj.attributes.active_phase;
|
|
}
|
|
|
|
// Sub-state (e.g. "Running (Rinsing)" -> "Rinsing").
|
|
let subState = "";
|
|
if (sk === "running" && attr.sub_state) {
|
|
const m = String(attr.sub_state).match(/Running \((.*)\)/);
|
|
subState = m && m[1] ? m[1] : attr.sub_state;
|
|
}
|
|
|
|
// Progress percentage.
|
|
let pct = null;
|
|
const pctObj = roles.progress ? states[roles.progress] : null;
|
|
if (pctObj && !isNaN(parseFloat(pctObj.state))) {
|
|
pct = Math.max(0, Math.min(100, Math.round(parseFloat(pctObj.state))));
|
|
}
|
|
|
|
// Remaining time (respects the entity's Display Precision + unit, #354).
|
|
let timeText = "";
|
|
const timeObj = roles.time ? states[roles.time] : null;
|
|
if (timeObj && !INACTIVE_STATES.includes(String(timeObj.state).toLowerCase())) {
|
|
if (hass && typeof hass.formatEntityState === "function") {
|
|
timeText = this._fmtState(timeObj);
|
|
} else if (!isNaN(parseFloat(timeObj.state))) {
|
|
timeText = timeObj.state + " " + this._t("card.min", null, "min");
|
|
} else {
|
|
timeText = timeObj.state;
|
|
}
|
|
}
|
|
|
|
// Projected energy + cost (live on the progress entity while running).
|
|
let energyText = "";
|
|
let costText = "";
|
|
if (pctObj && pctObj.attributes) {
|
|
const kwh = pctObj.attributes.projected_energy_kwh;
|
|
if (kwh !== undefined && kwh !== null) energyText = kwh + " kWh";
|
|
const cost = pctObj.attributes.projected_cost;
|
|
if (cost !== undefined && cost !== null) costText = this._fmtCost(cost);
|
|
}
|
|
|
|
// Current power.
|
|
let powerW = null;
|
|
const powerObj = roles.power ? states[roles.power] : null;
|
|
if (powerObj && !isNaN(parseFloat(powerObj.state))) powerW = parseFloat(powerObj.state);
|
|
|
|
// Overrun / anomaly (visible-only; never a notification).
|
|
let anomaly = null;
|
|
if (attr.cycle_anomaly && attr.cycle_anomaly !== "none") {
|
|
anomaly = { kind: attr.cycle_anomaly, ratio: attr.overrun_ratio };
|
|
}
|
|
|
|
const color = this._stateColor(sk, isActive, cfg.active_color);
|
|
|
|
return {
|
|
missing: false,
|
|
sk,
|
|
stateObj,
|
|
isInactive,
|
|
isActive,
|
|
isRunning: sk === "running",
|
|
stateLabel: this._fmtState(stateObj),
|
|
color,
|
|
program,
|
|
phase,
|
|
subState,
|
|
pct,
|
|
timeText,
|
|
energyText,
|
|
costText,
|
|
powerW,
|
|
anomaly,
|
|
buttons: roles._buttons || {},
|
|
select: roles._select || null,
|
|
};
|
|
}
|
|
|
|
_fmtCost(cost) {
|
|
const hass = this._hass;
|
|
const currency = hass && hass.config && hass.config.currency;
|
|
if (currency) {
|
|
try {
|
|
return new Intl.NumberFormat(this._lang(), { style: "currency", currency }).format(Number(cost));
|
|
} catch (_) {
|
|
/* fall through */
|
|
}
|
|
}
|
|
return String(cost);
|
|
}
|
|
|
|
_stateColor(sk, isActive, override) {
|
|
// Honour an explicit per-card override colour first (legacy active_color).
|
|
if (isActive && override) {
|
|
if (Array.isArray(override)) {
|
|
const [r, g, b] = override;
|
|
return { fg: "rgb(" + r + "," + g + "," + b + ")", bg: "rgba(" + r + "," + g + "," + b + ",0.2)" };
|
|
}
|
|
return { fg: override, bg: "rgba(128,128,128,0.15)" };
|
|
}
|
|
const colors = (this._constants && this._constants.stateColors) || {};
|
|
const c = colors[sk];
|
|
if (c) return { fg: c, bg: this._alpha(c, sk) };
|
|
// Fallback to theme semantics when constants have not loaded yet.
|
|
if (INACTIVE_STATES.includes(sk)) {
|
|
return { fg: "var(--disabled-text-color, grey)", bg: "rgba(128,128,128,0.1)" };
|
|
}
|
|
return { fg: "var(--primary-color)", bg: "rgba(var(--rgb-primary-color, 33,150,243),0.2)" };
|
|
}
|
|
|
|
_alpha(cssColor, sk) {
|
|
// The STATE_COLORS values are "var(--x, #hex)" strings; a translucent tint is
|
|
// built from the hex fallback so the icon chip reads on any theme.
|
|
const hex = /#([0-9a-fA-F]{6})/.exec(cssColor);
|
|
if (hex) {
|
|
const n = parseInt(hex[1], 16);
|
|
const r = (n >> 16) & 255;
|
|
const g = (n >> 8) & 255;
|
|
const b = n & 255;
|
|
return "rgba(" + r + "," + g + "," + b + ",0.18)";
|
|
}
|
|
return INACTIVE_STATES.includes(sk) ? "rgba(128,128,128,0.1)" : "rgba(128,128,128,0.15)";
|
|
}
|
|
|
|
_deviceTypeIcon() {
|
|
const hass = this._hass;
|
|
const cfg = this._cfg;
|
|
if (cfg.icon) return cfg.icon;
|
|
const stateObj = hass && hass.states[cfg.entity];
|
|
if (stateObj && stateObj.attributes && stateObj.attributes.icon) return stateObj.attributes.icon;
|
|
return "mdi:washing-machine";
|
|
}
|
|
|
|
_titleText() {
|
|
const cfg = this._cfg;
|
|
if (cfg.title) return cfg.title;
|
|
const hass = this._hass;
|
|
const reg = (hass && hass.entities) || {};
|
|
const devices = (hass && hass.devices) || {};
|
|
const ent = reg[cfg.entity];
|
|
if (ent && ent.device_id && devices[ent.device_id]) {
|
|
const dev = devices[ent.device_id];
|
|
const name = dev.name_by_user || dev.name;
|
|
if (name) return name;
|
|
}
|
|
const stateObj = hass && hass.states[cfg.entity];
|
|
if (stateObj && stateObj.attributes && stateObj.attributes.friendly_name) {
|
|
return String(stateObj.attributes.friendly_name).replace(/ (State|Status)$/i, "");
|
|
}
|
|
return "WashData";
|
|
}
|
|
|
|
_flags() {
|
|
const c = this._cfg || {};
|
|
return {
|
|
showState: c.show_state !== false,
|
|
showProgram: c.show_program !== false,
|
|
showDetails: c.show_details !== false, // tile: show the time / percentage line
|
|
showBar: c.show_progress_bar !== false,
|
|
showPhase: c.show_phase !== false,
|
|
showEnergy: c.show_energy !== false,
|
|
showAnomaly: c.show_anomaly !== false,
|
|
showSparkline: !!c.show_sparkline,
|
|
displayMode: c.display_mode || "time",
|
|
buttons: Array.isArray(c.buttons) ? c.buttons.filter((b) => BUTTON_ORDER.includes(b)) : [],
|
|
};
|
|
}
|
|
|
|
// ── Rendering ─────────────────────────────────────────────────────────────
|
|
_render() {
|
|
if (!this.shadowRoot || !this._cfg) return;
|
|
const sig = this._structureSig();
|
|
if (this._builtSig !== sig) {
|
|
this._build(this._cfg.layout || "tile");
|
|
this._builtSig = sig;
|
|
}
|
|
this._update();
|
|
}
|
|
|
|
_baseStyle() {
|
|
return (
|
|
":host{display:block;height:100%}" +
|
|
"ha-card{padding:0;background:var(--ha-card-background,var(--card-background-color,white));" +
|
|
"border-radius:var(--ha-card-border-radius,12px);box-shadow:var(--ha-card-box-shadow,none);" +
|
|
"overflow:hidden;cursor:pointer;height:100%;box-sizing:border-box;" +
|
|
"border:var(--ha-card-border-width,1px) solid var(--ha-card-border-color,var(--divider-color))}" +
|
|
".icon-container{border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;" +
|
|
"transition:background-color .3s,color .3s;position:relative}" +
|
|
"ha-icon{--mdc-icon-size:24px}" +
|
|
".primary{font-weight:500;color:var(--primary-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2}" +
|
|
".secondary{color:var(--secondary-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.2}" +
|
|
".bar{height:4px;border-radius:2px;background:var(--divider-color,rgba(128,128,128,.25));overflow:hidden}" +
|
|
".bar>i{display:block;height:100%;width:0;border-radius:2px;transition:width .5s ease,background-color .3s}" +
|
|
".chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:1px 8px;border-radius:10px;" +
|
|
"background:rgba(128,128,128,.14);color:var(--secondary-text-color);white-space:nowrap}" +
|
|
".chip.warn{background:rgba(255,152,0,.16);color:var(--warning-color,#ff9800)}" +
|
|
".acts{display:flex;gap:4px;align-items:center}" +
|
|
".wd-act{border:none;background:rgba(128,128,128,.12);color:var(--primary-text-color);border-radius:10px;" +
|
|
"width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}" +
|
|
".wd-act:hover{background:rgba(128,128,128,.22)}" +
|
|
".wd-act[disabled]{opacity:.35;pointer-events:none}" +
|
|
".wd-act ha-icon{--mdc-icon-size:20px}" +
|
|
"select.wd-prog{max-width:150px;font:inherit;color:var(--primary-text-color);background:var(--secondary-background-color);" +
|
|
"border:1px solid var(--divider-color);border-radius:8px;padding:4px 6px}"
|
|
);
|
|
}
|
|
|
|
_build(layout) {
|
|
if (layout === "detail") return this._buildDetail();
|
|
if (layout === "glance") return this._buildGlance();
|
|
return this._buildTile();
|
|
}
|
|
|
|
_attachGestures(cardEl) {
|
|
cardEl.addEventListener("pointerdown", this._onPointerDown);
|
|
cardEl.addEventListener("pointermove", this._onPointerMove);
|
|
cardEl.addEventListener("pointerup", this._onPointerUp);
|
|
cardEl.addEventListener("pointercancel", this._onPointerCancel);
|
|
cardEl.addEventListener("pointerleave", this._onPointerCancel);
|
|
}
|
|
|
|
_buildTile() {
|
|
const flags = this._flags();
|
|
const style = this._baseStyle() + ".tile{display:flex;flex-direction:row;align-items:center;padding:8px 12px;gap:12px;width:100%;box-sizing:border-box}" +
|
|
".tile .icon-container{width:40px;height:40px}" +
|
|
".tile .info{display:flex;flex-direction:column;justify-content:center;overflow:hidden;flex:1;min-width:0}" +
|
|
".tile .primary{font-size:14px}.tile .secondary{font-size:12px;margin-top:2px}" +
|
|
".tile .bar{margin-top:6px}";
|
|
this.shadowRoot.innerHTML =
|
|
"<style>" + style + "</style>" +
|
|
'<ha-card id="card"><div class="tile">' +
|
|
'<div class="icon-container" id="iconc"><ha-icon id="icon"></ha-icon></div>' +
|
|
'<div class="info"><div class="primary" id="title"></div>' +
|
|
'<div class="secondary" id="state"></div>' +
|
|
(flags.showBar ? '<div class="bar" id="bar"><i id="barfill"></i></div>' : "") +
|
|
"</div></div></ha-card>";
|
|
this._attachGestures(this.shadowRoot.getElementById("card"));
|
|
}
|
|
|
|
_buildDetail() {
|
|
const flags = this._flags();
|
|
const style = this._baseStyle() +
|
|
// The detail card hugs its content (height:auto) so a short cycle does not
|
|
// leave a large empty gap; the sections grid reserves rows via getGridOptions.
|
|
"ha-card.wd-detail{height:auto}" +
|
|
".detail{display:flex;flex-direction:column;gap:8px;padding:12px 14px;width:100%;box-sizing:border-box}" +
|
|
".detail .top{display:flex;align-items:center;gap:12px}" +
|
|
".detail .icon-container{width:48px;height:48px}.detail .icon-container ha-icon{--mdc-icon-size:30px}" +
|
|
".detail .info{flex:1;min-width:0}" +
|
|
".detail .primary{font-size:16px}.detail .secondary{font-size:13px;margin-top:2px}" +
|
|
".detail .eta{text-align:right;flex-shrink:0}" +
|
|
".detail .eta .big{font-size:22px;font-weight:600;color:var(--primary-text-color);line-height:1.1}" +
|
|
".detail .eta .lbl{font-size:11px;color:var(--secondary-text-color);text-transform:uppercase;letter-spacing:.04em}" +
|
|
".detail .bar{height:6px}" +
|
|
".detail .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}" +
|
|
".detail .meta:empty{display:none}" +
|
|
".detail canvas{width:100%;height:34px;display:block}";
|
|
this.shadowRoot.innerHTML =
|
|
"<style>" + style + "</style>" +
|
|
'<ha-card id="card" class="wd-detail"><div class="detail">' +
|
|
'<div class="top">' +
|
|
'<div class="icon-container" id="iconc"><ha-icon id="icon"></ha-icon></div>' +
|
|
'<div class="info"><div class="primary" id="title"></div><div class="secondary" id="state"></div></div>' +
|
|
'<div class="eta" id="etawrap"><div class="big" id="eta"></div><div class="lbl" id="etalbl"></div></div>' +
|
|
"</div>" +
|
|
(flags.showBar ? '<div class="bar" id="bar"><i id="barfill"></i></div>' : "") +
|
|
'<div class="meta" id="meta"></div>' +
|
|
(flags.showSparkline ? '<canvas id="spark"></canvas>' : "") +
|
|
(flags.buttons.length ? '<div class="acts" id="acts"></div>' : "") +
|
|
"</div></ha-card>";
|
|
this._attachGestures(this.shadowRoot.getElementById("card"));
|
|
if (flags.buttons.length) this._buildButtons(this.shadowRoot.getElementById("acts"), flags.buttons);
|
|
}
|
|
|
|
_buildButtons(container, buttons) {
|
|
if (!container) return;
|
|
container.innerHTML = "";
|
|
for (const b of buttons) {
|
|
if (b === "program") {
|
|
const sel = document.createElement("select");
|
|
sel.className = "wd-prog";
|
|
sel.id = "prog-select";
|
|
sel.addEventListener("click", (ev) => ev.stopPropagation());
|
|
sel.addEventListener("pointerdown", (ev) => ev.stopPropagation());
|
|
sel.addEventListener("change", (ev) => {
|
|
ev.stopPropagation();
|
|
this._onProgramChange(ev.target.value);
|
|
});
|
|
container.appendChild(sel);
|
|
continue;
|
|
}
|
|
const btn = document.createElement("button");
|
|
btn.className = "wd-act";
|
|
btn.dataset.btn = b;
|
|
btn.title = this._t("card.btn." + b, null, this._defaultBtnLabel(b));
|
|
btn.addEventListener("pointerdown", (ev) => ev.stopPropagation());
|
|
btn.addEventListener("pointerup", (ev) => ev.stopPropagation());
|
|
btn.addEventListener("click", (ev) => {
|
|
ev.stopPropagation();
|
|
this._onActionButton(b);
|
|
});
|
|
const ic = document.createElement("ha-icon");
|
|
ic.setAttribute("icon", BUTTON_ICONS[b] || "mdi:gesture-tap-button");
|
|
btn.appendChild(ic);
|
|
container.appendChild(btn);
|
|
}
|
|
}
|
|
|
|
_defaultBtnLabel(b) {
|
|
const map = {
|
|
pause: "Pause",
|
|
resume: "Resume",
|
|
terminate: "End cycle",
|
|
record_start: "Start recording",
|
|
record_stop: "Stop recording",
|
|
open_panel: "Open WashData",
|
|
};
|
|
return map[b] || b;
|
|
}
|
|
|
|
_buildGlance() {
|
|
const style = this._baseStyle() +
|
|
".glance{display:flex;flex-direction:column;padding:6px 0}" +
|
|
".row{display:flex;align-items:center;gap:12px;padding:8px 14px;cursor:pointer}" +
|
|
".row:hover{background:rgba(128,128,128,.06)}" +
|
|
".dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}" +
|
|
".row .info{flex:1;min-width:0}.row .primary{font-size:14px}.row .secondary{font-size:12px;margin-top:1px}" +
|
|
".row .rt{font-size:13px;color:var(--secondary-text-color);flex-shrink:0;text-align:right}";
|
|
const rows = this._glanceEntities()
|
|
.map(
|
|
(_, i) =>
|
|
'<div class="row" data-idx="' + i + '"><span class="dot" data-dot></span>' +
|
|
'<div class="info"><div class="primary" data-title></div><div class="secondary" data-sub></div></div>' +
|
|
'<div class="rt" data-rt></div></div>'
|
|
)
|
|
.join("");
|
|
this.shadowRoot.innerHTML = "<style>" + style + "</style>" + '<ha-card><div class="glance">' + rows + "</div></ha-card>";
|
|
this.shadowRoot.querySelectorAll(".row").forEach((rowEl) => {
|
|
rowEl.addEventListener("click", () => {
|
|
const idx = parseInt(rowEl.dataset.idx, 10);
|
|
const ent = this._glanceEntities()[idx];
|
|
if (ent) this._moreInfo(ent);
|
|
});
|
|
});
|
|
}
|
|
|
|
_glanceEntities() {
|
|
const cfg = this._cfg || {};
|
|
if (Array.isArray(cfg.entities) && cfg.entities.length) {
|
|
return cfg.entities.map((e) => (typeof e === "string" ? e : e && e.entity)).filter(Boolean);
|
|
}
|
|
return cfg.entity ? [cfg.entity] : [];
|
|
}
|
|
|
|
_update() {
|
|
if (!this.shadowRoot || !this._hass || !this._cfg) return;
|
|
const layout = this._cfg.layout || "tile";
|
|
if (layout === "glance") return this._updateGlance();
|
|
const roles = this._resolveRoles();
|
|
const vm = this._vm(roles);
|
|
if (layout === "detail") return this._updateDetail(vm);
|
|
return this._updateTile(vm);
|
|
}
|
|
|
|
_applyIcon(vm) {
|
|
const iconEl = this.shadowRoot.getElementById("icon");
|
|
const iconc = this.shadowRoot.getElementById("iconc");
|
|
if (!iconEl || !iconc) return;
|
|
iconEl.setAttribute("icon", this._deviceTypeIcon());
|
|
iconc.style.color = vm.color.fg;
|
|
iconc.style.background = vm.color.bg;
|
|
}
|
|
|
|
_applyBar(vm) {
|
|
const fill = this.shadowRoot.getElementById("barfill");
|
|
const bar = this.shadowRoot.getElementById("bar");
|
|
if (!fill || !bar) return;
|
|
if (!vm.isActive || vm.pct === null) {
|
|
bar.style.visibility = "hidden";
|
|
fill.style.width = "0%";
|
|
return;
|
|
}
|
|
bar.style.visibility = "visible";
|
|
fill.style.width = vm.pct + "%";
|
|
fill.style.background = vm.color.fg;
|
|
}
|
|
|
|
_updateTile(vm) {
|
|
const titleEl = this.shadowRoot.getElementById("title");
|
|
const stateEl = this.shadowRoot.getElementById("state");
|
|
if (vm.missing) {
|
|
if (titleEl) titleEl.textContent = this._t("card.entity_not_found", null, "Entity not found");
|
|
if (stateEl) stateEl.textContent = vm.missingEntity || "";
|
|
return;
|
|
}
|
|
titleEl.textContent = this._titleText();
|
|
this._applyIcon(vm);
|
|
this._applyBar(vm);
|
|
|
|
const flags = this._flags();
|
|
const parts = [];
|
|
if (flags.showState) {
|
|
if (vm.isRunning) {
|
|
if (vm.subState) parts.push(vm.subState);
|
|
} else {
|
|
parts.push(vm.stateLabel);
|
|
}
|
|
}
|
|
if (flags.showProgram && vm.program) parts.push(vm.program);
|
|
if (!vm.isInactive && flags.showDetails) {
|
|
if (flags.displayMode === "percentage" && vm.pct !== null) parts.push(vm.pct + "%");
|
|
else if (vm.timeText) parts.push(vm.timeText);
|
|
else if (vm.pct !== null) parts.push(vm.pct + "%");
|
|
}
|
|
if (flags.showAnomaly && vm.anomaly) parts.push(this._t("card.running_long", null, "running long"));
|
|
stateEl.textContent = parts.join(" • ");
|
|
}
|
|
|
|
_updateDetail(vm) {
|
|
const titleEl = this.shadowRoot.getElementById("title");
|
|
const stateEl = this.shadowRoot.getElementById("state");
|
|
const etaEl = this.shadowRoot.getElementById("eta");
|
|
const etaLbl = this.shadowRoot.getElementById("etalbl");
|
|
const etaWrap = this.shadowRoot.getElementById("etawrap");
|
|
const meta = this.shadowRoot.getElementById("meta");
|
|
if (vm.missing) {
|
|
if (titleEl) titleEl.textContent = this._t("card.entity_not_found", null, "Entity not found");
|
|
if (stateEl) stateEl.textContent = vm.missingEntity || "";
|
|
return;
|
|
}
|
|
titleEl.textContent = this._titleText();
|
|
this._applyIcon(vm);
|
|
this._applyBar(vm);
|
|
|
|
const flags = this._flags();
|
|
// Header secondary line: state + program.
|
|
const sub = [];
|
|
if (flags.showState) sub.push(vm.isRunning && vm.subState ? vm.subState : vm.stateLabel);
|
|
if (flags.showProgram && vm.program) sub.push(vm.program);
|
|
stateEl.textContent = sub.join(" • ");
|
|
|
|
// Big ETA (or percentage when running with no time).
|
|
if (etaWrap && etaEl && etaLbl) {
|
|
if (vm.isActive && vm.timeText) {
|
|
etaEl.textContent = vm.timeText;
|
|
etaLbl.textContent = this._t("card.remaining", null, "remaining");
|
|
etaWrap.style.visibility = "visible";
|
|
} else if (vm.isActive && vm.pct !== null) {
|
|
etaEl.textContent = vm.pct + "%";
|
|
etaLbl.textContent = this._t("card.progress", null, "progress");
|
|
etaWrap.style.visibility = "visible";
|
|
} else {
|
|
etaWrap.style.visibility = "hidden";
|
|
}
|
|
}
|
|
|
|
// Meta chips.
|
|
if (meta) {
|
|
meta.innerHTML = "";
|
|
const addChip = (text, warn) => {
|
|
if (!text) return;
|
|
const c = document.createElement("span");
|
|
c.className = "chip" + (warn ? " warn" : "");
|
|
c.textContent = text;
|
|
meta.appendChild(c);
|
|
};
|
|
if (flags.showPhase && vm.phase && vm.isActive) addChip(vm.phase);
|
|
if (flags.showEnergy && vm.energyText) addChip(vm.energyText);
|
|
if (flags.showEnergy && vm.costText) addChip(vm.costText);
|
|
if (vm.isRunning && vm.powerW !== null) addChip(Math.round(vm.powerW) + " W");
|
|
if (flags.showAnomaly && vm.anomaly) {
|
|
const ratio = vm.anomaly.ratio ? " (" + Math.round((vm.anomaly.ratio - 1) * 100) + "%)" : "";
|
|
addChip(this._t("card.running_long", null, "Running long") + ratio, true);
|
|
}
|
|
}
|
|
|
|
this._updateButtons(vm);
|
|
if (flags.showSparkline) this._updateSparkline(vm);
|
|
}
|
|
|
|
_updateButtons(vm) {
|
|
const acts = this.shadowRoot.getElementById("acts");
|
|
if (!acts) return;
|
|
const sk = vm.sk;
|
|
const enabled = {
|
|
pause: sk === "running",
|
|
resume: sk === "paused" || sk === "user_paused",
|
|
terminate: vm.isActive,
|
|
record_start: !vm.isActive,
|
|
record_stop: true,
|
|
open_panel: true,
|
|
};
|
|
acts.querySelectorAll(".wd-act").forEach((btn) => {
|
|
const b = btn.dataset.btn;
|
|
const target = b === "open_panel" ? true : b === "program" ? true : vm.buttons[b];
|
|
const ok = enabled[b] !== false && (b === "open_panel" || target);
|
|
if (ok) btn.removeAttribute("disabled");
|
|
else btn.setAttribute("disabled", "");
|
|
});
|
|
const sel = this.shadowRoot.getElementById("prog-select");
|
|
if (sel && vm.select) {
|
|
const selObj = this._hass.states[vm.select];
|
|
const opts = (selObj && selObj.attributes && selObj.attributes.options) || [];
|
|
const cur = selObj && selObj.state;
|
|
const sig = opts.join("|");
|
|
if (sel._sig !== sig) {
|
|
sel._sig = sig;
|
|
sel.innerHTML = "";
|
|
for (const o of opts) {
|
|
const opt = document.createElement("option");
|
|
opt.value = o;
|
|
opt.textContent = o;
|
|
sel.appendChild(opt);
|
|
}
|
|
}
|
|
if (cur !== undefined) sel.value = cur;
|
|
} else if (sel) {
|
|
sel.setAttribute("disabled", "");
|
|
}
|
|
}
|
|
|
|
_updateSparkline(vm) {
|
|
const canvas = this.shadowRoot.getElementById("spark");
|
|
if (!canvas) return;
|
|
// Reset the buffer when a new cycle starts / the machine goes idle.
|
|
if (vm.sk !== this._sparkState) {
|
|
if (!vm.isActive) this._spark = [];
|
|
this._sparkState = vm.sk;
|
|
}
|
|
if (vm.isActive && vm.powerW !== null) {
|
|
const last = this._spark[this._spark.length - 1];
|
|
const now = Date.now();
|
|
if (!last || now - last.t > 2000) {
|
|
this._spark.push({ t: now, w: vm.powerW });
|
|
if (this._spark.length > SPARK_MAX_POINTS) this._spark.shift();
|
|
}
|
|
}
|
|
const pts = this._spark;
|
|
// Hide the canvas until there is a line to draw, so an early / idle cycle
|
|
// does not leave a blank 34px band above the buttons.
|
|
if (pts.length < 2) {
|
|
canvas.style.display = "none";
|
|
return;
|
|
}
|
|
canvas.style.display = "block";
|
|
const w = canvas.clientWidth || 300;
|
|
const h = 34;
|
|
if (canvas.width !== w) canvas.width = w;
|
|
if (canvas.height !== h) canvas.height = h;
|
|
const ctx = canvas.getContext("2d");
|
|
ctx.clearRect(0, 0, w, h);
|
|
const max = Math.max.apply(null, pts.map((p) => p.w)) || 1;
|
|
const pad = 3;
|
|
const dx = (w - pad * 2) / (pts.length - 1);
|
|
ctx.beginPath();
|
|
pts.forEach((p, i) => {
|
|
const x = pad + i * dx;
|
|
const y = h - pad - (p.w / max) * (h - pad * 2);
|
|
if (i === 0) ctx.moveTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
});
|
|
ctx.strokeStyle = vm.color.fg;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineJoin = "round";
|
|
ctx.stroke();
|
|
}
|
|
|
|
_updateGlance() {
|
|
const entities = this._glanceEntities();
|
|
const rows = this.shadowRoot.querySelectorAll(".row");
|
|
entities.forEach((ent, i) => {
|
|
const rowEl = rows[i];
|
|
if (!rowEl) return;
|
|
const roles = this._resolveRoles(ent);
|
|
const vm = this._vm(roles);
|
|
const dot = rowEl.querySelector("[data-dot]");
|
|
const title = rowEl.querySelector("[data-title]");
|
|
const sub = rowEl.querySelector("[data-sub]");
|
|
const rt = rowEl.querySelector("[data-rt]");
|
|
if (vm.missing) {
|
|
if (title) title.textContent = ent;
|
|
if (sub) sub.textContent = this._t("card.entity_not_found", null, "Entity not found");
|
|
if (dot) dot.style.background = "var(--disabled-text-color, grey)";
|
|
if (rt) rt.textContent = "";
|
|
return;
|
|
}
|
|
if (dot) dot.style.background = vm.color.fg;
|
|
if (title) title.textContent = this._deviceNameFor(ent);
|
|
const parts = [];
|
|
if (vm.isRunning && vm.subState) parts.push(vm.subState);
|
|
else parts.push(vm.stateLabel);
|
|
if (vm.program) parts.push(vm.program);
|
|
if (sub) sub.textContent = parts.join(" • ");
|
|
if (rt) {
|
|
if (vm.isActive && vm.timeText) rt.textContent = vm.timeText;
|
|
else if (vm.isActive && vm.pct !== null) rt.textContent = vm.pct + "%";
|
|
else rt.textContent = "";
|
|
}
|
|
});
|
|
}
|
|
|
|
_deviceNameFor(entityId) {
|
|
const hass = this._hass;
|
|
const reg = (hass && hass.entities) || {};
|
|
const devices = (hass && hass.devices) || {};
|
|
const ent = reg[entityId];
|
|
if (ent && ent.device_id && devices[ent.device_id]) {
|
|
const dev = devices[ent.device_id];
|
|
const name = dev.name_by_user || dev.name;
|
|
if (name) return name;
|
|
}
|
|
const stateObj = hass && hass.states[entityId];
|
|
if (stateObj && stateObj.attributes && stateObj.attributes.friendly_name) {
|
|
return String(stateObj.attributes.friendly_name).replace(/ (State|Status)$/i, "");
|
|
}
|
|
return entityId;
|
|
}
|
|
|
|
// ── Actions ───────────────────────────────────────────────────────────────
|
|
_onActionButton(b) {
|
|
const hass = this._hass;
|
|
if (!hass) return;
|
|
if (b === "open_panel") {
|
|
this._navigate("/" + "ha-washdata");
|
|
return;
|
|
}
|
|
const roles = this._resolveRoles();
|
|
const entityId = roles._buttons && roles._buttons[b];
|
|
if (!entityId) return;
|
|
this._fireHaptic("light");
|
|
hass.callService("button", "press", { entity_id: entityId });
|
|
}
|
|
|
|
_onProgramChange(value) {
|
|
const hass = this._hass;
|
|
if (!hass || !value) return;
|
|
const roles = this._resolveRoles();
|
|
const sel = roles._select;
|
|
if (!sel) return;
|
|
hass.callService("select", "select_option", { entity_id: sel, option: value });
|
|
}
|
|
|
|
_moreInfo(entityId) {
|
|
if (!entityId) return;
|
|
this.dispatchEvent(new CustomEvent("hass-more-info", { detail: { entityId }, bubbles: true, composed: true }));
|
|
}
|
|
|
|
_navigate(path) {
|
|
window.history.pushState(null, "", path);
|
|
window.dispatchEvent(new CustomEvent("location-changed", { detail: { replace: false } }));
|
|
}
|
|
|
|
// ── Gesture handling (tap / hold / double-tap) ──────────────────────────────
|
|
_clearHoldTimer() {
|
|
if (this._holdTimer) {
|
|
window.clearTimeout(this._holdTimer);
|
|
this._holdTimer = null;
|
|
}
|
|
}
|
|
|
|
_onPointerDown(ev) {
|
|
if (ev.button !== undefined && ev.button !== 0) return;
|
|
this._holdTriggered = false;
|
|
this._pointerCanceled = false;
|
|
this._pointerStart = { x: ev.clientX, y: ev.clientY };
|
|
const holdCfg = this._cfg && this._cfg.hold_action;
|
|
if (holdCfg && holdCfg.action && holdCfg.action !== "none") {
|
|
this._clearHoldTimer();
|
|
this._holdTimer = window.setTimeout(() => {
|
|
this._holdTimer = null;
|
|
this._holdTriggered = true;
|
|
this._fireHaptic("success");
|
|
this._executeAction(holdCfg);
|
|
}, HOLD_MS);
|
|
}
|
|
}
|
|
|
|
_onPointerMove(ev) {
|
|
if (!this._pointerStart) return;
|
|
const dx = ev.clientX - this._pointerStart.x;
|
|
const dy = ev.clientY - this._pointerStart.y;
|
|
if (dx * dx + dy * dy > TAP_MOVE_TOLERANCE * TAP_MOVE_TOLERANCE) {
|
|
this._clearHoldTimer();
|
|
this._pointerStart = null;
|
|
this._pointerCanceled = true;
|
|
}
|
|
}
|
|
|
|
_onPointerCancel() {
|
|
this._clearHoldTimer();
|
|
}
|
|
|
|
_onPointerUp() {
|
|
this._clearHoldTimer();
|
|
if (this._pointerCanceled) {
|
|
this._pointerCanceled = false;
|
|
return;
|
|
}
|
|
if (this._holdTriggered) {
|
|
this._holdTriggered = false;
|
|
return;
|
|
}
|
|
const tapCfg = (this._cfg && this._cfg.tap_action) || { action: "more-info" };
|
|
const doubleCfg = this._cfg && this._cfg.double_tap_action;
|
|
const hasDouble = doubleCfg && doubleCfg.action && doubleCfg.action !== "none";
|
|
if (!hasDouble) {
|
|
this._executeAction(tapCfg);
|
|
return;
|
|
}
|
|
const now = Date.now();
|
|
if (this._tapTimer && now - this._lastTapTime < DOUBLE_TAP_MS) {
|
|
window.clearTimeout(this._tapTimer);
|
|
this._tapTimer = null;
|
|
this._lastTapTime = 0;
|
|
this._executeAction(doubleCfg);
|
|
return;
|
|
}
|
|
this._lastTapTime = now;
|
|
this._tapTimer = window.setTimeout(() => {
|
|
this._tapTimer = null;
|
|
this._executeAction(tapCfg);
|
|
}, DOUBLE_TAP_MS);
|
|
}
|
|
|
|
_fireHaptic(type) {
|
|
this.dispatchEvent(new CustomEvent("haptic", { detail: type, bubbles: true, composed: true }));
|
|
}
|
|
|
|
_executeAction(actionCfg) {
|
|
if (!actionCfg) return;
|
|
const action = actionCfg.action || "more-info";
|
|
const entityId = actionCfg.entity || (this._cfg && this._cfg.entity);
|
|
switch (action) {
|
|
case "none":
|
|
return;
|
|
case "more-info":
|
|
this._moreInfo(entityId);
|
|
return;
|
|
case "toggle":
|
|
if (!this._hass || !entityId) return;
|
|
this._hass.callService("homeassistant", "toggle", { entity_id: entityId });
|
|
return;
|
|
case "call-service":
|
|
case "perform-action": {
|
|
const svc = actionCfg.perform_action || actionCfg.service;
|
|
if (!svc || !this._hass) return;
|
|
const [svcDomain, svcName] = svc.split(".");
|
|
if (!svcDomain || !svcName) return;
|
|
const data = { ...(actionCfg.data || actionCfg.service_data || {}) };
|
|
this._hass.callService(svcDomain, svcName, data, actionCfg.target);
|
|
return;
|
|
}
|
|
case "navigate": {
|
|
const path = actionCfg.navigation_path;
|
|
if (!path) return;
|
|
if (actionCfg.navigation_replace) {
|
|
window.history.replaceState(window.history.state, "", path);
|
|
window.dispatchEvent(new CustomEvent("location-changed", { detail: { replace: true } }));
|
|
} else {
|
|
this._navigate(path);
|
|
}
|
|
return;
|
|
}
|
|
case "url": {
|
|
const url = actionCfg.url_path;
|
|
if (!url) return;
|
|
window.open(url, "_blank", "noopener,noreferrer");
|
|
return;
|
|
}
|
|
default:
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
class WashDataCardEditor extends HTMLElement {
|
|
_lang() {
|
|
const raw =
|
|
(this._hass && this._hass.locale && this._hass.locale.language) ||
|
|
(this._hass && this._hass.language) ||
|
|
"en";
|
|
return typeof raw === "string" && raw ? raw : "en";
|
|
}
|
|
|
|
_t(key, fallback) {
|
|
const lang = this._lang();
|
|
const dict = _panelTrans[lang] || _panelTrans["en"];
|
|
if (dict) {
|
|
const val = key.split(".").reduce((o, k) => (o && o[k] !== undefined ? o[k] : null), dict);
|
|
if (val && typeof val === "string") return val;
|
|
}
|
|
return fallback || key;
|
|
}
|
|
|
|
setConfig(config) {
|
|
this._cfg = { layout: "tile", ...config };
|
|
this._render();
|
|
}
|
|
|
|
set hass(hass) {
|
|
this._hass = hass;
|
|
const lang = this._lang();
|
|
const jobs = [];
|
|
if (!_panelTrans["en"]) jobs.push(loadPanelLang("en"));
|
|
if (lang && lang !== "en" && !_panelTrans[lang]) jobs.push(loadPanelLang(lang));
|
|
if (jobs.length) Promise.all(jobs).then(() => this._render());
|
|
if (this._form) this._form.hass = hass;
|
|
}
|
|
|
|
_render() {
|
|
if (!this.shadowRoot) this.attachShadow({ mode: "open" });
|
|
if (!this._form) {
|
|
this.shadowRoot.innerHTML =
|
|
"<style>.editor-container{padding:8px 4px}ha-form{display:block}</style>" +
|
|
'<div class="editor-container" id="editor-container"></div>';
|
|
this._form = document.createElement("ha-form");
|
|
this.shadowRoot.getElementById("editor-container").appendChild(this._form);
|
|
this._form.addEventListener("value-changed", (ev) => this._valueChanged(ev));
|
|
this._form.computeLabel = (schema) => this._t("card.editor." + schema.name, this._humanize(schema.name));
|
|
}
|
|
this._form.schema = this._schema();
|
|
this._form.data = this._cfg;
|
|
if (this._hass) this._form.hass = this._hass;
|
|
}
|
|
|
|
_humanize(name) {
|
|
return name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
}
|
|
|
|
_schema() {
|
|
// Flat schema (no nested/expandable groups) so config keys always stay at the
|
|
// top level regardless of the running Home Assistant version.
|
|
const layout = (this._cfg && this._cfg.layout) || "tile";
|
|
const layoutSel = {
|
|
name: "layout",
|
|
selector: {
|
|
select: {
|
|
mode: "dropdown",
|
|
options: [
|
|
{ value: "tile", label: this._t("card.layout.tile", "Tile (compact)") },
|
|
{ value: "detail", label: this._t("card.layout.detail", "Detail (rich)") },
|
|
{ value: "glance", label: this._t("card.layout.glance", "Glance (multiple devices)") },
|
|
],
|
|
},
|
|
},
|
|
};
|
|
if (layout === "glance") {
|
|
return [
|
|
layoutSel,
|
|
{ name: "entities", selector: { entity: { domain: "sensor", multiple: true } } },
|
|
{ name: "title", selector: { text: {} } },
|
|
];
|
|
}
|
|
const schema = [
|
|
layoutSel,
|
|
{ name: "entity", selector: { entity: { domain: "sensor" } } },
|
|
{ name: "title", selector: { text: {} } },
|
|
{ name: "icon", selector: { icon: {} } },
|
|
{ name: "show_state", selector: { boolean: {} } },
|
|
{ name: "show_program", selector: { boolean: {} } },
|
|
{ name: "show_progress_bar", selector: { boolean: {} } },
|
|
{
|
|
name: "display_mode",
|
|
selector: {
|
|
select: {
|
|
mode: "dropdown",
|
|
options: [
|
|
{ value: "time", label: this._t("card.show_time_remaining", "Show Time Remaining") },
|
|
{ value: "percentage", label: this._t("card.show_percentage", "Show Percentage") },
|
|
],
|
|
},
|
|
},
|
|
},
|
|
{ name: "active_color", selector: { color_rgb: {} } },
|
|
];
|
|
if (layout === "detail") {
|
|
schema.push(
|
|
{ name: "show_phase", selector: { boolean: {} } },
|
|
{ name: "show_energy", selector: { boolean: {} } },
|
|
{ name: "show_anomaly", selector: { boolean: {} } },
|
|
{ name: "show_sparkline", selector: { boolean: {} } },
|
|
{
|
|
name: "buttons",
|
|
selector: {
|
|
select: {
|
|
multiple: true,
|
|
mode: "list",
|
|
options: BUTTON_ORDER.map((b) => ({ value: b, label: this._t("card.btn." + b, this._humanize(b)) })),
|
|
},
|
|
},
|
|
}
|
|
);
|
|
}
|
|
schema.push(
|
|
{ name: "program_entity", selector: { entity: { domain: ["sensor", "select", "input_select", "input_text"] } } },
|
|
{ name: "time_entity", selector: { entity: { domain: "sensor" } } },
|
|
{ name: "pct_entity", selector: { entity: { domain: "sensor" } } },
|
|
{ name: "power_entity", selector: { entity: { domain: "sensor" } } },
|
|
{ name: "tap_action", selector: { ui_action: {} } },
|
|
{ name: "hold_action", selector: { ui_action: {} } },
|
|
{ name: "double_tap_action", selector: { ui_action: {} } }
|
|
);
|
|
return schema;
|
|
}
|
|
|
|
_valueChanged(ev) {
|
|
if (!this._cfg) return;
|
|
const val = ev.detail.value;
|
|
const layoutChanged = val.layout && val.layout !== this._cfg.layout;
|
|
this._cfg = { ...this._cfg, ...val };
|
|
this.dispatchEvent(
|
|
new CustomEvent("config-changed", { detail: { config: this._cfg }, bubbles: true, composed: true })
|
|
);
|
|
// Re-render the schema when the layout changes so its layout-specific fields appear.
|
|
if (layoutChanged) this._render();
|
|
}
|
|
}
|
|
|
|
customElements.define(CARD_TAG, WashDataCard);
|
|
customElements.define(EDITOR_TAG, WashDataCardEditor);
|
|
|
|
window.customCards = window.customCards || [];
|
|
window.customCards.push({
|
|
type: CARD_TAG,
|
|
name: "WashData Card",
|
|
preview: true,
|
|
description: "Adaptive card for WashData appliances: compact tile, rich detail, or multi-device glance.",
|
|
documentationURL: "https://github.com/3dg1luk43/ha_washdata",
|
|
});
|