Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve energy settings dialog #15205

Merged
merged 3 commits into from Jan 30, 2023
Merged

Improve energy settings dialog #15205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b4bcdc
Improve energy settings dialog
emontnemery Jan 25, 2023
3159be9
Fix gas and water cost options
emontnemery Jan 25, 2023
51cd7af
Apply suggestions from code review
emontnemery Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/panels/config/energy/components/ha-energy-grid-settings.ts
View file
Open in desktop
Expand Up @@ -366,6 +366,7 @@ export class EnergyGridSettings extends LitElement {
ev.currentTarget.closest(".row").source;
showEnergySettingsGridFlowFromDialog(this, {
source: { ...origSource },
metadata: this.statsMetadata?.[origSource.stat_energy_from],
saveCallback: async (source) => {
const flowFrom = energySourcesByType(this.preferences).grid![0]
.flow_from;
Expand Down Expand Up @@ -393,6 +394,7 @@ export class EnergyGridSettings extends LitElement {
ev.currentTarget.closest(".row").source;
showEnergySettingsGridFlowToDialog(this, {
source: { ...origSource },
metadata: this.statsMetadata?.[origSource.stat_energy_to],
saveCallback: async (source) => {
const flowTo = energySourcesByType(this.preferences).grid![0].flow_to;

Expand Down
14 changes: 14 additions & 0 deletions src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts
View file
Open in desktop
Expand Up @@ -13,6 +13,7 @@ import { HomeAssistant } from "../../../../types";
import { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
import "@material/mwc-button/mwc-button";
import "../../../../components/entity/ha-statistic-picker";
import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";

const energyUnitClasses = ["energy"];

Expand All @@ -27,6 +28,8 @@ export class DialogEnergyBatterySettings

@state() private _source?: BatterySourceTypeEnergyPreference;

@state() private _energy_units?: string[];

@state() private _error?: string;

public async showDialog(
Expand All @@ -36,6 +39,9 @@ export class DialogEnergyBatterySettings
this._source = params.source
? { ...params.source }
: emptyBatteryEnergyPreference();
this._energy_units = (
await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
).units;
}

public closeDialog(): void {
Expand All @@ -50,6 +56,8 @@ export class DialogEnergyBatterySettings
return html``;
}

const pickableUnit = this._energy_units?.join(", ") || "";

return html`
<ha-dialog
open
Expand All @@ -63,6 +71,12 @@ export class DialogEnergyBatterySettings
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
<div>
${this.hass.localize(
"ui.panel.config.energy.battery.dialog.entity_para",
{ unit: pickableUnit }
)}
</div>

<ha-statistic-picker
.hass=${this.hass}
Expand Down
11 changes: 10 additions & 1 deletion src/panels/config/energy/dialogs/dialog-energy-device-settings.ts
View file
Open in desktop
Expand Up @@ -13,6 +13,7 @@ import "../../../../components/entity/ha-statistic-picker";
import "../../../../components/ha-radio";
import "../../../../components/ha-formfield";
import "../../../../components/entity/ha-entity-picker";
import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";

const energyUnitClasses = ["energy"];

Expand All @@ -27,12 +28,17 @@ export class DialogEnergyDeviceSettings

@state() private _device?: DeviceConsumptionEnergyPreference;

@state() private _energy_units?: string[];

@state() private _error?: string;

public async showDialog(
params: EnergySettingsDeviceDialogParams
): Promise<void> {
this._params = params;
this._energy_units = (
await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
).units;
}

public closeDialog(): void {
Expand All @@ -47,6 +53,8 @@ export class DialogEnergyDeviceSettings
return html``;
}

const pickableUnit = this._energy_units?.join(", ") || "";

return html`
<ha-dialog
open
Expand All @@ -62,7 +70,8 @@ export class DialogEnergyDeviceSettings
${this._error ? html`<p class="error">${this._error}</p>` : ""}
<div>
${this.hass.localize(
`ui.panel.config.energy.device_consumption.dialog.selected_stat_intro`
"ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
{ unit: pickableUnit }
)}
</div>

Expand Down
90 changes: 53 additions & 37 deletions src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
View file
Open in desktop
Expand Up @@ -23,6 +23,7 @@ import {
getDisplayUnit,
isExternalStatistic,
} from "../../../../data/recorder";
import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";

const gasDeviceClasses = ["gas", "energy"];
const gasUnitClasses = ["volume", "energy"];
Expand All @@ -40,10 +41,12 @@ export class DialogEnergyGasSettings

@state() private _costs?: "no-costs" | "number" | "entity" | "statistic";

@state() private _pickableUnit?: string;

@state() private _pickedDisplayUnit?: string | null;

@state() private _energy_units?: string[];

@state() private _gas_units?: string[];

@state() private _error?: string;

public async showDialog(
Expand All @@ -65,12 +68,17 @@ export class DialogEnergyGasSettings
: this._source.stat_cost
? "statistic"
: "no-costs";
this._energy_units = (
await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
).units;
this._gas_units = (
await getSensorDeviceClassConvertibleUnits(this.hass, "gas")
).units;
}

public closeDialog(): void {
this._params = undefined;
this._source = undefined;
this._pickableUnit = undefined;
this._pickedDisplayUnit = undefined;
this._error = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
Expand All @@ -82,15 +90,19 @@ export class DialogEnergyGasSettings
}

const pickableUnit =
this._pickableUnit ||
(this._params.allowedGasUnitClass === undefined
? "ft³, m³, Wh, kWh, MWh or GJ"
this._params.allowedGasUnitClass === undefined
? [...(this._gas_units || []), ...(this._energy_units || [])].join(", ")
: this._params.allowedGasUnitClass === "energy"
? "Wh, kWh, MWh or GJ"
: "ft³ or m³");
? this._energy_units?.join(", ") || ""
: this._gas_units?.join(", ") || "";

const unitPrice = this._pickedDisplayUnit
? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
: undefined;

const externalSource =
this._source.stat_cost && isExternalStatistic(this._source.stat_cost);
this._source.stat_energy_from &&
isExternalStatistic(this._source.stat_energy_from);
Comment on lines +104 to +105
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should check if the gas statistic is external, not if the cost statistic is external.


return html`
<ha-dialog
Expand All @@ -103,33 +115,41 @@ export class DialogEnergyGasSettings
@closed=${this.closeDialog}
>
${this._error ? html`<p class="error">${this._error}</p>` : ""}
<div>
<p>
${this.hass.localize("ui.panel.config.energy.gas.dialog.paragraph")}
</p>
<p>
${this.hass.localize(
"ui.panel.config.energy.gas.dialog.entity_para",
{ unit: pickableUnit }
)}
</p>
<p>
${this.hass.localize("ui.panel.config.energy.gas.dialog.note_para")}
</p>
</div>

<ha-statistic-picker
.hass=${this.hass}
.includeUnitClass=${this._params.allowedGasUnitClass ||
gasUnitClasses}
.includeDeviceClass=${gasDeviceClasses}
.value=${this._source.stat_energy_from}
.label=${`${this.hass.localize(
.label=${this.hass.localize(
"ui.panel.config.energy.gas.dialog.gas_usage"
)} (${
this._params.allowedGasUnitClass === undefined
? this.hass.localize(
"ui.panel.config.energy.gas.dialog.m3_or_kWh"
)
: pickableUnit
})`}
)}
@value-changed=${this._statisticChanged}
dialogInitialFocus
></ha-statistic-picker>

<p>
${this.hass.localize(`ui.panel.config.energy.gas.dialog.cost_para`)}
${this.hass.localize("ui.panel.config.energy.gas.dialog.cost_para")}
</p>

<ha-formfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.no_cost`
"ui.panel.config.energy.gas.dialog.no_cost"
)}
>
<ha-radio
Expand All @@ -141,14 +161,13 @@ export class DialogEnergyGasSettings
</ha-formfield>
<ha-formfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_stat`
"ui.panel.config.energy.gas.dialog.cost_stat"
)}
>
<ha-radio
value="statistic"
name="costs"
.checked=${this._costs === "statistic"}
.disabled=${externalSource}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was wrong: A sensor or external statistics which tracks the total cost is supported both when the consumed gas is tracked by an external statistics or by a sensor. A price entity or a fixed price is only supported when the consumed gas is tracked by a sensor.

Same change for for grid and water.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @emontnemery,

I'm trying to understand why I cannot use a fixed price on external statistics but I cannot find any related documentation.

Could you please tell me where I can find more information about it? I doesn't make sense to me

Thanks!

@change=${this._handleCostChanged}
></ha-radio>
</ha-formfield>
Expand All @@ -158,15 +177,15 @@ export class DialogEnergyGasSettings
.hass=${this.hass}
statistic-types="sum"
.value=${this._source.stat_cost}
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_stat_input`
)}
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.cost_stat_input"
)} (${this.hass.config.currency})`}
@value-changed=${this._priceStatChanged}
></ha-statistic-picker>`
: ""}
<ha-formfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_entity`
"ui.panel.config.energy.gas.dialog.cost_entity"
)}
>
<ha-radio
Expand All @@ -183,39 +202,36 @@ export class DialogEnergyGasSettings
.hass=${this.hass}
include-domains='["sensor", "input_number"]'
.value=${this._source.entity_energy_price}
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_entity_input`,
{ unit: this._pickedDisplayUnit || pickableUnit }
)}
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.cost_entity_input"
)} ${unitPrice ? ` (${unitPrice})` : ""}`}
@value-changed=${this._priceEntityChanged}
></ha-entity-picker>`
: ""}
<ha-formfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_number`
"ui.panel.config.energy.gas.dialog.cost_number"
)}
>
<ha-radio
value="number"
name="costs"
.checked=${this._costs === "number"}
.disabled=${externalSource}
@change=${this._handleCostChanged}
></ha-radio>
</ha-formfield>
${this._costs === "number"
? html`<ha-textfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_number_input`,
{ unit: this._pickedDisplayUnit || pickableUnit }
)}
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.cost_number_input"
)} ${unitPrice ? ` (${unitPrice})` : ""}`}
class="price-options"
step=".01"
type="number"
.value=${this._source.number_energy_price}
@change=${this._numberPriceChanged}
.suffix=${`${this.hass.config.currency}/${
this._pickedDisplayUnit || pickableUnit
}`}
.suffix=${unitPrice || ""}
>
</ha-textfield>`
: ""}
Expand Down