ha-frontend-cdce8p/panels/automation/ha-automation-editor.html

<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/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">

<link rel="import" href="../config/ha-config-section.html">

<script src='../../build/editor.js'></script>

<dom-module id="ha-automation-editor">
  <template>
    <style include="ha-style">
      .errors {
        padding: 20px;
        font-weight: bold;
        color: var(--google-red-500);
      }
      .content {
        padding-bottom: 20px;
      }
      paper-card {
        display: block;
      }
      .triggers,
      .script {
        margin-top: -16px;
      }
      .triggers paper-card,
      .script paper-card {
        margin-top: 16px;
      }
      .add-card paper-button {
        display: block;
        text-align: center;
      }
      .card-menu {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        color: var(--primary-text-color);
      }
      .card-menu paper-item {
        cursor: pointer;
      }
      span[slot=introduction] a {
        color: var(--primary-color);
      }
    </style>

    <app-header-layout has-scrolling-region>
      <app-header fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
            on-tap='backTapped'
          ></paper-icon-button>
          <div main-title>Automation [[name]]</div>
          <paper-icon-button
            icon='mdi:content-save'
            on-tap='saveAutomation'
            disabled='[[!dirty]]'
          ></paper-icon-button>
        </app-toolbar>
      </app-header>

      <div class='content'>
        <template is='dom-if' if='[[errors]]'>
          <div class='errors'>[[errors]]</div>
        </template>
        <div id='root'></div>
      </div>
    </app-header-layout>

  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-automation-editor',

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

    narrow: {
      type: Boolean,
    },

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

    errors: {
      type: Object,
      value: null,
    },

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

    config: {
      type: Object,
      value: null,
    },

    automation: {
      type: Object,
      observer: 'automationChanged',
    },

    name: {
      type: String,
      computed: 'computeName(automation)'
    },

    isWide: {
      type: Boolean,
      observer: 'isWideChanged',
    },
  },

  attached: function () {
    this.configChanged = this.configChanged.bind(this);
  },

  detached: function () {
    if (this._rendered) {
      window.unmountPreact(this._rendered);
    }
  },

  configChanged: function (config) {
    this.config = config;
    this.errors = null;
    this.dirty = true;
    this._updateComponent(config);
  },

  automationChanged: function (newVal, oldVal) {
    if (!newVal) return;
    if (!this.hass) {
      setTimeout(this.automationChanged.bind(this, newVal, oldVal), 0);
      return;
    }
    if (oldVal && oldVal.attributes.id === newVal.attributes.id) {
      return;
    }
    this.hass.callApi('get', 'config/automation/config/' + newVal.attributes.id)
      .then(function (config) {
        // Normalize data: ensure trigger, action and condition are lists
        // Happens when people copy paste their automations into the config
        ['trigger', 'condition', 'action'].forEach(function (key) {
          if (!Array.isArray(config[key])) {
            config[key] = [config[key]];
          }
        });
        this.dirty = false;
        this.config = config;
        this._updateComponent();
      }.bind(this));
  },

  isWideChanged: function () {
    if (this.config === null) return;
    this._updateComponent();
  },

  backTapped: function () {
    if (this.dirty &&
        // eslint-disable-next-line
        !confirm('You have unsaved changes. Are you sure you want to leave?')) {
      return;
    }
    this.fire('hass-automation-picked', { id: null });
  },

  _updateComponent: function () {
    this._rendered = window.AutomationEditor(
      this.$.root, {
        automation: this.config,
        onChange: this.configChanged,
        isWide: this.isWide,
      }, this._rendered);
  },

  saveAutomation: function () {
    this.hass.callApi(
      'post', 'config/automation/config/' + this.automation.attributes.id,
      this.config).then(function () {
        this.dirty = false;
      }.bind(this), function (errors) {
        this.errors = errors.body.message;
        throw errors;
      }.bind(this));
  },

  computeName: function (automation) {
    return automation && window.hassUtil.computeStateName(automation);
  },
});
</script>