- ${!nonFossil.hasPercentage
- ? html`
`
- : html`
-
${nonFossil.name}
-
void }) => {
- this.openDetails(e, entities.fossil_fuel_percentage?.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.fossil_fuel_percentage?.entity);
- }
- }}
- >
- ${generalSecondarySpan(nonFossil, "nonFossilFuel")}
- (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
- ? "padding-bottom: 2px;"
- : "padding-bottom: 0px;"}"
- >
- ${entities.fossil_fuel_percentage?.display_zero_state !== false ||
- (nonFossil.state.power || 0) > (entities.fossil_fuel_percentage?.display_zero_tolerance || 0)
- ? html`
- ${this.displayNonFossilState(entities!.fossil_fuel_percentage!.entity, grid.state.fromGrid)}
- `
- : ""}
-
- ${this.showLine(nonFossil.state.power || 0)
- ? html`
-
- `
- : ""}
-
`}
+ ${nonFossilElement(this, this._config, {
+ entities,
+ grid,
+ newDur,
+ nonFossil,
+ templatesObj,
+ })}
${solar.has
- ? html`
-
${solar.name}
-
void }) => {
- this.openDetails(e, solar.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, solar.entity);
- }
- }}
- >
- ${generalSecondarySpan(solar, "solar")}
- 0
- ? "padding-bottom: 2px;"
- : "padding-bottom: 0px;"}"
- >
- ${entities.solar?.display_zero_state !== false || (solar.state.total || 0) > 0
- ? html` ${this.displayValue(solar.state.total as number)}`
- : ""}
-
-
`
- : individual2.has || individual1.has
+ ? solarElement(this, {
+ entities,
+ solar,
+ templatesObj,
+ })
+ : individualObjs?.some((individual) => individual?.has)
? html`
`
: ""}
- ${individual2.has
- ? html`
-
${individual2.name}
-
void }) => {
- this.openDetails(e, entities.individual2?.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.individual2?.entity);
- }
- }}
- >
- ${individualSecondarySpan(individual2, "individual2")}
- (individual2.displayZeroTolerance ?? 0)
- ? "padding-bottom: 2px;"
- : "padding-bottom: 0px;"}"
- >
- ${entities.individual2?.display_zero_state !== false || (individual2.state || 0) > (individual2.displayZeroTolerance ?? 0)
- ? html`
- ${individual2.showDirection
- ? html``
- : ""}${individual2DisplayState}
- `
- : ""}
-
- ${this.showLine(individual2.state || 0)
- ? html`
-
- `
- : ""}
-
`
- : individual1.has
- ? html`
-
${individual1.name}
-
void }) => {
- this.openDetails(e, entities.individual1?.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.individual1?.entity);
- }
- }}
- >
- ${individualSecondarySpan(individual1, "individual1")}
- (individual1.displayZeroTolerance ?? 0)
- ? "padding-bottom: 2px;"
- : "padding-bottom: 0px;"}"
- >
- ${entities.individual1?.display_zero_state !== false || (individual1.state || 0) > (individual1.displayZeroTolerance ?? 0)
- ? html` ${individual1.showDirection
- ? html``
- : ""}${individual1DisplayState}
- `
- : ""}
-
- ${this.showLine(individual1.state || 0)
- ? html`
-
- `
- : html``}
-
`
+ ${individualFieldLeftTop
+ ? individualLeftTopElement(this, this._config, {
+ individualObj: individualFieldLeftTop,
+ displayState: getIndividualDisplayState(individualFieldLeftTop),
+ newDur,
+ templatesObj,
+ })
: html`
`}
+ ${checkHasRightIndividual(this._config, individualObjs)
+ ? individualRightTopElement(this, this._config, {
+ displayState: getIndividualDisplayState(individualFieldRightTop),
+ individualObj: individualFieldRightTop,
+ newDur,
+ templatesObj,
+ battery,
+ individualObjs,
+ })
+ : html``}
`
: html``}
${grid.has
- ? html`
-
void }) => {
- const outageTarget = grid.powerOutage?.entityGenerator ?? entities.grid?.power_outage?.entity;
- const target =
- grid.powerOutage?.isOutage && outageTarget
- ? outageTarget
- : typeof entities.grid!.entity === "string"
- ? entities.grid!.entity
- : entities.grid!.entity.production!;
- this.openDetails(e, target);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- const outageTarget = grid.powerOutage?.entityGenerator ?? entities.grid?.power_outage?.entity;
- const target =
- grid.powerOutage?.isOutage && outageTarget
- ? outageTarget
- : typeof entities.grid!.entity === "string"
- ? entities.grid!.entity
- : entities.grid!.entity.production!;
- this.openDetails(e, target);
- }
- }}
- >
- ${generalSecondarySpan(grid, "grid")}
-
- ${(entities.grid?.display_state === "two_way" ||
- entities.grid?.display_state === undefined ||
- (entities.grid?.display_state === "one_way_no_zero" && (grid.state.toGrid ?? 0) > 0) ||
- (entities.grid?.display_state === "one_way" &&
- (grid.state.fromGrid === null || grid.state.fromGrid === 0) &&
- grid.state.toGrid !== 0)) &&
- grid.state.toGrid !== null &&
- !grid.powerOutage.isOutage
- ? html` void }) => {
- const target = typeof entities.grid!.entity === "string" ? entities.grid!.entity : entities.grid!.entity.production!;
- 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!;
- this.openDetails(e, target);
- }
- }}
- >
-
- ${this.displayValue(grid.state.toGrid)}
- `
- : null}
- ${((entities.grid?.display_state === "two_way" ||
- entities.grid?.display_state === undefined ||
- (entities.grid?.display_state === "one_way_no_zero" && grid.state.fromGrid > 0) ||
- (entities.grid?.display_state === "one_way" && (grid.state.toGrid === null || grid.state.toGrid === 0))) &&
- grid.state.fromGrid !== null &&
- !grid.powerOutage.isOutage) ||
- (grid.powerOutage.isOutage && !!grid.powerOutage.entityGenerator)
- ? html`
- ${this.displayValue(grid.state.fromGrid)}
- `
- : ""}
- ${grid.powerOutage?.isOutage && !grid.powerOutage?.entityGenerator
- ? html`${grid.powerOutage.name}`
- : ""}
-
-
${grid.name}
-
`
+ ? gridElement(this, {
+ entities,
+ grid,
+ templatesObj,
+ })
: html`
`}
-
-
void }) => {
- this.openDetails(e, entities.home?.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.home?.entity);
- }
- }}
- >
- ${generalSecondarySpan(home, "home")}
-
- ${homeUsageToDisplay}
-
-
- ${this.showLine(individual1.state || 0) && individual2.has && individual1.has
- ? html`
`
- : html`
${home.name}`}
-
+
+ ${homeElement(this, this._config, {
+ circleCircumference,
+ entities,
+ grid,
+ home,
+ homeBatteryCircumference,
+ homeGridCircumference,
+ homeNonFossilCircumference,
+ homeSolarCircumference,
+ newDur,
+ templatesObj,
+ homeUsageToDisplay,
+ individual: individualObjs,
+ })}
+ ${checkHasRightIndividual(this._config, individualObjs) ? html`
` : html``}
- ${battery.has || (individual1.has && individual2.has)
+ ${battery.has || checkHasBottomIndividual(this._config, individualObjs)
? html`
- ${battery.has
- ? html`
-
void }) => {
- const target = entities.battery?.state_of_charge!
- ? entities.battery?.state_of_charge!
- : typeof entities.battery?.entity === "string"
- ? entities.battery?.entity!
- : entities.battery?.entity!.production;
- this.openDetails(e, target);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- const target = entities.battery?.state_of_charge!
- ? entities.battery?.state_of_charge!
- : typeof entities.battery!.entity === "string"
- ? entities.battery!.entity!
- : entities.battery!.entity!.production;
- this.openDetails(e, target);
- }
- }}
- >
- ${battery.state_of_charge.state !== null
- ? html` void }) => {
- this.openDetails(e, entities.battery?.state_of_charge!);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.battery?.state_of_charge!);
- }
- }}
- id="battery-state-of-charge-text"
- >
- ${this.displayValue(
- battery.state_of_charge.state,
- battery.state_of_charge.unit,
- battery.state_of_charge.unit_white_space,
- battery.state_of_charge.decimals
- )}
- `
- : null}
- void }) => {
- this.openDetails(e, entities.battery?.state_of_charge!);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.battery?.state_of_charge!);
- }
- }}
- >
- ${entities.battery?.display_state === "two_way" ||
- entities.battery?.display_state === undefined ||
- (entities.battery?.display_state === "one_way_no_zero" && battery.state.toBattery > 0) ||
- (entities.battery?.display_state === "one_way" && battery.state.toBattery !== 0)
- ? html` void }) => {
- const target =
- typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.production!;
-
- 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!;
- this.openDetails(e, target);
- }
- }}
- >
-
- ${this.displayValue(battery.state.toBattery)}`
- : ""}
- ${entities.battery?.display_state === "two_way" ||
- entities.battery?.display_state === undefined ||
- (entities.battery?.display_state === "one_way_no_zero" && battery.state.fromBattery > 0) ||
- (entities.battery?.display_state === "one_way" && (battery.state.toBattery === 0 || battery.state.fromBattery !== 0))
- ? html` void }) => {
- const target =
- typeof entities.battery!.entity === "string" ? entities.battery!.entity! : entities.battery!.entity!.consumption!;
-
- 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!;
-
- this.openDetails(e, target);
- }
- }}
- >
-
- ${this.displayValue(battery.state.fromBattery)}`
- : ""}
-
-
${battery.name}
-
`
- : html`
`}
- ${individual2.has && individual1.has
- ? html`
- ${this.showLine(individual1.state || 0)
- ? html`
-
- `
- : html`
`}
-
void }) => {
- this.openDetails(e, entities.individual1?.entity);
- }}
- @keyDown=${(e: { key: string; stopPropagation: () => void }) => {
- if (e.key === "Enter") {
- this.openDetails(e, entities.individual1?.entity);
- }
- }}
- >
- ${individualSecondarySpan(individual1, "individual1")}
- (individual1.displayZeroTolerance ?? 0)
- ? "padding-bottom: 2px;"
- : "padding-bottom: 0px;"}"
- >
- ${entities.individual1?.display_zero_state !== false || (individual1.state || 0) > (individual1.displayZeroTolerance ?? 0)
- ? html` ${individual1.showDirection
- ? html``
- : ""}${individual1DisplayState}
- `
- : ""}
-
-
${individual1.name}
-
`
+ ${battery.has ? batteryElement(this, { battery, entities }) : html`
`}
+ ${individualFieldLeftBottom
+ ? individualLeftBottomElement(this, this.hass, this._config, {
+ displayState: getIndividualDisplayState(individualFieldLeftBottom),
+ individualObj: individualFieldLeftBottom,
+ newDur,
+ templatesObj,
+ })
: html`
`}
+ ${checkHasRightIndividual(this._config, individualObjs)
+ ? individualRightBottomElement(this, this._config, {
+ displayState: getIndividualDisplayState(individualFieldRightBottom),
+ individualObj: individualFieldRightBottom,
+ newDur,
+ templatesObj,
+ battery,
+ individualObjs,
+ })
+ : html``}
`
: html`