Remove previous changes
This commit is contained in:
parent
127129dcf5
commit
abc0c966cb
|
|
@ -787,105 +787,9 @@ class CookCliChecklistCard extends HTMLElement {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Enrobe circular-timer-card (karlis-vagalis/circular-timer-card) sans la
|
|
||||||
* modifier : superpose un bouton "Démarrer" tant que le minuteur est à
|
|
||||||
* l'état idle, avec la durée voulue (transmise à timer.start). Une fois
|
|
||||||
* démarré, le bouton disparaît et les actions natives de la carte prennent
|
|
||||||
* le relais (tap = pause/reprise, appui long = détail, double-tap = annuler).
|
|
||||||
*
|
|
||||||
* Config :
|
|
||||||
* type: custom:cookcli-timer-start-card
|
|
||||||
* entity: timer.xxx
|
|
||||||
* duration: "00:10:00" # HH:MM:SS, passé à timer.start au clic
|
|
||||||
* label: "10 min" # optionnel, affiché sur le bouton
|
|
||||||
* timer_card_config: {} # optionnel, transmis tel quel à
|
|
||||||
* # circular-timer-card (bins, color, layout…)
|
|
||||||
*/
|
|
||||||
class CookCliTimerStartCard extends HTMLElement {
|
|
||||||
setConfig(config) {
|
|
||||||
if (!config || !config.entity) {
|
|
||||||
throw new Error("La carte a besoin d'une `entity` (timer).");
|
|
||||||
}
|
|
||||||
this._config = config;
|
|
||||||
this._state = null;
|
|
||||||
|
|
||||||
if (!this.shadowRoot) this.attachShadow({ mode: "open" });
|
|
||||||
this._buildDom();
|
|
||||||
}
|
|
||||||
|
|
||||||
getCardSize() {
|
|
||||||
return 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
_buildDom() {
|
|
||||||
this.shadowRoot.innerHTML = `
|
|
||||||
<style>
|
|
||||||
.wrap { position: relative; }
|
|
||||||
.overlay {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
background: color-mix(in srgb, var(--card-background-color) 55%, transparent);
|
|
||||||
border-radius: var(--ha-card-border-radius, 12px);
|
|
||||||
transition: opacity 0.2s ease;
|
|
||||||
}
|
|
||||||
.overlay ha-icon { color: var(--primary-color); --mdc-icon-size: 32px; }
|
|
||||||
.overlay span { font-size: 0.9em; color: var(--primary-text-color); }
|
|
||||||
.overlay.hidden { opacity: 0; pointer-events: none; }
|
|
||||||
</style>
|
|
||||||
<div class="wrap">
|
|
||||||
<div class="card-slot"></div>
|
|
||||||
<div class="overlay hidden">
|
|
||||||
<ha-icon icon="mdi:play-circle"></ha-icon>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
this._overlay = this.shadowRoot.querySelector(".overlay");
|
|
||||||
this._overlay.querySelector("span").textContent = this._config.label
|
|
||||||
? `Démarrer ${this._config.label}`
|
|
||||||
: "Démarrer";
|
|
||||||
this._overlay.addEventListener("click", (ev) => this._onStart(ev));
|
|
||||||
|
|
||||||
this._inner = document.createElement("circular-timer-card");
|
|
||||||
this._inner.setConfig({
|
|
||||||
type: "custom:circular-timer-card",
|
|
||||||
entity: this._config.entity,
|
|
||||||
...(this._config.timer_card_config || {}),
|
|
||||||
});
|
|
||||||
this.shadowRoot.querySelector(".card-slot").appendChild(this._inner);
|
|
||||||
}
|
|
||||||
|
|
||||||
_onStart(ev) {
|
|
||||||
ev.stopPropagation();
|
|
||||||
if (!this._hass || !this._config.duration) return;
|
|
||||||
this._hass.callService("timer", "start", {
|
|
||||||
entity_id: this._config.entity,
|
|
||||||
duration: this._config.duration,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
set hass(hass) {
|
|
||||||
this._hass = hass;
|
|
||||||
if (this._inner) this._inner.hass = hass;
|
|
||||||
const state = hass.states[this._config.entity]?.state;
|
|
||||||
if (state !== this._state) {
|
|
||||||
this._state = state;
|
|
||||||
this._overlay.classList.toggle("hidden", state !== "idle");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
customElements.define("cookcli-card", CookCliCard);
|
customElements.define("cookcli-card", CookCliCard);
|
||||||
customElements.define("cookcli-card-editor", CookCliCardEditor);
|
customElements.define("cookcli-card-editor", CookCliCardEditor);
|
||||||
customElements.define("cookcli-checklist-card", CookCliChecklistCard);
|
customElements.define("cookcli-checklist-card", CookCliChecklistCard);
|
||||||
customElements.define("cookcli-timer-start-card", CookCliTimerStartCard);
|
|
||||||
|
|
||||||
window.customCards = window.customCards || [];
|
window.customCards = window.customCards || [];
|
||||||
window.customCards.push({
|
window.customCards.push({
|
||||||
|
|
|
||||||
|
|
@ -455,11 +455,17 @@ class CookCliRecipeViewStrategy extends HTMLElement {
|
||||||
if (!seconds) continue;
|
if (!seconds) continue;
|
||||||
const label = `${timer.duration ?? ""} ${timer.unit ?? ""}`.trim();
|
const label = `${timer.duration ?? ""} ${timer.unit ?? ""}`.trim();
|
||||||
leftCards.push({
|
leftCards.push({
|
||||||
type: "custom:cookcli-timer-start-card",
|
type: "button",
|
||||||
entity: config.timer_entity,
|
name: `Démarrer ${label}`,
|
||||||
duration: this._secondsToHms(seconds),
|
icon: "mdi:timer-outline",
|
||||||
label,
|
tap_action: {
|
||||||
|
action: "perform-action",
|
||||||
|
perform_action: "timer.start",
|
||||||
|
target: { entity_id: config.timer_entity },
|
||||||
|
data: { duration: this._secondsToHms(seconds) },
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
leftCards.push({ type: "custom:circular-timer-card", entity: config.timer_entity });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue