126 lines
3.1 KiB
TypeScript
126 lines
3.1 KiB
TypeScript
import { mdiAlertCircleOutline, mdiAlertOutline } from "@mdi/js";
|
|
import { css, html, LitElement, nothing } from "lit";
|
|
import { customElement, property, state } from "lit/decorators";
|
|
import "../../../components/ha-card";
|
|
import "../../../components/ha-svg-icon";
|
|
import type { HomeAssistant } from "../../../types";
|
|
import type { LovelaceCard, LovelaceGridOptions } from "../types";
|
|
import type { ErrorCardConfig } from "./types";
|
|
|
|
const ERROR_ICONS = {
|
|
warning: mdiAlertOutline,
|
|
error: mdiAlertCircleOutline,
|
|
};
|
|
|
|
@customElement("hui-error-card")
|
|
export class HuiErrorCard extends LitElement implements LovelaceCard {
|
|
@property({ attribute: false }) public hass?: HomeAssistant;
|
|
|
|
@property({ attribute: false }) public preview = false;
|
|
|
|
@property({ attribute: "severity" }) public severity: "warning" | "error" =
|
|
"error";
|
|
|
|
@state() private _config?: ErrorCardConfig;
|
|
|
|
public getCardSize(): number {
|
|
return 1;
|
|
}
|
|
|
|
public getGridOptions(): LovelaceGridOptions {
|
|
return {
|
|
columns: 6,
|
|
rows: this.preview ? "auto" : 1,
|
|
min_rows: 1,
|
|
min_columns: 6,
|
|
fixed_rows: this.preview,
|
|
};
|
|
}
|
|
|
|
public setConfig(config: ErrorCardConfig): void {
|
|
this._config = config;
|
|
this.severity = config.severity || "error";
|
|
}
|
|
|
|
protected render() {
|
|
const error =
|
|
this._config?.error ||
|
|
this.hass?.localize("ui.errors.config.configuration_error");
|
|
const showTitle =
|
|
this.hass === undefined || this.hass?.user?.is_admin || this.preview;
|
|
const showMessage = this.preview;
|
|
|
|
return html`
|
|
<ha-card class="${this.severity} ${showTitle ? "" : "no-title"}">
|
|
<div class="header">
|
|
<div class="icon">
|
|
<slot name="icon">
|
|
<ha-svg-icon .path=${ERROR_ICONS[this.severity]}></ha-svg-icon>
|
|
</slot>
|
|
</div>
|
|
${showTitle
|
|
? html`<div class="title"><slot>${error}</slot></div>`
|
|
: nothing}
|
|
</div>
|
|
${showMessage && this._config?.message
|
|
? html`<div class="message">${this._config.message}</div>`
|
|
: nothing}
|
|
</ha-card>
|
|
`;
|
|
}
|
|
|
|
static styles = css`
|
|
ha-card {
|
|
height: 100%;
|
|
border-width: 0;
|
|
}
|
|
ha-card::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0.12;
|
|
pointer-events: none;
|
|
content: "";
|
|
border-radius: var(--ha-card-border-radius, 12px);
|
|
}
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 16px;
|
|
}
|
|
.message {
|
|
padding: 0 16px 16px 16px;
|
|
}
|
|
.no-title {
|
|
justify-content: center;
|
|
}
|
|
.title {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
font-weight: var(--ha-font-weight-bold);
|
|
}
|
|
ha-card.warning .icon {
|
|
color: var(--warning-color);
|
|
}
|
|
ha-card.warning::after {
|
|
background-color: var(--warning-color);
|
|
}
|
|
ha-card.error .icon {
|
|
color: var(--error-color);
|
|
}
|
|
ha-card.error::after {
|
|
background-color: var(--error-color);
|
|
}
|
|
`;
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"hui-error-card": HuiErrorCard;
|
|
}
|
|
}
|