few UI enhancements & low-carbon fixes

fixed low-carbon `secondary_info` field not being rendered in the correct color

README.md

@@ -432,8 +432,6 @@ At the end of the day these are two options and depending on what you're interes
 
 Here is my to-do list containing a few enhancements I am planning in adding. The ones at the top are bigger priorities, so they’ll probably be available before the ones at the bottom.
 
-- Add UI Editor
-- Add Option for Home Assistant Templates in `secondary_info` fields
 - Fill the circles [#89](https://github.com/flixlix/power-flow-card-plus/issues/89)
 - More than two Individual Devices [#54](https://github.com/flixlix/power-flow-card-plus/issues/54)
 - More than one solar source [#23](https://github.com/flixlix/power-flow-card-plus/issues/23)

src/power-flow-card-plus-config.ts

@@ -68,6 +68,7 @@ export interface PowerFlowCardPlusConfig extends LovelaceCardConfig {
       unit_white_space?: boolean;
       secondary_info?: SecondaryInfoType;
       calculate_flow_rate?: boolean | number;
+      seconday_info: SecondaryInfoType;
     };
     individual1?: IndividualDeviceType;
     individual2?: IndividualDeviceType;

src/power-flow-card-plus.ts

@@ -244,7 +244,6 @@ export class PowerFlowCardPlus extends LitElement {
     const hasIndividual1 = this.hasField(entities.individual1);
     const hasIndividual1Secondary = this.hasField(entities.individual1?.secondary_info, true);
 
-
     const hasSolarProduction = entities.solar !== undefined;
     const hasSolarSecondary = this.hasField(entities.solar?.secondary_info);
 
@@ -732,6 +731,11 @@ export class PowerFlowCardPlus extends LitElement {
       "--text-non-fossil-color",
       this._config.entities.fossil_fuel_percentage?.color_value ? "var(--energy-non-fossil-color)" : "var(--primary-text-color)"
     );
+    this.style.setProperty(
+      "--secondary-text-non-fossil-color",
+      this._config.entities.fossil_fuel_percentage?.secondary_info?.color_value ? "var(--energy-non-fossil-color)" : "var(--primary-text-color)"
+    );
+
     this.style.setProperty(
       "--text-individualone-color",
       this._config.entities.individual1?.color_value ? "var(--individualone-color)" : "var(--primary-text-color)"
@@ -1167,7 +1171,9 @@ export class PowerFlowCardPlus extends LitElement {
                   ? html`<span class="secondary-info home"> ${templatesObj.homeSecondary} </span>`
                   : ""}
                 <ha-icon .icon=${entities.home?.icon || "mdi:home"}></ha-icon>
-                ${this._config.entities.home?.subtract_individual
+                ${this._config.entities.home?.override_state && this._config.entities.home.entity
+                  ? this.displayValue(this.hass.states[this._config.entities.home!.entity].state)
+                  : this._config.entities.home?.subtract_individual
                   ? this.displayValue(totalHomeConsumption - totalIndividualConsumption)
                   : this.displayValue(totalHomeConsumption)}
                 <svg>

src/style.ts

@@ -27,6 +27,7 @@ export const styles = css`
     --secondary-text-solar-color: var(--primary-text-color);
     --secondary-text-grid-color: var(--primary-text-color);
     --secondary-text-home-color: var(--primary-text-color);
+    --secondary-text-non-fossil-color: var(--primary-text-color);
   }
   :root {
   }
@@ -196,7 +197,7 @@ export const styles = css`
   .low-carbon .circle {
     border-color: var(--non-fossil-color);
   }
-  .low-carbon ha-icon {
+  .low-carbon ha-icon:not(.small) {
     color: var(--icon-non-fossil-color);
   }
   circle.low-carbon {
@@ -315,6 +316,10 @@ export const styles = css`
     color: var(--text-non-fossil-color);
   }
 
+  span.low-carbon.secondary-info {
+    color: var(--secondary-text-non-fossil-color);
+  }
+
   #home-circle {
     color: var(--text-home-color);
   }

src/ui-editor/schema/fossil_fuel_percentage.ts

@@ -14,6 +14,7 @@ const mainSchema = {
             { value: "power", label: "Power" },
             { value: "percentage", label: "Percentage" },
           ],
+          custom_value: true,
         },
       },
     },

src/ui-editor/schema/home.ts

@@ -11,8 +11,8 @@ const mainSchema = {
       selector: {
         select: {
           options: [
-            { value: "true", label: "True" },
-            { value: "false", label: "False" },
+            { value: true, label: "Color dynamically" },
+            { value: false, label: "Do Not Color" },
             { value: "solar", label: "Solar" },
             { value: "grid", label: "Grid" },
             { value: "battery", label: "Battery" },
@@ -27,8 +27,8 @@ const mainSchema = {
       selector: {
         select: {
           options: [
-            { value: "true", label: "True" },
-            { value: "false", label: "False" },
+            { value: true, label: "Color dynamically" },
+            { value: false, label: "Do Not Color" },
             { value: "solar", label: "Solar" },
             { value: "grid", label: "Grid" },
             { value: "battery", label: "Battery" },
@@ -47,11 +47,6 @@ const mainSchema = {
       label: "Override State (With Home Entity)",
       selector: { boolean: {} },
     },
-    {
-      name: "display_zero_state",
-      label: "Display State When Zero?",
-      selector: { boolean: {} },
-    }
   ],
 };
 

src/utils/get-default-config.ts

@@ -49,7 +49,7 @@ export function getDefaultConfig(hass: HomeAssistant): object {
     },
     clickable_entities: true,
     display_zero_lines: true,
-    use_new_flow_rate_model: false,
+    use_new_flow_rate_model: true,
     w_decimals: defaultValues.wattDecimals,
     kw_decimals: defaultValues.kilowattDecimals,
     min_flow_rate: defaultValues.minFlowRate,