From cf7bbf77defa6ae2fbadedbb92be763f4e1403d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luca=20F=C3=A9lix?= Date: Fri, 9 Jun 2023 17:28:50 +0200 Subject: [PATCH] refactor: compress secondary info fields --- src/energy-flow-card-plus.ts | 312 +++++++++++------------------------ 1 file changed, 97 insertions(+), 215 deletions(-) diff --git a/src/energy-flow-card-plus.ts b/src/energy-flow-card-plus.ts index 02e793b..2045dac 100644 --- a/src/energy-flow-card-plus.ts +++ b/src/energy-flow-card-plus.ts @@ -239,7 +239,8 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { return `${v}${unitWhiteSpace === false ? '' : ' '}${unit || (isKWh ? 'kWh' : 'Wh')}`; }; - private openDetails(entityId?: string | undefined, instantaneousValue?: boolean): void { + private openDetails(event: { stopPropagation: any; key?: string }, entityId?: string | undefined): void { + event.stopPropagation(); if (!entityId || !this._config.clickable_entities) return; /* also needs to open details if entity is unavailable, but not if entity doesn't exist is hass states */ if (!this.entityExists(entityId)) return; @@ -1034,6 +1035,68 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { lowCarbonEnergy = (lowCarbonPercentage * grid.state.fromGrid) / 100; } + const baseSecondarySpan = ({ + className, + template, + value, + entityId, + icon, + }: { + className: string; + template?: string; + value?: string; + entityId?: string; + icon?: string; + }) => { + if (value || template) { + return html` void }) => { + this.openDetails(e, entityId); + }} + @keyDown=${(e: { key: string; stopPropagation: () => void }) => { + if (e.key === 'Enter') { + this.openDetails(e, entityId); + } + }} + > + ${entities.solar?.secondary_info?.icon ? html`` : ''} + ${template ?? value}`; + } + return ''; + }; + + const generalSecondarySpan = (field, key: string) => { + return html` ${field.secondary.has || field.secondary.template + ? html` ${baseSecondarySpan({ + className: key, + entityId: field.secondary.entity, + icon: field.secondary.icon, + value: this.displayValue(field.secondary.state, field.secondary.unit, field.secondary.unit_white_space), + })}` + : ''}`; + }; + + const individualSecondarySpan = (individual: Individual, key: string) => { + const value = individual.secondary.has + ? this.displayValue(individual.secondary.state, individual.secondary.unit, individual.secondary.unit_white_space) + : undefined; + const passesDisplayZeroCheck = + individual.secondary.displayZero !== false || + (isNumberValue(individual.secondary.state) + ? (Number(individual.secondary.state) ?? 0) > (individual.secondary.displayZeroTolerance ?? 0) + : true); + return html` ${individual.secondary.has && passesDisplayZeroCheck + ? html`${baseSecondarySpan({ + className: key, + entityId: individual.secondary.entity, + icon: individual.secondary.icon, + value, + })}` + : ''}`; + }; + return html`
@@ -1046,45 +1109,15 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) {
void }) => { - e.stopPropagation(); - this.openDetails(entities.fossil_fuel_percentage?.entity); + this.openDetails(e, entities.fossil_fuel_percentage?.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.fossil_fuel_percentage?.entity); + this.openDetails(e, entities.fossil_fuel_percentage?.entity); } }} > - ${nonFossil.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.fossil_fuel_percentage?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.fossil_fuel_percentage?.secondary_info?.entity); - } - }} - > - ${entities.fossil_fuel_percentage?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - nonFossil.secondary.state, - entities.fossil_fuel_percentage?.secondary_info?.unit_of_measurement, - entities.fossil_fuel_percentage?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${generalSecondarySpan(nonFossil, 'nonFossilFuel')} void }) => { e.stopPropagation(); - this.openDetails(entities.solar!.entity); + this.openDetails(e, entities.solar!.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.solar!.entity); + this.openDetails(e, entities.solar!.entity); } }} > - ${solar.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.solar?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.solar?.secondary_info?.entity); - } - }} - > - ${entities.solar?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - solar.secondary.state, - entities.solar?.secondary_info?.unit_of_measurement, - entities.solar?.secondary_info?.unit_white_space, - )} - - ` - : ''} - + ${generalSecondarySpan(solar, 'solar')} void }) => { e.stopPropagation(); - this.openDetails(entities.individual2?.entity); + this.openDetails(e, entities.individual2?.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.individual2?.entity); + this.openDetails(e, entities.individual2?.entity); } }} > - ${individual2.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.individual2?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.individual2?.secondary_info?.entity); - } - }} - > - ${entities.individual2?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - individual2.secondary.state, - entities.individual2?.secondary_info?.unit_of_measurement, - entities.individual2?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${individualSecondarySpan(individual2, 'individual2')} void }) => { e.stopPropagation(); - this.openDetails(entities.individual1?.entity); + this.openDetails(e, entities.individual1?.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.individual1?.entity); + this.openDetails(e, entities.individual1?.entity); } }} > - ${individual1.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.individual1?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.individual1?.secondary_info?.entity); - } - }} - > - ${entities.individual1?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - individual1.secondary.state, - entities.individual1?.secondary_info?.unit_of_measurement, - entities.individual1?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${individualSecondarySpan(individual1, 'individual1')} void }) => { if (e.key === 'Enter') { @@ -1371,36 +1328,11 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { ? entities.grid!.entity : entities.grid!.entity!.consumption! || entities.grid!.entity!.production!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); } }} > - ${grid.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.grid?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.grid?.secondary_info?.entity); - } - }} - > - ${entities.grid?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - grid.secondary.state, - entities.grid?.secondary_info?.unit_of_measurement, - entities.grid?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${generalSecondarySpan(grid, 'grid')} ${(entities.grid?.display_state === 'two_way' || entities.grid?.display_state === undefined || @@ -1415,13 +1347,13 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { @click=${(e: { stopPropagation: () => void }) => { const target = typeof entities.grid!.entity === 'string' ? entities.grid!.entity : entities.grid!.entity.production!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { const target = typeof entities.grid!.entity === 'string' ? entities.grid!.entity : entities.grid!.entity.production!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); } }} > @@ -1452,41 +1384,16 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { id="home-circle" @click=${(e: { stopPropagation: () => void }) => { e.stopPropagation(); - this.openDetails(entities.home?.entity); + this.openDetails(e, entities.home?.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.home?.entity); + this.openDetails(e, entities.home?.entity); } }} > - ${home.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.home?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.home?.secondary_info?.entity); - } - }} - > - ${entities.home?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - solar.secondary.state, - entities.home?.secondary_info?.unit_of_measurement, - entities.home?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${generalSecondarySpan(home, 'home')} ${homeUsageToDisplay} @@ -1556,7 +1463,7 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { ? entities.battery?.entity : entities.battery?.entity!.production; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { @@ -1566,7 +1473,7 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { ? entities.battery!.entity! : entities.battery!.entity!.production; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); } }} > @@ -1574,12 +1481,12 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { ? html` void }) => { e.stopPropagation(); - this.openDetails(entities.battery?.state_of_charge); + this.openDetails(e, entities.battery?.state_of_charge); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.battery?.state_of_charge); + this.openDetails(e, entities.battery?.state_of_charge); } }} id="battery-state-of-charge-text" @@ -1601,12 +1508,12 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { : 'padding-top: 2px; padding-bottom: 2px;'} @click=${(e: { stopPropagation: () => void }) => { e.stopPropagation(); - this.openDetails(entities.battery?.state_of_charge); + this.openDetails(e, entities.battery?.state_of_charge); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.battery?.state_of_charge); + this.openDetails(e, entities.battery?.state_of_charge); } }} > @@ -1620,14 +1527,14 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { const target = typeof entities.battery!.entity === 'string' ? entities.battery!.entity! : entities.battery!.entity!.production!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { const target = typeof entities.battery!.entity === 'string' ? entities.battery!.entity! : entities.battery!.entity!.production!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); } }} > @@ -1645,14 +1552,14 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { const target = typeof entities.battery!.entity === 'string' ? entities.battery!.entity! : entities.battery!.entity!.consumption!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { const target = typeof entities.battery!.entity === 'string' ? entities.battery!.entity! : entities.battery!.entity!.consumption!; e.stopPropagation(); - this.openDetails(target); + this.openDetails(e, target); } }} > @@ -1694,41 +1601,16 @@ export default class EnergyFlowCardPlus extends SubscribeMixin(LitElement) { class="circle" @click=${(e: { stopPropagation: () => void }) => { e.stopPropagation(); - this.openDetails(entities.individual1?.entity); + this.openDetails(e, entities.individual1?.entity); }} @keyDown=${(e: { key: string; stopPropagation: () => void }) => { if (e.key === 'Enter') { e.stopPropagation(); - this.openDetails(entities.individual1?.entity); + this.openDetails(e, entities.individual1?.entity); } }} > - ${individual1.secondary.has - ? html` - void }) => { - e.stopPropagation(); - this.openDetails(entities.individual1?.secondary_info?.entity); - }} - @keyDown=${(e: { key: string; stopPropagation: () => void }) => { - if (e.key === 'Enter') { - e.stopPropagation(); - this.openDetails(entities.individual1?.secondary_info?.entity); - } - }} - > - ${entities.individual1?.secondary_info?.icon - ? html`` - : ''} - ${this.displayValue( - individual1.secondary.state, - entities.individual1?.secondary_info?.unit_of_measurement, - entities.individual1?.secondary_info?.unit_white_space, - )} - - ` - : ''} + ${individualSecondarySpan(individual1, 'individual1')}