136 lines
3.8 KiB
TypeScript
136 lines
3.8 KiB
TypeScript
import "@material/mwc-button/mwc-button";
|
|
import { mdiHelpCircle } from "@mdi/js";
|
|
import deepClone from "deep-clone-simple";
|
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
|
import { customElement, property } from "lit/decorators";
|
|
import { storage } from "../../../common/decorators/storage";
|
|
import { fireEvent } from "../../../common/dom/fire_event";
|
|
import "../../../components/ha-card";
|
|
import "../../../components/ha-icon-button";
|
|
import { Clipboard } from "../../../data/automation";
|
|
import { Action, ScriptConfig } from "../../../data/script";
|
|
import { haStyle } from "../../../resources/styles";
|
|
import type { HomeAssistant } from "../../../types";
|
|
import { documentationUrl } from "../../../util/documentation-url";
|
|
import "../automation/action/ha-automation-action";
|
|
|
|
@customElement("manual-script-editor")
|
|
export class HaManualScriptEditor extends LitElement {
|
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
|
|
|
@property({ type: Boolean }) public isWide!: boolean;
|
|
|
|
@property({ type: Boolean }) public narrow!: boolean;
|
|
|
|
@property({ type: Boolean }) public disabled = false;
|
|
|
|
@property({ attribute: false }) public config!: ScriptConfig;
|
|
|
|
@storage({
|
|
key: "automationClipboard",
|
|
state: true,
|
|
subscribe: false,
|
|
storage: "sessionStorage",
|
|
})
|
|
private _clipboard: Clipboard = {};
|
|
|
|
protected render() {
|
|
return html`
|
|
${this.disabled
|
|
? html`<ha-alert alert-type="warning">
|
|
${this.hass.localize("ui.panel.config.script.editor.read_only")}
|
|
<mwc-button slot="action" @click=${this._duplicate}>
|
|
${this.hass.localize("ui.panel.config.script.editor.migrate")}
|
|
</mwc-button>
|
|
</ha-alert>`
|
|
: ""}
|
|
<div class="header">
|
|
<h2 id="sequence-heading" class="name">
|
|
${this.hass.localize("ui.panel.config.script.editor.sequence")}
|
|
</h2>
|
|
<a
|
|
href=${documentationUrl(this.hass, "/docs/scripts/")}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<ha-icon-button
|
|
.path=${mdiHelpCircle}
|
|
.label=${this.hass.localize(
|
|
"ui.panel.config.script.editor.link_available_actions"
|
|
)}
|
|
></ha-icon-button>
|
|
</a>
|
|
</div>
|
|
|
|
<ha-automation-action
|
|
role="region"
|
|
aria-labelledby="sequence-heading"
|
|
.actions=${this.config.sequence}
|
|
@value-changed=${this._sequenceChanged}
|
|
.hass=${this.hass}
|
|
.narrow=${this.narrow}
|
|
.disabled=${this.disabled}
|
|
@set-clipboard=${this._setClipboard}
|
|
.clipboard=${this._clipboard}
|
|
></ha-automation-action>
|
|
`;
|
|
}
|
|
|
|
private _sequenceChanged(ev: CustomEvent): void {
|
|
ev.stopPropagation();
|
|
fireEvent(this, "value-changed", {
|
|
value: { ...this.config!, sequence: ev.detail.value as Action[] },
|
|
});
|
|
}
|
|
|
|
private _setClipboard(ev: CustomEvent): void {
|
|
ev.stopPropagation();
|
|
this._clipboard = { ...this._clipboard, ...deepClone(ev.detail) };
|
|
}
|
|
|
|
private _duplicate() {
|
|
fireEvent(this, "duplicate");
|
|
}
|
|
|
|
static get styles(): CSSResultGroup {
|
|
return [
|
|
haStyle,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
ha-card {
|
|
overflow: hidden;
|
|
}
|
|
.description {
|
|
margin: 0;
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
.header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.header:first-child {
|
|
margin-top: -16px;
|
|
}
|
|
.header .name {
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
flex: 1;
|
|
}
|
|
.header a {
|
|
color: var(--secondary-text-color);
|
|
}
|
|
`,
|
|
];
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"manual-script-editor": HaManualScriptEditor;
|
|
}
|
|
}
|