Dev tools events: Add a clear events button (#21353)

Clear events

src/panels/developer-tools/event/developer-tools-event.ts

@@ -1,8 +1,9 @@
 import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "@material/mwc-button";
 import "../../../components/ha-yaml-editor";
 import "../../../components/ha-textfield";
+import "../../../components/ha-button";
+import "../../../components/ha-card";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { documentationUrl } from "../../../util/documentation-url";
 import "./event-subscribe-card";
@@ -31,49 +32,61 @@ class HaPanelDevEvent extends LitElement {
           : "content layout horizontal"}
       >
         <div class="flex">
-          <p>
-            ${this.hass.localize(
-              "ui.panel.developer-tools.tabs.events.description"
-            )}
-            <a
-              href=${documentationUrl(this.hass, "/docs/configuration/events/")}
-              target="_blank"
-              rel="noreferrer"
-            >
-              ${this.hass.localize(
-                "ui.panel.developer-tools.tabs.events.documentation"
-              )}
-            </a>
-          </p>
-          <div class="inputs">
-            <ha-textfield
-              .label=${this.hass.localize(
-                "ui.panel.developer-tools.tabs.events.type"
-              )}
-              autofocus
-              required
-              .value=${this._eventType}
-              @change=${this._eventTypeChanged}
-            ></ha-textfield>
-            <p>
-              ${this.hass.localize("ui.panel.developer-tools.tabs.events.data")}
-            </p>
-          </div>
-          <div class="code-editor">
-            <ha-yaml-editor
-              .value=${this._eventData}
-              .error=${!this._isValid}
-              @value-changed=${this._yamlChanged}
-            ></ha-yaml-editor>
-          </div>
-          <mwc-button
-            @click=${this._fireEvent}
-            raised
-            .disabled=${!this._isValid}
-            >${this.hass.localize(
-              "ui.panel.developer-tools.tabs.events.fire_event"
-            )}</mwc-button
-          >
+          <ha-card>
+            <div class="card-content">
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.developer-tools.tabs.events.description"
+                )}
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    "/docs/configuration/events/"
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.events.documentation"
+                  )}
+                </a>
+              </p>
+              <div class="inputs">
+                <ha-textfield
+                  .label=${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.events.type"
+                  )}
+                  autofocus
+                  required
+                  .value=${this._eventType}
+                  @change=${this._eventTypeChanged}
+                ></ha-textfield>
+                <p>
+                  ${this.hass.localize(
+                    "ui.panel.developer-tools.tabs.events.data"
+                  )}
+                </p>
+              </div>
+              <div class="code-editor">
+                <ha-yaml-editor
+                  .value=${this._eventData}
+                  .error=${!this._isValid}
+                  @value-changed=${this._yamlChanged}
+                ></ha-yaml-editor>
+              </div>
+            </div>
+            <div class="card-actions">
+              <ha-button
+                @click=${this._fireEvent}
+                raised
+                .disabled=${!this._isValid}
+                >${this.hass.localize(
+                  "ui.panel.developer-tools.tabs.events.fire_event"
+                )}</ha-button
+              >
+            </div>
+          </ha-card>
+
           <event-subscribe-card .hass=${this.hass}></event-subscribe-card>
         </div>
 

src/panels/developer-tools/event/event-subscribe-card.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-button";
 import { HassEvent } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,6 +6,7 @@ import { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
 import "../../../components/ha-textfield";
 import "../../../components/ha-yaml-editor";
+import "../../../components/ha-button";
 import { HomeAssistant } from "../../../types";
 
 @customElement("event-subscribe-card")
@@ -40,33 +40,46 @@ class EventSubscribeCard extends LitElement {
         )}
       >
         <div class="card-content">
-          <form>
-            <ha-textfield
-              .label=${this._subscribed
-                ? this.hass!.localize(
-                    "ui.panel.developer-tools.tabs.events.listening_to"
-                  )
-                : this.hass!.localize(
-                    "ui.panel.developer-tools.tabs.events.subscribe_to"
-                  )}
-              .disabled=${this._subscribed !== undefined}
-              .value=${this._eventType}
-              @input=${this._valueChanged}
-            ></ha-textfield>
-            <mwc-button
-              .disabled=${this._eventType === ""}
-              @click=${this._handleSubmit}
-              type="submit"
-            >
-              ${this._subscribed
-                ? this.hass!.localize(
-                    "ui.panel.developer-tools.tabs.events.stop_listening"
-                  )
-                : this.hass!.localize(
-                    "ui.panel.developer-tools.tabs.events.start_listening"
-                  )}
-            </mwc-button>
-          </form>
+          <ha-textfield
+            .label=${this._subscribed
+              ? this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.listening_to"
+                )
+              : this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.subscribe_to"
+                )}
+            .disabled=${this._subscribed !== undefined}
+            .value=${this._eventType}
+            @input=${this._valueChanged}
+          ></ha-textfield>
+        </div>
+        <div class="card-actions">
+          <ha-button
+            raised
+            .disabled=${this._eventType === ""}
+            @click=${this._startOrStopListening}
+          >
+            ${this._subscribed
+              ? this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.stop_listening"
+                )
+              : this.hass!.localize(
+                  "ui.panel.developer-tools.tabs.events.start_listening"
+                )}
+          </ha-button>
+          <ha-button
+            raised
+            .disabled=${this._eventType === ""}
+            @click=${this._clearEvents}
+          >
+            ${this.hass!.localize(
+              "ui.panel.developer-tools.tabs.events.clear_events"
+            )}
+          </ha-button>
+        </div>
+      </ha-card>
+      <ha-card>
+        <div class="card-content">
           <div class="events">
             ${repeat(
               this._events,
@@ -99,7 +112,7 @@ class EventSubscribeCard extends LitElement {
     this._eventType = ev.target.value;
   }
 
-  private async _handleSubmit(): Promise<void> {
+  private async _startOrStopListening(): Promise<void> {
     if (this._subscribed) {
       this._subscribed();
       this._subscribed = undefined;
@@ -121,6 +134,11 @@ class EventSubscribeCard extends LitElement {
     }
   }
 
+  private _clearEvents(): void {
+    this._events = [];
+    this._eventCount = 0;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-textfield {
@@ -140,6 +158,9 @@ class EventSubscribeCard extends LitElement {
       pre {
         font-family: var(--code-font-family, monospace);
       }
+      ha-card {
+        margin-bottom: 5px;
+      }
     `;
   }
 }

src/translations/en.json

@@ -6686,6 +6686,7 @@
             "subscribe_to": "Event to subscribe to",
             "start_listening": "Start listening",
             "stop_listening": "Stop listening",
+            "clear_events": "Clear events",
             "alert_event_type": "Event type is a mandatory field",
             "notification_event_fired": "Event {type} successfully fired!"
           },