frontend/panels/config/script/ha-script-editor.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.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-input/paper-textarea.html">
<link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.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="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">

<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel='import' href='../../../src/layouts/ha-app-layout.html'>

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

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

<dom-module id="ha-script-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);
      }
      paper-fab {
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 1;
        margin-bottom: -80px;
        transition: margin-bottom .3s;
      }

      paper-fab[is-wide] {
        bottom: 24px;
        right: 24px;
      }

      paper-fab[dirty] {
        margin-bottom: 0;
      }
    </style>
    <ha-app-layout has-scrolling-region>
      <app-header slot="header" fixed>
        <app-toolbar>
          <paper-icon-button
            icon='mdi:arrow-left'
            on-tap='backTapped'
          ></paper-icon-button>
          <div main-title>Script [[name]]</div>
        </app-toolbar>
      </app-header>

      <div class='content'>
        <template is='dom-if' if='[[errors]]'>
          <div class='errors'>[[errors]]</div>
        </template>
        <div id='root'></div>
        <paper-fab
          is-wide$='[[isWide]]'
          dirty$='[[dirty]]'
          icon='mdi:content-save'
          title='Save'
          on-tap='saveScript'
        ></paper-fab>
      </div>
    </ha-app-layout>

  </template>
</dom-module>

<script>
class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
  static get is() { return 'ha-script-editor'; }

  static get properties() {
    return {
      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,
      },

      script: {
        type: Object,
        observer: 'scriptChanged',
      },

      creatingNew: {
        type: Boolean,
        observer: 'creatingNewChanged',
      },

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

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

  constructor() {
    super();
    this.configChanged = this.configChanged.bind(this);
    this._rendered = null;
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    if (this._rendered) {
      window.unmountPreact(this._rendered);
    }
  }

  configChanged(config) {
    // onChange gets called a lot during initial rendering causing recursing calls.
    if (this._rendered === null) return;
    this.config = config;
    this.errors = null;
    this.dirty = true;
    this._updateComponent(config);
  }

  scriptChanged(newVal, oldVal) {
    if (!newVal) return;
    if (!this.hass) {
      setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
      return;
    }
    if (oldVal && oldVal.entity_id === newVal.entity_id) {
      return;
    }
    this.hass.callApi('get', 'config/script/config/' + window.hassUtil.computeObjectId(newVal))
      .then(function (config) {
        // Normalize data: ensure sequence is a list
        // Happens when people copy paste their scripts into the config
        var value = config.sequence;
        if (value && !Array.isArray(value)) {
          config.sequence = [value];
        }

        this.dirty = false;
        this.config = config;
        this._updateComponent();
      }.bind(this));
  }

  creatingNewChanged(newVal) {
    if (!newVal) {
      return;
    }
    this.dirty = false;
    this.config = {
      alias: 'New Script',
      sequence: [
        { service: '', data: {} },
      ],
    };
    this._updateComponent();
  }

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

  backTapped() {
    if (this.dirty &&
        // eslint-disable-next-line
        !confirm('You have unsaved changes. Are you sure you want to leave?')) {
      return;
    }
    history.back();
  }

  _updateComponent() {
    this._rendered = window.ScriptEditor(this.$.root, {
      script: this.config,
      onChange: this.configChanged,
      isWide: this.isWide,
    }, this._rendered);
  }

  saveScript() {
    var id = this.creatingNew ? '' + Date.now() : window.hassUtil.computeObjectId(this.script);
    this.hass.callApi('post', 'config/script/config/' + id, this.config).then(function () {
      this.dirty = false;

      if (this.creatingNew) {
        history.replaceState(null, null, '/config/script/edit/' + id);
        this.fire('location-changed');
      }
    }.bind(this), function (errors) {
      this.errors = errors.body.message;
      throw errors;
    }.bind(this));
  }

  computeName(script) {
    return script && window.hassUtil.computeStateName(script);
  }
}

customElements.define(HaScriptEditor.is, HaScriptEditor);
</script>