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

<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="../../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="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/resources/ha-style.html">

<dom-module id="ha-panel-dev-template">
  <template>
    <style is="custom-style" include="ha-style iron-flex iron-positioning"></style>
    <style>
      :host {
        background-color: white;
        -ms-user-select: initial;
        -webkit-user-select: initial;
        -moz-user-select: initial;
      }

      .content {
        padding: 16px;
      }

      .edit-pane {
        margin-right: 16px;
      }

      .edit-pane a {
        color: var(--dark-primary-color);
      }

      .horizontal .edit-pane {
        max-width: 50%;
      }

      .render-pane {
        position: relative;
        max-width: 50%;
      }

      .render-spinner {
        position: absolute;
        top: 8px;
        right: 8px;
      }

      .rendered {
        @apply(--paper-font-code1)
        clear: both;
        white-space: pre-wrap;
      }

      .rendered.error {
        color: red;
      }
    </style>

    <app-header-layout has-scrolling-region>
      <app-header fixed>
        <app-toolbar>
          <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
          <div main-title>Templates</div>
        </app-toolbar>
      </app-header>

      <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 template documentation</a></li>
            <li><a href='https://home-assistant.io/topics/templating/' target='_blank'>Home Assistant template extensions</a></li>
          </ul>
          <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>
    </app-header-layout>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-dev-template',

  properties: {
    hass: {
      type: Object,
    },

    narrow: {
      type: Boolean,
      value: false,
    },

    showMenu: {
      type: Boolean,
      value: false,
    },

    error: {
      type: Boolean,
      value: false,
    },

    rendering: {
      type: Boolean,
      value: false,
    },

    template: {
      type: String,
      /* eslint-disable max-len */
      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 -%}.',
      /* eslint-enable max-len */
      observer: 'templateChanged',
    },

    processed: {
      type: String,
      value: '',
    },
  },

  computeFormClasses: function (narrow) {
    return narrow ?
      'content fit' : 'content fit layout horizontal';
  },

  computeRenderedClasses: function (error) {
    return error ? 'error rendered' : 'rendered';
  },

  templateChanged: function () {
    if (this.error) {
      this.error = false;
    }
    this.debounce('render-template', this.renderTemplate.bind(this), 500);
  },

  renderTemplate: function () {
    this.rendering = true;

    this.hass.callApi('POST', 'template', { template: this.template })
      .then(function (processed) {
        this.processed = processed;
        this.rendering = false;
      }.bind(this), function (error) {
        this.processed = error.message;
        this.error = true;
        this.rendering = false;
      }.bind(this));
  },
});
</script>