Add template editor

src/components/ha-sidebar.html

@@ -113,6 +113,9 @@
           <paper-icon-button
             icon='mdi:nfc' data-panel='devEvent'
             on-click='handleDevClick'></paper-icon-button>
+          <paper-icon-button
+            icon='mdi:file-xml' data-panel='devTemplate'
+            on-click='handleDevClick'></paper-icon-button>
           <paper-icon-button
             icon='mdi:information-outline' data-panel='devInfo'
             on-click='handleDevClick'></paper-icon-button>

src/layouts/home-assistant-main.html

@@ -8,6 +8,7 @@
 <link rel='import' href='../layouts/partial-dev-call-service.html'>
 <link rel='import' href='../layouts/partial-dev-fire-event.html'>
 <link rel='import' href='../layouts/partial-dev-set-state.html'>
+<link rel='import' href='../layouts/partial-dev-template.html'>
 <link rel='import' href='../layouts/partial-dev-info.html'>
 <link rel='import' href='../managers/notification-manager.html'>
 <link rel="import" href="../dialogs/more-info-dialog.html">
@@ -50,6 +51,9 @@
       <template is='dom-if' if='[[isSelectedDevState]]'>
         <partial-dev-set-state main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-set-state>
       </template>
+      <template is='dom-if' if='[[isSelectedDevTemplate]]'>
+        <partial-dev-template main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-template>
+      </template>
       <template is='dom-if' if='[[isSelectedDevInfo]]'>
         <partial-dev-info main narrow='[[narrow]]' show-menu='[[showSidebar]]'></partial-dev-info>
       </template>

src/layouts/home-assistant-main.js

@@ -12,6 +12,7 @@ require('../layouts/partial-map');
 require('../layouts/partial-dev-call-service');
 require('../layouts/partial-dev-fire-event');
 require('../layouts/partial-dev-set-state');
+require('../layouts/partial-dev-template');
 require('../layouts/partial-dev-info');
 require('../managers/notification-manager');
 require('../dialogs/more-info-dialog');
@@ -71,6 +72,11 @@ export default new Polymer({
       bindNuclear: navigationGetters.isActivePane('devState'),
     },
 
+    isSelectedDevTemplate: {
+      type: Boolean,
+      bindNuclear: navigationGetters.isActivePane('devTemplate'),
+    },
+
     isSelectedDevService: {
       type: Boolean,
       bindNuclear: navigationGetters.isActivePane('devService'),

src/layouts/partial-dev-info.html

@@ -4,8 +4,6 @@
 
 <link rel="import" href="./partial-base.html">
 
-<link rel="import" href="../components/services-list.html">
-
 <dom-module id="partial-dev-info">
   <style>
     .content {

src/layouts/partial-dev-template.html

@@ -0,0 +1,71 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-textarea.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
+
+<link rel="import" href="./partial-base.html">
+
+<link rel="import" href="../components/services-list.html">
+
+<dom-module id="partial-dev-template">
+  <style>
+    .content {
+      margin-top: 64px;
+      padding: 16px;
+      background-color: white;
+      -ms-user-select: initial;
+      -webkit-user-select: initial;
+      -moz-user-select: initial;
+    }
+
+    .edit-pane {
+      margin-right: 16px;
+    }
+
+    .horizontal .edit-pane {
+      max-width: 50%;      
+    }
+
+    .render-pane {
+      position: relative;
+    }
+
+    .render-spinner {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+
+    .rendered {
+      clear: both;
+      white-space: pre-wrap;
+    }
+
+    .rendered.error {
+      color: red;
+    }
+  </style>
+  <template>
+    <partial-base narrow="[[narrow]]" show-menu='[[showMenu]]'>
+      <span header-title>Template Editor</span>
+
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='edit-pane'>
+          <p>
+            Templates are rendered using the Jinja2 template engine with some Home Assistant specific extensions.
+          </p>
+            <ul>
+              <li><a href='http://jinja.pocoo.org/docs/dev/templates/' target='_blank'>Jinja2 tempate documentation</a></li>
+              <li><a href='https://home-assistant.io/getting-started/templating/' target='_blank'>Home Assistant template extensions</a></li>
+            </ul>
+          </p>
+          <paper-textarea label="Template" value='{{template}}'></paper-textarea>
+        </div>
+        <div class='render-pane'>
+          <paper-spinner class='render-spinner' active='[[rendering]]'></paper-spinner>
+          <pre class$='[[computeRenderedClasses(error)]]'>[[processed]]</pre>
+        </div>
+      </div>
+    </partial-base>
+  </template>
+</dom-module>

src/layouts/partial-dev-template.js

@@ -0,0 +1,94 @@
+import hass from '../util/home-assistant-js-instance';
+
+import Polymer from '../polymer';
+import nuclearObserver from '../util/bound-nuclear-behavior';
+
+require('./partial-base');
+
+const {
+  templateActions,
+} = hass;
+
+export default new Polymer({
+  is: 'partial-dev-template',
+
+  behaviors: [nuclearObserver],
+
+  properties: {
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    error: {
+      type: Boolean,
+      value: false,
+    },
+
+    rendering: {
+      type: Boolean,
+      value: false,
+    },
+
+    template: {
+      type: String,
+      value: '{%- 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' +
+             '\n' +
+             '{%- else -%}\n' +
+             '\n' +
+             '  Anne Therese is at {{ states("device_tracker.anne_therese") }} and ' +
+             'Paulus is at {{ states("device_tracker.paulus") }}\n' +
+             '\n' +
+             '{%- 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' +
+             '{%- endfor -%}.',
+      observer: 'templateChanged',
+    },
+
+    processed: {
+      type: String,
+      value: '',
+    },
+  },
+
+  computeFormClasses(narrow) {
+    return 'content fit layout ' + (narrow ? 'vertical' : 'horizontal');
+  },
+
+  computeRenderedClasses(error) {
+    return error ? 'error rendered' : 'rendered';
+  },
+
+  templateChanged() {
+    if (this.error) {
+      this.error = false;
+    }
+    this.debounce('render-template', this.renderTemplate, 500);
+  },
+
+  renderTemplate() {
+    this.rendering = true;
+
+    templateActions.render(this.template).then(processed => {
+      this.processed = processed;
+      this.rendering = false;
+    }, error => {
+      this.processed = error.message;
+      this.error = true;
+      this.rendering = false;
+    });
+  },
+});

src/layouts/partial-zone.html

@@ -31,7 +31,7 @@
           on-click="handleListenClick"></paper-icon-button>
       </paper-toolbar>
 
-      <div class='content fit'>
+      <div class='fit'>
         <ha-zone-cards
           show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
           states='[[states]]' columns='[[columns]]'></ha-zone-cards>