Improve ha-panel-dev-serivce.html (#130)

* Initial Commit

* Update dropdown variables

* Move available service list to a dropdown menu

* Fix dropdown width

* Add localstorage for panel state

* clean up

* Remove dropdown in favor of combo boxes

* travis fix

* Fix travis

* Fix Travis

* Fix combo box and remove neon-animations

* Remove styling for sidebar.

* Set max width on ha-form

* Increase max-width to 500px

* Update ha-panel-dev-service.html

bower.json

@@ -18,6 +18,8 @@
     "paper-scroll-header-panel": "~1.0.16",
     "app-layout": "~0.10.2",
     "fecha": "~2.2.0",
-    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.2"
+    "paper-range-slider": "IftachSadeh/paper-range-slider#~0.1.2",
+    "app-storage": "PolymerElements/app-storage#~0.9.7",
+    "vaadin-combo-box": "vaadin/vaadin-combo-box#~1.1.5"
   }
 }

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

@@ -1,21 +1,22 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
+<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-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="../../bower_components/paper-input/paper-textarea.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-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-header/app-header.html'>
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
+<link rel='import' href='../../bower_components/app-layout/app-toolbar/app-toolbar.html'>
+<link rel="import" href="../../bower_components/app-storage/app-localstorage/app-localstorage-document.html">
 
-<link rel="import" href="../../src/components/ha-menu-button.html">
+<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
-<link rel="import" href="../../src/resources/ha-style.html">
 
-<link rel="import" href="./services-list.html">
+<link rel='import' href='../../src/components/ha-menu-button.html'>
+<link rel='import' href='../../src/resources/ha-style.html'>
+<link rel='import' href='../../src/util/hass-behavior.html'>
 
-<dom-module id="ha-panel-dev-service">
+<dom-module id='ha-panel-dev-service'>
   <template>
-    <style include="iron-flex iron-positioning ha-style">
+    <style include='ha-style'>
       :host {
         background-color: white;
         -ms-user-select: initial;
@@ -29,6 +30,7 @@
 
       .ha-form {
         margin-right: 16px;
+        max-width: 500px;
       }
 
       .description {
@@ -49,26 +51,35 @@
         </app-toolbar>
       </app-header>
 
-      <div class$='[[computeFormClasses(narrow)]]'>
+      <app-localstorage-document
-        <div class='flex'>
+        key='panel-dev-service-state-domain'
-          <p>
+        data='{{domain}}'>
-            Call a service from a component.
+      </app-localstorage-document>
-          </p>
+      <app-localstorage-document
+        key='panel-dev-service-state-service'
+        data='{{service}}'>
+      </app-localstorage-document>
+      <app-localstorage-document
+        key='panel-dev-service-state-servicedata'
+        data='{{serviceData}}'>
+      </app-localstorage-document>
 
-          <div class='ha-form'>
+      <div class='content'>
-            <paper-input label="Domain" autofocus value='{{domain}}'></paper-input>
+        <p>
-            <paper-input label="Service" value='{{service}}'></paper-input>
+          Call a service from a component.
-            <paper-textarea label="Service Data (JSON, optional)" value='{{serviceData}}'></paper-textarea>
+
-            <paper-button on-tap='callService' raised>Call Service</paper-button>
+        </p>
-          </div>
+
-          <div class='description'>[[description]]</div>
+        <div class='ha-form'>
+          <vaadin-combo-box label='Domain' items='[[computeDomains(serviceDomains)]]' value='{{domain}}'></vaadin-combo-box>
+          <vaadin-combo-box label='Service' items='[[computeServices(serviceDomains, domain)]]' value='{{service}}'></vaadin-combo-box>
+          <paper-textarea label='Service Data (JSON, optional)' value='{{serviceData}}'></paper-textarea>
+          <paper-button on-tap='callService' raised>Call Service</paper-button>
         </div>
 
-        <div>
+        <div class='description'>[[description]]</div>
-          <div class='header'>Available services</div>
-          <services-list on-service-selected='serviceSelected' hass='[[hass]]'></services-list>
-        </div>
       </div>
+
     </app-header-layout>
   </template>
 </dom-module>
@@ -77,6 +88,8 @@
 Polymer({
   is: 'ha-panel-dev-service',
 
+  behaviors: [window.hassBehavior],
+
   properties: {
     hass: {
       type: Object,
@@ -95,11 +108,13 @@ Polymer({
     domain: {
       type: String,
       value: '',
+      observer: 'domainChanged',
     },
 
     service: {
       type: String,
       value: '',
+      observer: 'serviceChanged',
     },
 
     serviceData: {
@@ -111,6 +126,13 @@ Polymer({
       type: String,
       computed: 'computeDescription(hass, domain, service)',
     },
+
+    serviceDomains: {
+      type: Array,
+      bindNuclear: function (hass) {
+        return hass.serviceGetters.entityMap;
+      },
+    },
   },
 
   computeDescription: function (hass, domain, service) {
@@ -131,9 +153,32 @@ Polymer({
     ]);
   },
 
-  serviceSelected: function (ev) {
+  computeDomains: function (serviceDomains) {
-    this.domain = ev.detail.domain;
+    return serviceDomains
-    this.service = ev.detail.service;
+      .valueSeq()
+      .map(function (domain) { return domain.domain; })
+      .sort()
+      .toJS();
+  },
+
+  computeServices: function (serviceDomains, domain) {
+    if (domain) {
+      return serviceDomains
+        .get(domain)
+        .get('services')
+        .keySeq()
+        .toArray();
+    }
+    return '';
+  },
+
+  domainChanged: function () {
+    this.service = '';
+    this.serviceData = '';
+  },
+
+  serviceChanged: function () {
+    this.serviceData = '';
   },
 
   callService: function () {
@@ -149,10 +194,5 @@ Polymer({
 
     this.hass.serviceActions.callService(this.domain, this.service, serviceData);
   },
-
-  computeFormClasses: function (narrow) {
-    return narrow ?
-      'content fit' : 'content fit layout horizontal';
-  },
 });
 </script>

panels/dev-service/services-list.html

@@ -1,77 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../../src/util/hass-behavior.html">
-
-<dom-module id="services-list">
-  <template>
-    <style>
-      ul {
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        list-style: none;
-        line-height: 2em;
-      }
-
-      a {
-        color: var(--dark-primary-color);
-      }
-    </style>
-
-    <ul>
-      <template is='dom-repeat' items="[[computeDomains(serviceDomains)]]" as="domain">
-          <template is='dom-repeat' items="[[computeServices(serviceDomains, domain)]]" as="service">
-            <li><a href='#' on-click='serviceClicked'>
-              <span>[[domain]]</span>/<span>[[service]]</span>
-            </a></li>
-          </template>
-      </template>
-    </ul>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'services-list',
-
-  behaviors: [window.hassBehavior],
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    serviceDomains: {
-      type: Array,
-      bindNuclear: function (hass) {
-        return hass.serviceGetters.entityMap;
-      },
-    },
-  },
-
-  computeDomains: function (serviceDomains) {
-    return serviceDomains
-      .valueSeq()
-      .map(function (domain) { return domain.domain; })
-      .sort()
-      .toJS();
-  },
-
-  computeServices: function (serviceDomains, domain) {
-    return serviceDomains
-      .get(domain)
-      .get('services')
-      .keySeq()
-      .toArray();
-  },
-
-  serviceClicked: function (ev) {
-    ev.preventDefault();
-    this.fire(
-      'service-selected', { domain: ev.model.domain,
-                           service: ev.model.service });
-  },
-});
-</script>