Allow creating new automations.

panels/automation/ha-automation-editor.html

@@ -141,6 +141,11 @@ Polymer({
       observer: 'automationChanged',
     },
 
+    creatingNew: {
+      type: Boolean,
+      observer: 'creatingNewChanged',
+    },
+
     name: {
       type: String,
       computed: 'computeName(automation)'
@@ -152,7 +157,7 @@ Polymer({
     },
   },
 
-  attached: function () {
+  created: function () {
     this.configChanged = this.configChanged.bind(this);
   },
 
@@ -194,6 +199,23 @@ Polymer({
       }.bind(this));
   },
 
+  creatingNewChanged: function (newVal) {
+    if (!newVal) {
+      return;
+    }
+    this.dirty = false;
+    this.config = {
+      alias: 'New Automation',
+      trigger: [
+        { platform: 'state' },
+      ],
+      action: [
+        { service: '' },
+      ],
+    };
+    this._updateComponent();
+  },
+
   isWideChanged: function () {
     if (this.config === null) return;
     this._updateComponent();
@@ -218,10 +240,16 @@ Polymer({
   },
 
   saveAutomation: function () {
+    var id = this.creatingNew ? '' + Date.now() : this.automation.attributes.id;
     this.hass.callApi(
-      'post', 'config/automation/config/' + this.automation.attributes.id,
+      'post', 'config/automation/config/' + id, this.config).then(function () {
-      this.config).then(function () {
         this.dirty = false;
+
+        if (this.creatingNew) {
+          this.fire('hass-automation-picked', {
+            id: id,
+          });
+        }
       }.bind(this), function (errors) {
         this.errors = errors.body.message;
         throw errors;

panels/automation/ha-automation-picker.html

@@ -5,6 +5,7 @@
 <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-fab/paper-fab.html">
 
 <dom-module id="ha-automation-picker">
   <template>
@@ -31,6 +32,18 @@
       paper-item {
         cursor: pointer;
       }
+
+      paper-fab {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 1;
+      }
+
+      paper-fab[is-wide] {
+        bottom: 24px;
+        right: 24px;
+      }
     </style>
 
     <app-header-layout has-scrolling-region>
@@ -64,6 +77,13 @@
             </paper-item>
           </template>
         </paper-card>
+
+        <paper-fab
+          is-wide$='[[isWide]]'
+          icon='mdi:plus'
+          title='Add Automation'
+          on-tap='addAutomation'
+        ></paper-fab>
       </div>
     </app-header-layout>
 
@@ -91,6 +111,10 @@ Polymer({
     automations: {
       type: Array,
     },
+
+    isWide: {
+      type: Boolean,
+    },
   },
 
   automationTapped: function (ev) {
@@ -99,6 +123,10 @@ Polymer({
     });
   },
 
+  addAutomation: function () {
+    this.fire('hass-create-automation');
+  },
+
   computeName: function (automation) {
     return window.hassUtil.computeStateName(automation);
   },

panels/automation/ha-panel-automation.html

@@ -18,17 +18,19 @@
     <iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
     </iron-media-query>
 
-    <template is='dom-if' if='[[!automation]]'>
+    <template is='dom-if' if='[[!showEditor]]'>
       <ha-automation-picker
         automations='[[automations]]'
+        is-wide='[[isWide]]'
       ></ha-automation-picker>
     </template>
 
-    <template is='dom-if' if='[[automation]]' restamp>
+    <template is='dom-if' if='[[showEditor]]' restamp>
       <ha-automation-editor
         hass='[[hass]]'
         automation='[[automation]]'
         is-wide='[[isWide]]'
+        creating-new='[[creatingNew]]'
       ></ha-automation-editor>
     </template>
   </template>
@@ -64,7 +66,7 @@ Polymer({
 
     automation: {
       type: Object,
-      computed: 'computeAutomation(automations, automationId)',
+      computed: 'computeAutomation(automations, automationId, creatingNew)',
     },
 
     wide: {
@@ -79,17 +81,31 @@ Polymer({
       type: Boolean,
       computed: 'computeIsWide(showMenu, wideSidebar, wide)'
     },
+
+    creatingNew: {
+      type: Boolean,
+      value: false,
+    },
+
+    showEditor: {
+      type: Boolean,
+      computed: 'computeShowEditor(automation, creatingNew)',
+    }
   },
 
   listeners: {
     'hass-automation-picked': 'automationPicked',
+    'hass-create-automation': 'createAutomation',
   },
 
   computeIsWide: function (showMenu, wideSidebar, wide) {
     return showMenu ? wideSidebar : wide;
   },
 
-  computeAutomation: function (automations, automationId) {
+  computeAutomation: function (automations, automationId, creatingNew) {
+    if (creatingNew) {
+      return null;
+    }
     for (var i = 0; i < automations.length; i++) {
       if (automations[i].attributes.id === automationId) {
         return automations[i];
@@ -126,8 +142,19 @@ Polymer({
     });
   },
 
+  computeShowEditor: function (automation, creatingNew) {
+    return creatingNew || automation;
+  },
+
   automationPicked: function (ev) {
     this.automationId = ev.detail.id;
+    if (this.creatingNew) {
+      this.creatingNew = false;
     }
+  },
+
+  createAutomation: function () {
+    this.creatingNew = true;
+  },
 });
 </script>