105 lines
2.9 KiB
HTML
105 lines
2.9 KiB
HTML
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
|
|
|
<link rel='import' href='../../bower_components/app-layout/app-header-layout/app-header-layout.html'>
|
|
<link rel='import' href='../../bower_components/app-layout/app-header/app-header.html'>
|
|
<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
|
|
<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
|
|
|
|
<link rel='import' href='../../bower_components/paper-card/paper-card.html'>
|
|
<link rel='import' href='../../bower_components/paper-input/paper-input.html'>
|
|
<link rel='import' href='../../bower_components/paper-button/paper-button.html'>
|
|
<link rel='import' href='../../bower_components/paper-input/paper-textarea.html'>
|
|
|
|
<link rel='import' href='../../src/components/ha-menu-button.html'>
|
|
<link rel='import' href='../../src/resources/ha-style.html'>
|
|
|
|
<dom-module id='ha-panel-dev-mqtt'>
|
|
<template>
|
|
<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;
|
|
}
|
|
|
|
paper-card {
|
|
display: block;
|
|
}
|
|
|
|
paper-button {
|
|
background-color: white;
|
|
}
|
|
</style>
|
|
|
|
<app-header-layout has-scrolling-region>
|
|
<app-header slot="header" fixed>
|
|
<app-toolbar>
|
|
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
|
|
<div main-title>MQTT</div>
|
|
</app-toolbar>
|
|
</app-header>
|
|
|
|
<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'>
|
|
<paper-card heading="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'>
|
|
<paper-button on-tap='_publish'>Publish</paper-button>
|
|
</div>
|
|
</paper-card>
|
|
</div>
|
|
|
|
</app-header-layout>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class HaPanelDevMqtt extends Polymer.Element {
|
|
static get is() { return 'ha-panel-dev-mqtt'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: Object,
|
|
narrow: Boolean,
|
|
showMenu: Boolean,
|
|
topic: String,
|
|
payload: String,
|
|
};
|
|
}
|
|
|
|
_publish() {
|
|
this.hass.callService('mqtt', 'publish', {
|
|
topic: this.topic,
|
|
payload_template: this.payload,
|
|
});
|
|
}
|
|
}
|
|
|
|
customElements.define(HaPanelDevMqtt.is, HaPanelDevMqtt);
|
|
</script>
|