From 0d4c1be2f89843dc42fca0000f8952d523399c8f Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 9 Jun 2016 23:25:38 -0700
Subject: [PATCH] Clean up state summaries

---
 .../state-card-configurator.html              | 19 ++++-
 src/state-summary/state-card-configurator.js  | 19 -----
 src/state-summary/state-card-content.js       | 13 +--
 src/state-summary/state-card-display.html     | 17 ++++
 src/state-summary/state-card-display.js       | 18 -----
 src/state-summary/state-card-hvac.html        | 17 ++++
 src/state-summary/state-card-hvac.js          | 18 -----
 .../state-card-input_select.html              | 81 ++++++++++++++++---
 src/state-summary/state-card-input_select.js  | 46 -----------
 .../state-card-input_slider.html              | 59 +++++++++++++-
 src/state-summary/state-card-input_slider.js  | 50 ------------
 .../state-card-media_player.html              | 54 +++++++++++++
 src/state-summary/state-card-media_player.js  | 56 -------------
 .../state-card-rollershutter.html             | 44 ++++++++++
 src/state-summary/state-card-rollershutter.js | 45 -----------
 src/state-summary/state-card-scene.html       | 26 ++++++
 src/state-summary/state-card-scene.js         | 27 -------
 src/state-summary/state-card-script.html      | 22 +++++
 src/state-summary/state-card-script.js        | 24 ------
 src/state-summary/state-card-thermostat.html  | 21 +++++
 src/state-summary/state-card-thermostat.js    | 22 -----
 src/state-summary/state-card-toggle.html      | 17 ++++
 src/state-summary/state-card-toggle.js        | 19 -----
 src/state-summary/state-card-weblink.html     | 30 +++++++
 src/state-summary/state-card-weblink.js       | 31 -------
 25 files changed, 392 insertions(+), 403 deletions(-)
 delete mode 100644 src/state-summary/state-card-configurator.js
 delete mode 100644 src/state-summary/state-card-display.js
 delete mode 100644 src/state-summary/state-card-hvac.js
 delete mode 100644 src/state-summary/state-card-input_select.js
 delete mode 100644 src/state-summary/state-card-input_slider.js
 delete mode 100644 src/state-summary/state-card-media_player.js
 delete mode 100644 src/state-summary/state-card-rollershutter.js
 delete mode 100644 src/state-summary/state-card-scene.js
 delete mode 100644 src/state-summary/state-card-script.js
 delete mode 100644 src/state-summary/state-card-thermostat.js
 delete mode 100644 src/state-summary/state-card-toggle.js
 delete mode 100644 src/state-summary/state-card-weblink.js

diff --git a/src/state-summary/state-card-configurator.html b/src/state-summary/state-card-configurator.html
index 0ca0ba85b6..c13fc380be 100644
--- a/src/state-summary/state-card-configurator.html
+++ b/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>
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
deleted file mode 100644
index c3bcae2559..0000000000
--- a/src/state-summary/state-card-configurator.js
+++ /dev/null
@@ -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,
-    },
-  },
-});
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 7bbcab32b8..9e38b622c4 100644
--- a/src/state-summary/state-card-content.js
+++ b/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 './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';
+import '../components/state-info';
 
 export default new Polymer({
   is: 'state-card-content',
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index c9358d4af1..a3f105b9bc 100755
--- a/src/state-summary/state-card-display.html
+++ b/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>
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
deleted file mode 100644
index 5ea41acb66..0000000000
--- a/src/state-summary/state-card-display.js
+++ /dev/null
@@ -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,
-    },
-  },
-});
diff --git a/src/state-summary/state-card-hvac.html b/src/state-summary/state-card-hvac.html
index 51bbfaa856..57233dd5b0 100755
--- a/src/state-summary/state-card-hvac.html
+++ b/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>
diff --git a/src/state-summary/state-card-hvac.js b/src/state-summary/state-card-hvac.js
deleted file mode 100644
index 9354bcec3e..0000000000
--- a/src/state-summary/state-card-hvac.js
+++ /dev/null
@@ -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,
-    },
-  },
-});
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index 16133c2837..638e87e551 100644
--- a/src/state-summary/state-card-input_select.html
+++ b/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-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
-        <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>
+    <state-badge state-obj='[[stateObj]]'></state-badge>
+    <paper-dropdown-menu
+      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>
   </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>
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
deleted file mode 100644
index f560babb27..0000000000
--- a/src/state-summary/state-card-input_select.js
+++ /dev/null
@@ -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();
-  },
-});
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
index 44919804b4..90743ae339 100644
--- a/src/state-summary/state-card-input_slider.html
+++ b/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>
diff --git a/src/state-summary/state-card-input_slider.js b/src/state-summary/state-card-input_slider.js
deleted file mode 100644
index 530d5338f8..0000000000
--- a/src/state-summary/state-card-input_slider.js
+++ /dev/null
@@ -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,
-    });
-  },
-});
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index d640f8e50c..eec9d86752 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/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>
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
deleted file mode 100644
index a978c5025e..0000000000
--- a/src/state-summary/state-card-media_player.js
+++ /dev/null
@@ -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 '';
-  },
-});
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index 5ef02c91df..6c3be7e8a9 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/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>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
deleted file mode 100644
index 3a207956e7..0000000000
--- a/src/state-summary/state-card-rollershutter.js
+++ /dev/null
@@ -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 });
-  },
-});
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index e35052fe20..2fef470105 100644
--- a/src/state-summary/state-card-scene.html
+++ b/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>
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
deleted file mode 100644
index e943152fa9..0000000000
--- a/src/state-summary/state-card-scene.js
+++ /dev/null
@@ -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);
-  },
-});
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index 1258123b61..4899108cbc 100644
--- a/src/state-summary/state-card-script.html
+++ b/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>
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
deleted file mode 100644
index 4f639e70c6..0000000000
--- a/src/state-summary/state-card-script.js
+++ /dev/null
@@ -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);
-  },
-});
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index d481808670..5b4b3621a4 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/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>
diff --git a/src/state-summary/state-card-thermostat.js b/src/state-summary/state-card-thermostat.js
deleted file mode 100644
index d01c6d18bb..0000000000
--- a/src/state-summary/state-card-thermostat.js
+++ /dev/null
@@ -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}`;
-  },
-});
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 775ad5608f..9794698474 100755
--- a/src/state-summary/state-card-toggle.html
+++ b/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>
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
deleted file mode 100644
index 8495075697..0000000000
--- a/src/state-summary/state-card-toggle.js
+++ /dev/null
@@ -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,
-    },
-  },
-});
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index e0bc0405c0..e6868246f7 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/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>
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
deleted file mode 100644
index 1f9c1130dd..0000000000
--- a/src/state-summary/state-card-weblink.js
+++ /dev/null
@@ -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');
-  },
-});