mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
weather forecast editor to HA form (#11823)
This commit is contained in:
Zack Barett
GitHub
parent
49beafbe5f
commit
976fd4b32d
@ -1,22 +1,18 @@
|
||||
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import "../../../../components/ha-form/ha-form";
|
||||
import { html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { assert, boolean, object, optional, string, assign } from "superstruct";
|
||||
import { memoize } from "@fullcalendar/common";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
|
||||
import "../../../../components/entity/ha-entity-attribute-picker";
|
||||
import "../../../../components/entity/ha-entity-picker";
|
||||
import "../../../../components/ha-formfield";
|
||||
import "../../../../components/ha-radio";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { WeatherForecastCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-theme-select-editor";
|
||||
import { LovelaceCardEditor } from "../../types";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { WeatherForecastCardConfig } from "../../cards/types";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { actionConfigStruct } from "../structs/action-struct";
|
||||
import { EditorTarget, EntitiesEditorEvent } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { UNAVAILABLE } from "../../../../data/entity";
|
||||
import { WeatherEntity } from "../../../../data/weather";
|
||||
import type { WeatherEntity } from "../../../../data/weather";
|
||||
import type { LocalizeFunc } from "../../../../common/translations/localize";
|
||||
import type { HaFormSchema } from "../../../../components/ha-form/types";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
baseLovelaceCardConfig,
|
||||
@ -33,8 +29,6 @@ const cardConfigStruct = assign(
|
||||
})
|
||||
);
|
||||
|
||||
const includeDomains = ["weather"];
|
||||
|
||||
@customElement("hui-weather-forecast-card-editor")
|
||||
export class HuiWeatherForecastCardEditor
|
||||
extends LitElement
|
||||
@ -61,30 +55,6 @@ export class HuiWeatherForecastCardEditor
|
||||
}
|
||||
}
|
||||
|
||||
get _entity(): string {
|
||||
return this._config!.entity || "";
|
||||
}
|
||||
|
||||
get _name(): string {
|
||||
return this._config!.name || "";
|
||||
}
|
||||
|
||||
get _theme(): string {
|
||||
return this._config!.theme || "";
|
||||
}
|
||||
|
||||
get _show_current(): boolean {
|
||||
return this._config!.show_current ?? true;
|
||||
}
|
||||
|
||||
get _show_forecast(): boolean {
|
||||
return this._config!.show_forecast ?? this._has_forecast === true;
|
||||
}
|
||||
|
||||
get _secondary_info_attribute(): string {
|
||||
return this._config!.secondary_info_attribute || "";
|
||||
}
|
||||
|
||||
get _has_forecast(): boolean | undefined {
|
||||
if (this.hass && this._config) {
|
||||
const stateObj = this.hass.states[this._config.entity] as WeatherEntity;
|
||||
@ -95,146 +65,134 @@ export class HuiWeatherForecastCardEditor
|
||||
return undefined;
|
||||
}
|
||||
|
||||
private _schema = memoize(
|
||||
(
|
||||
entity: string,
|
||||
localize: LocalizeFunc,
|
||||
hasForecast?: boolean
|
||||
): HaFormSchema[] => {
|
||||
const schema: HaFormSchema[] = [
|
||||
{
|
||||
name: "entity",
|
||||
required: true,
|
||||
selector: { entity: { domain: "weather" } },
|
||||
},
|
||||
{ name: "name", selector: { text: {} } },
|
||||
{
|
||||
name: "",
|
||||
type: "grid",
|
||||
schema: [
|
||||
{
|
||||
name: "secondary_info_attribute",
|
||||
selector: { attribute: { entity_id: entity } },
|
||||
},
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
],
|
||||
},
|
||||
];
|
||||
if (hasForecast) {
|
||||
schema.push({
|
||||
name: "forecast",
|
||||
selector: {
|
||||
select: {
|
||||
options: [
|
||||
{
|
||||
value: "show_both",
|
||||
label: localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_both"
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "show_current",
|
||||
label: localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "show_forecast",
|
||||
label: localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
return schema;
|
||||
}
|
||||
);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const schema = this._schema(
|
||||
this._config.entity,
|
||||
this.hass.localize,
|
||||
this._has_forecast
|
||||
);
|
||||
|
||||
const data: WeatherForecastCardConfig = {
|
||||
show_current: true,
|
||||
show_forecast: this._has_forecast,
|
||||
...this._config,
|
||||
};
|
||||
|
||||
data.forecast =
|
||||
data.show_current && data.show_forecast
|
||||
? "show_both"
|
||||
: data.show_current
|
||||
? "show_current"
|
||||
: "show_forecast";
|
||||
|
||||
return html`
|
||||
<div class="card-config">
|
||||
<ha-entity-picker
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.entity"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.required"
|
||||
)})"
|
||||
.hass=${this.hass}
|
||||
.value=${this._entity}
|
||||
.configValue=${"entity"}
|
||||
.includeDomains=${includeDomains}
|
||||
@change=${this._valueChanged}
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
<div class="side-by-side">
|
||||
<paper-input
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.name"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.value=${this._name}
|
||||
.configValue=${"name"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></paper-input>
|
||||
<hui-theme-select-editor
|
||||
.hass=${this.hass}
|
||||
.value=${this._theme}
|
||||
.configValue=${"theme"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-theme-select-editor>
|
||||
<ha-entity-attribute-picker
|
||||
.hass=${this.hass}
|
||||
.entityId=${this._entity}
|
||||
.label="${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.secondary_info_attribute"
|
||||
)} (${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.config.optional"
|
||||
)})"
|
||||
.value=${this._secondary_info_attribute}
|
||||
.configValue=${"secondary_info_attribute"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-entity-attribute-picker>
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<ha-formfield
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_both"
|
||||
)}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-radio
|
||||
.disabled=${this._has_forecast === false}
|
||||
.checked=${this._has_forecast === true &&
|
||||
this._show_current &&
|
||||
this._show_forecast}
|
||||
.configValue=${"show_both"}
|
||||
@change=${this._valueChanged}
|
||||
></ha-radio
|
||||
></ha-formfield>
|
||||
<ha-formfield
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_only_current"
|
||||
)}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-radio
|
||||
.disabled=${this._has_forecast === false}
|
||||
.checked=${this._has_forecast === false ||
|
||||
(this._show_current && !this._show_forecast)}
|
||||
.configValue=${"show_current"}
|
||||
@change=${this._valueChanged}
|
||||
></ha-radio
|
||||
></ha-formfield>
|
||||
<ha-formfield
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.weather-forecast.show_only_forecast"
|
||||
)}
|
||||
.dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-radio
|
||||
.disabled=${this._has_forecast === false}
|
||||
.checked=${this._has_forecast === true &&
|
||||
!this._show_current &&
|
||||
this._show_forecast}
|
||||
.configValue=${"show_forecast"}
|
||||
@change=${this._valueChanged}
|
||||
></ha-radio
|
||||
></ha-formfield>
|
||||
</div>
|
||||
</div>
|
||||
<ha-form
|
||||
.hass=${this.hass}
|
||||
.data=${data}
|
||||
.schema=${schema}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
`;
|
||||
}
|
||||
|
||||
private _valueChanged(ev: EntitiesEditorEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
private _valueChanged(ev: CustomEvent): void {
|
||||
const config = ev.detail.value;
|
||||
if (config.forecast === "show_both") {
|
||||
config.show_current = true;
|
||||
config.show_forecast = true;
|
||||
} else if (config.forecast === "show_current") {
|
||||
config.show_current = true;
|
||||
config.show_forecast = false;
|
||||
} else {
|
||||
config.show_current = false;
|
||||
config.show_forecast = true;
|
||||
}
|
||||
const target = ev.currentTarget! as EditorTarget;
|
||||
|
||||
if (this[`_${target.configValue}`] === target.value) {
|
||||
return;
|
||||
}
|
||||
if (target.configValue) {
|
||||
if (target.configValue.startsWith("show_")) {
|
||||
this._config = { ...this._config };
|
||||
if (target.configValue === "show_both") {
|
||||
/* delete since true is default */
|
||||
delete this._config.show_current;
|
||||
delete this._config.show_forecast;
|
||||
} else if (target.configValue === "show_current") {
|
||||
delete this._config.show_current;
|
||||
this._config.show_forecast = false;
|
||||
} else if (target.configValue === "show_forecast") {
|
||||
delete this._config.show_forecast;
|
||||
this._config.show_current = false;
|
||||
}
|
||||
} else if (target.value === "") {
|
||||
this._config = { ...this._config };
|
||||
delete this._config[target.configValue!];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]:
|
||||
target.checked !== undefined ? target.checked : target.value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
delete config.forecast;
|
||||
fireEvent(this, "config-changed", { config });
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return configElementStyle;
|
||||
}
|
||||
private _computeLabelCallback = (schema: HaFormSchema) => {
|
||||
if (schema.name === "entity") {
|
||||
return `${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.generic.entity"
|
||||
)} (${this.hass!.localize(
|
||||
"ui.panel.lovelace.editor.card.config.required"
|
||||
)})`;
|
||||
}
|
||||
|
||||
return (
|
||||
this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.generic.${schema.name}`
|
||||
) ||
|
||||
this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.weather_forecast.${schema.name}`
|
||||
)
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user