mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
Bring reorder mode to script sequence (#13636)
This commit is contained in:
parent
57c5c1c191
commit
3e9d6ea2c5
@ -4,12 +4,9 @@ import { HassEntity } from "home-assistant-js-websocket";
|
|||||||
import { css, CSSResultGroup, html, LitElement } from "lit";
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import "../../../components/entity/ha-entity-toggle";
|
|
||||||
import "../../../components/ha-card";
|
import "../../../components/ha-card";
|
||||||
import "../../../components/ha-icon-button";
|
import "../../../components/ha-icon-button";
|
||||||
import "../../../components/ha-alert";
|
import "../../../components/ha-alert";
|
||||||
import "../../../components/ha-textarea";
|
|
||||||
import "../../../components/ha-textfield";
|
|
||||||
import {
|
import {
|
||||||
Condition,
|
Condition,
|
||||||
ManualAutomationConfig,
|
ManualAutomationConfig,
|
||||||
@ -215,23 +212,12 @@ export class HaManualAutomationEditor extends LitElement {
|
|||||||
ha-card {
|
ha-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.link-button-row {
|
|
||||||
padding: 14px;
|
|
||||||
}
|
|
||||||
.description {
|
.description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
ha-entity-toggle {
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
ha-select,
|
|
||||||
.max {
|
|
||||||
margin-top: 16px;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -247,35 +233,6 @@ export class HaManualAutomationEditor extends LitElement {
|
|||||||
.header a {
|
.header a {
|
||||||
color: var(--secondary-text-color);
|
color: var(--secondary-text-color);
|
||||||
}
|
}
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
ha-expansion-panel {
|
|
||||||
--expansion-panel-summary-padding: 0 0 0 8px;
|
|
||||||
--expansion-panel-content-padding: 0;
|
|
||||||
}
|
|
||||||
.card-content {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
.settings-icon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@media (min-width: 870px) {
|
|
||||||
.settings-icon {
|
|
||||||
display: inline-block;
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
opacity: 0.9;
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.disabled-bar {
|
|
||||||
background: var(--divider-color, #e0e0e0);
|
|
||||||
text-align: center;
|
|
||||||
border-top-right-radius: var(--ha-card-border-radius);
|
|
||||||
border-top-left-radius: var(--ha-card-border-radius);
|
|
||||||
}
|
|
||||||
ha-alert {
|
ha-alert {
|
||||||
display: block;
|
display: block;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
|
@ -1,4 +1,3 @@
|
|||||||
import type { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
|
|
||||||
import "@material/mwc-list/mwc-list-item";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import {
|
import {
|
||||||
mdiCheck,
|
mdiCheck,
|
||||||
@ -6,7 +5,7 @@ import {
|
|||||||
mdiContentSave,
|
mdiContentSave,
|
||||||
mdiDelete,
|
mdiDelete,
|
||||||
mdiDotsVertical,
|
mdiDotsVertical,
|
||||||
mdiHelpCircle,
|
mdiSort,
|
||||||
} from "@mdi/js";
|
} from "@mdi/js";
|
||||||
import "@polymer/app-layout/app-header/app-header";
|
import "@polymer/app-layout/app-header/app-header";
|
||||||
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
import "@polymer/app-layout/app-toolbar/app-toolbar";
|
||||||
@ -38,7 +37,6 @@ import "../../../components/ha-svg-icon";
|
|||||||
import "../../../components/ha-yaml-editor";
|
import "../../../components/ha-yaml-editor";
|
||||||
import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
|
import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
|
||||||
import {
|
import {
|
||||||
Action,
|
|
||||||
deleteScript,
|
deleteScript,
|
||||||
getScriptConfig,
|
getScriptConfig,
|
||||||
getScriptEditorInitData,
|
getScriptEditorInitData,
|
||||||
@ -59,6 +57,8 @@ import { documentationUrl } from "../../../util/documentation-url";
|
|||||||
import { showToast } from "../../../util/toast";
|
import { showToast } from "../../../util/toast";
|
||||||
import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
|
import { HaDeviceAction } from "../automation/action/types/ha-automation-action-device_id";
|
||||||
import "./blueprint-script-editor";
|
import "./blueprint-script-editor";
|
||||||
|
import "./manual-script-editor";
|
||||||
|
import type { HaManualScriptEditor } from "./manual-script-editor";
|
||||||
|
|
||||||
export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
@ -83,7 +83,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
|
|
||||||
@state() private _mode: "gui" | "yaml" = "gui";
|
@state() private _mode: "gui" | "yaml" = "gui";
|
||||||
|
|
||||||
@query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
|
@query("ha-yaml-editor", true) private _yamlEditor?: HaYamlEditor;
|
||||||
|
|
||||||
|
@query("manual-script-editor")
|
||||||
|
private _manualEditor?: HaManualScriptEditor;
|
||||||
|
|
||||||
private _schema = memoizeOne(
|
private _schema = memoizeOne(
|
||||||
(
|
(
|
||||||
@ -175,23 +178,39 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
.backCallback=${this._backTapped}
|
.backCallback=${this._backTapped}
|
||||||
.header=${!this._config?.alias ? "" : this._config.alias}
|
.header=${!this._config?.alias ? "" : this._config.alias}
|
||||||
>
|
>
|
||||||
<ha-button-menu
|
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
|
||||||
corner="BOTTOM_START"
|
|
||||||
slot="toolbar-icon"
|
|
||||||
@action=${this._handleMenuAction}
|
|
||||||
activatable
|
|
||||||
>
|
|
||||||
<ha-icon-button
|
<ha-icon-button
|
||||||
slot="trigger"
|
slot="trigger"
|
||||||
.label=${this.hass.localize("ui.common.menu")}
|
.label=${this.hass.localize("ui.common.menu")}
|
||||||
.path=${mdiDotsVertical}
|
.path=${mdiDotsVertical}
|
||||||
></ha-icon-button>
|
></ha-icon-button>
|
||||||
|
|
||||||
|
${this._config && !("use_blueprint" in this._config)
|
||||||
|
? html`
|
||||||
|
<mwc-list-item
|
||||||
|
aria-label=${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.re_order"
|
||||||
|
)}
|
||||||
|
graphic="icon"
|
||||||
|
.disabled=${this._mode !== "gui"}
|
||||||
|
@click=${this._toggleReOrderMode}
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.re_order"
|
||||||
|
)}
|
||||||
|
<ha-svg-icon slot="graphic" .path=${mdiSort}></ha-svg-icon>
|
||||||
|
</mwc-list-item>
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
|
||||||
|
<li divider role="separator"></li>
|
||||||
|
|
||||||
<mwc-list-item
|
<mwc-list-item
|
||||||
aria-label=${this.hass.localize(
|
aria-label=${this.hass.localize(
|
||||||
"ui.panel.config.automation.editor.edit_ui"
|
"ui.panel.config.automation.editor.edit_ui"
|
||||||
)}
|
)}
|
||||||
graphic="icon"
|
graphic="icon"
|
||||||
|
@click=${this._switchUiMode}
|
||||||
>
|
>
|
||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
|
||||||
${this._mode === "gui"
|
${this._mode === "gui"
|
||||||
@ -209,6 +228,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
"ui.panel.config.automation.editor.edit_yaml"
|
"ui.panel.config.automation.editor.edit_yaml"
|
||||||
)}
|
)}
|
||||||
graphic="icon"
|
graphic="icon"
|
||||||
|
@click=${this._switchYamlMode}
|
||||||
>
|
>
|
||||||
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
|
||||||
${this._mode === "yaml"
|
${this._mode === "yaml"
|
||||||
@ -230,6 +250,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
"ui.panel.config.script.picker.duplicate"
|
"ui.panel.config.script.picker.duplicate"
|
||||||
)}
|
)}
|
||||||
graphic="icon"
|
graphic="icon"
|
||||||
|
@click=${this._duplicate}
|
||||||
>
|
>
|
||||||
${this.hass.localize("ui.panel.config.script.picker.duplicate")}
|
${this.hass.localize("ui.panel.config.script.picker.duplicate")}
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
@ -245,6 +266,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
)}
|
)}
|
||||||
class=${classMap({ warning: Boolean(this.scriptEntityId) })}
|
class=${classMap({ warning: Boolean(this.scriptEntityId) })}
|
||||||
graphic="icon"
|
graphic="icon"
|
||||||
|
@click=${this._deleteConfirm}
|
||||||
>
|
>
|
||||||
${this.hass.localize("ui.panel.config.script.picker.delete")}
|
${this.hass.localize("ui.panel.config.script.picker.delete")}
|
||||||
<ha-svg-icon
|
<ha-svg-icon
|
||||||
@ -325,38 +347,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
></blueprint-script-editor>
|
></blueprint-script-editor>
|
||||||
`
|
`
|
||||||
: html`
|
: html`
|
||||||
<div class="sequence-container">
|
<manual-script-editor
|
||||||
<div class="header">
|
.hass=${this.hass}
|
||||||
<h2 id="sequence-heading" class="name">
|
.narrow=${this.narrow}
|
||||||
${this.hass.localize(
|
.isWide=${this.isWide}
|
||||||
"ui.panel.config.script.editor.sequence"
|
.config=${this._config}
|
||||||
)}
|
@value-changed=${this._configChanged}
|
||||||
</h2>
|
></manual-script-editor>
|
||||||
<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}
|
|
||||||
></ha-automation-action>
|
|
||||||
</div>
|
|
||||||
`}
|
`}
|
||||||
`
|
`
|
||||||
: ""}
|
: ""}
|
||||||
@ -629,22 +626,13 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
this._dirty = true;
|
this._dirty = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _sequenceChanged(ev: CustomEvent): void {
|
|
||||||
this._config = {
|
|
||||||
...this._config!,
|
|
||||||
sequence: ev.detail.value as Action[],
|
|
||||||
};
|
|
||||||
this._errors = undefined;
|
|
||||||
this._dirty = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
private _preprocessYaml() {
|
private _preprocessYaml() {
|
||||||
return this._config;
|
return this._config;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _copyYaml(): Promise<void> {
|
private async _copyYaml(): Promise<void> {
|
||||||
if (this._editor?.yaml) {
|
if (this._yamlEditor?.yaml) {
|
||||||
await copyToClipboard(this._editor.yaml);
|
await copyToClipboard(this._yamlEditor.yaml);
|
||||||
showToast(this, {
|
showToast(this, {
|
||||||
message: this.hass.localize("ui.common.copied_clipboard"),
|
message: this.hass.localize("ui.common.copied_clipboard"),
|
||||||
});
|
});
|
||||||
@ -719,20 +707,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
history.back();
|
history.back();
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
|
private _switchUiMode() {
|
||||||
switch (ev.detail.index) {
|
this._mode = "gui";
|
||||||
case 0:
|
}
|
||||||
this._mode = "gui";
|
|
||||||
break;
|
private _switchYamlMode() {
|
||||||
case 1:
|
this._mode = "yaml";
|
||||||
this._mode = "yaml";
|
}
|
||||||
break;
|
|
||||||
case 2:
|
private _toggleReOrderMode() {
|
||||||
this._duplicate();
|
if (this._manualEditor) {
|
||||||
break;
|
this._manualEditor.reOrderMode = !this._manualEditor.reOrderMode;
|
||||||
case 3:
|
|
||||||
this._deleteConfirm();
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -797,9 +782,9 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
blueprint-script-editor,
|
|
||||||
.config-container,
|
.config-container,
|
||||||
.sequence-container {
|
manual-script-editor,
|
||||||
|
blueprint-script-editor {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: 1040px;
|
max-width: 1040px;
|
||||||
padding: 28px 20px 0;
|
padding: 28px 20px 0;
|
||||||
|
135
src/panels/config/script/manual-script-editor.ts
Normal file
135
src/panels/config/script/manual-script-editor.ts
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import "@material/mwc-button/mwc-button";
|
||||||
|
import { mdiHelpCircle } from "@mdi/js";
|
||||||
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||||
|
import { customElement, property } from "lit/decorators";
|
||||||
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
|
import "../../../components/ha-alert";
|
||||||
|
import "../../../components/ha-card";
|
||||||
|
import "../../../components/ha-icon-button";
|
||||||
|
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({ attribute: false }) public config!: ScriptConfig;
|
||||||
|
|
||||||
|
@property({ type: Boolean, reflect: true, attribute: "re-order-mode" })
|
||||||
|
public reOrderMode = false;
|
||||||
|
|
||||||
|
protected render() {
|
||||||
|
return html`
|
||||||
|
${this.reOrderMode
|
||||||
|
? html`
|
||||||
|
<ha-alert
|
||||||
|
alert-type="info"
|
||||||
|
.title=${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.re_order_mode.title"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.re_order_mode.description"
|
||||||
|
)}
|
||||||
|
<mwc-button slot="action" @click=${this._exitReOrderMode}>
|
||||||
|
${this.hass.localize(
|
||||||
|
"ui.panel.config.automation.editor.re_order_mode.exit"
|
||||||
|
)}
|
||||||
|
</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}
|
||||||
|
.reOrderMode=${this.reOrderMode}
|
||||||
|
></ha-automation-action>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _sequenceChanged(ev: CustomEvent): void {
|
||||||
|
ev.stopPropagation();
|
||||||
|
fireEvent(this, "value-changed", {
|
||||||
|
value: { ...this.config!, sequence: ev.detail.value as Action[] },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private _exitReOrderMode() {
|
||||||
|
this.reOrderMode = !this.reOrderMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
ha-alert {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"manual-script-editor": HaManualScriptEditor;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user