First pass

This commit is contained in:
Zack Arnett 2021-10-03 22:27:08 -05:00
parent cba6bbdc74
commit 5b90c8a19c
2 changed files with 26 additions and 28 deletions

View File

@ -1,9 +1,10 @@
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { assert, assign, object, optional, string } from "superstruct"; import { assert, assign, object, optional, string } from "superstruct";
import { isComponentLoaded } from "../../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
import { fireEvent } from "../../../../common/dom/fire_event"; import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import { HomeAssistant } from "../../../../types"; import { HomeAssistant } from "../../../../types";
import { ShoppingListCardConfig } from "../../cards/types"; import { ShoppingListCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor"; import "../../components/hui-theme-select-editor";
@ -50,11 +51,11 @@ export class HuiShoppingListEditor
<div class="card-config"> <div class="card-config">
${!isComponentLoaded(this.hass, "shopping_list") ${!isComponentLoaded(this.hass, "shopping_list")
? html` ? html`
<div class="error"> <ha-alert .alertType=${"error"}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded" "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
)} )}
</div> </ha-alert>
` `
: ""} : ""}
<paper-input <paper-input
@ -99,14 +100,6 @@ export class HuiShoppingListEditor
} }
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }
static get styles(): CSSResultGroup {
return css`
.error {
color: var(--error-color);
}
`;
}
} }
declare global { declare global {

View File

@ -8,7 +8,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { property, state, query } from "lit/decorators"; import { property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import { handleStructError } from "../../../common/structs/handle-errors"; import { handleStructError } from "../../../common/structs/handle-errors";
import { computeRTL } from "../../../common/util/compute_rtl"; import { computeRTL } from "../../../common/util/compute_rtl";
@ -207,40 +207,45 @@ export abstract class HuiElementEditor<T> extends LitElement {
`} `}
${this._guiSupported === false && this.configElementType ${this._guiSupported === false && this.configElementType
? html` ? html`
<div class="info"> <ha-alert>
${this.hass.localize( ${this.hass.localize(
"ui.errors.config.editor_not_available", "ui.errors.config.editor_not_available",
"type", "type",
this.configElementType this.configElementType
)} )}
</div> </ha-alert>
` `
: ""} : ""}
${this.hasError ${this.hasError
? html` ? html`
<div class="error"> <ha-alert
${this.hass.localize("ui.errors.config.error_detected")}: .title=${this.hass.localize("ui.errors.config.error_detected")}
<br /> .alertType=${"error"}
>
<ul> <ul>
${this._errors!.map((error) => html`<li>${error}</li>`)} ${this._errors!.map((error) => html`<li>${error}</li>`)}
</ul> </ul>
</div> </ha-alert>
` `
: ""} : ""}
${this.hasWarning ${this.hasWarning
? html` ? html`
<div class="warning"> <ha-alert
${this.hass.localize("ui.errors.config.editor_not_supported")}: .title=${this.hass.localize(
<br /> "ui.errors.config.editor_not_supported"
)}
.alertType=${"warning"}
>
${this._warnings!.length > 0 && this._warnings![0] !== undefined ${this._warnings!.length > 0 && this._warnings![0] !== undefined
? html` <ul> ? html`
${this._warnings!.map( <ul>
(warning) => html`<li>${warning}</li>` ${this._warnings!.map(
)} (warning) => html`<li>${warning}</li>`
</ul>` )}
</ul>
`
: ""} : ""}
${this.hass.localize("ui.errors.config.edit_in_yaml_supported")} </ha-alert>
</div>
` `
: ""} : ""}
</div> </div>