From 1e59bee028adde23a9dc28bbef63950580fb067b Mon Sep 17 00:00:00 2001
From: Dante Winters <dante-winters@outlook.com>
Date: Mon, 9 Oct 2023 21:23:54 +0200
Subject: [PATCH] Bugfix:  - Round values to max of 2 decimal places  -
 Reworked code to fix issue with battery arrows not showing  - Reverted
 LitElement to HTMLElement

---
 config-entity-functions.js     |  2 +-
 html-functions.js              | 35 +++++++++++++++-------
 lux-power-distribution-card.js | 53 ++++++++++------------------------
 3 files changed, 41 insertions(+), 49 deletions(-)

diff --git a/config-entity-functions.js b/config-entity-functions.js
index b1bbc70..1068e88 100755
--- a/config-entity-functions.js
+++ b/config-entity-functions.js
@@ -184,7 +184,7 @@ export function getEntitiesNumState(config, hass, config_entity, index, is_int =
   if (is_int) {
     return parseInt(value);
   }
-  return value;
+  return Math.round(value * 100) / 100;
 }
 
 export function getEntitiesAttribute(config, hass, config_entity, attribute_name, index) {
diff --git a/html-functions.js b/html-functions.js
index 40dc0fb..800c24b 100755
--- a/html-functions.js
+++ b/html-functions.js
@@ -5,7 +5,6 @@ export function generateStyles(config) {
   /* CARD */
   ha-card {
     width: auto;
-    padding: 1px;
   }
   
   /* GRID */
@@ -13,6 +12,17 @@ export function generateStyles(config) {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(${config.pv_power.is_used ? 5 : 4}, 1fr);
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 1px;
+  }
+  .status-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(1, 1fr);
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 4px;
   }
   .diagram-grid img {
     max-width: 100%;
@@ -169,6 +179,9 @@ export function generateStyles(config) {
     text-align: left;
     margin: 0;
     line-height: 1;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 5px;
   }
   .grid-status {
     text-align: right;
@@ -185,7 +198,7 @@ export function generateStyles(config) {
 
 export const card_base = `
   <ha-card>
-    <div id="inv-info">
+    <div id="taskbar-grid" class="status-grid">
     </div>
     <div id="card-grid" class="diagram-grid">
     </div>
@@ -218,15 +231,17 @@ export function generateStatus(config) {
   }
 
   if (config.status_codes.is_used) {
-    status_message_full = `
-      <p id="status-info" class="grid-status">Card starting...</p>
-    `;
+    status_message_full = `Card starting...`;
   }
 
   return `
-${text_box_full}
-${status_message_full}
-`;
+    <div id="select-cell" class="cell">
+      ${text_box_full}
+    </div>
+    <div id="status-cell" class="cell grid-status">
+      ${status_message_full}
+    </div>
+  `;
 }
 
 export function generateGrid(config) {
@@ -319,11 +334,11 @@ export function generateDateTime(config) {
   var date_time_info = ``;
   if (config.update_time.is_used) {
     var date_time_info = `
-      <p id="time-info" class="update-time">Last update at: -</p>
+      <p id="time-info">Last update at: -</p>
     `;
     if (config.update_time.show_last_update) {
       date_time_info += `
-        <p id="since-info" class="update-time">-</p>
+        <p id="since-info">-</p>
     `;
     }
   }
diff --git a/lux-power-distribution-card.js b/lux-power-distribution-card.js
index e65a3d9..6cf1846 100755
--- a/lux-power-distribution-card.js
+++ b/lux-power-distribution-card.js
@@ -1,10 +1,8 @@
-import { LitElement } from "https://unpkg.com/lit?module";
-
 import * as cef from "./config-entity-functions.js";
 import * as hf from "./html-functions.js";
 import * as constants from "./constants.js";
 
-class LuxPowerDistributionCard extends LitElement {
+class LuxPowerDistributionCard extends HTMLElement {
   set hass(hass) {
     this._hass = hass;
 
@@ -55,7 +53,7 @@ class LuxPowerDistributionCard extends LitElement {
     this.styles.innerHTML = hf.generateStyles(this.config);
 
     // Generate Status
-    const inv_info_element = this.card.querySelector("#inv-info");
+    const inv_info_element = this.card.querySelector("#taskbar-grid");
     if (inv_info_element) {
       inv_info_element.innerHTML = hf.generateStatus(this.config);
     }
@@ -214,7 +212,7 @@ class LuxPowerDistributionCard extends LitElement {
     if (index == -1) {
       index = 0;
     }
-    const status_element = this.card.querySelector("#status-info");
+    const status_element = this.card.querySelector("#status-cell");
     if (status_element) {
       let msg = cef.getStatusMessage(
         parseInt(cef.getEntitiesState(this.config, this._hass, "status_codes", index)),
@@ -233,13 +231,8 @@ class LuxPowerDistributionCard extends LitElement {
       // Arrow
       const arrow_direction = pv_power > 0 ? "arrows-down" : "arrows-none";
       if (solar_arrow_element.className != `cell arrow-cell ${arrow_direction}`) {
-        if (arrow_direction != "arrows-none") {
-          solar_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
-          solar_arrow_element.innerHTML = hf.generateArrows();
-        } else {
-          solar_arrow_element.setAttribute("class", `cell arrow-cell arrows-none`);
-          solar_arrow_element.innerHTML = ``;
-        }
+        solar_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
+        solar_arrow_element.innerHTML = hf.generateArrows();
       }
       // Info
       solar_info_element.innerHTML = `
@@ -263,14 +256,10 @@ class LuxPowerDistributionCard extends LitElement {
     if (this.config.battery_flow.is_used) {
       // Arrow
       const arrow_direction = battery_flow < 0 ? "arrows-right" : battery_flow > 0 ? "arrows-left" : "arrows-none";
-      if (battery_arrow_element.className != `cell arrow-cell ${arrow_direction}`) {
-        if (arrow_direction != "arrows-none") {
-          if (battery_arrow_element) {
-            battery_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
-            battery_arrow_element.innerHTML = hf.generateArrows();
-          }
-        } else {
-          battery_arrow_element.innerHTML = ``;
+      if (battery_arrow_element) {
+        if (battery_arrow_element.className != `cell arrow-cell ${arrow_direction}`) {
+          battery_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
+          battery_arrow_element.innerHTML = hf.generateArrows();
         }
       }
       // Charge info
@@ -316,17 +305,10 @@ class LuxPowerDistributionCard extends LitElement {
     if (grid_arrow_1_element && grid_arrow_2_element) {
       const arrow_direction = grid_flow < 0 ? "arrows-left" : grid_flow > 0 ? "arrows-right" : "arrows-none";
       if (grid_arrow_1_element.className != `cell arrow-cell ${arrow_direction}`) {
-        if (arrow_direction != "arrows-none") {
-          grid_arrow_1_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
-          grid_arrow_2_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
-          grid_arrow_1_element.innerHTML = hf.generateArrows();
-          grid_arrow_2_element.innerHTML = hf.generateArrows();
-        } else {
-          grid_arrow_1_element.setAttribute("class", `cell arrow-cell arrows-none`);
-          grid_arrow_2_element.setAttribute("class", `cell arrow-cell arrows-none`);
-          grid_arrow_2_element.innerHTML = ``;
-          grid_arrow_2_element.innerHTML = ``;
-        }
+        grid_arrow_1_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
+        grid_arrow_2_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
+        grid_arrow_1_element.innerHTML = hf.generateArrows();
+        grid_arrow_2_element.innerHTML = hf.generateArrows();
       }
     }
     var grid_emoji = ``;
@@ -382,13 +364,8 @@ class LuxPowerDistributionCard extends LitElement {
         : 0;
       const arrow_direction = home_consumption > 0 || backup_power > 0 ? "arrows-down" : "arrows-none";
       if (home_arrow_element.className != `cell arrow-cell ${arrow_direction}`) {
-        if (arrow_direction != "arrows-none") {
-          home_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
-          home_arrow_element.innerHTML = hf.generateArrows();
-        } else {
-          home_arrow_element.setAttribute("class", `cell arrow-cell arrows-none`);
-          home_arrow_element.innerHTML = ``;
-        }
+        home_arrow_element.setAttribute("class", `cell arrow-cell ${arrow_direction}`);
+        home_arrow_element.innerHTML = hf.generateArrows();
       }
     }
     // Info