Reorg into panels (#75)

panels/dev-event/ha-panel-dev-event.html

@@ -0,0 +1,115 @@
+<!--
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/paper-button/paper-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="./partial-base.html">
+-->
+<link rel="import" href="./events-list.html">
+
+<dom-module id="ha-panel-dev-event">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
+  <style>
+    .content {
+      @apply(--paper-font-body1);
+      margin-top: 64px;
+      padding: 24px;
+      background-color: white;
+      -ms-user-select: initial;
+      -webkit-user-select: initial;
+      -moz-user-select: initial;
+    }
+
+    .ha-form {
+      margin-right: 16px;
+    }
+
+    .header {
+      @apply(--paper-font-title);
+    }
+  </style>
+
+  <template>
+    <partial-base narrow="{{narrow}}" show-menu='[[showMenu]]'>
+      <span header-title>Events</span>
+
+      <div class$='[[computeFormClasses(narrow)]]'>
+        <div class='flex'>
+          <p>
+            Fire an event on the event bus.
+          </p>
+
+          <div class='ha-form'>
+            <paper-input label="Event Type" autofocus required value='{{eventType}}'></paper-input>
+            <paper-textarea label="Event Data (JSON, optional)" value='{{eventData}}'></paper-textarea>
+            <paper-button on-tap='fireEvent' raised>Fire Event</paper-button>
+          </div>
+        </div>
+
+        <div>
+          <div class='header'>Available Events</div>
+          <events-list on-event-selected='eventSelected' hass='[[hass]]'></event-list>
+        </div>
+      </div>
+    </partial-base>
+
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-panel-dev-event',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+      value: false,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    eventType: {
+      type: String,
+      value: '',
+    },
+
+    eventData: {
+      type: String,
+      value: '',
+    },
+  },
+
+  eventSelected: function (ev) {
+    this.eventType = ev.detail.eventType;
+  },
+
+  fireEvent: function () {
+    var eventData;
+
+    try {
+      eventData = this.eventData ? JSON.parse(this.eventData) : {};
+    } catch (err) {
+      /* eslint-disable no-alert */
+      alert('Error parsing JSON: ' + err);
+      /* eslint-enable no-alert */
+      return;
+    }
+
+    this.hass.eventActions.fireEvent(this.eventType, eventData);
+  },
+
+  computeFormClasses: function (narrow) {
+    return narrow ?
+      'content fit' : 'content fit layout horizontal';
+  },
+});
+</script>