Clean up state summaries

src/state-summary/state-card-configurator.html

@@ -3,8 +3,6 @@
 
 <link rel="import" href="../components/state-info.html">
 
-<link rel='import' href='../components/state-info.html'>
-
 <dom-module id='state-card-configurator'>
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
@@ -28,3 +26,20 @@
     </template>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-configurator',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+});
+</script>

src/state-summary/state-card-configurator.js

@@ -1,19 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-import './state-card-display';
-
-export default new Polymer({
-  is: 'state-card-configurator',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});

src/state-summary/state-card-content.js

@@ -3,18 +3,7 @@ import Polymer from '../polymer';
 import stateCardType from '../util/state-card-type';
 import dynamicContentUpdater from '../util/dynamic-content-updater';
 
-import './state-card-configurator';
+import '../components/state-info';
-import './state-card-display';
-import './state-card-hvac';
-import './state-card-input_select';
-import './state-card-input_slider';
-import './state-card-media_player';
-import './state-card-scene';
-import './state-card-script';
-import './state-card-rollershutter';
-import './state-card-thermostat';
-import './state-card-toggle';
-import './state-card-weblink';
 
 export default new Polymer({
   is: 'state-card-content',

src/state-summary/state-card-display.html

@@ -22,3 +22,20 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-display',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+});
+</script>

src/state-summary/state-card-display.js

@@ -1,18 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-display',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});

src/state-summary/state-card-hvac.html

@@ -23,3 +23,20 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-hvac',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+});
+</script>

src/state-summary/state-card-hvac.js

@@ -1,18 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-hvac',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});

src/state-summary/state-card-input_select.html

@@ -1,26 +1,81 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 
-<link rel="import" href="../components/state-info.html">
+<link rel="import" href="../components/entity/state-badge.html">
 
 <dom-module id="state-card-input_select">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
+  :host {
+    display: block;
+  }
+
+  state-badge {
+    float: left;
+    margin-top: 10px;
+  }
+
   paper-dropdown-menu {
-    margin-left: 16px;
+    display: block;
+    margin-left: 53px;
   }
   </style>
 
   <template>
-    <div class='horizontal justified layout'>
+    <state-badge state-obj='[[stateObj]]'></state-badge>
-      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+    <paper-dropdown-menu
-      <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
+      on-tap='stopPropagation'
+      selected-item-label='[[selectedOption]]'
+      label='[[stateObj.entityDisplay]]'>
       <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
         <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
           <paper-item>[[item]]</paper-item>
         </template>
       </paper-menu>
     </paper-dropdown-menu>
-    </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-input_select',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+
+    selectedOption: {
+      type: String,
+      observer: 'selectedOptionChanged',
+    },
+  },
+
+  computeSelected: function (stateObj) {
+    return stateObj.attributes.options.indexOf(stateObj.state);
+  },
+
+  selectedOptionChanged: function (option) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (option === '' || option === this.stateObj.state) {
+      return;
+    }
+    this.hass.serviceActions.callService('input_select', 'select_option', {
+      option,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+
+  stopPropagation: function (ev) {
+    ev.stopPropagation();
+  },
+});
+</script>

src/state-summary/state-card-input_select.js

@@ -1,46 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-input_select',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    selectedOption: {
-      type: String,
-      observer: 'selectedOptionChanged',
-    },
-  },
-
-  computeSelected(stateObj) {
-    return stateObj.attributes.options.indexOf(stateObj.state);
-  },
-
-  selectedOptionChanged(option) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (option === '' || option === this.stateObj.state) {
-      return;
-    }
-    this.hass.serviceActions.callService('input_select', 'select_option', {
-      option,
-      entity_id: this.stateObj.entityId,
-    });
-  },
-
-  stopPropagation(ev) {
-    ev.stopPropagation();
-  },
-});

src/state-summary/state-card-input_slider.html

@@ -14,8 +14,65 @@
   <template>
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin on-change='selectedValueChanged'>
+      <paper-slider
+        min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin
+        on-change='selectedValueChanged' on-tap='stopPropagation'>
       </paper-slider>
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-input_slider',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+      observer: 'stateObjectChanged',
+    },
+    min: {
+      type: Number,
+    },
+    max: {
+      type: Number,
+    },
+    step: {
+      type: Number,
+    },
+    value: {
+      type: Number,
+    },
+  },
+
+  stateObjectChanged: function (newVal) {
+    this.value = Number(newVal.state);
+    this.min = Number(newVal.attributes.min);
+    this.max = Number(newVal.attributes.max);
+    this.step = Number(newVal.attributes.step);
+  },
+
+  selectedValueChanged: function () {
+    if (this.value === Number(this.stateObj.state)) {
+      return;
+    }
+    this.hass.serviceActions.callService('input_slider', 'select_value', {
+      value: this.value,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+
+  stopPropagation: function (ev) {
+    ev.stopPropagation();
+  },
+});
+</script>

src/state-summary/state-card-input_slider.js

@@ -1,50 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-input_slider',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-      observer: 'stateObjectChanged',
-    },
-    min: {
-      type: Number,
-    },
-    max: {
-      type: Number,
-    },
-    step: {
-      type: Number,
-    },
-    value: {
-      type: Number,
-    },
-  },
-  stateObjectChanged(newVal) {
-    this.value = Number(newVal.state);
-    this.min = Number(newVal.attributes.min);
-    this.max = Number(newVal.attributes.max);
-    this.step = Number(newVal.attributes.step);
-  },
-  selectedValueChanged() {
-    if (this.value === Number(this.stateObj.state)) {
-      return;
-    }
-    this.hass.serviceActions.callService('input_slider', 'select_value', {
-      value: this.value,
-      entity_id: this.stateObj.entityId,
-    });
-  },
-});

src/state-summary/state-card-media_player.html

@@ -41,3 +41,57 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  PLAYING_STATES: ['playing', 'paused'],
+  is: 'state-card-media_player',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+
+    isPlaying: {
+      type: Boolean,
+      computed: 'computeIsPlaying(stateObj)',
+    },
+
+    secondaryText: {
+      type: String,
+      computed: 'computeSecondaryText(stateObj)',
+    },
+  },
+
+  computeIsPlaying: function (stateObj) {
+    return this.PLAYING_STATES.indexOf(stateObj.state) !== -1;
+  },
+
+  computePrimaryText: function (stateObj, isPlaying) {
+    return isPlaying ? stateObj.attributes.media_title : stateObj.stateDisplay;
+  },
+
+  computeSecondaryText: function (stateObj) {
+    var text;
+
+    if (stateObj.attributes.media_content_type === 'music') {
+      return stateObj.attributes.media_artist;
+    } else if (stateObj.attributes.media_content_type === 'tvshow') {
+      text = stateObj.attributes.media_series_title;
+
+      if (stateObj.attributes.media_season && stateObj.attributes.media_episode) {
+        text += ' S' + stateObj.attributes.media_season + 'E' + stateObj.attributes.media_episode;
+      }
+      return text;
+    } else if (stateObj.attributes.app_name) {
+      return stateObj.attributes.app_name;
+    }
+    return '';
+  },
+});
+</script>

src/state-summary/state-card-media_player.js

@@ -1,56 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-const PLAYING_STATES = ['playing', 'paused'];
-
-export default new Polymer({
-  is: 'state-card-media_player',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    isPlaying: {
-      type: Boolean,
-      computed: 'computeIsPlaying(stateObj)',
-    },
-
-    secondaryText: {
-      type: String,
-      computed: 'computeSecondaryText(stateObj)',
-    },
-  },
-
-  computeIsPlaying(stateObj) {
-    return PLAYING_STATES.indexOf(stateObj.state) !== -1;
-  },
-
-  computePrimaryText(stateObj, isPlaying) {
-    return isPlaying ? stateObj.attributes.media_title : stateObj.stateDisplay;
-  },
-
-  computeSecondaryText(stateObj) {
-    let text;
-
-    if (stateObj.attributes.media_content_type === 'music') {
-      return stateObj.attributes.media_artist;
-    } else if (stateObj.attributes.media_content_type === 'tvshow') {
-      text = stateObj.attributes.media_series_title;
-
-      if (stateObj.attributes.media_season && stateObj.attributes.media_episode) {
-        text += ` S${stateObj.attributes.media_season}E${stateObj.attributes.media_episode}`;
-      }
-      return text;
-    } else if (stateObj.attributes.app_name) {
-      return stateObj.attributes.app_name;
-    }
-    return '';
-  },
-});

src/state-summary/state-card-rollershutter.html

@@ -30,3 +30,47 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-rollershutter',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeIsFullyOpen: function (stateObj) {
+    return stateObj.attributes.current_position === 100;
+  },
+
+  computeIsFullyClosed: function (stateObj) {
+    return stateObj.attributes.current_position === 0;
+  },
+
+  onMoveUpTap: function () {
+    this.hass.serviceActions.callService('rollershutter', 'move_up',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onMoveDownTap: function () {
+    this.hass.serviceActions.callService('rollershutter', 'move_down',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onStopTap: function () {
+    this.hass.serviceActions.callService('rollershutter', 'stop',
+                                         { entity_id: this.stateObj.entityId });
+  },
+});
+</script>

src/state-summary/state-card-rollershutter.js

@@ -1,45 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-rollershutter',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  computeIsFullyOpen(stateObj) {
-    return stateObj.attributes.current_position === 100;
-  },
-
-  computeIsFullyClosed(stateObj) {
-    return stateObj.attributes.current_position === 0;
-  },
-
-  onMoveUpTap() {
-    this.hass.serviceActions.callService('rollershutter', 'move_up',
-                                         { entity_id: this.stateObj.entityId });
-  },
-
-  onMoveDownTap() {
-    this.hass.serviceActions.callService('rollershutter', 'move_down',
-                                         { entity_id: this.stateObj.entityId });
-  },
-
-  onStopTap() {
-    this.hass.serviceActions.callService('rollershutter', 'stop',
-                                         { entity_id: this.stateObj.entityId });
-  },
-});

src/state-summary/state-card-scene.html

@@ -21,3 +21,29 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-scene',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  activateScene: function (ev) {
+    ev.stopPropagation();
+    this.hass.serviceActions.callTurnOn(this.stateObj.entityId);
+  },
+});
+</script>

src/state-summary/state-card-scene.js

@@ -1,27 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info.js';
-
-export default new Polymer({
-  is: 'state-card-scene',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  activateScene(ev) {
-    ev.stopPropagation();
-    this.hass.serviceActions.callTurnOn(this.stateObj.entityId);
-  },
-});

src/state-summary/state-card-script.html

@@ -27,3 +27,25 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-script',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  fireScript: function (ev) {
+    ev.stopPropagation();
+    this.hass.serviceActions.callTurnOn(this.stateObj.entityId);
+  },
+});
+</script>

src/state-summary/state-card-script.js

@@ -1,24 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-import '../components/entity/ha-entity-toggle';
-
-export default new Polymer({
-  is: 'state-card-script',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  fireScript(ev) {
-    ev.stopPropagation();
-    this.hass.serviceActions.callTurnOn(this.stateObj.entityId);
-  },
-});

src/state-summary/state-card-thermostat.html

@@ -39,3 +39,24 @@
     </div>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-thermostat',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeTargetTemperature: function (stateObj) {
+    return stateObj.attributes.temperature + ' ' + stateObj.attributes.unit_of_measurement;
+  },
+});
+</script>

src/state-summary/state-card-thermostat.js

@@ -1,22 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-thermostat',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  computeTargetTemperature(stateObj) {
-    return `${stateObj.attributes.temperature} ${stateObj.attributes.unit_of_measurement}`;
-  },
-});

src/state-summary/state-card-toggle.html

@@ -18,3 +18,20 @@
 
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-toggle',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+});
+</script>

src/state-summary/state-card-toggle.js

@@ -1,19 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-import '../components/entity/ha-entity-toggle';
-
-export default new Polymer({
-  is: 'state-card-toggle',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-});

src/state-summary/state-card-weblink.html

@@ -23,3 +23,33 @@
     <a href='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-weblink',
+
+  properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap: function (ev) {
+    ev.stopPropagation();
+    if (ev.target === this.$.link) {
+      // Only open window if we clicked on card but not the link
+      return;
+    }
+    window.open(this.stateObj.state, '_blank');
+  },
+});
+</script>

src/state-summary/state-card-weblink.js

@@ -1,31 +0,0 @@
-import Polymer from '../polymer';
-
-import '../components/state-info';
-
-export default new Polymer({
-  is: 'state-card-weblink',
-
-  properties: {
-    inDialog: {
-      type: Boolean,
-      value: false,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  listeners: {
-    tap: 'onTap',
-  },
-
-  onTap(ev) {
-    ev.stopPropagation();
-    if (ev.target === this.$.link) {
-      // Only open window if we clicked on card but not the link
-      return;
-    }
-    window.open(this.stateObj.state, '_blank');
-  },
-});