mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-25 13:57:21 +00:00
Alarm Card Editor to HA Form (#11760)
* Move to ha-form * Update hui-alarm-panel-card-editor.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Zack Barett
GitHub
parent
73855e6f99
commit
15d1b8b2ac
@ -1,20 +1,15 @@
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-select/mwc-select";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import { css, 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 { array, assert, assign, object, optional, string } from "superstruct";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||
import { stopPropagation } from "../../../../common/dom/stop_propagation";
|
||||
import "../../../../components/entity/ha-entity-picker";
|
||||
import "../../../../components/ha-svg-icon";
|
||||
import { HomeAssistant } from "../../../../types";
|
||||
import { AlarmPanelCardConfig } from "../../cards/types";
|
||||
import "../../components/hui-theme-select-editor";
|
||||
import { LovelaceCardEditor } from "../../types";
|
||||
import type { HomeAssistant } from "../../../../types";
|
||||
import type { AlarmPanelCardConfig } from "../../cards/types";
|
||||
import type { LovelaceCardEditor } from "../../types";
|
||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||
import { EditorTarget, EntitiesEditorEvent } from "../types";
|
||||
import { configElementStyle } from "./config-elements-style";
|
||||
import type { HaFormSchema } from "../../../../components/ha-form/types";
|
||||
import type { LocalizeFunc } from "../../../../common/translations/localize";
|
||||
|
||||
const cardConfigStruct = assign(
|
||||
baseLovelaceCardConfig,
|
||||
@ -26,7 +21,13 @@ const cardConfigStruct = assign(
|
||||
})
|
||||
);
|
||||
|
||||
const includeDomains = ["alarm_control_panel"];
|
||||
const states = [
|
||||
"arm_home",
|
||||
"arm_away",
|
||||
"arm_night",
|
||||
"arm_vacation",
|
||||
"arm_custom_bypass",
|
||||
];
|
||||
|
||||
@customElement("hui-alarm-panel-card-editor")
|
||||
export class HuiAlarmPanelCardEditor
|
||||
@ -42,177 +43,72 @@ export class HuiAlarmPanelCardEditor
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
get _entity(): string {
|
||||
return this._config!.entity || "";
|
||||
}
|
||||
private _schema = memoizeOne((localize: LocalizeFunc): HaFormSchema[] => [
|
||||
{
|
||||
name: "entity",
|
||||
required: true,
|
||||
selector: { entity: { domain: "alarm_control_panel" } },
|
||||
},
|
||||
{
|
||||
type: "grid",
|
||||
name: "",
|
||||
schema: [
|
||||
{ name: "name", selector: { text: {} } },
|
||||
{ name: "theme", selector: { theme: {} } },
|
||||
],
|
||||
},
|
||||
|
||||
get _name(): string {
|
||||
return this._config!.name || "";
|
||||
}
|
||||
|
||||
get _states(): string[] {
|
||||
return this._config!.states || [];
|
||||
}
|
||||
|
||||
get _theme(): string {
|
||||
return this._config!.theme || "";
|
||||
}
|
||||
{
|
||||
type: "multi_select",
|
||||
name: "states",
|
||||
options: states.map((s) => [
|
||||
s,
|
||||
localize(`ui.card.alarm_control_panel.${s}`),
|
||||
]) as [string, string][],
|
||||
},
|
||||
]);
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass || !this._config) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
const states = [
|
||||
"arm_home",
|
||||
"arm_away",
|
||||
"arm_night",
|
||||
"arm_vacation",
|
||||
"arm_custom_bypass",
|
||||
];
|
||||
const schema = this._schema(this.hass.localize);
|
||||
|
||||
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>
|
||||
<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>
|
||||
<span>Used States</span> ${this._states.map(
|
||||
(entityState, index) => html`
|
||||
<div class="states">
|
||||
<paper-item>${entityState}</paper-item>
|
||||
<ha-svg-icon
|
||||
class="deleteState"
|
||||
.value=${index}
|
||||
.path=${mdiClose}
|
||||
@click=${this._stateRemoved}
|
||||
></ha-svg-icon>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
<mwc-select
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.lovelace.editor.card.alarm-panel.available_states"
|
||||
)}
|
||||
@selected=${this._stateAdded}
|
||||
@closed=${stopPropagation}
|
||||
fixedMenuPosition
|
||||
naturalMenuWidth
|
||||
>
|
||||
${states.map(
|
||||
(entityState) =>
|
||||
html`<mwc-list-item>${entityState}</mwc-list-item> `
|
||||
)}
|
||||
</mwc-select>
|
||||
<hui-theme-select-editor
|
||||
.hass=${this.hass}
|
||||
.value=${this._theme}
|
||||
.configValue=${"theme"}
|
||||
@value-changed=${this._valueChanged}
|
||||
></hui-theme-select-editor>
|
||||
</div>
|
||||
<ha-form
|
||||
.hass=${this.hass}
|
||||
.data=${this._config}
|
||||
.schema=${schema}
|
||||
.computeLabel=${this._computeLabelCallback}
|
||||
@value-changed=${this._valueChanged}
|
||||
></ha-form>
|
||||
`;
|
||||
}
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
configElementStyle,
|
||||
css`
|
||||
.states {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.deleteState {
|
||||
visibility: hidden;
|
||||
}
|
||||
.states:hover > .deleteState {
|
||||
visibility: visible;
|
||||
}
|
||||
ha-svg-icon {
|
||||
padding-top: 12px;
|
||||
}
|
||||
`,
|
||||
];
|
||||
private _valueChanged(ev: CustomEvent): void {
|
||||
fireEvent(this, "config-changed", { config: ev.detail.value });
|
||||
}
|
||||
|
||||
private _stateRemoved(ev: EntitiesEditorEvent): void {
|
||||
if (!this._config || !this._states || !this.hass) {
|
||||
return;
|
||||
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"
|
||||
)})`;
|
||||
}
|
||||
|
||||
const target = ev.target! as EditorTarget;
|
||||
const index = Number(target.value);
|
||||
if (index > -1) {
|
||||
const newStates = [...this._states];
|
||||
newStates.splice(index, 1);
|
||||
fireEvent(this, "config-changed", {
|
||||
config: {
|
||||
...this._config,
|
||||
states: newStates,
|
||||
},
|
||||
});
|
||||
if (schema.name === "name") {
|
||||
return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.name`);
|
||||
}
|
||||
}
|
||||
|
||||
private _stateAdded(ev: EntitiesEditorEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
if (!target.value || this._states.indexOf(target.value) !== -1) {
|
||||
return;
|
||||
}
|
||||
const newStates = [...this._states];
|
||||
newStates.push(target.value);
|
||||
target.value = "";
|
||||
fireEvent(this, "config-changed", {
|
||||
config: {
|
||||
...this._config,
|
||||
states: newStates,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
private _valueChanged(ev: EntitiesEditorEvent): void {
|
||||
if (!this._config || !this.hass) {
|
||||
return;
|
||||
}
|
||||
const target = ev.target! as EditorTarget;
|
||||
if (this[`_${target.configValue}`] === target.value) {
|
||||
return;
|
||||
}
|
||||
if (target.configValue) {
|
||||
if (target.value === "") {
|
||||
this._config = { ...this._config };
|
||||
delete this._config[target.configValue!];
|
||||
} else {
|
||||
this._config = {
|
||||
...this._config,
|
||||
[target.configValue!]: target.value,
|
||||
};
|
||||
}
|
||||
}
|
||||
fireEvent(this, "config-changed", { config: this._config });
|
||||
}
|
||||
return this.hass!.localize(
|
||||
`ui.panel.lovelace.editor.card.alarm-panel.${
|
||||
schema.name === "states" ? "available_states" : schema.name
|
||||
}`
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user