Change UI of script entities (#6371)

src/data/script.ts

@@ -7,9 +7,15 @@ import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import { Condition } from "./automation";
 
+export const MODES = ["single", "restart", "queued", "parallel"];
+export const MODES_MAX = ["queued", "parallel"];
+
 export interface ScriptEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     last_triggered: string;
+    mode: "single" | "restart" | "queued" | "parallel";
+    current?: number;
+    max?: number;
   };
 }
 
@@ -66,6 +72,20 @@ export const triggerScript = (
   variables?: {}
 ) => hass.callService("script", computeObjectId(entityId), variables);
 
+export const canExcecute = (state: ScriptEntity) => {
+  if (state.state === "off") {
+    return true;
+  }
+  if (
+    state.state === "on" &&
+    MODES_MAX.includes(state.attributes.mode) &&
+    state.attributes.current! < state.attributes.max!
+  ) {
+    return true;
+  }
+  return false;
+};
+
 export const deleteScript = (hass: HomeAssistant, objectId: string) =>
   hass.callApi("DELETE", `config/script/config/${objectId}`);
 

src/panels/config/script/ha-script-editor.ts

@@ -22,6 +22,8 @@ import {
   deleteScript,
   getScriptEditorInitData,
   ScriptConfig,
+  MODES,
+  MODES_MAX,
 } from "../../../data/script";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/ha-app-layout";
@@ -35,9 +37,6 @@ import "../../../components/ha-svg-icon";
 import { mdiContentSave } from "@mdi/js";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 
-const MODES = ["single", "restart", "queued", "parallel"];
-const MODES_MAX = ["queued", "parallel"];
-
 export class HaScriptEditor extends LitElement {
   @property() public hass!: HomeAssistant;
 

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -9,17 +9,17 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit-element";
-import "../../../components/entity/ha-entity-toggle";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { ActionRowConfig, LovelaceRow } from "./types";
+import { canExcecute, ScriptEntity } from "../../../data/script";
 
 @customElement("hui-script-entity-row")
 class HuiScriptEntityRow extends LitElement implements LovelaceRow {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
 
   @property() private _config?: ActionRowConfig;
 
@@ -39,7 +39,7 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
       return html``;
     }
 
-    const stateObj = this.hass.states[this._config.entity];
+    const stateObj = this.hass.states[this._config.entity] as ScriptEntity;
 
     if (!stateObj) {
       return html`
@@ -51,39 +51,51 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        ${stateObj.attributes.can_cancel
-          ? html`
-              <ha-entity-toggle
-                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                .hass=${this.hass}
-                .stateObj=${stateObj}
-              ></ha-entity-toggle>
-            `
-          : html`
-              <mwc-button
-                @click=${this._callService}
-                .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
-                class="text-content"
-              >
-                ${this._config.action_name ||
-                this.hass!.localize("ui.card.script.execute")}
-              </mwc-button>
-            `}
+        ${stateObj.state === "on"
+          ? html`<mwc-button @click=${this._cancelScript}>
+              ${(stateObj.attributes.current || 0) > 0
+                ? this.hass.localize(
+                    "ui.card.script.cancel_multiple",
+                    "number",
+                    stateObj.attributes.current
+                  )
+                : this.hass.localize("ui.card.script.cancel")}
+            </mwc-button>`
+          : ""}
+        ${stateObj.state === "off" || stateObj.attributes.max
+          ? html`<mwc-button
+              @click=${this._executeScript}
+              .disabled=${UNAVAILABLE_STATES.includes(stateObj.state) ||
+              !canExcecute(stateObj)}
+            >
+              ${this._config.action_name ||
+              this.hass!.localize("ui.card.script.execute")}
+            </mwc-button>`
+          : ""}
       </hui-generic-entity-row>
     `;
   }
 
   static get styles(): CSSResult {
     return css`
-      mwc-button {
+      mwc-button:last-child {
         margin-right: -0.57em;
       }
     `;
   }
 
-  private _callService(ev): void {
+  private _cancelScript(ev): void {
     ev.stopPropagation();
-    this.hass!.callService("script", "turn_on", {
+    this._callService("turn_off");
+  }
+
+  private _executeScript(ev): void {
+    ev.stopPropagation();
+    this._callService("turn_on");
+  }
+
+  private _callService(service: string): void {
+    this.hass!.callService("script", service, {
       entity_id: this._config!.entity,
     });
   }

src/state-summary/state-card-script.js

@@ -1,74 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../components/entity/ha-entity-toggle";
-import "../components/entity/state-info";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class StateCardScript extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex iron-flex-alignment"></style>
-      <style>
-        mwc-button {
-          top: 3px;
-          height: 37px;
-          margin-right: -0.57em;
-        }
-
-        ha-entity-toggle {
-          margin-left: 16px;
-        }
-      </style>
-
-      <div class="horizontal justified layout">
-        ${this.stateInfoTemplate}
-        <template is="dom-if" if="[[stateObj.attributes.can_cancel]]">
-          <ha-entity-toggle
-            state-obj="[[stateObj]]"
-            hass="[[hass]]"
-          ></ha-entity-toggle>
-        </template>
-        <template is="dom-if" if="[[!stateObj.attributes.can_cancel]]">
-          <mwc-button on-click="fireScript"
-            >[[localize('ui.card.script.execute')]]</mwc-button
-          >
-        </template>
-      </div>
-    `;
-  }
-
-  static get stateInfoTemplate() {
-    return html`
-      <state-info
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        in-dialog="[[inDialog]]"
-      ></state-info>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: Object,
-      inDialog: {
-        type: Boolean,
-        value: false,
-      },
-    };
-  }
-
-  fireScript(ev) {
-    ev.stopPropagation();
-    this.hass.callService("script", "turn_on", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-}
-customElements.define("state-card-script", StateCardScript);

src/state-summary/state-card-script.ts

@@ -0,0 +1,77 @@
+import "@material/mwc-button";
+import "../components/entity/ha-entity-toggle";
+import "../components/entity/state-info";
+import { HomeAssistant } from "../types";
+import {
+  html,
+  customElement,
+  LitElement,
+  property,
+  CSSResult,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+import { haStyle } from "../resources/styles";
+import { UNAVAILABLE_STATES } from "../data/entity";
+import { canExcecute, ScriptEntity } from "../data/script";
+
+@customElement("state-card-script")
+export class StateCardScript extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public stateObj!: HassEntity;
+
+  @property({ type: Boolean }) public inDialog = false;
+
+  protected render() {
+    const stateObj = this.stateObj as ScriptEntity;
+    return html`
+      <div class="horizontal justified layout">
+        <state-info
+          .hass=${this.hass}
+          .stateObj=${stateObj}
+          .inDialog=${this.inDialog}
+        ></state-info>
+        ${stateObj.state === "on"
+          ? html`<mwc-button @click=${this._cancelScript}>
+              ${(stateObj.attributes.current || 0) > 0
+                ? this.hass.localize(
+                    "ui.card.script.cancel_multiple",
+                    "number",
+                    stateObj.attributes.current
+                  )
+                : this.hass.localize("ui.card.script.cancel")}
+            </mwc-button>`
+          : ""}
+        ${stateObj.state === "off" || stateObj.attributes.max
+          ? html`<mwc-button
+              @click=${this._executeScript}
+              .disabled=${UNAVAILABLE_STATES.includes(stateObj.state) ||
+              !canExcecute(stateObj)}
+            >
+              ${this.hass!.localize("ui.card.script.execute")}
+            </mwc-button>`
+          : ""}
+      </div>
+    `;
+  }
+
+  private _cancelScript(ev: Event) {
+    ev.stopPropagation();
+    this._callService("turn_off");
+  }
+
+  private _executeScript(ev: Event) {
+    ev.stopPropagation();
+    this._callService("turn_on");
+  }
+
+  private _callService(service: string): void {
+    this.hass.callService("script", service, {
+      entity_id: this.stateObj.entity_id,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return haStyle;
+  }
+}

src/translations/en.json

@@ -188,7 +188,9 @@
         "activate": "Activate"
       },
       "script": {
-        "execute": "Execute"
+        "execute": "Execute",
+        "cancel": "Cancel",
+        "cancel_multiple": "Cancel {number}"
       },
       "service": {
         "run": "Run"