mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-29 12:16:39 +00:00
Add MQTT subscribe to dev tools (#3589)
* Add mqtt subscribe to dev tools * Update mqtt-subscribe-card.ts * Comments * type
This commit is contained in:
Bram Kragten
Paulus Schoutsen
parent
ba66bf88d3
commit
4378904243
19
src/data/mqtt.ts
Normal file
19
src/data/mqtt.ts
Normal file
@ -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,
|
||||
});
|
||||
};
|
||||
@ -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
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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);
|
||||
126
src/panels/developer-tools/mqtt/developer-tools-mqtt.ts
Normal file
126
src/panels/developer-tools/mqtt/developer-tools-mqtt.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
153
src/panels/developer-tools/mqtt/mqtt-subscribe-card.ts
Normal file
153
src/panels/developer-tools/mqtt/mqtt-subscribe-card.ts
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user