diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
index 3272e8be1d..d025cb7ff3 100644
--- a/src/components/buttons/ha-progress-button.ts
+++ b/src/components/buttons/ha-progress-button.ts
@@ -1,8 +1,9 @@
import "@material/mwc-button";
-import type { Button } from "@material/mwc-button";
+import { mdiAlertOctagram, mdiCheckBold } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
import "../ha-circular-progress";
+import "../ha-svg-icon";
@customElement("ha-progress-button")
export class HaProgressButton extends LitElement {
@@ -12,38 +13,53 @@ export class HaProgressButton extends LitElement {
@property({ type: Boolean }) public raised = false;
- @query("mwc-button", true) private _button?: Button;
+ @state() private _result?: "success" | "error";
public render(): TemplateResult {
+ const overlay = this._result || this.progress;
return html`
- ${this.progress
- ? html`
-
-
`
- : ""}
+ ${!overlay
+ ? ""
+ : html`
+
+ ${this._result === "success"
+ ? html``
+ : this._result === "error"
+ ? html``
+ : this.progress
+ ? html`
+
+ `
+ : ""}
+
+ `}
`;
}
public actionSuccess(): void {
- this._tempClass("success");
+ this._setResult("success");
}
public actionError(): void {
- this._tempClass("error");
+ this._setResult("error");
}
- private _tempClass(className: string): void {
- this._button!.classList.add(className);
+ private _setResult(result: "success" | "error"): void {
+ this._result = result;
setTimeout(() => {
- this._button!.classList.remove(className);
- }, 1000);
+ this._result = undefined;
+ }, 2000);
}
private _buttonTapped(ev: Event): void {
@@ -69,6 +85,7 @@ export class HaProgressButton extends LitElement {
background-color: var(--success-color);
transition: none;
border-radius: 4px;
+ pointer-events: none;
}
mwc-button[raised].success {
@@ -81,6 +98,7 @@ export class HaProgressButton extends LitElement {
background-color: var(--error-color);
transition: none;
border-radius: 4px;
+ pointer-events: none;
}
mwc-button[raised].error {
@@ -89,13 +107,21 @@ export class HaProgressButton extends LitElement {
}
.progress {
- bottom: 0;
- margin-top: 4px;
+ bottom: 4px;
position: absolute;
text-align: center;
- top: 0;
+ top: 4px;
width: 100%;
}
+
+ ha-svg-icon {
+ color: white;
+ }
+
+ mwc-button.success slot,
+ mwc-button.error slot {
+ visibility: hidden;
+ }
`;
}
}
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 4bce08a441..8585e232e9 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -7,12 +7,18 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import { handleStructError } from "../../../../common/structs/handle-errors";
import "../../../../components/ha-button-menu";
import "../../../../components/ha-card";
+import "../../../../components/buttons/ha-progress-button";
+import type { HaProgressButton } from "../../../../components/buttons/ha-progress-button";
import "../../../../components/ha-icon-button";
-import { Condition } from "../../../../data/automation";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { Condition, testCondition } from "../../../../data/automation";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
import { haStyle } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import "./ha-automation-condition-editor";
+import { validateConfig } from "../../../../data/config";
export interface ConditionElement extends LitElement {
condition: Condition;
@@ -61,6 +67,11 @@ export default class HaAutomationConditionRow extends LitElement {