Merge pull request #700 from SveLil/main

flixlix · web-flow · commit 24ba54481a45 · 2025-03-15T11:15:55.000+01:00
feat: Added option to sort individual devices by power usage and have…
diff --git a/src/components/flows/batteryGrid.ts b/src/components/flows/batteryGrid.ts
@@ -13,9 +13,9 @@ export const flowBatteryGrid = (config: PowerFlowCardPlusConfig, { battery, grid
   return grid.has && battery.has && showLine(config, Math.max(grid.state.toBattery || 0, battery.state.toGrid || 0))
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="battery-grid-flow">
diff --git a/src/components/flows/batteryToHome.ts b/src/components/flows/batteryToHome.ts
@@ -13,9 +13,9 @@ export const flowBatteryToHome = (config: PowerFlowCardPlusConfig, { battery, gr
   return battery.has && showLine(config, battery.state.toHome) && !config.entities.home?.hide
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="battery-home-flow">
diff --git a/src/components/flows/gridToHome.ts b/src/components/flows/gridToHome.ts
@@ -11,9 +11,9 @@ export const flowGridToHome = (config: PowerFlowCardPlusConfig, { battery, grid,
   return grid.has && showLine(config, grid.state.fromGrid) && !config.entities.home?.hide
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="grid-home-flow" class="flat-line">
diff --git a/src/components/flows/solarToBattery.ts b/src/components/flows/solarToBattery.ts
@@ -13,9 +13,9 @@ export const flowSolarToBattery = (config: PowerFlowCardPlusConfig, { battery, i
   return battery.has && solar.has && showLine(config, solar.state.toBattery || 0)
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="solar-battery-flow" class="flat-line">
diff --git a/src/components/flows/solarToGrid.ts b/src/components/flows/solarToGrid.ts
@@ -11,9 +11,9 @@ export const flowSolarToGrid = (config: PowerFlowCardPlusConfig, { battery, grid
   return grid.hasReturnToGrid && solar.has && showLine(config, solar.state.toGrid || 0)
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="solar-grid-flow">
diff --git a/src/components/flows/solarToHome.ts b/src/components/flows/solarToHome.ts
@@ -11,9 +11,9 @@ export const flowSolarToHome = (config: PowerFlowCardPlusConfig, { battery, grid
   return solar.has && showLine(config, solar.state.toHome || 0) && !config.entities.home?.hide
     ? html`<div
         class="lines ${classMap({
-          high: battery.has || checkHasBottomIndividual(config, individual),
+          high: battery.has || checkHasBottomIndividual(individual),
           "individual1-individual2": !battery.has && individual.every((i) => i?.has),
-          "multi-individual": checkHasRightIndividual(config, individual),
+          "multi-individual": checkHasRightIndividual(individual),
         })}"
       >
         <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" id="solar-home-flow">
diff --git a/src/components/individualLeftBottomElement.ts b/src/components/individualLeftBottomElement.ts
@@ -1,14 +1,13 @@
 import { html, svg } from "lit";
-import { showLine } from "../utils/showLine";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
-import { NewDur, TemplatesObj } from "../type";
 import { IndividualObject } from "../states/raw/individual/getIndividualObject";
+import { NewDur, TemplatesObj } from "../type";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
+import { computeIndividualFlowRate } from "../utils/computeFlowRate";
+import { showLine } from "../utils/showLine";
 import { styleLine } from "../utils/styleLine";
 import { individualSecondarySpan } from "./spans/individualSecondarySpan";
-import { HomeAssistant } from "custom-card-helpers";
-import { computeIndividualFlowRate } from "../utils/computeFlowRate";
-import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface IndividualBottom {
   newDur: NewDur;
@@ -19,7 +18,6 @@ interface IndividualBottom {
 
 export const individualLeftBottomElement = (
   main: PowerFlowCardPlus,
-  hass: HomeAssistant,
   config: PowerFlowCardPlusConfig,
   { individualObj, templatesObj, displayState, newDur }: IndividualBottom
 ) => {
@@ -62,7 +60,7 @@ export const individualLeftBottomElement = (
         }
       }}
     >
-      ${individualSecondarySpan(hass, main, config, templatesObj, individualObj, indexOfIndividual, "left-bottom")}
+      ${individualSecondarySpan(main.hass, main, config, templatesObj, individualObj, indexOfIndividual, "left-bottom")}
       ${individualObj?.icon !== " " ? html` <ha-icon id="individual-left-bottom-icon" .icon=${individualObj?.icon} />` : null}
       ${individualObj?.field?.display_zero_state !== false || (individualObj?.state || 0) > (individualObj.displayZeroTolerance ?? 0)
         ? html` <span class="individual-bottom individual-left-bottom"
diff --git a/src/components/individualRightBottomElement.ts b/src/components/individualRightBottomElement.ts
@@ -31,7 +31,7 @@ export const individualRightBottomElement = (
 
   const duration = newDur.individual[indexOfIndividual] || 1.66;
 
-  const hasBottomRow = !!battery?.has || checkHasBottomIndividual(config, individualObjs);
+  const hasBottomRow = !!battery?.has || checkHasBottomIndividual(individualObjs);
 
   return html`<div class="circle-container individual-bottom individual-right individual-right-bottom">
     <div
diff --git a/src/components/individualRightTopElement.ts b/src/components/individualRightTopElement.ts
@@ -31,7 +31,7 @@ export const individualRightTopElement = (
 
   const duration = newDur.individual[indexOfIndividual] || 1.66;
 
-  const hasBottomRow = !!battery?.has || checkHasBottomIndividual(config, individualObjs);
+  const hasBottomRow = !!battery?.has || checkHasBottomIndividual(individualObjs);
 
   return html`<div class="circle-container individual-top individual-right individual-right-top">
     <span class="label">${individualObj.name}</span>
diff --git a/src/localize/languages/cs.json b/src/localize/languages/cs.json
@@ -74,6 +74,7 @@
     "transparency": "Průhlednost",
     "grey_color": "Šedá barva",
     "tap_action": "Akce po klepnutí",
-    "navigation_path": "Navigační cesta"
+    "navigation_path": "Navigační cesta",
+    "sort_individual_devices": "Seřaďte individuálně"
   }
 }
diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json
@@ -74,6 +74,7 @@
     "transparency": "Transparenz",
     "grey_color": "Graue Farbe",
     "tap_action": "Aktion beim Antippen",
-    "navigation_path": "Navigationspfad"
+    "navigation_path": "Navigationspfad",
+    "sort_individual_devices": "Individuelle Geräte sortieren"
   }
 }
diff --git a/src/localize/languages/dk.json b/src/localize/languages/dk.json
@@ -74,6 +74,7 @@
     "transparency": "Transparens",
     "grey_color": "Grå farve",
     "tap_action": "Tap Handling",
-    "navigation_path": "Navigationssti"
+    "navigation_path": "Navigationssti",
+    "sort_individual_devices": "Sorter individuelle enheder"
   }
 }
diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json
@@ -74,6 +74,7 @@
     "transparency": "Transparency",
     "grey_color": "Grey Color",
     "tap_action": "Tap Action",
-    "navigation_path": "Navigation Path"
+    "navigation_path": "Navigation Path",
+    "sort_individual_devices": "Sort individual devices"
   }
 }
diff --git a/src/localize/languages/es.json b/src/localize/languages/es.json
@@ -74,6 +74,7 @@
     "transparency": "Transparencia",
     "grey_color": "Color Gris",
     "tap_action": "Acción de Toque",
-    "navigation_path": "Ruta de Navegación"
+    "navigation_path": "Ruta de Navegación",
+    "sort_individual_devices": "Ordenar dispositivos individuales"
   }
 }
diff --git a/src/localize/languages/fi.json b/src/localize/languages/fi.json
@@ -74,6 +74,7 @@
     "transparency": "Läpinäkyvyys",
     "grey_color": "Harmaa väri",
     "tap_action": "Napauta toimintoa",
-    "navigation_path": "Navigointipolku"
+    "navigation_path": "Navigointipolku",
+    "sort_individual_devices": "Lajittele yksittäiset laitteet"
   }
 }
diff --git a/src/localize/languages/fr.json b/src/localize/languages/fr.json
@@ -74,6 +74,7 @@
     "transparency": "Transparence",
     "grey_color": "Couleur grise",
     "tap_action": "Action de tap",
-    "navigation_path": "Chemin de navigation"
+    "navigation_path": "Chemin de navigation",
+    "sort_individual_devices": "Trier les appareils individuels"
   }
 }
diff --git a/src/localize/languages/it.json b/src/localize/languages/it.json
@@ -74,6 +74,7 @@
     "transparency": "Trasparenza",
     "grey_color": "Colore Sfumato",
     "tap_action": "Azione al tocco",
-    "navigation_path": "Percorso di navigazione"
+    "navigation_path": "Percorso di navigazione",
+    "sort_individual_devices": "Ordina i singoli individuale"
   }
 }
diff --git a/src/localize/languages/nl.json b/src/localize/languages/nl.json
@@ -74,6 +74,7 @@
     "transparency": "Transparantie",
     "grey_color": "Grijstint",
     "tap_action": "Tik Actie",
-    "navigation_path": "Navigatiepad"
+    "navigation_path": "Navigatiepad",
+    "sort_individual_devices": "Sorteer individuele apparaten"
   }
 }
diff --git a/src/localize/languages/pl.json b/src/localize/languages/pl.json
@@ -74,6 +74,7 @@
     "transparency": "Przezroczystość",
     "grey_color": "Kolor szary",
     "tap_action": "Akcja dotknięcia",
-    "navigation_path": "Ścieżka nawigacji"
+    "navigation_path": "Ścieżka nawigacji",
+    "sort_individual_devices": "Sortuj poszczególne urządzenia"
   }
 }
diff --git a/src/localize/languages/pt-BR.json b/src/localize/languages/pt-BR.json
@@ -74,6 +74,7 @@
     "transparency": "Transparência",
     "grey_color": "Cor do Cinza",
     "tap_action": "Ação de Toque",
-    "navigation_path": "Caminho de Navegação"
+    "navigation_path": "Caminho de Navegação",
+    "sort_individual_devices": "Classifique dispositivos individuais"
   }
 }
diff --git a/src/localize/languages/pt-PT.json b/src/localize/languages/pt-PT.json
@@ -74,6 +74,7 @@
     "transparency": "Transparência",
     "grey_color": "Cor Cinzenta",
     "tap_action": "Ação de Toque",
-    "navigation_path": "Caminho de Navegação"
+    "navigation_path": "Caminho de Navegação",
+    "sort_individual_devices": "Classifique dispositivos individuais"
   }
 }
diff --git a/src/localize/languages/ru.json b/src/localize/languages/ru.json
@@ -74,6 +74,7 @@
     "transparency": "Прозрачность",
     "grey_color": "Серый цвет",
     "tap_action": "действие касания",
-    "navigation_path": "путь навигации"
+    "navigation_path": "путь навигации",
+    "sort_individual_devices": "Сортировка отдельных устройств"
   }
 }
diff --git a/src/localize/languages/sk.json b/src/localize/languages/sk.json
@@ -74,6 +74,7 @@
     "transparency": "Transparentnosť",
     "grey_color": "Šedá farba",
     "tap_action": "Akcia po klepnutí",
-    "navigation_path": "Navigačná cesta"
+    "navigation_path": "Navigačná cesta",
+    "sort_individual_devices": "Zoraďte jednotlivé zariadenia"
   }
 }
diff --git a/src/localize/languages/sv.json b/src/localize/languages/sv.json
@@ -74,6 +74,7 @@
     "transparency": "Transparens",
     "grey_color": "Grå färg",
     "tap_action": "Tryckåtgärd",
-    "navigation_path": "Navigationsväg"
+    "navigation_path": "Navigationsväg",
+    "sort_individual_devices": "Sortera enskilda enheter"
   }
 }
diff --git a/src/power-flow-card-plus-config.ts b/src/power-flow-card-plus-config.ts
@@ -1,11 +1,8 @@
 import { LovelaceCardConfig } from "custom-card-helpers";
-import { ComboEntity, GridPowerOutage, IndividualDeviceType, SecondaryInfoType, BaseConfigEntity } from "./type.js";
+import { BaseConfigEntity, ComboEntity, GridPowerOutage, IndividualDeviceType, SecondaryInfoType } from "./type.js";
 
 export type DisplayZeroLinesMode = "show" | "grey_out" | "transparency" | "hide" | "custom";
 
-export type IndividualModeConfig = {
-  mode: "sort_power";
-};
 interface mainConfigOptions {
   dashboard_link?: string;
   dashboard_link_label?: string;
@@ -23,13 +20,13 @@ interface mainConfigOptions {
   full_size?: boolean;
   style_ha_card?: any;
   style_card_content?: any;
-  individual_mode_config?: IndividualModeConfig;
   disable_dots?: boolean;
   display_zero_lines?: {
     mode?: DisplayZeroLinesMode;
     transparency?: number;
     grey_color?: string | number[];
   };
+  sort_individual_devices?: boolean;
 }
 
 export interface PowerFlowCardPlusConfig extends LovelaceCardConfig, mainConfigOptions {
@@ -104,5 +101,3 @@ export type ConfigEntities = {
 };
 
 export type ConfigEntity = Battery | Grid | Solar | Home | FossilFuelPercentage | IndividualDeviceType;
-
-export const MAX_INDIVIDUAL_ENTITIES = 4;
diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts
diff --git a/src/ui-editor/components/individual-row-editor.ts b/src/ui-editor/components/individual-row-editor.ts
diff --git a/src/ui-editor/schema/_schema-all.ts b/src/ui-editor/schema/_schema-all.ts
diff --git a/src/ui-editor/ui-editor.ts b/src/ui-editor/ui-editor.ts
diff --git a/src/utils/computeIndividualPosition.ts b/src/utils/computeIndividualPosition.ts
diff --git a/src/utils/get-default-config.ts b/src/utils/get-default-config.ts

Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@`
`74`	`74`	`"transparency": "Průhlednost",`
`75`	`75`	`"grey_color": "Šedá barva",`
`76`	`76`	`"tap_action": "Akce po klepnutí",`
`77`		`- "navigation_path": "Navigační cesta"`
	`77`	`+ "navigation_path": "Navigační cesta",`
	`78`	`+ "sort_individual_devices": "Seřaďte individuálně"`
`78`	`79`	`}`
`79`	`80`	`}`