Misc panel updates (#362)

* Add example to set variables for testing

* Allow host shutdown in advanced settings

* Fix floating label in service

* Add MQTT panel

* Lint

panels/dev-mqtt/ha-panel-dev-mqtt.html

@@ -0,0 +1,100 @@
+<link rel='import' href='../../bower_components/polymer/polymer.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>
+Polymer({
+  is: 'ha-panel-dev-mqtt',
+
+  properties: {
+    hass: Object,
+    narrow: Boolean,
+    showMenu: Boolean,
+    topic: String,
+    payload: String,
+  },
+
+  _publish: function () {
+    this.hass.callService('mqtt', 'publish', {
+      topic: this.topic,
+      payload_template: this.payload,
+    });
+  },
+});
+</script>

panels/dev-service/ha-panel-dev-service.html

@@ -91,7 +91,11 @@
         <div class='ha-form'>
           <vaadin-combo-box label='Domain' items='[[computeDomains(serviceDomains)]]' value='{{domain}}'></vaadin-combo-box>
           <vaadin-combo-box label='Service' items='[[computeServices(serviceDomains, domain)]]' value='{{service}}'></vaadin-combo-box>
-          <paper-textarea label='Service Data (JSON, optional)' value='{{serviceData}}'></paper-textarea>
+          <paper-textarea
+            always-float-label
+            label='Service Data (JSON, optional)'
+            value='{{serviceData}}'
+          ></paper-textarea>
           <paper-button on-tap='callService' raised>Call Service</paper-button>
         </div>
 

panels/dev-template/ha-panel-dev-template.html

@@ -119,7 +119,15 @@ Polymer({
     template: {
       type: String,
       /* eslint-disable max-len */
-      value: '{%- if is_state("device_tracker.paulus", "home") and \n' +
+      value: 'Imitate available variables:\n' +
+             '{% set my_test_json = {\n' +
+             '  "temperature": 25,\n' +
+             '  "unit": "°C"\n' +
+             '} %}\n' +
+             '\n' +
+             'The temperature is {{ my_test_json.temperature }} {{ my_test_json.unit }}. \n' +
+             '\n' +
+             '{% if is_state("device_tracker.paulus", "home") and \n' +
              '       is_state("device_tracker.anne_therese", "home") -%}\n' +
              '\n' +
              '  You are both home, you silly\n' +
@@ -132,7 +140,6 @@ Polymer({
              '{%- endif %}\n' +
              '\n' +
              'For loop example:\n' +
-             '\n' +
              '{% for state in states.sensor -%}\n' +
              '  {%- if loop.first %}The {% elif loop.last %} and the {% else %}, the {% endif -%}\n' +
              '  {{ state.name | lower }} is {{state.state}} {{- state.attributes.unit_of_measurement}}\n' +

panels/hassio/advanced/hassio-host-info.html

@@ -63,6 +63,13 @@
             path="hassio/host/reboot"
           >Reboot</ha-call-api-button>
         </template>
+        <template is='dom-if' if='[[computeShutdownAvailable(data)]]'>
+          <ha-call-api-button
+            class='warning'
+            hass='[[hass]]'
+            path="hassio/host/shutdown"
+          >Shutdown</ha-call-api-button>
+        </template>
       </div>
     </paper-card>
   </template>
@@ -111,5 +118,9 @@ Polymer({
   computeRebootAvailable: function (data) {
     return data.features && data.features.indexOf('reboot') !== -1;
   },
+
+  computeShutdownAvailable: function (data) {
+    return data.features && data.features.indexOf('shutdown') !== -1;
+  },
 });
 </script>

src/components/ha-sidebar.html

@@ -152,6 +152,12 @@
           icon='mdi:file-xml' data-panel='dev-template'
           alt="Templates" title="Templates"
           on-tap='menuClicked'></paper-icon-button>
+        <template is='dom-if' if='[[_mqttLoaded(hass)]]'>
+          <paper-icon-button
+            icon='mdi:altimeter' data-panel='dev-mqtt'
+            alt="MQTT" title="MQTT"
+            on-tap='menuClicked'></paper-icon-button>
+        </template>
         <paper-icon-button
           icon='mdi:information-outline' data-panel='dev-info'
           alt="Info" title="Info"
@@ -193,6 +199,10 @@ Polymer({
     },
   },
 
+  _mqttLoaded: function (hass) {
+    return hass.config.core.components.indexOf('mqtt') !== -1;
+  },
+
   computePanels: function (hass) {
     var panels = hass.config.panels;
     var sortValue = {