Merge pull request #663 from timdreier/main

feat: added option to navigate from entities
flixlix · Aug 26, 2024 · 766bd8f · 766bd8f
2 parents b45baae + d119f3b
commit 766bd8f
Show file tree

Hide file tree

Showing 40 changed files with 5,287 additions and 4,133 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/battery.ts b/src/components/battery.ts
@@ -17,33 +17,33 @@ export const batteryElement = (
   return html`<div class="circle-container battery">
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
         const target = entities.battery?.state_of_charge!
           ? entities.battery?.state_of_charge!
           : typeof entities.battery?.entity === "string"
           ? entities.battery?.entity!
           : entities.battery?.entity!.production;
-        main.openDetails(e, target);
+        main.openDetails(e, entities.battery?.tap_action, target);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
           const target = entities.battery?.state_of_charge!
             ? entities.battery?.state_of_charge!
             : typeof entities.battery!.entity === "string"
             ? entities.battery!.entity!
             : entities.battery!.entity!.production;
-          main.openDetails(e, target);
+          main.openDetails(e, entities.battery?.tap_action, target);
         }
       }}
     >
       ${battery.state_of_charge.state !== null && entities.battery?.show_state_of_charge !== false
         ? html` <span
-            @click=${(e: { stopPropagation: () => void }) => {
-              main.openDetails(e, entities.battery?.state_of_charge!);
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+              main.openDetails(e, entities.battery?.tap_action, entities.battery?.state_of_charge!);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
-                main.openDetails(e, entities.battery?.state_of_charge!);
+                main.openDetails(e, entities.battery?.tap_action, entities.battery?.state_of_charge!);
               }
             }}
             id="battery-state-of-charge-text"
@@ -61,12 +61,12 @@ export const batteryElement = (
         ? html` <ha-icon
             id="battery-icon"
             .icon=${battery.icon}
-            @click=${(e: { stopPropagation: () => void }) => {
-              main.openDetails(e, entities.battery?.state_of_charge!);
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+              main.openDetails(e, entities.battery?.tap_action, entities.battery?.state_of_charge!);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
-                main.openDetails(e, entities.battery?.state_of_charge!);
+                main.openDetails(e, entities.battery?.tap_action, entities.battery?.state_of_charge!);
               }
             }}
           />`
@@ -77,16 +77,16 @@ export const batteryElement = (
       (entities.battery?.display_state === "one_way" && battery.state.toBattery !== 0)
         ? html`<span
             class="battery-in"
-            @click=${(e: { stopPropagation: () => void }) => {
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
               const target = typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.production!;
 
-              main.openDetails(e, target);
+              main.openDetails(e, entities.battery?.tap_action, target);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
                 const target = typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.production!;
 
-                main.openDetails(e, target);
+                main.openDetails(e, entities.battery?.tap_action, target);
               }
             }}
           >
@@ -105,16 +105,16 @@ export const batteryElement = (
       (entities.battery?.display_state === "one_way" && (battery.state.toBattery === 0 || battery.state.fromBattery !== 0))
         ? html`<span
             class="battery-out"
-            @click=${(e: { stopPropagation: () => void }) => {
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
               const target = typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.consumption!;
 
-              main.openDetails(e, target);
+              main.openDetails(e, entities.battery?.tap_action, target);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
                 const target = typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.consumption!;
 
-                main.openDetails(e, target);
+                main.openDetails(e, entities.battery?.tap_action, target);
               }
             }}
           >

diff --git a/src/components/grid.ts b/src/components/grid.ts
@@ -13,17 +13,17 @@ export const gridElement = (
   return html`<div class="circle-container grid">
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
         const outageTarget = grid.powerOutage?.entityGenerator ?? entities.grid?.power_outage?.entity;
         const target =
           grid.powerOutage?.isOutage && outageTarget
             ? outageTarget
             : typeof entities.grid!.entity === "string"
             ? entities.grid!.entity
             : entities.grid!.entity.consumption!;
-        main.openDetails(e, target);
+        main.openDetails(e, entities.grid?.tap_action, target);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
           const outageTarget = grid.powerOutage?.entityGenerator ?? entities.grid?.power_outage?.entity;
           const target =
@@ -32,7 +32,7 @@ export const gridElement = (
               : typeof entities.grid!.entity === "string"
               ? entities.grid!.entity
               : entities.grid!.entity.consumption!;
-          main.openDetails(e, target);
+          main.openDetails(e, entities.grid?.tap_action, target);
         }
       }}
     >
@@ -46,14 +46,14 @@ export const gridElement = (
       !grid.powerOutage.isOutage
         ? html`<span
             class="return"
-            @click=${(e: { stopPropagation: () => void }) => {
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
               const target = typeof entities.grid!.entity === "string" ? entities.grid!.entity : entities.grid!.entity.production!;
-              main.openDetails(e, target);
+              main.openDetails(e, entities.grid?.tap_action, target);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
                 const target = typeof entities.grid!.entity === "string" ? entities.grid!.entity : entities.grid!.entity.production!;
-                main.openDetails(e, target);
+                main.openDetails(e, entities.grid?.tap_action, target);
               }
             }}
           >
@@ -76,14 +76,14 @@ export const gridElement = (
       (grid.powerOutage.isOutage && !!grid.powerOutage.entityGenerator)
         ? html` <span
             class="consumption"
-            @click=${(e: { stopPropagation: () => void }) => {
+            @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
               const target = typeof entities.grid!.entity === "string" ? entities.grid!.entity : entities.grid!.entity.consumption!;
-              main.openDetails(e, target);
+              main.openDetails(e, entities.grid?.tap_action, target);
             }}
-            @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+            @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
               if (e.key === "Enter") {
                 const target = typeof entities.grid!.entity === "string" ? entities.grid!.entity : entities.grid!.entity.consumption!;
-                main.openDetails(e, target);
+                main.openDetails(e, entities.grid?.tap_action, target);
               }
             }}
           >

diff --git a/src/components/home.ts b/src/components/home.ts
@@ -43,12 +43,12 @@ export const homeElement = (
   <div
     class="circle"
     id="home-circle"
-    @click=${(e: { stopPropagation: () => void }) => {
-      main.openDetails(e, entities.home?.entity);
+    @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+      main.openDetails(e, entities.home?.tap_action, entities.home?.entity);
     }}
-    @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+    @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
       if (e.key === "Enter") {
-        main.openDetails(e, entities.home?.entity);
+        main.openDetails(e, entities.home?.tap_action, entities.home?.entity);
       }
     }}
   >

diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
@@ -53,12 +53,12 @@ export const individualLeftBottomElement = (
       : html` <svg width="80" height="30"></svg> `}
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, individualObj?.entity);
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+        main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, individualObj?.entity);
+          main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
         }
       }}
     >

diff --git a/src/components/individualLeftTopElement.ts b/src/components/individualLeftTopElement.ts
@@ -28,12 +28,12 @@ export const individualLeftTopElement = (
     <span class="label">${individualObj.name}</span>
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, individualObj?.entity);
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+        main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, individualObj?.entity);
+          main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
         }
       }}
     >

diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
@@ -36,12 +36,12 @@ export const individualRightBottomElement = (
   return html`<div class="circle-container individual-bottom individual-right individual-right-bottom">
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, individualObj?.entity);
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+        main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, individualObj?.entity);
+          main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
         }
       }}
     >

diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
@@ -37,12 +37,12 @@ export const individualRightTopElement = (
     <span class="label">${individualObj.name}</span>
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, individualObj?.entity);
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+        main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, individualObj?.entity);
+          main.openDetails(e, individualObj?.field?.tap_action, individualObj?.entity);
         }
       }}
     >

diff --git a/src/components/nonFossil.ts b/src/components/nonFossil.ts
@@ -28,12 +28,12 @@ export const nonFossilElement = (
         <span class="label">${nonFossil.name}</span>
         <div
           class="circle"
-          @click=${(e: { stopPropagation: () => void }) => {
-            main.openDetails(e, entities.fossil_fuel_percentage?.entity);
+          @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+            main.openDetails(e, entities.fossil_fuel_percentage?.tap_action, entities.fossil_fuel_percentage?.entity);
           }}
-          @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+          @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
             if (e.key === "Enter") {
-              main.openDetails(e, entities.fossil_fuel_percentage?.entity);
+              main.openDetails(e, entities.fossil_fuel_percentage?.tap_action, entities.fossil_fuel_percentage?.entity);
             }
           }}
         >

diff --git a/src/components/solar.ts b/src/components/solar.ts
@@ -22,12 +22,12 @@ export const solarElement = (
     <span class="label">${solar.name}</span>
     <div
       class="circle"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, solar.entity);
+      @click=${(e: { stopPropagation: () => void; target: HTMLElement }) => {
+        main.openDetails(e, solar.tap_action, solar.entity);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, solar.entity);
+          main.openDetails(e, solar.tap_action, solar.entity);
         }
       }}
     >

diff --git a/src/components/spans/baseSecondarySpan.ts b/src/components/spans/baseSecondarySpan.ts
@@ -1,7 +1,7 @@
 import { html } from "lit";
-import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
 import { offlineStr } from "../../type";
+import { ActionConfig } from "custom-card-helpers";
 
 type BaseSecondarySpan = {
   main: PowerFlowCardPlus;
@@ -10,19 +10,20 @@ type BaseSecondarySpan = {
   value?: string;
   entityId?: string;
   icon?: string;
+  tap_action?: ActionConfig;
 };
 
-export const baseSecondarySpan = ({ main, className, template, value, entityId, icon }: BaseSecondarySpan) => {
+export const baseSecondarySpan = ({ main, className, template, value, entityId, icon, tap_action }: BaseSecondarySpan) => {
   if (value && offlineStr.includes(value)) return html``;
   if (value || template) {
     return html`<span
       class="secondary-info ${className}"
-      @click=${(e: { stopPropagation: () => void }) => {
-        main.openDetails(e, entityId);
+      @click=${(e: { stopPropagation: () => void; key?: string | undefined; target: HTMLElement }) => {
+        main.openDetails(e, tap_action, entityId);
       }}
-      @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
+      @keyDown=${(e: { stopPropagation: () => void; key?: string | undefined; target: HTMLElement }) => {
         if (e.key === "Enter") {
-          main.openDetails(e, entityId);
+          main.openDetails(e, tap_action, entityId);
         }
       }}
     >

diff --git a/src/components/spans/generalSecondarySpan.ts b/src/components/spans/generalSecondarySpan.ts
@@ -1,6 +1,6 @@
 import { html } from "lit";
 import { baseSecondarySpan } from "./baseSecondarySpan";
-import { HomeAssistant } from "custom-card-helpers";
+import { ActionConfig, HomeAssistant } from "custom-card-helpers";
 import { displayValue } from "../../utils/displayValue";
 import { PowerFlowCardPlus } from "../../power-flow-card-plus";
 import { TemplatesObj } from "../../type";
@@ -22,6 +22,7 @@ export const generalSecondarySpan = (
       unit_white_space: boolean | undefined;
       decimals: number | undefined;
       accept_negative: boolean | undefined;
+      tap_action?: ActionConfig | undefined;
     };
   },
   key: string
@@ -39,6 +40,7 @@ export const generalSecondarySpan = (
           accept_negative: field.secondary.accept_negative,
           watt_threshold: config.watt_threshold,
         }),
+        tap_action: field.secondary.tap_action,
         template: templatesObj[`${key}Secondary`],
       })}`
     : ""}`;

diff --git a/src/components/spans/individualSecondarySpan.ts b/src/components/spans/individualSecondarySpan.ts
@@ -52,6 +52,7 @@ export const individualSecondarySpan = (
         icon: individual?.secondary?.icon || undefined,
         value,
         template: templatesObj.individual[index] || undefined,
+        tap_action: individual?.secondary?.tap_action || undefined,
       })}`
     : ""}`;
 };