From dcfebcd467be6abdd5b22b4a8d3b65aae98c7d32 Mon Sep 17 00:00:00 2001 From: Rob Aldred Date: Tue, 31 Oct 2023 13:40:10 +0000 Subject: [PATCH 1/4] Fix issue with config and state updates across instances Simplified base card HTML setup --- config-entity-functions.js | 39 ++++- html-functions.js | 23 +-- lux-power-distribution-card.js | 257 +++++++++++++++------------------ 3 files changed, 155 insertions(+), 164 deletions(-) diff --git a/config-entity-functions.js b/config-entity-functions.js index 5b262a7..c78fd55 100755 --- a/config-entity-functions.js +++ b/config-entity-functions.js @@ -1,7 +1,32 @@ import * as constants from "./constants.js"; +const required_entries = [ + "inverter_count", + "battery_soc", + "battery_flow", + "home_consumption", + "grid_flow" +] + export function buildConfig(config) { - let new_config = constants.base_config; + function deepcopy(value) { + if (!(!!value && typeof value == 'object')) { + return value; + } + if (Object.prototype.toString.call(value) == '[object Date]') { + return new Date(value.getTime()); + } + if (Array.isArray(value)) { + return value.map(deepcopy); + } + const result = {}; + Object.keys(value).forEach( + function(key) { result[key] = deepcopy(value[key]); }); + return result; + } + + config = deepcopy(config); + const new_config = deepcopy(constants.base_config) // Check inverter count let inverter_count = parseInt(config.inverter_count); @@ -165,7 +190,7 @@ export function getEntitiesState(config, hass, config_entity, index) { } return "-"; } catch (error) { - throw new Error(`Invalid entity: ${entity_name}`); + handleEntityError(entity_name, config_entity); } } @@ -197,7 +222,7 @@ export function getEntitiesAttribute(config, hass, config_entity, attribute_name return "-"; } } catch (error) { - throw new Error(`Invalid entity: ${entity_name}`); + handleEntityError(entity_name, config_entity); } } @@ -211,7 +236,13 @@ export function getEntitiesUnit(config, hass, config_entity, index) { } return ""; } catch (error) { - throw new Error(`Invalid entity: ${entity_name}`); + handleEntityError(entity_name, config_entity); + } +} + +const handleEntityError = (config_entry, entity_name) => { + if (required_entries.includes(config_entry)) { + throw new Error(`Invalid entity: ${entity_name} for config_entry`) ; } } diff --git a/html-functions.js b/html-functions.js index 800c24b..8a82dc7 100755 --- a/html-functions.js +++ b/html-functions.js @@ -196,17 +196,6 @@ export function generateStyles(config) { `; } -export const card_base = ` - -
-
-
-
-
-
- -`; - export function generateStatus(config) { let text_box_full = ``; let status_message_full = ``; @@ -245,9 +234,9 @@ export function generateStatus(config) { } export function generateGrid(config) { - var cells = ``; - var refresh_button_left = ``; - var refresh_button_right = ``; + let cells = ``; + let refresh_button_left = ``; + let refresh_button_right = ``; // Refresh button if (config.refresh_button.left) { @@ -331,9 +320,9 @@ export function generateGrid(config) { } export function generateDateTime(config) { - var date_time_info = ``; + let date_time_info = ``; if (config.update_time.is_used) { - var date_time_info = ` + let date_time_info = `

Last update at: -

`; if (config.update_time.show_last_update) { @@ -346,7 +335,7 @@ export function generateDateTime(config) { } export function generateArrows() { - var inner_html = ``; + let inner_html = ``; for (let i = 1; i < 5; i++) { inner_html += `
`; } diff --git a/lux-power-distribution-card.js b/lux-power-distribution-card.js index 9e05968..5b70039 100755 --- a/lux-power-distribution-card.js +++ b/lux-power-distribution-card.js @@ -3,91 +3,62 @@ import * as hf from "./html-functions.js"; import * as constants from "./constants.js"; class LuxPowerDistributionCard extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + set hass(hass) { this._hass = hass; - if (!this.card) { + if (!this.content) { this.createCard(); - this.bindRefresh(this.card, this._hass, this.config); - this.bindHistoryGraph(this.card, this.config); + this.bindRefresh(this._hass, this._config); + this.bindHistoryGraph(this._config); } this.updateCard(); } setConfig(config) { - if (!this.old_config) { - this.old_config = cef.buildConfig(config); - } - this.config = cef.buildConfig(config); - if (this.old_config != this.config) { - this.old_config = this.config; - this.createCard(); - } - - // console.log(this.config); + this._config = cef.buildConfig(config); } createCard() { - if (this.card) { - this.card.remove(); - } - - this.card = document.createElement("ha-card"); - if (this.config.header) { - this.card.header = this.config.header; + if (!this._hass || !this._config) { + return; } - const content = document.createElement("div"); - this.card.appendChild(content); - - this.styles = document.createElement("style"); - this.card.appendChild(this.styles); - - this.appendChild(this.card); + const shadowRoot = this.shadowRoot; - // Set card base - content.innerHTML = hf.card_base; - - // Generate Styles - this.styles.innerHTML = hf.generateStyles(this.config); - - // Generate Status - const inv_info_element = this.card.querySelector("#taskbar-grid"); - if (inv_info_element) { - inv_info_element.innerHTML = hf.generateStatus(this.config); + const card = document.createElement('ha-card'); + if (!this._config.title) { + card.setAttribute('header', this._config.title); } - // Generate grid - const grid_element = this.card.querySelector("#card-grid"); - if (grid_element) { - grid_element.innerHTML = hf.generateGrid(this.config); - } - - // Generate update time - const update_time_element = this.card.querySelector("#datetime-info"); - if (update_time_element) { - update_time_element.innerHTML = hf.generateDateTime(this.config); - } - } + this.content = document.createElement('div'); + this.content.classList.add('card-content'); - connectedCallback() { - this.updateCard(); + this.content.innerHTML = ` + +
${hf.generateStatus(this._config)}
+
${hf.generateGrid(this._config)}
+
${hf.generateDateTime(this._config)}
+ `; - this.intervalId = setInterval(() => { - this.updateCard(); - }, 1000); - } + card.appendChild(this.content); - disconnectedCallback() { - clearInterval(this.intervalId); + while (shadowRoot.lastChild) { + shadowRoot.removeChild(shadowRoot.lastChild); + } + shadowRoot.appendChild(card); } updateCard() { - if (this.card) { + if (this.content) { let index = 0; - if (this.config.inverter_count > 1) { - const inverter_selector_element = this.card.querySelector("#inverter-selector"); + if (this._config.inverter_count > 1) { + const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -95,7 +66,7 @@ class LuxPowerDistributionCard extends HTMLElement { index = parsed_value; } } - if (index == this.config.inverter_count) { + if (index == this._config.inverter_count) { index = -1; } } @@ -109,13 +80,13 @@ class LuxPowerDistributionCard extends HTMLElement { } } - bindRefresh(card, hass, config) { - let refresh_button_left = card.querySelector("#refresh-button-left"); + bindRefresh() { + let refresh_button_left = this.shadowRoot.querySelector("#refresh-button-left"); if (refresh_button_left) { refresh_button_left.addEventListener("click", function (source) { let index = 0; - if (config.inverter_count > 1) { - const inverter_selector_element = card.querySelector("#inverter-selector"); + if (this._config.inverter_count > 1) { + const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -124,25 +95,25 @@ class LuxPowerDistributionCard extends HTMLElement { } } } - if (index == config.inverter_count) { - for (let i = 0; i < config.inverter_count; i++) { + if (index == this._config.inverter_count) { + for (let i = 0; i < this._config.inverter_count; i++) { hass.callService("luxpower", "luxpower_refresh_registers", { - dongle: config.lux_dongle.values[i], + dongle: this._config.lux_dongle.values[i], }); } } else { hass.callService("luxpower", "luxpower_refresh_registers", { - dongle: config.lux_dongle.values[index], + dongle: this._config.lux_dongle.values[index], }); } }); } - let refresh_button_right = card.querySelector("#refresh-button-right"); + let refresh_button_right = this.shadowRoot.querySelector("#refresh-button-right"); if (refresh_button_right) { refresh_button_right.addEventListener("click", function (source) { let index = 0; - if (config.inverter_count > 1) { - const inverter_selector_element = card.querySelector("#inverter-selector"); + if (this._config.inverter_count > 1) { + const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -151,22 +122,22 @@ class LuxPowerDistributionCard extends HTMLElement { } } } - if (index == config.inverter_count) { - for (let i = 0; i < config.inverter_count; i++) { + if (index == this._config.inverter_count) { + for (let i = 0; i < this._config.inverter_count; i++) { hass.callService("luxpower", "luxpower_refresh_registers", { - dongle: config.lux_dongle.values[i], + dongle: this._config.lux_dongle.values[i], }); } } else { hass.callService("luxpower", "luxpower_refresh_registers", { - dongle: config.lux_dongle.values[index], + dongle: this._config.lux_dongle.values[index], }); } }); } } - bindHistoryGraph(card, config) { + bindHistoryGraph() { const history_map = { "#solar-image": "pv_power", "#battery-image": "battery_soc", @@ -176,12 +147,12 @@ class LuxPowerDistributionCard extends HTMLElement { for (const [key, value] of Object.entries(history_map)) { if (history_map.hasOwnProperty(key)) { - let button_element = card.querySelector(key); + let button_element = this.shadowRoot.querySelector(key); if (button_element) { button_element.addEventListener("click", function (source) { let index = 0; - if (config.inverter_count > 1) { - const inverter_selector_element = card.querySelector("#inverter-selector"); + if (this._config.inverter_count > 1) { + const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -197,9 +168,9 @@ class LuxPowerDistributionCard extends HTMLElement { composed: true, }); event.detail = { - entityId: config[value].entities[index], + entityId: this._config[value].entities[index], }; - card.dispatchEvent(event); + this.shadowRoot.dispatchEvent(event); return event; }); } @@ -208,7 +179,7 @@ class LuxPowerDistributionCard extends HTMLElement { } formatPowerStates(config_entity, value, index) { - const unit = cef.getEntitiesUnit(this.config, this._hass, config_entity, index == -1 ? 0 : index); + const unit = cef.getEntitiesUnit(this._config, this._hass, config_entity, index == -1 ? 0 : index); if (unit == "W") { return `${Math.abs(parseInt(value))} ${unit}`; } else if (unit == "kW") { @@ -222,10 +193,10 @@ class LuxPowerDistributionCard extends HTMLElement { let statuses = []; let normal_cnt = 0; let error_cnt = 0; - for (let i = 0; i < this.config.inverter_count; i++) { + for (let i = 0; i < this._config.inverter_count; i++) { let msg_i = cef.getStatusMessage( - parseInt(cef.getEntitiesState(this.config, this._hass, "status_codes", i)), - this.config.status_codes.no_grid_is_warning + parseInt(cef.getEntitiesState(this._config, this._hass, "status_codes", i)), + this._config.status_codes.no_grid_is_warning ); statuses.push(msg_i); if (msg_i == `Normal 🟢`) { @@ -243,7 +214,7 @@ class LuxPowerDistributionCard extends HTMLElement { return stat !== "Normal 🟢"; }); let fault_index = statuses.indexOf(filtered[0]); - msg = `${this.config.inverter_alias.values[fault_index]}: ${statuses[fault_index]}`; + msg = `${this._config.inverter_alias.values[fault_index]}: ${statuses[fault_index]}`; } else { // Multiple or multiple of same let filtered = statuses.filter(function (stat) { @@ -260,22 +231,22 @@ class LuxPowerDistributionCard extends HTMLElement { } } else { msg = cef.getStatusMessage( - parseInt(cef.getEntitiesState(this.config, this._hass, "status_codes", index)), - this.config.status_codes.no_grid_is_warning + parseInt(cef.getEntitiesState(this._config, this._hass, "status_codes", index)), + this._config.status_codes.no_grid_is_warning ); msg = `Status: ${msg}`; } - const status_element = this.card.querySelector("#status-cell"); - if (status_element) { + const status_element = this.shadowRoot.querySelector("#status-cell"); + if (this._config.status_codes.is_used && status_element) { status_element.innerHTML = msg; } } updateSolar(index) { - const solar_arrow_element = this.card.querySelector("#solar-arrows"); - const solar_info_element = this.card.querySelector("#solar-info"); + const solar_arrow_element = this.shadowRoot.querySelector("#solar-arrows"); + const solar_info_element = this.shadowRoot.querySelector("#solar-info"); if (solar_arrow_element && solar_info_element) { - let pv_power = cef.getEntitiesNumState(this.config, this._hass, "pv_power", index); + let pv_power = cef.getEntitiesNumState(this._config, this._hass, "pv_power", index); // Arrow const arrow_direction = pv_power > 0 ? "arrows-down" : "arrows-none"; if (solar_arrow_element.className != `cell arrow-cell ${arrow_direction}`) { @@ -293,15 +264,15 @@ class LuxPowerDistributionCard extends HTMLElement { } updateBattery(index) { - let battery_soc = cef.getEntitiesNumState(this.config, this._hass, "battery_soc", index, true, true); - let battery_flow = cef.getEntitiesNumState(this.config, this._hass, "battery_flow", index); - const battery_arrow_element = this.card.querySelector("#battery-arrows"); + let battery_soc = cef.getEntitiesNumState(this._config, this._hass, "battery_soc", index, true, true); + let battery_flow = cef.getEntitiesNumState(this._config, this._hass, "battery_flow", index); + const battery_arrow_element = this.shadowRoot.querySelector("#battery-arrows"); // Image - const battery_image_element = this.card.querySelector("#battery-image"); + const battery_image_element = this.shadowRoot.querySelector("#battery-image"); if (battery_image_element) { battery_image_element.innerHTML = ``; } - if (this.config.battery_flow.is_used) { + 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) { @@ -311,7 +282,7 @@ class LuxPowerDistributionCard extends HTMLElement { } } // Charge info - const battery_charge_info_element = this.card.querySelector("#battery-charge-info"); + const battery_charge_info_element = this.shadowRoot.querySelector("#battery-charge-info"); battery_charge_info_element.innerHTML = `

${this.formatPowerStates("battery_flow", battery_flow, index)}

@@ -322,11 +293,11 @@ class LuxPowerDistributionCard extends HTMLElement { `; } var battery_voltage = ""; - if (this.config.battery_voltage.is_used && index != -1) { - battery_voltage = `${cef.getEntitiesState(this.config, this._hass, "battery_voltage", index, false)} Vdc`; - } else if (this.config.parallel.average_voltage) { + if (this._config.battery_voltage.is_used && index != -1) { + battery_voltage = `${cef.getEntitiesState(this._config, this._hass, "battery_voltage", index, false)} Vdc`; + } else if (this._config.parallel.average_voltage) { battery_voltage = `${cef.getEntitiesNumState( - this.config, + this._config, this._hass, "battery_voltage", index, @@ -334,7 +305,7 @@ class LuxPowerDistributionCard extends HTMLElement { true )} Vdc (avg)`; } - const battery_soc_info_element = this.card.querySelector("#battery-soc-info"); + const battery_soc_info_element = this.shadowRoot.querySelector("#battery-soc-info"); if (battery_soc_info_element) { battery_soc_info_element.innerHTML = `
@@ -347,9 +318,9 @@ class LuxPowerDistributionCard extends HTMLElement { updateGrid(index) { // Arrow - const grid_arrow_1_element = this.card.querySelector("#grid-arrows-1"); - const grid_arrow_2_element = this.card.querySelector("#grid-arrows-2"); - let grid_flow = cef.getEntitiesNumState(this.config, this._hass, "grid_flow", index); + const grid_arrow_1_element = this.shadowRoot.querySelector("#grid-arrows-1"); + const grid_arrow_2_element = this.shadowRoot.querySelector("#grid-arrows-2"); + let grid_flow = cef.getEntitiesNumState(this._config, this._hass, "grid_flow", index); 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}`) { @@ -360,30 +331,30 @@ class LuxPowerDistributionCard extends HTMLElement { } } var grid_emoji = ``; - if (this.config.grid_voltage.is_used && index != -1) { - var grid_voltage = parseInt(cef.getEntitiesState(this.config, this._hass, "grid_voltage", index)); - const grid_image_element = this.card.querySelector("#grid-image"); - if (this.config.grid_indicator.hue) { + if (this._config.grid_voltage.is_used && index != -1) { + var grid_voltage = parseInt(cef.getEntitiesState(this._config, this._hass, "grid_voltage", index)); + const grid_image_element = this.shadowRoot.querySelector("#grid-image"); + if (this._config.grid_indicator.hue) { grid_image_element.setAttribute( "class", grid_voltage == 0 ? `cell image-cell blend-overlay` : `cell image-cell` ); } - if (this.config.grid_indicator.dot) { + if (this._config.grid_indicator.dot) { grid_emoji = grid_voltage == 0 ? ` 🔴` : ``; } } // Info - const grid_info_element = this.card.querySelector("#grid-info"); + const grid_info_element = this.shadowRoot.querySelector("#grid-info"); if (grid_info_element) { grid_voltage = ``; - if (this.config.grid_voltage.is_used) { + if (this._config.grid_voltage.is_used) { if (index != -1) { - grid_voltage = `${cef.getEntitiesState(this.config, this._hass, "grid_voltage", index)} Vac${grid_emoji}`; - } else if (this.config.parallel.average_voltage) { + grid_voltage = `${cef.getEntitiesState(this._config, this._hass, "grid_voltage", index)} Vac${grid_emoji}`; + } else if (this._config.parallel.average_voltage) { grid_voltage = `${cef.getEntitiesNumState( - this.config, + this._config, this._hass, "grid_voltage", index, @@ -402,13 +373,13 @@ class LuxPowerDistributionCard extends HTMLElement { } updateHome(index) { - let home_consumption = cef.getEntitiesNumState(this.config, this._hass, "home_consumption", index); + let home_consumption = cef.getEntitiesNumState(this._config, this._hass, "home_consumption", index); let backup_power = 0; // Arrow - const home_arrow_element = this.card.querySelector("#home-arrows"); + const home_arrow_element = this.shadowRoot.querySelector("#home-arrows"); if (home_arrow_element) { - backup_power = this.config.backup_power.is_used - ? (backup_power = cef.getEntitiesNumState(this.config, this._hass, "backup_power", index)) + backup_power = this._config.backup_power.is_used + ? (backup_power = cef.getEntitiesNumState(this._config, this._hass, "backup_power", index)) : 0; const arrow_direction = home_consumption > 0 || backup_power > 0 ? "arrows-down" : "arrows-none"; if (home_arrow_element.className != `cell arrow-cell ${arrow_direction}`) { @@ -417,12 +388,12 @@ class LuxPowerDistributionCard extends HTMLElement { } } // Info - const home_info_element = this.card.querySelector("#home-info"); + const home_info_element = this.shadowRoot.querySelector("#home-info"); if (home_info_element) { var sub_text = "Home Usage"; var value = this.formatPowerStates("home_consumption", home_consumption, index); - if (this.config.backup_power.is_used && home_consumption == 0 && backup_power > 0) { + if (this._config.backup_power.is_used && home_consumption == 0 && backup_power > 0) { sub_text = "Backup Power"; value = this.formatPowerStates("backup_power", backup_power, index); } @@ -438,23 +409,23 @@ class LuxPowerDistributionCard extends HTMLElement { updateDateTime(index) { if (index == -1) { - const update_time_element = this.card.querySelector("#time-info"); + const update_time_element = this.shadowRoot.querySelector("#time-info"); if (update_time_element) { - let oldest_time = Date.parse(cef.getEntitiesState(this.config, this._hass, "update_time", 0)); + let oldest_time = Date.parse(cef.getEntitiesState(this._config, this._hass, "update_time", 0)); let olderst_index = 0; - for (let i = 1; i < this.config.inverter_count; i++) { - if (Date.parse(cef.getEntitiesState(this.config, this._hass, "update_time", i)) < oldest_time) { + for (let i = 1; i < this._config.inverter_count; i++) { + if (Date.parse(cef.getEntitiesState(this._config, this._hass, "update_time", i)) < oldest_time) { olderst_index = i; - oldest_time = Date.parse(cef.getEntitiesState(this.config, this._hass, "update_time", i)); + oldest_time = Date.parse(cef.getEntitiesState(this._config, this._hass, "update_time", i)); } } update_time_element.innerHTML = `${ - this.config.inverter_alias.values[olderst_index] - } updated at: ${cef.getEntitiesState(this.config, this._hass, "update_time", olderst_index)}`; - const since_time_element = this.card.querySelector("#since-info"); + this._config.inverter_alias.values[olderst_index] + } updated at: ${cef.getEntitiesState(this._config, this._hass, "update_time", olderst_index)}`; + const since_time_element = this.shadowRoot.querySelector("#since-info"); if (since_time_element) { var last_time_ts = cef.getEntitiesAttribute( - this.config, + this._config, this._hass, "update_time", "timestamp", @@ -482,18 +453,18 @@ class LuxPowerDistributionCard extends HTMLElement { } } } else { - const update_time_element = this.card.querySelector("#time-info"); + const update_time_element = this.shadowRoot.querySelector("#time-info"); if (update_time_element) { update_time_element.innerHTML = `Last update at: ${cef.getEntitiesState( - this.config, + this._config, this._hass, "update_time", index )}`; } - const since_time_element = this.card.querySelector("#since-info"); + const since_time_element = this.shadowRoot.querySelector("#since-info"); if (since_time_element) { - var last_time_ts = cef.getEntitiesAttribute(this.config, this._hass, "update_time", "timestamp", index); + var last_time_ts = cef.getEntitiesAttribute(this._config, this._hass, "update_time", "timestamp", index); var time_now = Date.now() / 1000; var diff = time_now - last_time_ts; @@ -519,15 +490,15 @@ class LuxPowerDistributionCard extends HTMLElement { updateAllocatedPower() { // Arrow - if (this.config.energy_allocations.is_used) { - const power_allocation_arrow_element = this.card.querySelector("#power-allocation-arrows"); + if (this._config.energy_allocations.is_used) { + const power_allocation_arrow_element = this.shadowRoot.querySelector("#power-allocation-arrows"); if (power_allocation_arrow_element) { if (power_allocation_arrow_element.className != `cell arrow-cell arrows-right`) { power_allocation_arrow_element.setAttribute("class", `cell arrow-cell arrows-right`); power_allocation_arrow_element.innerHTML = hf.generateArrows(); } - const power_allocation_info_element = this.card.querySelector("#power-allocation-info"); + const power_allocation_info_element = this.shadowRoot.querySelector("#power-allocation-info"); power_allocation_info_element.innerHTML = `

Allocated Power

@@ -540,9 +511,9 @@ class LuxPowerDistributionCard extends HTMLElement { getAllocatedPower() { let allocatedEnergy = 0; - if (this.config.energy_allocations.is_used) { - for (let i = 0; i < this.config.energy_allocations.entities.length; i++) { - let entity_name = this.config.energy_allocations.entities[i]; + if (this._config.energy_allocations.is_used) { + for (let i = 0; i < this._config.energy_allocations.entities.length; i++) { + let entity_name = this._config.energy_allocations.entities[i]; try { let entity = this._hass.states[entity_name]; let entity_value = entity.state; From 5a16423c198a2d49cb4cc82bdb144134d6817f76 Mon Sep 17 00:00:00 2001 From: Rob Aldred Date: Tue, 31 Oct 2023 14:33:53 +0000 Subject: [PATCH 2/4] Fix title now showing when defined --- config-entity-functions.js | 2 ++ lux-power-distribution-card.js | 7 +++++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/config-entity-functions.js b/config-entity-functions.js index c78fd55..10fcbf4 100755 --- a/config-entity-functions.js +++ b/config-entity-functions.js @@ -28,6 +28,8 @@ export function buildConfig(config) { config = deepcopy(config); const new_config = deepcopy(constants.base_config) + new_config.title = config.title; + // Check inverter count let inverter_count = parseInt(config.inverter_count); if (isNaN(inverter_count) || inverter_count <= 0) { diff --git a/lux-power-distribution-card.js b/lux-power-distribution-card.js index 5b70039..e7aa725 100755 --- a/lux-power-distribution-card.js +++ b/lux-power-distribution-card.js @@ -32,8 +32,11 @@ class LuxPowerDistributionCard extends HTMLElement { const shadowRoot = this.shadowRoot; const card = document.createElement('ha-card'); - if (!this._config.title) { - card.setAttribute('header', this._config.title); + if (this._config.title) { + const header = document.createElement("h1"); + header.classList.add('card-header'); + header.appendChild(document.createTextNode(this._config.title)); + card.appendChild(header); } this.content = document.createElement('div'); From a93c8bf6e23f5779884a036ab55f03e69c6d3417 Mon Sep 17 00:00:00 2001 From: Rob Aldred Date: Tue, 31 Oct 2023 15:04:40 +0000 Subject: [PATCH 3/4] fix issue with historygraph event --- lux-power-distribution-card.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/lux-power-distribution-card.js b/lux-power-distribution-card.js index e7aa725..ff36bba 100755 --- a/lux-power-distribution-card.js +++ b/lux-power-distribution-card.js @@ -13,8 +13,8 @@ class LuxPowerDistributionCard extends HTMLElement { if (!this.content) { this.createCard(); - this.bindRefresh(this._hass, this._config); - this.bindHistoryGraph(this._config); + this.bindRefresh(this.card, this._hass, this._config); + this.bindHistoryGraph(this.card, this._config); } this.updateCard(); @@ -49,12 +49,12 @@ class LuxPowerDistributionCard extends HTMLElement {
${hf.generateDateTime(this._config)}
`; - card.appendChild(this.content); + this.card.appendChild(this.content); while (shadowRoot.lastChild) { shadowRoot.removeChild(shadowRoot.lastChild); } - shadowRoot.appendChild(card); + shadowRoot.appendChild(this.card); } updateCard() { @@ -83,13 +83,13 @@ class LuxPowerDistributionCard extends HTMLElement { } } - bindRefresh() { - let refresh_button_left = this.shadowRoot.querySelector("#refresh-button-left"); + bindRefresh(card, hass, config) { + let refresh_button_left = card.querySelector("#refresh-button-left"); if (refresh_button_left) { refresh_button_left.addEventListener("click", function (source) { let index = 0; - if (this._config.inverter_count > 1) { - const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); + if (config.inverter_count > 1) { + const inverter_selector_element = card.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -111,12 +111,12 @@ class LuxPowerDistributionCard extends HTMLElement { } }); } - let refresh_button_right = this.shadowRoot.querySelector("#refresh-button-right"); + let refresh_button_right = card.querySelector("#refresh-button-right"); if (refresh_button_right) { refresh_button_right.addEventListener("click", function (source) { let index = 0; - if (this._config.inverter_count > 1) { - const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); + if (config.inverter_count > 1) { + const inverter_selector_element = card.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -140,7 +140,7 @@ class LuxPowerDistributionCard extends HTMLElement { } } - bindHistoryGraph() { + bindHistoryGraph(card, config) { const history_map = { "#solar-image": "pv_power", "#battery-image": "battery_soc", @@ -150,12 +150,12 @@ class LuxPowerDistributionCard extends HTMLElement { for (const [key, value] of Object.entries(history_map)) { if (history_map.hasOwnProperty(key)) { - let button_element = this.shadowRoot.querySelector(key); + let button_element = card.querySelector(key); if (button_element) { button_element.addEventListener("click", function (source) { let index = 0; - if (this._config.inverter_count > 1) { - const inverter_selector_element = this.shadowRoot.querySelector("#inverter-selector"); + if (config.inverter_count > 1) { + const inverter_selector_element = card.querySelector("#inverter-selector"); if (inverter_selector_element) { let select_value = inverter_selector_element.value; let parsed_value = parseInt(select_value); @@ -173,7 +173,7 @@ class LuxPowerDistributionCard extends HTMLElement { event.detail = { entityId: this._config[value].entities[index], }; - this.shadowRoot.dispatchEvent(event); + card.dispatchEvent(event); return event; }); } From 8756d05f10c4ab967e53523208c37cebf147a37f Mon Sep 17 00:00:00 2001 From: Rob Aldred Date: Sat, 4 Nov 2023 23:40:35 +0000 Subject: [PATCH 4/4] Correct use of `this.card` --- lux-power-distribution-card.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lux-power-distribution-card.js b/lux-power-distribution-card.js index ff36bba..d7dd4e8 100755 --- a/lux-power-distribution-card.js +++ b/lux-power-distribution-card.js @@ -31,12 +31,12 @@ class LuxPowerDistributionCard extends HTMLElement { const shadowRoot = this.shadowRoot; - const card = document.createElement('ha-card'); + this.card = document.createElement('ha-card'); if (this._config.title) { const header = document.createElement("h1"); header.classList.add('card-header'); header.appendChild(document.createTextNode(this._config.title)); - card.appendChild(header); + this.card.appendChild(header); } this.content = document.createElement('div');