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:
parent
9a4215b5d5
commit
44eaa3abad
|
@ -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 {
|
||||
|
|
|
@ -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._cardYaml = undefined;
|
||||
if (this._uiEditor) {
|
||||
this._uiEditor = false;
|
||||
} else if (this._configElement) {
|
||||
const success = await this._loadConfigElement(this._cardConfig!);
|
||||
if (!success) {
|
||||
this._loadedDialog();
|
||||
}
|
||||
this._cardType = cardConfig.type;
|
||||
} 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!();
|
||||
|
|
Loading…
Reference in New Issue