Allow enabling/disabling automation from edit screen (#4846)

* Allow enabling/disabling automation from edit screen

* Comments

src/data/automation.ts

@@ -173,6 +173,12 @@ export type Condition =
   | DeviceCondition
   | LogicalCondition;
 
+export const triggerAutomation = (hass: HomeAssistant, entityId: string) => {
+  hass.callService("automation", "trigger", {
+    entity_id: entityId,
+  });
+};
+
 export const deleteAutomation = (hass: HomeAssistant, id: string) =>
   hass.callApi("DELETE", `config/automation/config/${id}`);
 

src/dialogs/more-info/controls/more-info-automation.ts

@@ -13,6 +13,7 @@ import "@material/mwc-button";
 import "../../../components/ha-relative-time";
 
 import { HomeAssistant } from "../../../types";
+import { triggerAutomation } from "../../../data/automation";
 
 @customElement("more-info-automation")
 class MoreInfoAutomation extends LitElement {
@@ -42,9 +43,7 @@ class MoreInfoAutomation extends LitElement {
   }
 
   private handleAction() {
-    this.hass.callService("automation", "trigger", {
+    triggerAutomation(this.hass, this.stateObj!.entity_id);
-      entity_id: this.stateObj!.entity_id,
-    });
   }
 
   static get styles(): CSSResult {

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

@@ -22,6 +22,7 @@ import {
   deleteAutomation,
   getAutomationEditorInitData,
   Trigger,
+  triggerAutomation,
 } from "../../../data/automation";
 import { Action } from "../../../data/script";
 import {
@@ -113,6 +114,28 @@ export class HaAutomationEditor extends LitElement {
                         @value-changed=${this._valueChanged}
                       ></ha-textarea>
                     </div>
+                    ${this.creatingNew
+                      ? ""
+                      : html`
+                          <div
+                            class="card-actions layout horizontal justified center"
+                          >
+                            <div class="layout horizontal center">
+                              <ha-entity-toggle
+                                .hass=${this.hass}
+                                .stateObj=${this.automation}
+                              ></ha-entity-toggle>
+                              ${this.hass.localize(
+                                "ui.panel.config.automation.editor.enable_disable"
+                              )}
+                            </div>
+                            <mwc-button @click=${this._excuteAutomation}>
+                              ${this.hass.localize(
+                                "ui.card.automation.trigger"
+                              )}
+                            </mwc-button>
+                          </div>
+                        `}
                   </ha-card>
                 </ha-config-section>
 
@@ -319,6 +342,10 @@ export class HaAutomationEditor extends LitElement {
     this._dirty = true;
   }
 
+  private _excuteAutomation() {
+    triggerAutomation(this.hass, this.automation.entity_id);
+  }
+
   private _backTapped(): void {
     if (this._dirty) {
       showConfirmationDialog(this, {
@@ -391,6 +418,9 @@ export class HaAutomationEditor extends LitElement {
         span[slot="introduction"] a {
           color: var(--primary-color);
         }
+        ha-entity-toggle {
+          margin-right: 8px;
+        }
         ha-fab {
           position: fixed;
           bottom: 16px;

src/resources/styles.ts

@@ -94,6 +94,47 @@ export const haStyle = css`
   .card-actions .warning {
     --mdc-theme-primary: var(--google-red-500);
   }
+
+  .layout.horizontal,
+  .layout.vertical {
+    display: flex;
+  }
+  .layout.inline {
+    display: inline-flex;
+  }
+  .layout.horizontal {
+    flex-direction: row;
+  }
+  .layout.vertical {
+    flex-direction: column;
+  }
+  .layout.wrap {
+    flex-wrap: wrap;
+  }
+  .layout.no-wrap {
+    flex-wrap: nowrap;
+  }
+  .layout.center,
+  .layout.center-center {
+    align-items: center;
+  }
+  .layout.center-justified,
+  .layout.center-center {
+    justify-content: center;
+  }
+  .flex {
+    flex: 1;
+    flex-basis: 0.000000001px;
+  }
+  .flex-auto {
+    flex: 1 1 auto;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .layout.justified {
+    justify-content: space-between;
+  }
 `;
 
 export const haStyleDialog = css`

src/translations/en.json

@@ -847,6 +847,7 @@
             "delete_confirm": "Are you sure you want to delete this automation?"
           },
           "editor": {
+            "enable_disable": "Enable/Disable automation",
             "introduction": "Use automations to bring your home alive.",
             "default_name": "New Automation",
             "load_error_not_editable": "Only automations in automations.yaml are editable.",