Eskimue/Sonnenweg-Observatory-Home-Assistant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Regen jetzt klickbar

Browse Source
This commit is contained in:
Eskimue
2026-05-13 20:03:01 +02:00
parent b497820c30
commit 698dc0aa82
3 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sternwarte-homeassistant-card/dist/sternwarte-card.js
Vendored
+20 -3
View File
@@ -388,12 +388,15 @@ class SternwarteCard extends HTMLElement {
return "Unbekannt";
}
_boolBadge(label, entityId, onText = "Aktiv", offText = "Aus", extraClass = "") {
_boolBadge(label, entityId, onText = "Aktiv", offText = "Aus", extraClass = "", options = {}) {
const state = this._state(entityId);
const on = state?.state === "on";
const animStyle = (on && extraClass) ? ` style="animation-delay: -${Date.now() % 1000}ms"` : "";
const idAttr = options.id ? ` id="${options.id}"` : "";
const clickableClass = options.clickable ? " clickable" : "";
const roleAttr = options.clickable ? ` role="button" tabindex="0" aria-label="${label} öffnen"` : "";
return `
<div class="badge ${on ? "on" : ""} ${extraClass}"${animStyle}>
<div class="badge ${on ? "on" : ""} ${extraClass}${clickableClass}"${idAttr}${roleAttr}${animStyle}>
<span class="badge-label">${label}</span>
<span class="badge-value">${on ? onText : offText}</span>
</div>
@@ -1092,6 +1095,19 @@ class SternwarteCard extends HTMLElement {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
}
.badge.clickable {
cursor: pointer;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.badge.clickable:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,0.2);
background: rgba(255,255,255,0.07);
}
.badge.clickable:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.badge.on {
background: rgba(76, 175, 80, 0.12);
border-color: rgba(76, 175, 80, 0.3);
@@ -1289,7 +1305,7 @@ class SternwarteCard extends HTMLElement {
${this._boolBadge("Dach zu", this.config.roofClosed, "Ja", "Nein")}
${this._boolBadge("Dach offen", this.config.roofOpen, "Ja", "Nein")}
${this._boolBadge("Dach bewegt", this.config.roofMoving, "Ja", "Nein", "moving")}
${this._boolBadge("Regen", this.config.rain, "Ja", "Nein", "rain")}
${this._boolBadge("Regen", this.config.rain, "Ja", "Nein", "rain", { id: "rain-badge", clickable: true })}
</div>
<div class="astro">
<div class="astro-meta">
@@ -1383,6 +1399,7 @@ class SternwarteCard extends HTMLElement {
this._bindClick("open-schedule-btn", () => this._setDateTime(openScheduleEntityId, "open-schedule-input", "open"));
this._bindClick("close-schedule-btn", () => this._setDateTime(closeScheduleEntityId, "close-schedule-input", "close"));
this._bindMoreInfo("wind-stat", this.config.wind);
this._bindMoreInfo("rain-badge", this.config.rain);
this._bindScheduleInput("open", "open-schedule-input", openSchedule);
this._bindScheduleInput("close", "close-schedule-input", closeSchedule);
}