From 3f97f532972e66b3023f52f5a616da678d7c98a3 Mon Sep 17 00:00:00 2001 From: Fabian Nowak Date: Sat, 22 Mar 2025 09:03:26 +0100 Subject: [PATCH 1/4] feat(#23): added configuration and visualization for two solar entities --- src/components/subSolar.ts | 125 +++++++++++++++++++++++++++++ src/power-flow-card-plus-config.ts | 1 + src/power-flow-card-plus.ts | 10 ++- src/states/raw/solar.ts | 29 +++++-- src/style.ts | 38 +++++++++ src/ui-editor/schema/solar.ts | 4 + 6 files changed, 197 insertions(+), 10 deletions(-) create mode 100644 src/components/subSolar.ts diff --git a/src/components/subSolar.ts b/src/components/subSolar.ts new file mode 100644 index 00000000..eed96da1 --- /dev/null +++ b/src/components/subSolar.ts @@ -0,0 +1,125 @@ +import { html, svg } from "lit"; +import { PowerFlowCardPlus } from "../power-flow-card-plus"; +import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config"; +import { displayValue } from "../utils/displayValue"; +import { styleLine } from "../utils/styleLine"; +import { checkShouldShowDots } from "../utils/checkShouldShowDots"; +import { computeFlowRate } from "../utils/computeFlowRate"; + +export interface Solar { + entity: string | undefined + entity2: string | undefined + state: { + total: number, + solar1: number, + solar2: number + } +} + +export const subSolarElement = ( + main: PowerFlowCardPlus, + config: PowerFlowCardPlusConfig, + solar: Solar, + multipleIndividuals: boolean +) => { + return html`${solar.entity && solar.entity2 ? html` +
+
+ ${renderSubSolarRow(main, config, solar, multipleIndividuals)} +
+
+
+
+ ${renderFlowContainer(config, solar, multipleIndividuals)} +
+
+ ${multipleIndividuals ? html`
` : html``} +
+
+ `: html``} + ` +} + +const renderSubSolarRow = ( + main: PowerFlowCardPlus, + config: PowerFlowCardPlusConfig, + solar: Solar, + multipleIndividuals: boolean +) => { + return html` +
+
+
+ PV 1 + + ${displayValue(main.hass, config, solar.state.solar1, { + unit: solar.state['unit'], + unitWhiteSpace: solar.state['unitWhiteSpace'], + decimals: solar.state['decimals'], + watt_threshold: config.watt_threshold, + })} + +
+
+ PV 2 + + ${displayValue(main.hass, config, solar.state.solar2, { + unit: solar.state['unit'], + unitWhiteSpace: solar.state['unitWhiteSpace'], + decimals: solar.state['decimals'], + watt_threshold: config.watt_threshold, + })} + +
+
+
+ ${multipleIndividuals ? html`
` : html``} + ` +} + +const renderFlowContainer = ( + config: PowerFlowCardPlusConfig, + solar, + multipleIndividuals: boolean +) => { + return html` +
+ + + + ${checkShouldShowDots(config) && solar.state.total + ? svg` + + + + + + + + + + + ` + : ""} + +
+ ` +} diff --git a/src/power-flow-card-plus-config.ts b/src/power-flow-card-plus-config.ts index 8bbcf339..5b5f8067 100644 --- a/src/power-flow-card-plus-config.ts +++ b/src/power-flow-card-plus-config.ts @@ -60,6 +60,7 @@ interface Grid extends BaseConfigEntity { interface Solar extends BaseConfigEntity { entity: string; + entity2: string; color?: any; color_icon?: boolean; color_value?: boolean; diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts index fd36d0cb..835e4cc6 100644 --- a/src/power-flow-card-plus.ts +++ b/src/power-flow-card-plus.ts @@ -15,8 +15,7 @@ import { getEntityState } from "./states/utils/getEntityState"; import { doesEntityExist } from "./states/utils/existenceEntity"; import { computeFlowRate } from "./utils/computeFlowRate"; import { getGridConsumptionState, getGridProductionState, getGridSecondaryState } from "./states/raw/grid"; -import { getSolarSecondaryState } from "./states/raw/solar"; -import { getSolarState } from "./states/raw/solar"; +import { getSolar1State, getSolar2State, getSolarSecondaryState, getTotalSolarState } from "./states/raw/solar"; import { getBatteryInState, getBatteryOutState, getBatteryStateOfCharge } from "./states/raw/battery"; import { computeFieldIcon, computeFieldName } from "./utils/computeFieldAttributes"; import { adjustZeroTolerance } from "./states/tolerance/base"; @@ -45,6 +44,7 @@ import { } from "./utils/computeIndividualPosition"; import { individualRightTopElement } from "./components/individualRightTopElement"; import { individualRightBottomElement } from "./components/individualRightBottomElement"; +import { Solar, subSolarElement } from "./components/subSolar"; const circleCircumference = 238.76104; @@ -196,9 +196,12 @@ export class PowerFlowCardPlus extends LitElement { const solar = { entity: entities.solar?.entity as string | undefined, + entity2: entities.solar?.entity2 as string | undefined, has: entities.solar?.entity !== undefined, state: { - total: getSolarState(this.hass, this._config), + total: getTotalSolarState(this.hass, this._config), + solar1: getSolar1State(this.hass, this._config), + solar2: getSolar2State(this.hass, this._config), toHome: initialNumericState, toGrid: initialNumericState, toBattery: initialNumericState, @@ -538,6 +541,7 @@ export class PowerFlowCardPlus extends LitElement { id="power-flow-card-plus" style=${this._config.style_card_content ? this._config.style_card_content : ""} > + ${subSolarElement(this, this._config, solar as Solar, individualObjs.length > 2)} ${solar.has || individualObjs?.some((individual) => individual?.has) || nonFossil.hasPercentage ? html`
${nonFossilElement(this, this._config, { diff --git a/src/states/raw/solar.ts b/src/states/raw/solar.ts index 5067522c..47360715 100644 --- a/src/states/raw/solar.ts +++ b/src/states/raw/solar.ts @@ -1,21 +1,36 @@ import { HomeAssistant } from "custom-card-helpers"; import { PowerFlowCardPlusConfig } from "../../power-flow-card-plus-config"; -import { isNumberValue } from "../../utils/utils"; import { isEntityInverted } from "../utils/isEntityInverted"; import { getEntityStateWatts } from "../utils/getEntityStateWatts"; import { onlyNegative, onlyPositive } from "../utils/negativePositive"; import { getSecondaryState } from "./base"; -export const getSolarState = (hass: HomeAssistant, config: PowerFlowCardPlusConfig) => { - const entity = config.entities.solar?.entity; - - if (entity === undefined) return null; +const getState = (hass: HomeAssistant, config: PowerFlowCardPlusConfig, entity: string | undefined) => { + if (entity === undefined){ + return null; + } const solarStateWatts = getEntityStateWatts(hass, entity); - if (isEntityInverted(config, "solar")) return onlyNegative(solarStateWatts); - + if (isEntityInverted(config, "solar")){ + return onlyNegative(solarStateWatts); + } return onlyPositive(solarStateWatts); +} + +export const getSolar1State = (hass: HomeAssistant, config: PowerFlowCardPlusConfig) => { + return getState(hass,config,config.entities.solar?.entity) }; +export const getSolar2State = (hass: HomeAssistant, config: PowerFlowCardPlusConfig) => { + return getState(hass,config,config.entities.solar?.entity2) +}; + +export const getTotalSolarState = (hass: HomeAssistant, config: PowerFlowCardPlusConfig)=> { + const solar1State = getSolar1State(hass, config) ?? 0; + const solar2State = getSolar2State(hass, config) ?? 0; + + return onlyPositive(solar1State + solar2State); +} + export const getSolarSecondaryState = (hass: HomeAssistant, config: PowerFlowCardPlusConfig) => getSecondaryState(hass, config, "solar"); diff --git a/src/style.ts b/src/style.ts index 4610bc12..854d0dae 100644 --- a/src/style.ts +++ b/src/style.ts @@ -560,4 +560,42 @@ export const styles = css` .home-circle-sections { pointer-events: none; } + + .subSolarContainer { + position: relative; + height: 90px; + } + + .subSolarContainer > div { + height: 90px; + } + + .subSolarContainer > .subSolarFlowContainer { + display: flex; + position: absolute; + top: 0; + left: 0; + width: 100%; + } + + .subSolarContainer .subSolarValueContainer { + display: flex; + width: 100px; + justify-content: space-between; + } + + .subSolarContainer .subSolarValueContainer .subSolarColumnContainer { + display: flex; + flex-direction: column; + align-items: center; + //min-width: 50px; + } + + .halfFlexBox { + flex: 0.5; + } + + .fullFlexBox { + flex: 1; + } `; diff --git a/src/ui-editor/schema/solar.ts b/src/ui-editor/schema/solar.ts index a3f06bfa..f437ac00 100644 --- a/src/ui-editor/schema/solar.ts +++ b/src/ui-editor/schema/solar.ts @@ -45,6 +45,10 @@ export const solarSchema = [ selector: { entity: {} }, }, mainSchema, + { + name: "entity2", + selector: { entity: {} }, + }, { name: "color", label: "Color", From 71fc4aa793875ba0c2f47df579ad3613d2f39b8d Mon Sep 17 00:00:00 2001 From: Fabian Nowak Date: Sun, 23 Mar 2025 08:40:31 +0100 Subject: [PATCH 2/4] chore(#23): fixed imports --- src/power-flow-card-plus.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts index 95f5b44e..9a3d4aa2 100644 --- a/src/power-flow-card-plus.ts +++ b/src/power-flow-card-plus.ts @@ -21,7 +21,7 @@ import { getGridConsumptionState, getGridProductionState, getGridSecondaryState import { getHomeSecondaryState } from "./states/raw/home"; import { getIndividualObject, IndividualObject } from "./states/raw/individual/getIndividualObject"; import { getNonFossilHas, getNonFossilHasPercentage, getNonFossilSecondaryState } from "./states/raw/nonFossil"; -import { getSolarSecondaryState, getSolarState } from "./states/raw/solar"; +import { getSolar1State, getSolar2State, getSolarSecondaryState, getTotalSolarState } from "./states/raw/solar"; import { adjustZeroTolerance } from "./states/tolerance/base"; import { doesEntityExist } from "./states/utils/existenceEntity"; import { getEntityState } from "./states/utils/getEntityState"; @@ -44,6 +44,7 @@ import { displayValue } from "./utils/displayValue"; import { defaultValues, getDefaultConfig } from "./utils/get-default-config"; import { registerCustomCard } from "./utils/register-custom-card"; import { coerceNumber } from "./utils/utils"; +import { Solar, subSolarElement } from "@/components/subSolar"; const circleCircumference = 238.76104; From 4ee135253083426566d1b68b57cafccc8d4828ac Mon Sep 17 00:00:00 2001 From: Fabian Nowak Date: Sat, 5 Apr 2025 10:48:56 +0200 Subject: [PATCH 3/4] feat(#23): extend subSolar config * added naming for both solar entities via ui-config * added click events to sub solar entities * added translations * refactoring --- src/components/subSolar.ts | 41 +++++++++++++++++++++++++----- src/localize/languages/cs.json | 5 +++- src/localize/languages/de.json | 5 +++- src/localize/languages/dk.json | 5 +++- src/localize/languages/en.json | 5 +++- src/localize/languages/es.json | 5 +++- src/localize/languages/fi.json | 5 +++- src/localize/languages/fr.json | 5 +++- src/localize/languages/it.json | 5 +++- src/localize/languages/nl.json | 5 +++- src/localize/languages/pl.json | 5 +++- src/localize/languages/pt-BR.json | 5 +++- src/localize/languages/pt-PT.json | 5 +++- src/localize/languages/ru.json | 5 +++- src/localize/languages/sk.json | 5 +++- src/localize/languages/sv.json | 5 +++- src/power-flow-card-plus-config.ts | 4 ++- src/power-flow-card-plus.ts | 4 ++- src/states/raw/solar.ts | 2 +- src/style.ts | 6 ++++- src/ui-editor/schema/solar.ts | 4 ++- 21 files changed, 109 insertions(+), 27 deletions(-) diff --git a/src/components/subSolar.ts b/src/components/subSolar.ts index eed96da1..86e4d89a 100644 --- a/src/components/subSolar.ts +++ b/src/components/subSolar.ts @@ -7,8 +7,11 @@ import { checkShouldShowDots } from "../utils/checkShouldShowDots"; import { computeFlowRate } from "../utils/computeFlowRate"; export interface Solar { - entity: string | undefined - entity2: string | undefined + entity: string | undefined, + name: string, + name_first_entity: string, + solar_second_entity: string | undefined, + name_second_entity: string, state: { total: number, solar1: number, @@ -22,7 +25,7 @@ export const subSolarElement = ( solar: Solar, multipleIndividuals: boolean ) => { - return html`${solar.entity && solar.entity2 ? html` + return html`${solar.entity && solar.solar_second_entity ? html`
${renderSubSolarRow(main, config, solar, multipleIndividuals)} @@ -50,7 +53,19 @@ const renderSubSolarRow = (
- PV 1 + void; target: HTMLElement }) => { + main.openDetails(e, undefined, solar.entity); + }} + @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => { + if (e.key === "Enter") { + main.openDetails(e, undefined, solar.entity); + } + }} + > + ${solar.name_first_entity} + ${displayValue(main.hass, config, solar.state.solar1, { unit: solar.state['unit'], @@ -61,7 +76,19 @@ const renderSubSolarRow = (
- PV 2 + void; target: HTMLElement }) => { + main.openDetails(e, undefined, solar.solar_second_entity); + }} + @keyDown=${(e: { key: string; stopPropagation: () => void; target: HTMLElement }) => { + if (e.key === "Enter") { + main.openDetails(e, undefined, solar.solar_second_entity); + } + }} + > + ${solar.name_second_entity} + ${displayValue(main.hass, config, solar.state.solar2, { unit: solar.state['unit'], @@ -92,7 +119,7 @@ const renderFlowContainer = ( vector-effect="non-scaling-stroke" /> - + ` diff --git a/src/localize/languages/cs.json b/src/localize/languages/cs.json index bdb320d2..12d1507e 100644 --- a/src/localize/languages/cs.json +++ b/src/localize/languages/cs.json @@ -75,6 +75,9 @@ "grey_color": "Šedá barva", "tap_action": "Akce po klepnutí", "navigation_path": "Navigační cesta", - "sort_individual_devices": "Seřaďte individuálně" + "sort_individual_devices": "Seřaďte individuálně", + "solar_second_entity": "Druhá entita", + "name_solar_first_entity": "Název první entity", + "name_solar_second_entity": "Název druhé entity" } } diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json index 3903ba91..c470973b 100644 --- a/src/localize/languages/de.json +++ b/src/localize/languages/de.json @@ -75,6 +75,9 @@ "grey_color": "Graue Farbe", "tap_action": "Aktion beim Antippen", "navigation_path": "Navigationspfad", - "sort_individual_devices": "Individuelle Geräte sortieren" + "sort_individual_devices": "Individuelle Geräte sortieren", + "solar_second_entity": "Zweite Entität", + "name_solar_first_entity" : "Name der ersten Entität", + "name_solar_second_entity" : "Name der zweiten Entität" } } diff --git a/src/localize/languages/dk.json b/src/localize/languages/dk.json index bae3001d..87eedf0e 100644 --- a/src/localize/languages/dk.json +++ b/src/localize/languages/dk.json @@ -75,6 +75,9 @@ "grey_color": "Grå farve", "tap_action": "Tap Handling", "navigation_path": "Navigationssti", - "sort_individual_devices": "Sorter individuelle enheder" + "sort_individual_devices": "Sorter individuelle enheder", + "solar_second_entity": "Anden enhed", + "name_solar_first_entity": "Navn på første enhed", + "name_solar_second_entity": "Navn på anden enhed" } } diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 03e03770..3cf81d0c 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -75,6 +75,9 @@ "grey_color": "Grey Color", "tap_action": "Tap Action", "navigation_path": "Navigation Path", - "sort_individual_devices": "Sort individual devices" + "sort_individual_devices": "Sort individual devices", + "solar_second_entity": "Second entity", + "name_solar_first_entity": "Name of first entity", + "name_solar_second_entity" : "Name of second entity" } } diff --git a/src/localize/languages/es.json b/src/localize/languages/es.json index 1d1d5d3f..17773e1a 100644 --- a/src/localize/languages/es.json +++ b/src/localize/languages/es.json @@ -75,6 +75,9 @@ "grey_color": "Color Gris", "tap_action": "Acción de Toque", "navigation_path": "Ruta de Navegación", - "sort_individual_devices": "Ordenar dispositivos individuales" + "sort_individual_devices": "Ordenar dispositivos individuales", + "solar_second_entity": "Segunda entidad", + "name_solar_first_entity": "Nombre de la primera entidad", + "name_solar_second_entity": "Nombre de la segunda entidad" } } diff --git a/src/localize/languages/fi.json b/src/localize/languages/fi.json index 1abd0b68..30d49cdc 100644 --- a/src/localize/languages/fi.json +++ b/src/localize/languages/fi.json @@ -75,6 +75,9 @@ "grey_color": "Harmaa väri", "tap_action": "Napauta toimintoa", "navigation_path": "Navigointipolku", - "sort_individual_devices": "Lajittele yksittäiset laitteet" + "sort_individual_devices": "Lajittele yksittäiset laitteet", + "solar_second_entity": "Toinen yksikkö", + "name_solar_first_entity": "Ensimmäisen yksikön nimi", + "name_solar_second_entity": "Toisen yksikön nimi" } } diff --git a/src/localize/languages/fr.json b/src/localize/languages/fr.json index 25eebe3d..99eb0636 100644 --- a/src/localize/languages/fr.json +++ b/src/localize/languages/fr.json @@ -75,6 +75,9 @@ "grey_color": "Couleur grise", "tap_action": "Action de tap", "navigation_path": "Chemin de navigation", - "sort_individual_devices": "Trier les appareils individuels" + "sort_individual_devices": "Trier les appareils individuels", + "solar_second_entity": "Deuxième entité", + "name_solar_first_entity": "Nom de la première entité", + "name_solar_second_entity": "Nom de la deuxième entité" } } diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json index dc5f82a4..e457fa0d 100644 --- a/src/localize/languages/it.json +++ b/src/localize/languages/it.json @@ -75,6 +75,9 @@ "grey_color": "Colore Sfumato", "tap_action": "Azione al tocco", "navigation_path": "Percorso di navigazione", - "sort_individual_devices": "Ordina i singoli individuale" + "sort_individual_devices": "Ordina i singoli individuale", + "solar_second_entity": "Seconda entità", + "name_solar_first_entity": "Nome della prima entità", + "name_solar_second_entity": "Nome della seconda entità" } } diff --git a/src/localize/languages/nl.json b/src/localize/languages/nl.json index 0d0dbf22..9e7bc13f 100644 --- a/src/localize/languages/nl.json +++ b/src/localize/languages/nl.json @@ -75,6 +75,9 @@ "grey_color": "Grijstint", "tap_action": "Tik Actie", "navigation_path": "Navigatiepad", - "sort_individual_devices": "Sorteer individuele apparaten" + "sort_individual_devices": "Sorteer individuele apparaten", + "solar_second_entity": "Tweede entiteit", + "name_solar_first_entity": "Naam van de eerste entiteit", + "name_solar_second_entity": "Naam van de tweede entiteit" } } diff --git a/src/localize/languages/pl.json b/src/localize/languages/pl.json index c087e0de..977416b6 100644 --- a/src/localize/languages/pl.json +++ b/src/localize/languages/pl.json @@ -75,6 +75,9 @@ "grey_color": "Kolor szary", "tap_action": "Akcja dotknięcia", "navigation_path": "Ścieżka nawigacji", - "sort_individual_devices": "Sortuj poszczególne urządzenia" + "sort_individual_devices": "Sortuj poszczególne urządzenia", + "solar_second_entity": "Drugi byt", + "name_solar_first_entity": "Nazwa pierwszego bytu", + "name_solar_second_entity": "Nazwa drugiego bytu" } } diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json index aa467e18..5017f85c 100644 --- a/src/localize/languages/pt-BR.json +++ b/src/localize/languages/pt-BR.json @@ -75,6 +75,9 @@ "grey_color": "Cor do Cinza", "tap_action": "Ação de Toque", "navigation_path": "Caminho de Navegação", - "sort_individual_devices": "Classifique dispositivos individuais" + "sort_individual_devices": "Classifique dispositivos individuais", + "solar_second_entity": "Segunda entidade", + "name_solar_first_entity": "Nome da primeira entidade", + "name_solar_second_entity": "Nome da segunda entidade" } } diff --git a/src/localize/languages/pt-PT.json b/src/localize/languages/pt-PT.json index 6b824f44..c17818e3 100644 --- a/src/localize/languages/pt-PT.json +++ b/src/localize/languages/pt-PT.json @@ -75,6 +75,9 @@ "grey_color": "Cor Cinzenta", "tap_action": "Ação de Toque", "navigation_path": "Caminho de Navegação", - "sort_individual_devices": "Classifique dispositivos individuais" + "sort_individual_devices": "Classifique dispositivos individuais", + "solar_second_entity": "Segunda entidade", + "name_solar_first_entity": "Nome da primeira entidade", + "name_solar_second_entity": "Nome da segunda entidade" } } diff --git a/src/localize/languages/ru.json b/src/localize/languages/ru.json index 16fc8948..996712c8 100644 --- a/src/localize/languages/ru.json +++ b/src/localize/languages/ru.json @@ -75,6 +75,9 @@ "grey_color": "Серый цвет", "tap_action": "действие касания", "navigation_path": "путь навигации", - "sort_individual_devices": "Сортировка отдельных устройств" + "sort_individual_devices": "Сортировка отдельных устройств", + "solar_second_entity": "Вторая сущность", + "name_solar_first_entity": "Название первой сущности", + "name_solar_second_entity": "Название второй сущности" } } diff --git a/src/localize/languages/sk.json b/src/localize/languages/sk.json index 5d083c6d..c87380fc 100644 --- a/src/localize/languages/sk.json +++ b/src/localize/languages/sk.json @@ -75,6 +75,9 @@ "grey_color": "Šedá farba", "tap_action": "Akcia po klepnutí", "navigation_path": "Navigačná cesta", - "sort_individual_devices": "Zoraďte jednotlivé zariadenia" + "sort_individual_devices": "Zoraďte jednotlivé zariadenia", + "solar_second_entity": "Druhá entita", + "name_solar_first_entity": "Názov prvej entity", + "name_solar_second_entity": "Názov druhej entity" } } diff --git a/src/localize/languages/sv.json b/src/localize/languages/sv.json index 1759dc1e..b6fdb96a 100644 --- a/src/localize/languages/sv.json +++ b/src/localize/languages/sv.json @@ -75,6 +75,9 @@ "grey_color": "Grå färg", "tap_action": "Tryckåtgärd", "navigation_path": "Navigationsväg", - "sort_individual_devices": "Sortera enskilda enheter" + "sort_individual_devices": "Sortera enskilda enheter", + "solar_second_entity": "Andra enheten", + "name_solar_first_entity": "Namn på första enheten", + "name_solar_second_entity": "Namn på andra enheten" } } diff --git a/src/power-flow-card-plus-config.ts b/src/power-flow-card-plus-config.ts index 15303cf3..5fbe27f6 100644 --- a/src/power-flow-card-plus-config.ts +++ b/src/power-flow-card-plus-config.ts @@ -57,13 +57,15 @@ interface Grid extends BaseConfigEntity { interface Solar extends BaseConfigEntity { entity: string; - entity2: string; + solar_second_entity: string; color?: any; color_icon?: boolean; color_value?: boolean; color_label?: boolean; secondary_info?: SecondaryInfoType; display_zero_state?: boolean; + name_solar_first_entity?: string; + name_solar_second_entity?: string; } interface Home extends BaseConfigEntity { diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts index 9a3d4aa2..0b14abdb 100644 --- a/src/power-flow-card-plus.ts +++ b/src/power-flow-card-plus.ts @@ -210,7 +210,7 @@ export class PowerFlowCardPlus extends LitElement { const solar = { entity: entities.solar?.entity as string | undefined, - entity2: entities.solar?.entity2 as string | undefined, + solar_second_entity: entities.solar?.solar_second_entity as string | undefined, has: entities.solar?.entity !== undefined, state: { total: getTotalSolarState(this.hass, this._config), @@ -222,6 +222,8 @@ export class PowerFlowCardPlus extends LitElement { }, icon: computeFieldIcon(this.hass, entities.solar, "mdi:solar-power"), name: computeFieldName(this.hass, entities.solar, this.hass.localize("ui.panel.lovelace.cards.energy.energy_distribution.solar")), + name_first_entity: entities.solar?.name_solar_first_entity ? entities.solar?.name_solar_first_entity : 'PV 1', + name_second_entity: entities.solar?.name_solar_second_entity ? entities.solar.name_solar_second_entity : 'PV 2', tap_action: entities.solar?.tap_action, secondary: { entity: entities.solar?.secondary_info?.entity, diff --git a/src/states/raw/solar.ts b/src/states/raw/solar.ts index 197311ac..ab0979a8 100644 --- a/src/states/raw/solar.ts +++ b/src/states/raw/solar.ts @@ -23,7 +23,7 @@ export const getSolar1State = (hass: HomeAssistant, config: PowerFlowCardPlusCon }; export const getSolar2State = (hass: HomeAssistant, config: PowerFlowCardPlusConfig) => { - return getState(hass,config,config.entities.solar?.entity2) + return getState(hass,config,config.entities.solar?.solar_second_entity) }; export const getTotalSolarState = (hass: HomeAssistant, config: PowerFlowCardPlusConfig)=> { diff --git a/src/style.ts b/src/style.ts index 1077f34d..6412de14 100644 --- a/src/style.ts +++ b/src/style.ts @@ -588,7 +588,11 @@ export const styles = css` display: flex; flex-direction: column; align-items: center; - //min-width: 50px; + } + + .subSolarContainer .subSolarValueContainer .subSolarColumnContainer > .name { + cursor: pointer; + z-index: 100; } .halfFlexBox { diff --git a/src/ui-editor/schema/solar.ts b/src/ui-editor/schema/solar.ts index af75c9e2..e67141cd 100644 --- a/src/ui-editor/schema/solar.ts +++ b/src/ui-editor/schema/solar.ts @@ -45,9 +45,11 @@ export const solarSchema = [ }, mainSchema, { - name: "entity2", + name: "solar_second_entity", selector: { entity: {} }, }, + { name: "name_solar_first_entity", selector: { text: {} } }, + { name: "name_solar_second_entity", selector: { text: {} } }, { name: "color", label: "Color", From bd1dc1913e0efad3379470a5e7ef1ab4777effa4 Mon Sep 17 00:00:00 2001 From: Fabian Nowak Date: Sun, 6 Apr 2025 09:40:17 +0200 Subject: [PATCH 4/4] feat(#23): fixed z-index --- src/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.ts b/src/style.ts index 6412de14..42872908 100644 --- a/src/style.ts +++ b/src/style.ts @@ -592,7 +592,7 @@ export const styles = css` .subSolarContainer .subSolarValueContainer .subSolarColumnContainer > .name { cursor: pointer; - z-index: 100; + z-index: 1; } .halfFlexBox {