mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Glance editor to ha-form (#11804)
This commit is contained in:
parent
2a98ace0b3
commit
0113cc3cf6
@ -1,5 +1,12 @@
|
|||||||
import "./ha-form";
|
import "./ha-form";
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import {
|
||||||
|
css,
|
||||||
|
CSSResultGroup,
|
||||||
|
html,
|
||||||
|
LitElement,
|
||||||
|
PropertyValues,
|
||||||
|
TemplateResult,
|
||||||
|
} from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import type {
|
import type {
|
||||||
HaFormGridSchema,
|
HaFormGridSchema,
|
||||||
@ -26,10 +33,25 @@ export class HaFormGrid extends LitElement implements HaFormElement {
|
|||||||
|
|
||||||
@property() public computeHelper?: (schema: HaFormSchema) => string;
|
@property() public computeHelper?: (schema: HaFormSchema) => string;
|
||||||
|
|
||||||
protected firstUpdated() {
|
protected firstUpdated(changedProps: PropertyValues) {
|
||||||
|
super.firstUpdated(changedProps);
|
||||||
this.setAttribute("own-margin", "");
|
this.setAttribute("own-margin", "");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected updated(changedProps: PropertyValues): void {
|
||||||
|
super.updated(changedProps);
|
||||||
|
if (changedProps.has("schema")) {
|
||||||
|
if (this.schema.column_min_width) {
|
||||||
|
this.style.setProperty(
|
||||||
|
"--form-grid-min-width",
|
||||||
|
this.schema.column_min_width
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.style.setProperty("--form-grid-min-width", "");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${this.schema.schema.map(
|
${this.schema.schema.map(
|
||||||
|
@ -29,6 +29,7 @@ export interface HaFormBaseSchema {
|
|||||||
export interface HaFormGridSchema extends HaFormBaseSchema {
|
export interface HaFormGridSchema extends HaFormBaseSchema {
|
||||||
type: "grid";
|
type: "grid";
|
||||||
name: "";
|
name: "";
|
||||||
|
column_min_width?: string;
|
||||||
schema: HaFormSchema[];
|
schema: HaFormSchema[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { 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 { customElement, property, state } from "lit/decorators";
|
||||||
import {
|
import {
|
||||||
array,
|
array,
|
||||||
@ -12,23 +13,14 @@ import {
|
|||||||
assign,
|
assign,
|
||||||
} from "superstruct";
|
} from "superstruct";
|
||||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||||
import { computeRTLDirection } from "../../../../common/util/compute_rtl";
|
import type { HomeAssistant } from "../../../../types";
|
||||||
import "../../../../components/entity/state-badge";
|
|
||||||
import "../../../../components/ha-card";
|
|
||||||
import "../../../../components/ha-formfield";
|
|
||||||
import "../../../../components/ha-icon";
|
|
||||||
import "../../../../components/ha-switch";
|
|
||||||
import { HomeAssistant } from "../../../../types";
|
|
||||||
import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
|
import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
|
||||||
import "../../components/hui-entity-editor";
|
import "../../components/hui-entity-editor";
|
||||||
import "../../components/hui-theme-select-editor";
|
import type { LovelaceCardEditor } from "../../types";
|
||||||
import { LovelaceCardEditor } from "../../types";
|
|
||||||
import { processEditorEntities } from "../process-editor-entities";
|
import { processEditorEntities } from "../process-editor-entities";
|
||||||
import { entitiesConfigStruct } from "../structs/entities-struct";
|
import { entitiesConfigStruct } from "../structs/entities-struct";
|
||||||
import { EditorTarget, EntitiesEditorEvent } from "../types";
|
|
||||||
import { configElementStyle } from "./config-elements-style";
|
|
||||||
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
|
||||||
import "@polymer/paper-input/paper-input";
|
import type { HaFormSchema } from "../../../../components/ha-form/types";
|
||||||
|
|
||||||
const cardConfigStruct = assign(
|
const cardConfigStruct = assign(
|
||||||
baseLovelaceCardConfig,
|
baseLovelaceCardConfig,
|
||||||
@ -44,6 +36,29 @@ const cardConfigStruct = assign(
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const SCHEMA: HaFormSchema[] = [
|
||||||
|
{ name: "title", selector: { text: {} } },
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "grid",
|
||||||
|
schema: [
|
||||||
|
{ name: "columns", selector: { number: { min: 1, mode: "box" } } },
|
||||||
|
{ name: "theme", selector: { theme: {} } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "grid",
|
||||||
|
column_min_width: "100px",
|
||||||
|
schema: [
|
||||||
|
{ name: "show_name", selector: { boolean: {} } },
|
||||||
|
{ name: "show_icon", selector: { boolean: {} } },
|
||||||
|
{ name: "show_state", selector: { boolean: {} } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{ name: "state_color", selector: { boolean: {} } },
|
||||||
|
];
|
||||||
|
|
||||||
@customElement("hui-glance-card-editor")
|
@customElement("hui-glance-card-editor")
|
||||||
export class HuiGlanceCardEditor
|
export class HuiGlanceCardEditor
|
||||||
extends LitElement
|
extends LitElement
|
||||||
@ -61,177 +76,52 @@ export class HuiGlanceCardEditor
|
|||||||
this._configEntities = processEditorEntities(config.entities);
|
this._configEntities = processEditorEntities(config.entities);
|
||||||
}
|
}
|
||||||
|
|
||||||
get _title(): string {
|
|
||||||
return this._config!.title || "";
|
|
||||||
}
|
|
||||||
|
|
||||||
get _theme(): string {
|
|
||||||
return this._config!.theme || "";
|
|
||||||
}
|
|
||||||
|
|
||||||
get _columns(): number {
|
|
||||||
return this._config!.columns || NaN;
|
|
||||||
}
|
|
||||||
|
|
||||||
get _show_name(): boolean {
|
|
||||||
return this._config!.show_name || true;
|
|
||||||
}
|
|
||||||
|
|
||||||
get _show_icon(): boolean {
|
|
||||||
return this._config!.show_icon || true;
|
|
||||||
}
|
|
||||||
|
|
||||||
get _show_state(): boolean {
|
|
||||||
return this._config!.show_state || true;
|
|
||||||
}
|
|
||||||
|
|
||||||
get _state_color(): boolean {
|
|
||||||
return this._config!.state_color ?? true;
|
|
||||||
}
|
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
if (!this.hass || !this._config) {
|
if (!this.hass || !this._config) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dir = computeRTLDirection(this.hass!);
|
const data = {
|
||||||
|
show_name: true,
|
||||||
|
show_icon: true,
|
||||||
|
show_state: true,
|
||||||
|
...this._config,
|
||||||
|
};
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="card-config">
|
<ha-form
|
||||||
<paper-input
|
.hass=${this.hass}
|
||||||
.label="${this.hass.localize(
|
.data=${data}
|
||||||
"ui.panel.lovelace.editor.card.generic.title"
|
.schema=${SCHEMA}
|
||||||
)} (${this.hass.localize(
|
.computeLabel=${this._computeLabelCallback}
|
||||||
"ui.panel.lovelace.editor.card.config.optional"
|
@value-changed=${this._valueChanged}
|
||||||
)})"
|
></ha-form>
|
||||||
.value=${this._title}
|
|
||||||
.configValue=${"title"}
|
|
||||||
@value-changed=${this._valueChanged}
|
|
||||||
></paper-input>
|
|
||||||
<div class="side-by-side">
|
|
||||||
<hui-theme-select-editor
|
|
||||||
.hass=${this.hass}
|
|
||||||
.value=${this._theme}
|
|
||||||
.configValue=${"theme"}
|
|
||||||
@value-changed=${this._valueChanged}
|
|
||||||
></hui-theme-select-editor>
|
|
||||||
<paper-input
|
|
||||||
.label="${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.glance.columns"
|
|
||||||
)} (${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.config.optional"
|
|
||||||
)})"
|
|
||||||
type="number"
|
|
||||||
.value=${this._columns}
|
|
||||||
.configValue=${"columns"}
|
|
||||||
@value-changed=${this._valueChanged}
|
|
||||||
></paper-input>
|
|
||||||
</div>
|
|
||||||
<div class="side-by-side">
|
|
||||||
<div>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.generic.show_name"
|
|
||||||
)}
|
|
||||||
.dir=${dir}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${this._config!.show_name !== false}
|
|
||||||
.configValue=${"show_name"}
|
|
||||||
@change=${this._valueChanged}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.generic.show_icon"
|
|
||||||
)}
|
|
||||||
.dir=${dir}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${this._config!.show_icon !== false}
|
|
||||||
.configValue=${"show_icon"}
|
|
||||||
@change=${this._valueChanged}
|
|
||||||
>
|
|
||||||
</ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.generic.show_state"
|
|
||||||
)}
|
|
||||||
.dir=${dir}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${this._config!.show_state !== false}
|
|
||||||
.configValue=${"show_state"}
|
|
||||||
@change=${this._valueChanged}
|
|
||||||
>
|
|
||||||
</ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ha-formfield
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.generic.state_color"
|
|
||||||
)}
|
|
||||||
.dir=${computeRTLDirection(this.hass)}
|
|
||||||
>
|
|
||||||
<ha-switch
|
|
||||||
.checked=${this._config!.state_color}
|
|
||||||
.configValue=${"state_color"}
|
|
||||||
@change=${this._valueChanged}
|
|
||||||
></ha-switch>
|
|
||||||
</ha-formfield>
|
|
||||||
</div>
|
|
||||||
<hui-entity-editor
|
<hui-entity-editor
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.entities=${this._configEntities}
|
.entities=${this._configEntities}
|
||||||
@entities-changed=${this._valueChanged}
|
@entities-changed=${this._entitiesChanged}
|
||||||
></hui-entity-editor>
|
></hui-entity-editor>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _valueChanged(ev: EntitiesEditorEvent): void {
|
private _valueChanged(ev: CustomEvent): void {
|
||||||
if (!this._config || !this.hass) {
|
const config = ev.detail.value;
|
||||||
return;
|
fireEvent(this, "config-changed", { config });
|
||||||
}
|
|
||||||
const target = ev.target! as EditorTarget;
|
|
||||||
|
|
||||||
if (target.configValue && this[`_${target.configValue}`] === target.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (ev.detail && ev.detail.entities) {
|
|
||||||
this._config = { ...this._config, entities: ev.detail.entities };
|
|
||||||
|
|
||||||
this._configEntities = processEditorEntities(this._config.entities);
|
|
||||||
} else if (target.configValue) {
|
|
||||||
if (
|
|
||||||
target.value === "" ||
|
|
||||||
(target.type === "number" && isNaN(Number(target.value)))
|
|
||||||
) {
|
|
||||||
this._config = { ...this._config };
|
|
||||||
delete this._config[target.configValue!];
|
|
||||||
} else {
|
|
||||||
let value: any = target.value;
|
|
||||||
if (target.type === "number") {
|
|
||||||
value = Number(value);
|
|
||||||
}
|
|
||||||
this._config = {
|
|
||||||
...this._config,
|
|
||||||
[target.configValue!]:
|
|
||||||
target.checked !== undefined ? target.checked : value,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fireEvent(this, "config-changed", { config: this._config });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
private _entitiesChanged(ev: CustomEvent): void {
|
||||||
return configElementStyle;
|
let config = this._config!;
|
||||||
|
config = { ...config, entities: ev.detail.entities! };
|
||||||
|
|
||||||
|
this._configEntities = processEditorEntities(this._config!.entities);
|
||||||
|
fireEvent(this, "config-changed", { config });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _computeLabelCallback = (schema: HaFormSchema) =>
|
||||||
|
this.hass!.localize(
|
||||||
|
`ui.panel.lovelace.editor.card.glance.${schema.name}`
|
||||||
|
) ||
|
||||||
|
this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user