jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

History Graph Editor to ha form (#11797)

Browse Source
This commit is contained in:
Zack Barett 2022-02-23 11:15:17 -06:00 committed by GitHub
parent 5f69a4c165
commit 2a98ace0b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 54 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/data/selector.ts
View File

@ -87,8 +87,8 @@ export interface TargetSelector {
export interface NumberSelector {
number: {
min: number;
max: number;
min?: number;
max?: number;
step?: number;
mode?: "box" | "slider";
unit_of_measurement?: string;

146
src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-input/paper-input";
import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "../../../../components/ha-form/ha-form";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import {
array,
@ -11,16 +11,15 @@ import {
assign,
} from "superstruct";
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { HistoryGraphCardConfig } from "../../cards/types";
import type { HomeAssistant } from "../../../../types";
import type { HistoryGraphCardConfig } from "../../cards/types";
import "../../components/hui-entity-editor";
import { EntityConfig } from "../../entity-rows/types";
import { LovelaceCardEditor } from "../../types";
import type { EntityConfig } from "../../entity-rows/types";
import type { LovelaceCardEditor } from "../../types";
import { processEditorEntities } from "../process-editor-entities";
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 type { HaFormSchema } from "../../../../components/ha-form/types";
const cardConfigStruct = assign(
baseLovelaceCardConfig,
@ -32,6 +31,21 @@ const cardConfigStruct = assign(
})
);
const SCHEMA: HaFormSchema[] = [
{ name: "title", selector: { text: {} } },
{
name: "",
type: "grid",
schema: [
{ name: "hours_to_show", selector: { number: { min: 1, mode: "box" } } },
{
name: "refresh_interval",
selector: { number: { min: 1, mode: "box" } },
},
],
},
];
@customElement("hui-history-graph-card-editor")
export class HuiHistoryGraphCardEditor
extends LitElement
@ -49,104 +63,48 @@ export class HuiHistoryGraphCardEditor
this._configEntities = processEditorEntities(config.entities);
}
get _title(): string {
return this._config!.title || "";
}
get _hours_to_show(): number {
return this._config!.hours_to_show || 24;
}
get _refresh_interval(): number {
return this._config!.refresh_interval || 0;
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
return html`
<div class="card-config">
<paper-input
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._title}
.configValue=${"title"}
@value-changed=${this._valueChanged}
></paper-input>
<div class="side-by-side">
<paper-input
type="number"
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hours_to_show"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"}
@value-changed=${this._valueChanged}
></paper-input>
<paper-input
type="number"
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.refresh_interval"
)} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})"
.value=${this._refresh_interval}
.configValue=${"refresh_interval"}
@value-changed=${this._valueChanged}
></paper-input>
</div>
<hui-entity-editor
.hass=${this.hass}
.entities=${this._configEntities}
@entities-changed=${this._valueChanged}
></hui-entity-editor>
</div>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<hui-entity-editor
.hass=${this.hass}
.entities=${this._configEntities}
@entities-changed=${this._entitiesChanged}
></hui-entity-editor>
`;
}
private _valueChanged(ev: EntitiesEditorEvent): void {
if (!this._config || !this.hass) {
return;
}
const target = ev.target! as EditorTarget;
if (!ev.detail && 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 === "") {
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!]: value,
};
}
}
fireEvent(this, "config-changed", { config: this._config });
private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
static get styles(): CSSResultGroup {
return configElementStyle;
private _entitiesChanged(ev: CustomEvent): void {
let config = this._config!;
config = { ...config, entities: ev.detail.entities };
this._configEntities = processEditorEntities(config.entities);
fireEvent(this, "config-changed", { config });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
static styles: CSSResultGroup = css`
ha-form {
margin-bottom: 24px;
}
`;
}
declare global {