Allow testing describe functionality in the gallery (#13398)
This commit is contained in:
parent
9a1fc02755
commit
12e57dfcae
|
@ -1,7 +1,9 @@
|
|||
import { dump } from "js-yaml";
|
||||
import { html, css, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-yaml-editor";
|
||||
import { Action } from "../../../../src/data/script";
|
||||
import { describeAction } from "../../../../src/data/script_i18n";
|
||||
import { getEntity } from "../../../../src/fake_data/entity";
|
||||
import { provideHass } from "../../../../src/fake_data/provide_hass";
|
||||
|
@ -103,16 +105,38 @@ const ACTIONS = [
|
|||
},
|
||||
];
|
||||
|
||||
const initialAction: Action = {
|
||||
service: "light.turn_on",
|
||||
target: {
|
||||
entity_id: "light.kitchen",
|
||||
},
|
||||
};
|
||||
|
||||
@customElement("demo-automation-describe-action")
|
||||
export class DemoAutomationDescribeAction extends LitElement {
|
||||
@property({ attribute: false }) hass!: HomeAssistant;
|
||||
|
||||
@state() _action = initialAction;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this.hass) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<ha-card header="Actions">
|
||||
<div class="action">
|
||||
<span>
|
||||
${this._action
|
||||
? describeAction(this.hass, this._action)
|
||||
: "<invalid YAML>"}
|
||||
</span>
|
||||
<ha-yaml-editor
|
||||
label="Action Config"
|
||||
.defaultValue=${initialAction}
|
||||
@value-changed=${this._dataChanged}
|
||||
></ha-yaml-editor>
|
||||
</div>
|
||||
|
||||
${ACTIONS.map(
|
||||
(conf) => html`
|
||||
<div class="action">
|
||||
|
@ -132,6 +156,11 @@ export class DemoAutomationDescribeAction extends LitElement {
|
|||
hass.addEntities(ENTITIES);
|
||||
}
|
||||
|
||||
private _dataChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
this._action = ev.detail.isValid ? ev.detail.value : undefined;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
|
@ -147,6 +176,9 @@ export class DemoAutomationDescribeAction extends LitElement {
|
|||
span {
|
||||
margin-right: 16px;
|
||||
}
|
||||
ha-yaml-editor {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { dump } from "js-yaml";
|
||||
import { html, css, LitElement, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, state } from "lit/decorators";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-yaml-editor";
|
||||
import { Condition } from "../../../../src/data/automation";
|
||||
import { describeCondition } from "../../../../src/data/automation_i18n";
|
||||
|
||||
const conditions = [
|
||||
|
@ -17,11 +19,32 @@ const conditions = [
|
|||
{ condition: "template" },
|
||||
];
|
||||
|
||||
const initialCondition: Condition = {
|
||||
condition: "state",
|
||||
entity_id: "light.kitchen",
|
||||
state: "on",
|
||||
};
|
||||
|
||||
@customElement("demo-automation-describe-condition")
|
||||
export class DemoAutomationDescribeCondition extends LitElement {
|
||||
@state() _condition = initialCondition;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card header="Conditions">
|
||||
<div class="condition">
|
||||
<span>
|
||||
${this._condition
|
||||
? describeCondition(this._condition)
|
||||
: "<invalid YAML>"}
|
||||
</span>
|
||||
<ha-yaml-editor
|
||||
label="Condition Config"
|
||||
.defaultValue=${initialCondition}
|
||||
@value-changed=${this._dataChanged}
|
||||
></ha-yaml-editor>
|
||||
</div>
|
||||
|
||||
${conditions.map(
|
||||
(conf) => html`
|
||||
<div class="condition">
|
||||
|
@ -34,6 +57,11 @@ export class DemoAutomationDescribeCondition extends LitElement {
|
|||
`;
|
||||
}
|
||||
|
||||
private _dataChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
this._condition = ev.detail.isValid ? ev.detail.value : undefined;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
|
@ -49,6 +77,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
|
|||
span {
|
||||
margin-right: 16px;
|
||||
}
|
||||
ha-yaml-editor {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { dump } from "js-yaml";
|
||||
import { html, css, LitElement, TemplateResult } from "lit";
|
||||
import { customElement } from "lit/decorators";
|
||||
import { customElement, state } from "lit/decorators";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-yaml-editor";
|
||||
import { Trigger } from "../../../../src/data/automation";
|
||||
import { describeTrigger } from "../../../../src/data/automation_i18n";
|
||||
|
||||
const triggers = [
|
||||
|
@ -20,11 +22,28 @@ const triggers = [
|
|||
{ platform: "event" },
|
||||
];
|
||||
|
||||
const initialTrigger: Trigger = {
|
||||
platform: "state",
|
||||
entity_id: "light.kitchen",
|
||||
};
|
||||
|
||||
@customElement("demo-automation-describe-trigger")
|
||||
export class DemoAutomationDescribeTrigger extends LitElement {
|
||||
@state() _trigger = initialTrigger;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-card header="Triggers">
|
||||
<div class="trigger">
|
||||
<span>
|
||||
${this._trigger ? describeTrigger(this._trigger) : "<invalid YAML>"}
|
||||
</span>
|
||||
<ha-yaml-editor
|
||||
label="Trigger Config"
|
||||
.defaultValue=${initialTrigger}
|
||||
@value-changed=${this._dataChanged}
|
||||
></ha-yaml-editor>
|
||||
</div>
|
||||
${triggers.map(
|
||||
(conf) => html`
|
||||
<div class="trigger">
|
||||
|
@ -37,6 +56,11 @@ export class DemoAutomationDescribeTrigger extends LitElement {
|
|||
`;
|
||||
}
|
||||
|
||||
private _dataChanged(ev: CustomEvent): void {
|
||||
ev.stopPropagation();
|
||||
this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
ha-card {
|
||||
|
@ -52,6 +76,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
|
|||
span {
|
||||
margin-right: 16px;
|
||||
}
|
||||
ha-yaml-editor {
|
||||
width: 50%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue