Wind jetzt klickbar und AE.js rein

2026-04-29 08:43:53 +02:00
parent e394b55cfd
commit 0a4ade5bdd
2 changed files with 307 additions and 1 deletions
@@ -200,6 +200,34 @@ class SternwarteCard extends HTMLElement {
    });
  }

+  _showMoreInfo(entityId) {
+    if (!entityId) return;
+    const event = new Event("hass-more-info", {
+      bubbles: true,
+      composed: true,
+    });
+    event.detail = { entityId };
+    this.dispatchEvent(event);
+  }
+
+  _bindMoreInfo(id, entityId) {
+    const element = this.shadowRoot.getElementById(id);
+    if (!element || !entityId) return;
+
+    const openMoreInfo = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this._showMoreInfo(entityId);
+    };
+
+    element.addEventListener("click", openMoreInfo);
+    element.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        openMoreInfo(event);
+      }
+    });
+  }
+
  _setDateTime(entityId, inputId, key) {
    const input = this.shadowRoot.getElementById(inputId);
    const field = this._scheduleFieldState(key);
@@ -723,6 +751,19 @@ class SternwarteCard extends HTMLElement {
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.08);
        }
+        .stat.clickable {
+          cursor: pointer;
+          transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+        }
+        .stat.clickable:hover {
+          transform: translateY(-1px);
+          border-color: rgba(255,255,255,0.2);
+          background: rgba(255,255,255,0.07);
+        }
+        .stat.clickable:focus-visible {
+          outline: 2px solid var(--primary-color);
+          outline-offset: 2px;
+        }
        .stat-spacer {
          visibility: hidden;
          pointer-events: none;
@@ -1052,7 +1093,13 @@ class SternwarteCard extends HTMLElement {
                  <span class="stat-label">Schlie\u00dfen geplant</span>
                  <span class="stat-value" style="font-size:16px">${this._formatDateTime(closeSchedule)}</span>
                </div>
-                <div class="stat ${windIndicator.className}">
+                <div
+                  class="stat ${windIndicator.className} clickable"
+                  id="wind-stat"
+                  role="button"
+                  tabindex="0"
+                  aria-label="Windverlauf öffnen"
+                >
                  <span class="stat-label">Wind</span>
                  <span class="stat-value">${windIndicator.display}</span>
                </div>
@@ -1159,6 +1206,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._bindScheduleInput("open", "open-schedule-input", openSchedule);
    this._bindScheduleInput("close", "close-schedule-input", closeSchedule);
  }