github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

A bit of cleanup in the card editor (#2984) 

* edit-card shouldn't need to know about the path

* fix

* Store config as object at all times, convert when necessary

* Hidden is not a property of mwc-button. No need to hide anyway...
This commit is contained in:
Thomas Lovén 2019-03-26 23:31:43 +01:00 committed by Paulus Schoutsen
parent 9a4215b5d5
commit 44eaa3abad
2 changed files with 65 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -12,6 +12,7 @@ import { LovelaceCardConfig } from "../../../../data/lovelace";
import "./hui-edit-card";
import "./hui-dialog-pick-card";
import { EditCardDialogParams } from "./show-edit-card-dialog";
import { addCard, replaceCard } from "../config-util";
declare global {
// for fire event
@ -32,19 +33,22 @@ export class HuiDialogEditCard extends LitElement {
@property() private _cardConfig?: LovelaceCardConfig;
@property() private _newCard?: boolean;
constructor() {
super();
this._cardPicked = this._cardPicked.bind(this);
this._cancel = this._cancel.bind(this);
this._save = this._save.bind(this);
}
public async showDialog(params: EditCardDialogParams): Promise<void> {
this._params = params;
const [view, card] = params.path;
this._newCard = card !== undefined ? false : true;
this._cardConfig =
params.path.length === 2
? (this._cardConfig = params.lovelace.config.views[
params.path[0]
].cards![params.path[1]])
card !== undefined
? params.lovelace.config.views[view].cards![card]
: undefined;
}
@ -66,9 +70,10 @@ export class HuiDialogEditCard extends LitElement {
<hui-edit-card
.hass="${this.hass}"
.lovelace="${this._params.lovelace}"
.path="${this._params.path}"
.cardConfig="${this._cardConfig}"
.closeDialog="${this._cancel}"
.saveCard="${this._save}"
.newCard="${this._newCard}"
>
</hui-edit-card>
`;
@ -82,6 +87,19 @@ export class HuiDialogEditCard extends LitElement {
this._params = undefined;
this._cardConfig = undefined;
}
private async _save(cardConf: LovelaceCardConfig): Promise<void> {
const lovelace = this._params!.lovelace;
await lovelace.saveConfig(
this._params!.path.length === 1
? addCard(lovelace.config, this._params!.path as [number], cardConf)
: replaceCard(
lovelace.config,
this._params!.path as [number, number],
cardConf
)
);
}
}
declare global {

112
src/panels/lovelace/editor/card-editor/hui-edit-card.ts
View File

@ -33,10 +33,9 @@ import "./hui-card-preview";
// tslint:disable-next-line
import { HuiCardPreview } from "./hui-card-preview";
import { LovelaceCardEditor, Lovelace } from "../../types";
import { ConfigValue, ConfigError } from "../types";
import { ConfigError } from "../types";
import { EntityConfig } from "../../entity-rows/types";
import { getCardElementTag } from "../../common/get-card-element-tag";
import { addCard, replaceCard } from "../config-util";
import { afterNextRender } from "../../../../common/util/render-status";
declare global {
@ -58,15 +57,17 @@ export class HuiEditCard extends LitElement {
public lovelace?: Lovelace;
public path?: [number] | [number, number];
public closeDialog?: () => void;
public saveCard?: (cardConf: LovelaceCardConfig) => Promise<void>;
public newCard?: boolean;
@property() private _configElement?: LovelaceCardEditor | null;
@property() private _uiEditor?: boolean;
@property() private _configValue?: ConfigValue;
@property() private _cardConfig?: LovelaceCardConfig;
@property() private _configState?: string;
@ -76,8 +77,6 @@ export class HuiEditCard extends LitElement {
@property() private _errorMsg?: TemplateResult;
private _cardType?: string;
private get _dialog(): PaperDialogElement {
return this.shadowRoot!.querySelector("paper-dialog")!;
}
@ -86,6 +85,20 @@ export class HuiEditCard extends LitElement {
return this.shadowRoot!.querySelector("hui-card-preview")!;
}
// tslint:disable-next-line
private __cardYaml: string | undefined;
private get _cardYaml(): string | undefined {
if (!this.__cardYaml) {
this.__cardYaml = yaml.safeDump(this._cardConfig);
}
return this.__cardYaml;
}
private set _cardYaml(yml: string | undefined) {
this.__cardYaml = yml;
}
public constructor() {
super();
this._saving = false;
@ -98,7 +111,8 @@ export class HuiEditCard extends LitElement {
return;
}
this._configValue = { format: "yaml", value: undefined };
this._cardConfig = undefined;
this._cardYaml = undefined;
this._configState = "OK";
this._uiEditor = true;
this._errorMsg = undefined;
@ -119,7 +133,7 @@ export class HuiEditCard extends LitElement {
: html`
<hui-yaml-editor
.hass="${this.hass}"
.value="${this._configValue!.value}"
.value="${this._cardYaml}"
@yaml-changed="${this._handleYamlChanged}"
@yaml-save="${this._save}"
></hui-yaml-editor>
@ -162,7 +176,6 @@ export class HuiEditCard extends LitElement {
<div class="paper-dialog-buttons">
<mwc-button
class="toggle-button"
?hidden="${!this._configValue || !this._configValue.value}"
?disabled="${this._configElement === null ||
this._configState !== "OK"}"
@click="${this._toggleEditor}"
@ -174,7 +187,6 @@ export class HuiEditCard extends LitElement {
>${this.hass!.localize("ui.common.cancel")}</mwc-button
>
<mwc-button
?hidden="${!this._configValue || !this._configValue.value}"
?disabled="${this._saving || this._configState !== "OK"}"
@click="${this._save}"
>
@ -222,22 +234,9 @@ export class HuiEditCard extends LitElement {
this._saving = true;
const cardConf: LovelaceCardConfig =
this._configValue!.format === "yaml"
? yaml.safeLoad(this._configValue!.value!)
: this._configValue!.value!;
try {
const lovelace = this.lovelace!;
await lovelace.saveConfig(
this._creatingCard
? addCard(lovelace.config, this.path as [number], cardConf)
: replaceCard(
lovelace.config,
this.path as [number, number],
cardConf
)
);
await this.saveCard!(this._cardConfig!);
this._cardYaml = undefined;
this.closeDialog!();
} catch (err) {
alert(`Saving failed: ${err.message}`);
@ -247,12 +246,9 @@ export class HuiEditCard extends LitElement {
}
private _handleYamlChanged(ev: CustomEvent): void {
this._configValue = { format: "yaml", value: ev.detail.value };
this._cardConfig = yaml.safeLoad(ev.detail.value);
try {
const config = yaml.safeLoad(
this._configValue.value
) as LovelaceCardConfig;
this._updatePreview(config);
this._updatePreview(this._cardConfig!);
this._configState = "OK";
} catch (err) {
this._configState = "YAML_ERROR";
@ -264,7 +260,7 @@ export class HuiEditCard extends LitElement {
}
private _handleUIConfigChanged(value: LovelaceCardConfig): void {
this._configValue = { format: "json", value };
this._cardConfig = value;
this._updatePreview(value);
}
@ -294,35 +290,23 @@ export class HuiEditCard extends LitElement {
}
private async _toggleEditor(): Promise<void> {
if (this._uiEditor && this._configValue!.format === "json") {
this._configValue = {
format: "yaml",
value: yaml.safeDump(this._configValue!.value),
};
this._uiEditor = !this._uiEditor;
} else if (this._configElement && this._configValue!.format === "yaml") {
const yamlConfig = this._configValue!.value;
const cardConfig = yaml.safeLoad(yamlConfig) as LovelaceCardConfig;
this._uiEditor = !this._uiEditor;
if (cardConfig.type !== this._cardType) {
const succes = await this._loadConfigElement(cardConfig);
if (!succes) {
this._loadedDialog();
}
this._cardType = cardConfig.type;
this._cardYaml = undefined;
if (this._uiEditor) {
this._uiEditor = false;
} else if (this._configElement) {
const success = await this._loadConfigElement(this._cardConfig!);
if (!success) {
this._loadedDialog();
} else {
this._configValue = {
format: "json",
value: cardConfig,
};
this._configElement.setConfig(cardConfig);
this._uiEditor = true;
this._configElement.setConfig(this._cardConfig!);
}
}
this._resizeDialog();
}
private _isConfigValid(): boolean {
if (!this._configValue || !this._configValue.value) {
if (!this._cardConfig) {
return false;
}
if (this._configState === "OK") {
@ -333,14 +317,10 @@ export class HuiEditCard extends LitElement {
}
private _isConfigChanged(): boolean {
if (this._creatingCard) {
if (this.newCard) {
return true;
}
const configValue =
this._configValue!.format === "yaml"
? yaml.safeLoad(this._configValue!.value)
: this._configValue!.value;
return JSON.stringify(configValue) !== JSON.stringify(this.cardConfig);
return JSON.stringify(this._cardConfig) !== JSON.stringify(this.cardConfig);
}
private async _loadConfigElement(conf: LovelaceCardConfig): Promise<boolean> {
@ -357,10 +337,11 @@ export class HuiEditCard extends LitElement {
const elClass = customElements.get(tag);
let configElement;
this._cardConfig = conf;
if (elClass && elClass.getConfigElement) {
configElement = await elClass.getConfigElement();
} else {
this._configValue = { format: "yaml", value: yaml.safeDump(conf) };
this._updatePreview(conf);
this._uiEditor = false;
this._configElement = null;
@ -374,10 +355,6 @@ export class HuiEditCard extends LitElement {
Your config is not supported by the UI editor:<br /><b>${err.message}</b
><br />Falling back to YAML editor.
`;
this._configValue = {
format: "yaml",
value: yaml.safeDump(conf),
};
this._updatePreview(conf);
this._uiEditor = false;
this._configElement = null;
@ -388,17 +365,12 @@ export class HuiEditCard extends LitElement {
configElement.addEventListener("config-changed", (ev) =>
this._handleUIConfigChanged(ev.detail.config)
);
this._configValue = { format: "json", value: conf };
this._configElement = configElement;
await this.updateComplete;
this._updatePreview(conf);
return true;
}
private get _creatingCard(): boolean {
return this.path!.length === 1;
}
private _openedChanged(ev): void {
if (!ev.detail.value) {
this.closeDialog!();