From 90e6f59a74a9be6d90327b0548db9f114efc3a84 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 30 Nov 2017 11:38:21 -0800
Subject: [PATCH] Merge script and automation editor JS (#693)

* Merge script and automation editor JS

* Also consolidate the files
---
 gulp/tasks/rollup.js                          |  5 +--
 .../automation.js                             |  4 +--
 .../condition/condition_edit.js               |  0
 .../condition/condition_row.js                |  0
 .../condition/index.js                        |  0
 .../condition/numeric_state.js                |  2 +-
 .../condition/state.js                        |  2 +-
 .../condition/sun.js                          |  2 +-
 .../condition/template.js                     |  2 +-
 .../condition/time.js                         |  2 +-
 .../condition/zone.js                         |  6 ++--
 .../json_textarea.js                          |  0
 .../panel-config.js}                          |  5 +++
 js/{script-editor => panel-config}/script.js  | 10 ++++--
 .../script/action_edit.js                     |  0
 .../script/action_row.js                      |  0
 .../script/call_service.js                    |  0
 .../script/condition.js                       |  0
 .../script/delay.js                           |  2 +-
 .../script/event.js                           |  2 +-
 .../script/index.js                           |  0
 .../component => panel-config}/script/wait.js |  2 +-
 .../trigger/event.js                          |  2 +-
 .../trigger/homeassistant.js                  |  0
 .../trigger/index.js                          |  0
 .../trigger/mqtt.js                           |  0
 .../trigger/numeric_state.js                  |  0
 .../trigger/state.js                          |  0
 .../trigger/sun.js                            |  0
 .../trigger/template.js                       |  0
 .../trigger/time.js                           |  0
 .../trigger/trigger_edit.js                   |  0
 .../trigger/trigger_row.js                    |  0
 .../trigger/zone.js                           |  0
 js/script-editor/script-editor.js             | 10 ------
 .../automation/ha-automation-editor.html      |  3 +-
 panels/config/ha-config-js.html               |  1 +
 panels/config/script/ha-script-editor.html    | 36 +++++++++++--------
 38 files changed, 53 insertions(+), 45 deletions(-)
 rename js/{automation-editor => panel-config}/automation.js (96%)
 rename js/{common/component => panel-config}/condition/condition_edit.js (100%)
 rename js/{common/component => panel-config}/condition/condition_row.js (100%)
 rename js/{common/component => panel-config}/condition/index.js (100%)
 rename js/{common/component => panel-config}/condition/numeric_state.js (95%)
 rename js/{common/component => panel-config}/condition/state.js (94%)
 rename js/{common/component => panel-config}/condition/sun.js (97%)
 rename js/{common/component => panel-config}/condition/template.js (90%)
 rename js/{common/component => panel-config}/condition/time.js (91%)
 rename js/{common/component => panel-config}/condition/zone.js (87%)
 rename js/{common/component => panel-config}/json_textarea.js (100%)
 rename js/{automation-editor/automation-editor.js => panel-config/panel-config.js} (66%)
 rename js/{script-editor => panel-config}/script.js (87%)
 rename js/{common/component => panel-config}/script/action_edit.js (100%)
 rename js/{common/component => panel-config}/script/action_row.js (100%)
 rename js/{common/component => panel-config}/script/call_service.js (100%)
 rename js/{common/component => panel-config}/script/condition.js (100%)
 rename js/{common/component => panel-config}/script/delay.js (89%)
 rename js/{common/component => panel-config}/script/event.js (94%)
 rename js/{common/component => panel-config}/script/index.js (100%)
 rename js/{common/component => panel-config}/script/wait.js (95%)
 rename js/{automation-editor => panel-config}/trigger/event.js (93%)
 rename js/{automation-editor => panel-config}/trigger/homeassistant.js (100%)
 rename js/{automation-editor => panel-config}/trigger/index.js (100%)
 rename js/{automation-editor => panel-config}/trigger/mqtt.js (100%)
 rename js/{automation-editor => panel-config}/trigger/numeric_state.js (100%)
 rename js/{automation-editor => panel-config}/trigger/state.js (100%)
 rename js/{automation-editor => panel-config}/trigger/sun.js (100%)
 rename js/{automation-editor => panel-config}/trigger/template.js (100%)
 rename js/{automation-editor => panel-config}/trigger/time.js (100%)
 rename js/{automation-editor => panel-config}/trigger/trigger_edit.js (100%)
 rename js/{automation-editor => panel-config}/trigger/trigger_row.js (100%)
 rename js/{automation-editor => panel-config}/trigger/zone.js (100%)
 delete mode 100644 js/script-editor/script-editor.js
 create mode 100644 panels/config/ha-config-js.html

diff --git a/gulp/tasks/rollup.js b/gulp/tasks/rollup.js
index 7bd6b7fd22..e5ba9a39f1 100644
--- a/gulp/tasks/rollup.js
+++ b/gulp/tasks/rollup.js
@@ -68,16 +68,17 @@ gulp.task('run_rollup_es5', () => gulp.src([
   'demo_data/demo_data.js',
 ])
   .pipe(rollupEach(getRollupInputOptions(/* es6= */ false), rollupOutputOptions))
+  .on('error', err => console.error(err.message))
   .pipe(gulp.dest('build-temp-es5')));
 
 gulp.task('run_rollup', () => gulp.src([
   'js/core.js',
-  'js/automation-editor/automation-editor.js',
+  'js/panel-config/panel-config.js',
   'js/util.js',
-  'js/script-editor/script-editor.js',
   'demo_data/demo_data.js',
 ])
   .pipe(rollupEach(getRollupInputOptions(/* es6= */ true), rollupOutputOptions))
+  .on('error', err => console.error(err.message))
   .pipe(gulp.dest('build-temp')));
 
 gulp.task('ru_all_es5', ['run_rollup_es5'], () => {
diff --git a/js/automation-editor/automation.js b/js/panel-config/automation.js
similarity index 96%
rename from js/automation-editor/automation.js
rename to js/panel-config/automation.js
index 65c9e9edd3..0b9f9197f2 100644
--- a/js/automation-editor/automation.js
+++ b/js/panel-config/automation.js
@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
 import Trigger from './trigger/index.js';
-import Condition from '../common/component/condition/index.js';
-import Script from '../common/component/script/index.js';
+import Condition from './condition/index.js';
+import Script from './script/index.js';
 
 export default class Automation extends Component {
   constructor() {
diff --git a/js/common/component/condition/condition_edit.js b/js/panel-config/condition/condition_edit.js
similarity index 100%
rename from js/common/component/condition/condition_edit.js
rename to js/panel-config/condition/condition_edit.js
diff --git a/js/common/component/condition/condition_row.js b/js/panel-config/condition/condition_row.js
similarity index 100%
rename from js/common/component/condition/condition_row.js
rename to js/panel-config/condition/condition_row.js
diff --git a/js/common/component/condition/index.js b/js/panel-config/condition/index.js
similarity index 100%
rename from js/common/component/condition/index.js
rename to js/panel-config/condition/index.js
diff --git a/js/common/component/condition/numeric_state.js b/js/panel-config/condition/numeric_state.js
similarity index 95%
rename from js/common/component/condition/numeric_state.js
rename to js/panel-config/condition/numeric_state.js
index 1bb6a8e5ff..a9b3a58879 100644
--- a/js/common/component/condition/numeric_state.js
+++ b/js/panel-config/condition/numeric_state.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class NumericStateCondition extends Component {
   constructor() {
diff --git a/js/common/component/condition/state.js b/js/panel-config/condition/state.js
similarity index 94%
rename from js/common/component/condition/state.js
rename to js/panel-config/condition/state.js
index 1220cbffe8..2ae30ed2d3 100644
--- a/js/common/component/condition/state.js
+++ b/js/panel-config/condition/state.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class StateCondition extends Component {
   constructor() {
diff --git a/js/common/component/condition/sun.js b/js/panel-config/condition/sun.js
similarity index 97%
rename from js/common/component/condition/sun.js
rename to js/panel-config/condition/sun.js
index df61dad4a2..7b35692be4 100644
--- a/js/common/component/condition/sun.js
+++ b/js/panel-config/condition/sun.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class SunCondition extends Component {
   constructor() {
diff --git a/js/common/component/condition/template.js b/js/panel-config/condition/template.js
similarity index 90%
rename from js/common/component/condition/template.js
rename to js/panel-config/condition/template.js
index 9d9ab5bbaf..35582efbea 100644
--- a/js/common/component/condition/template.js
+++ b/js/panel-config/condition/template.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class TemplateCondition extends Component {
   constructor() {
diff --git a/js/common/component/condition/time.js b/js/panel-config/condition/time.js
similarity index 91%
rename from js/common/component/condition/time.js
rename to js/panel-config/condition/time.js
index b5d804a3ed..46cd12a6b9 100644
--- a/js/common/component/condition/time.js
+++ b/js/panel-config/condition/time.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class TimeCondition extends Component {
   constructor() {
diff --git a/js/common/component/condition/zone.js b/js/panel-config/condition/zone.js
similarity index 87%
rename from js/common/component/condition/zone.js
rename to js/panel-config/condition/zone.js
index 7488d7bf38..6bb045649f 100644
--- a/js/common/component/condition/zone.js
+++ b/js/panel-config/condition/zone.js
@@ -1,8 +1,8 @@
 import { h, Component } from 'preact';
 
-import { onChangeEvent } from '../../util/event.js';
-import { hasLocation } from '../../util/location.js';
-import computeStateDomain from '../../util/compute_state_domain.js';
+import { onChangeEvent } from '../../common/util/event.js';
+import { hasLocation } from '../../common/util/location.js';
+import computeStateDomain from '../../common/util/compute_state_domain.js';
 
 function zoneAndLocationFilter(stateObj) {
   return hasLocation(stateObj) && computeStateDomain(stateObj) !== 'zone';
diff --git a/js/common/component/json_textarea.js b/js/panel-config/json_textarea.js
similarity index 100%
rename from js/common/component/json_textarea.js
rename to js/panel-config/json_textarea.js
diff --git a/js/automation-editor/automation-editor.js b/js/panel-config/panel-config.js
similarity index 66%
rename from js/automation-editor/automation-editor.js
rename to js/panel-config/panel-config.js
index a8919fcfe9..d439b545ef 100644
--- a/js/automation-editor/automation-editor.js
+++ b/js/panel-config/panel-config.js
@@ -1,5 +1,10 @@
 import { h, render } from 'preact';
 import Automation from './automation.js';
+import Script from './script.js';
+
+window.ScriptEditor = function (mountEl, props, mergeEl) {
+  return render(h(Script, props), mountEl, mergeEl);
+};
 
 window.AutomationEditor = function (mountEl, props, mergeEl) {
   return render(h(Automation, props), mountEl, mergeEl);
diff --git a/js/script-editor/script.js b/js/panel-config/script.js
similarity index 87%
rename from js/script-editor/script.js
rename to js/panel-config/script.js
index ae5d044d2b..c724e5c741 100644
--- a/js/script-editor/script.js
+++ b/js/panel-config/script.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import Script from '../common/component/script/index.js';
+import Script from './script/index.js';
 
 export default class ScriptEditor extends Component {
   constructor() {
@@ -24,7 +24,7 @@ export default class ScriptEditor extends Component {
     });
   }
 
-  render({ script, isWide }) {
+  render({ script, isWide, hass }) {
     const { alias, sequence } = script;
 
     return (
@@ -54,7 +54,11 @@ export default class ScriptEditor extends Component {
               Learn more about available actions.
             </a></p>
           </span>
-          <Script script={sequence} onChange={this.sequenceChanged} />
+          <Script
+            script={sequence}
+            onChange={this.sequenceChanged}
+            hass={hass}
+          />
         </ha-config-section>
       </div>
     );
diff --git a/js/common/component/script/action_edit.js b/js/panel-config/script/action_edit.js
similarity index 100%
rename from js/common/component/script/action_edit.js
rename to js/panel-config/script/action_edit.js
diff --git a/js/common/component/script/action_row.js b/js/panel-config/script/action_row.js
similarity index 100%
rename from js/common/component/script/action_row.js
rename to js/panel-config/script/action_row.js
diff --git a/js/common/component/script/call_service.js b/js/panel-config/script/call_service.js
similarity index 100%
rename from js/common/component/script/call_service.js
rename to js/panel-config/script/call_service.js
diff --git a/js/common/component/script/condition.js b/js/panel-config/script/condition.js
similarity index 100%
rename from js/common/component/script/condition.js
rename to js/panel-config/script/condition.js
diff --git a/js/common/component/script/delay.js b/js/panel-config/script/delay.js
similarity index 89%
rename from js/common/component/script/delay.js
rename to js/panel-config/script/delay.js
index 7bf2bfe131..cec32cba8d 100644
--- a/js/common/component/script/delay.js
+++ b/js/panel-config/script/delay.js
@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class DelayAction extends Component {
   constructor() {
diff --git a/js/common/component/script/event.js b/js/panel-config/script/event.js
similarity index 94%
rename from js/common/component/script/event.js
rename to js/panel-config/script/event.js
index 43c1a32ccf..8592363aef 100644
--- a/js/common/component/script/event.js
+++ b/js/panel-config/script/event.js
@@ -1,7 +1,7 @@
 import { h, Component } from 'preact';
 
 import JSONTextArea from '../json_textarea.js';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class EventAction extends Component {
   constructor() {
diff --git a/js/common/component/script/index.js b/js/panel-config/script/index.js
similarity index 100%
rename from js/common/component/script/index.js
rename to js/panel-config/script/index.js
diff --git a/js/common/component/script/wait.js b/js/panel-config/script/wait.js
similarity index 95%
rename from js/common/component/script/wait.js
rename to js/panel-config/script/wait.js
index f61a3d0d8d..6bf5d266eb 100644
--- a/js/common/component/script/wait.js
+++ b/js/panel-config/script/wait.js
@@ -1,5 +1,5 @@
 import { h, Component } from 'preact';
-import { onChangeEvent } from '../../util/event.js';
+import { onChangeEvent } from '../../common/util/event.js';
 
 export default class WaitAction extends Component {
   constructor() {
diff --git a/js/automation-editor/trigger/event.js b/js/panel-config/trigger/event.js
similarity index 93%
rename from js/automation-editor/trigger/event.js
rename to js/panel-config/trigger/event.js
index 620095ffe4..e0a18d58d6 100644
--- a/js/automation-editor/trigger/event.js
+++ b/js/panel-config/trigger/event.js
@@ -1,6 +1,6 @@
 import { h, Component } from 'preact';
 
-import JSONTextArea from '../../common/component/json_textarea.js';
+import JSONTextArea from '../json_textarea.js';
 import { onChangeEvent } from '../../common/util/event.js';
 
 export default class EventTrigger extends Component {
diff --git a/js/automation-editor/trigger/homeassistant.js b/js/panel-config/trigger/homeassistant.js
similarity index 100%
rename from js/automation-editor/trigger/homeassistant.js
rename to js/panel-config/trigger/homeassistant.js
diff --git a/js/automation-editor/trigger/index.js b/js/panel-config/trigger/index.js
similarity index 100%
rename from js/automation-editor/trigger/index.js
rename to js/panel-config/trigger/index.js
diff --git a/js/automation-editor/trigger/mqtt.js b/js/panel-config/trigger/mqtt.js
similarity index 100%
rename from js/automation-editor/trigger/mqtt.js
rename to js/panel-config/trigger/mqtt.js
diff --git a/js/automation-editor/trigger/numeric_state.js b/js/panel-config/trigger/numeric_state.js
similarity index 100%
rename from js/automation-editor/trigger/numeric_state.js
rename to js/panel-config/trigger/numeric_state.js
diff --git a/js/automation-editor/trigger/state.js b/js/panel-config/trigger/state.js
similarity index 100%
rename from js/automation-editor/trigger/state.js
rename to js/panel-config/trigger/state.js
diff --git a/js/automation-editor/trigger/sun.js b/js/panel-config/trigger/sun.js
similarity index 100%
rename from js/automation-editor/trigger/sun.js
rename to js/panel-config/trigger/sun.js
diff --git a/js/automation-editor/trigger/template.js b/js/panel-config/trigger/template.js
similarity index 100%
rename from js/automation-editor/trigger/template.js
rename to js/panel-config/trigger/template.js
diff --git a/js/automation-editor/trigger/time.js b/js/panel-config/trigger/time.js
similarity index 100%
rename from js/automation-editor/trigger/time.js
rename to js/panel-config/trigger/time.js
diff --git a/js/automation-editor/trigger/trigger_edit.js b/js/panel-config/trigger/trigger_edit.js
similarity index 100%
rename from js/automation-editor/trigger/trigger_edit.js
rename to js/panel-config/trigger/trigger_edit.js
diff --git a/js/automation-editor/trigger/trigger_row.js b/js/panel-config/trigger/trigger_row.js
similarity index 100%
rename from js/automation-editor/trigger/trigger_row.js
rename to js/panel-config/trigger/trigger_row.js
diff --git a/js/automation-editor/trigger/zone.js b/js/panel-config/trigger/zone.js
similarity index 100%
rename from js/automation-editor/trigger/zone.js
rename to js/panel-config/trigger/zone.js
diff --git a/js/script-editor/script-editor.js b/js/script-editor/script-editor.js
deleted file mode 100644
index 1a494f6239..0000000000
--- a/js/script-editor/script-editor.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { h, render } from 'preact';
-import Script from './script.js';
-
-window.ScriptEditor = function (mountEl, props, mergeEl) {
-  return render(h(Script, props), mountEl, mergeEl);
-};
-
-window.unmountPreact = function (mountEl, mergeEl) {
-  render(() => null, mountEl, mergeEl);
-};
diff --git a/panels/config/automation/ha-automation-editor.html b/panels/config/automation/ha-automation-editor.html
index b2c8660ffd..4c26f40c85 100644
--- a/panels/config/automation/ha-automation-editor.html
+++ b/panels/config/automation/ha-automation-editor.html
@@ -22,8 +22,7 @@
 <link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
-
-<script src='../../../build-temp/automation-editor.js'></script>
+<link rel="import" href="../ha-config-js.html">
 
 <dom-module id="ha-automation-editor">
   <template>
diff --git a/panels/config/ha-config-js.html b/panels/config/ha-config-js.html
new file mode 100644
index 0000000000..d35e0a085b
--- /dev/null
+++ b/panels/config/ha-config-js.html
@@ -0,0 +1 @@
+<script src='../../build-temp/panel-config.js'></script>
diff --git a/panels/config/script/ha-script-editor.html b/panels/config/script/ha-script-editor.html
index e9afc13c07..5f20080ad3 100644
--- a/panels/config/script/ha-script-editor.html
+++ b/panels/config/script/ha-script-editor.html
@@ -15,12 +15,14 @@
 <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/components/entity/ha-entity-picker.html'>
+<link rel='import' href='../../../src/components/ha-combo-box.html'>
 <link rel='import' href='../../../src/layouts/ha-app-layout.html'>
+<link rel='import' href='../../../src/util/hass-mixins.html'>
 
 <link rel="import" href="../ha-config-section.html">
 
-<script src='../../../build-temp/script-editor.js'></script>
+<link rel="import" href="../ha-config-js.html">
 
 <dom-module id="ha-script-editor">
   <template>
@@ -159,13 +161,18 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
 
       isWide: {
         type: Boolean,
-        observer: 'isWideChanged',
+        observer: '_updateComponent',
       },
 
       _rendered: {
         type: Object,
         value: null,
       },
+
+      _renderScheduled: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
@@ -194,7 +201,7 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
   scriptChanged(newVal, oldVal) {
     if (!newVal) return;
     if (!this.hass) {
-      setTimeout(this.scriptChanged.bind(this, newVal, oldVal), 0);
+      setTimeout(() => this.scriptChanged(newVal, oldVal), 0);
       return;
     }
     if (oldVal && oldVal.entity_id === newVal.entity_id) {
@@ -229,11 +236,6 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
     this._updateComponent();
   }
 
-  isWideChanged() {
-    if (this.config === null) return;
-    this._updateComponent();
-  }
-
   backTapped() {
     if (this.dirty &&
         // eslint-disable-next-line
@@ -244,11 +246,17 @@ class HaScriptEditor extends window.hassMixins.EventsMixin(Polymer.Element) {
   }
 
   _updateComponent() {
-    this._rendered = window.ScriptEditor(this.$.root, {
-      script: this.config,
-      onChange: this.configChanged,
-      isWide: this.isWide,
-    }, this._rendered);
+    if (this._renderScheduled || !this.hass || !this.config) return;
+    this._renderScheduled = true;
+    Promise.resolve().then(() => {
+      this._rendered = window.ScriptEditor(this.$.root, {
+        script: this.config,
+        onChange: this.configChanged,
+        isWide: this.isWide,
+        hass: this.hass,
+      }, this._rendered);
+      this._renderScheduled = false;
+    });
   }
 
   saveScript() {