Add MQTT subscribe to dev tools (#3589)

* Add mqtt subscribe to dev tools

* Update mqtt-subscribe-card.ts

* Comments

* type

src/data/mqtt.ts

@@ -0,0 +1,19 @@
+import { HomeAssistant } from "../types";
+
+export interface MQTTMessage {
+  topic: string;
+  payload: string;
+  qos: number;
+  retain: number;
+}
+
+export const subscribeMQTTTopic = (
+  hass: HomeAssistant,
+  topic: string,
+  callback: (message: MQTTMessage) => void
+) => {
+  return hass.connection.subscribeMessage<MQTTMessage>(callback, {
+    type: "mqtt/subscribe",
+    topic,
+  });
+};

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

@@ -18,9 +18,13 @@ import format_time from "../../../common/datetime/format_time";
 @customElement("event-subscribe-card")
 class EventSubscribeCard extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() private _eventType = "";
+
   @property() private _subscribed?: () => void;
+
   @property() private _events: Array<{ id: number; event: HassEvent }> = [];
+
   private _eventCount = 0;
 
   public disconnectedCallback() {
@@ -33,7 +37,7 @@ class EventSubscribeCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-card heading="Listen to events">
+      <ha-card header="Listen to events">
         <form>
           <paper-input
             .label=${this._subscribed

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -15,7 +15,6 @@ import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 
 import "../../components/ha-menu-button";
-import "../../resources/ha-style";
 import "./developer-tools-router";
 
 import scrollToTarget from "../../common/dom/scroll-to-target";

src/panels/developer-tools/mqtt/developer-tools-mqtt.js

@@ -1,76 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../components/ha-card";
-import "../../../resources/ha-style";
-import "../../../util/app-localstorage-document";
-
-class HaPanelDevMqtt extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        :host {
-          -ms-user-select: initial;
-          -webkit-user-select: initial;
-          -moz-user-select: initial;
-        }
-
-        .content {
-          padding: 24px 0 32px;
-          max-width: 600px;
-          margin: 0 auto;
-          direction: ltr;
-        }
-
-        mwc-button {
-          background-color: white;
-        }
-      </style>
-
-      <app-localstorage-document key="panel-dev-mqtt-topic" data="{{topic}}">
-      </app-localstorage-document>
-      <app-localstorage-document
-        key="panel-dev-mqtt-payload"
-        data="{{payload}}"
-      >
-      </app-localstorage-document>
-
-      <div class="content">
-        <ha-card header="Publish a packet">
-          <div class="card-content">
-            <paper-input label="topic" value="{{topic}}"></paper-input>
-
-            <paper-textarea
-              always-float-label
-              label="Payload (template allowed)"
-              value="{{payload}}"
-            ></paper-textarea>
-          </div>
-          <div class="card-actions">
-            <mwc-button on-click="_publish">Publish</mwc-button>
-          </div>
-        </ha-card>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      topic: String,
-      payload: String,
-    };
-  }
-
-  _publish() {
-    this.hass.callService("mqtt", "publish", {
-      topic: this.topic,
-      payload_template: this.payload,
-    });
-  }
-}
-
-customElements.define("developer-tools-mqtt", HaPanelDevMqtt);

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

@@ -0,0 +1,126 @@
+import {
+  LitElement,
+  customElement,
+  TemplateResult,
+  html,
+  property,
+  CSSResultArray,
+  css,
+} from "lit-element";
+import "@material/mwc-button";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+
+import { HomeAssistant } from "../../../types";
+
+import { haStyle } from "../../../resources/styles";
+import "../../../components/ha-card";
+import "./mqtt-subscribe-card";
+
+@customElement("developer-tools-mqtt")
+class HaPanelDevMqtt extends LitElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() private topic = "";
+
+  @property() private payload = "";
+
+  private inited: boolean = false;
+
+  protected firstUpdated() {
+    if (localStorage && localStorage["panel-dev-mqtt-topic"]) {
+      this.topic = localStorage["panel-dev-mqtt-topic"];
+    }
+    if (localStorage && localStorage["panel-dev-mqtt-payload"]) {
+      this.payload = localStorage["panel-dev-mqtt-payload"];
+    }
+    this.inited = true;
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="content">
+        <ha-card header="Publish a packet">
+          <div class="card-content">
+            <paper-input
+              label="topic"
+              .value=${this.topic}
+              @value-changed=${this._handleTopic}
+            ></paper-input>
+
+            <paper-textarea
+              always-float-label
+              label="Payload (template allowed)"
+              .value="${this.payload}"
+              @value-changed=${this._handlePayload}
+            ></paper-textarea>
+          </div>
+          <div class="card-actions">
+            <mwc-button @click=${this._publish}>Publish</mwc-button>
+          </div>
+        </ha-card>
+
+        <mqtt-subscribe-card .hass=${this.hass}></mqtt-subscribe-card>
+      </div>
+    `;
+  }
+
+  private _handleTopic(ev: CustomEvent) {
+    this.topic = ev.detail.value;
+    if (localStorage && this.inited) {
+      localStorage["panel-dev-mqtt-topic"] = this.topic;
+    }
+  }
+
+  private _handlePayload(ev: CustomEvent) {
+    this.payload = ev.detail.value;
+    if (localStorage && this.inited) {
+      localStorage["panel-dev-mqtt-payload"] = this.payload;
+    }
+  }
+
+  private _publish(): void {
+    if (!this.hass) {
+      return;
+    }
+    this.hass.callService("mqtt", "publish", {
+      topic: this.topic,
+      payload_template: this.payload,
+    });
+  }
+
+  static get styles(): CSSResultArray {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+
+        .content {
+          padding: 24px 0 32px;
+          max-width: 600px;
+          margin: 0 auto;
+          direction: ltr;
+        }
+
+        mwc-button {
+          background-color: white;
+        }
+
+        mqtt-subscribe-card {
+          display: block;
+          margin: 16px auto;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "developer-tools-mqtt": HaPanelDevMqtt;
+  }
+}

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

@@ -0,0 +1,153 @@
+import {
+  LitElement,
+  customElement,
+  TemplateResult,
+  html,
+  property,
+  CSSResult,
+  css,
+} from "lit-element";
+import "@material/mwc-button";
+import "@polymer/paper-input/paper-input";
+import { HomeAssistant } from "../../../types";
+import "../../../components/ha-card";
+import format_time from "../../../common/datetime/format_time";
+
+import { subscribeMQTTTopic, MQTTMessage } from "../../../data/mqtt";
+
+@customElement("mqtt-subscribe-card")
+class MqttSubscribeCard extends LitElement {
+  @property() public hass?: HomeAssistant;
+
+  @property() private _topic = "";
+
+  @property() private _subscribed?: () => void;
+
+  @property() private _messages: Array<{
+    id: number;
+    message: MQTTMessage;
+    payload: string;
+    time: Date;
+  }> = [];
+
+  private _messageCount = 0;
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._subscribed) {
+      this._subscribed();
+      this._subscribed = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Listen to a topic">
+        <form>
+          <paper-input
+            .label=${this._subscribed
+              ? "Listening to"
+              : "Topic to subscribe to"}
+            .disabled=${this._subscribed !== undefined}
+            .value=${this._topic}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <mwc-button
+            .disabled=${this._topic === ""}
+            @click=${this._handleSubmit}
+            type="submit"
+          >
+            ${this._subscribed ? "Stop listening" : "Start listening"}
+          </mwc-button>
+        </form>
+        <div class="events">
+          ${this._messages.map(
+            (msg) => html`
+              <div class="event">
+                Message ${msg.id} received on <b>${msg.message.topic}</b> at
+                ${format_time(msg.time, this.hass!.language)}:
+                <pre>${msg.payload}</pre>
+                <div class="bottom">
+                  QoS: ${msg.message.qos} - Retain:
+                  ${Boolean(msg.message.retain)}
+                </div>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent): void {
+    this._topic = ev.detail.value;
+  }
+
+  private async _handleSubmit(): Promise<void> {
+    if (this._subscribed) {
+      this._subscribed();
+      this._subscribed = undefined;
+    } else {
+      this._subscribed = await subscribeMQTTTopic(
+        this.hass!,
+        this._topic,
+        (message) => this._handleMessage(message)
+      );
+    }
+  }
+
+  private _handleMessage(message: MQTTMessage) {
+    const tail =
+      this._messages.length > 30 ? this._messages.slice(0, 29) : this._messages;
+    let payload: string;
+    try {
+      payload = JSON.stringify(JSON.parse(message.payload), null, 4);
+    } catch (e) {
+      payload = message.payload;
+    }
+    this._messages = [
+      {
+        payload,
+        message,
+        time: new Date(),
+        id: this._messageCount++,
+      },
+      ...tail,
+    ];
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      form {
+        display: block;
+        padding: 16px;
+      }
+      paper-input {
+        display: inline-block;
+        width: 200px;
+      }
+      .events {
+        margin: -16px 0;
+        padding: 0 16px;
+      }
+      .event {
+        border-bottom: 1px solid var(--divider-color);
+        padding-bottom: 16px;
+        margin: 16px 0;
+      }
+      .event:last-child {
+        border-bottom: 0;
+      }
+      .bottom {
+        font-size: 80%;
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "mqtt-subscribe-card": MqttSubscribeCard;
+  }
+}