Regen jetzt klickbar

sternwarte-homeassistant-card/dist/sternwarte-card.js

@@ -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);
   }