From c3645e463ed1924ec28ae3eeaff54a1391e45567 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 17 May 2015 23:09:25 -0700
Subject: [PATCH] Polymer .9: convert state cards

---
 .../cards/state-card-configurator.html        | 24 +++++--
 .../polymer/cards/state-card-content.html     | 70 +++++++++----------
 .../polymer/cards/state-card-scene.html       | 36 ++++++----
 .../polymer/cards/state-card-thermostat.html  | 41 +++++++----
 .../polymer/cards/state-card-toggle.html      | 55 +++++++++------
 .../polymer/layouts/partial-states.html       |  4 +-
 .../polymer/resources/home-assistant-js.html  |  4 +-
 7 files changed, 137 insertions(+), 97 deletions(-)

diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
index 195a9cb1109..ed44ca50973 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-configurator.html
@@ -3,13 +3,27 @@
 <link rel="import" href="./state-card-display.html">
 <link rel="import" href="../components/state-info.html">
 
-<polymer-element name="state-card-configurator" attributes="stateObj" noscript>
+<dom-module is="state-card-configurator">
   <template>
-    <state-card-display stateObj="{{stateObj}}"></state-card-display>
+    <state-card-display state-obj="[[stateObj]]"></state-card-display>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
-    <template if="{{stateObj.attributes.description_image}}">
-      <img hidden src="{{stateObj.attributes.description_image}}" />
+    <template if="[[stateObj.attributes.description_image]]">
+      <img hidden src="[[stateObj.attributes.description_image]]" />
     </template>
   </template>
-</polymer-element>
+</dom-module>
+
+<script>
+(function() {
+  Polymer({
+    is: 'state-card-configurator',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+  });
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
index b24f143f0de..6c1716ad361 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-content.html
@@ -1,10 +1,10 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 
 <link rel="import" href="state-card-display.html">
-<!-- <link rel="import" href="state-card-toggle.html">
+<link rel="import" href="state-card-toggle.html">
 <link rel="import" href="state-card-thermostat.html">
 <link rel="import" href="state-card-configurator.html">
-<link rel="import" href="state-card-scene.html"> -->
+<link rel="import" href="state-card-scene.html">
 
 <dom-module is="state-card-content">
   <style>
@@ -12,50 +12,46 @@
       display: block;
     }
   </style>
-  <template>
-    <state-card-display state-obj="[[stateObj]]"></state-card-display>
-    <!-- <div id='cardContainer'></div> -->
-  </template>
 </dom-module>
 
 <script>
-Polymer({
-  is: 'state-card-content',
+(function() {
+  var uiUtil = window.hass.uiUtil;
 
-  properties: {
-    stateObj: {
-      type: Object,
-      value: {},
-      observe: 'stateObjChanged',
-    }
-  },
+  Polymer({
+    is: 'state-card-content',
 
-  stateObjChanged: function(oldVal, newVal) {
-    console.log('stateObjChanged');
-    return;
-    var cardContainer = this.$.cardContainer;
-
-    if (!newVal) {
-      if (cardContainer.lastChild) {
-        cardContainer.removeChild(cardContainer.lastChild);
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
       }
-      return;
-    }
+    },
 
-    if (!oldVal || oldVal.cardType != newVal.cardType) {
-      if (cardContainer.lastChild) {
-        cardContainer.removeChild(cardContainer.lastChild);
+    stateObjChanged: function(newVal, oldVal) {
+      var root = Polymer.dom(this);
+
+      if (!newVal) {
+        if (root.lastChild) {
+          root.removeChild(root.lastChild);
+        }
+        return;
       }
 
-      var stateCard = document.createElement("state-card-" + newVal.cardType);
-      stateCard.stateObj = newVal;
-      cardContainer.appendChild(stateCard);
+      var newCardType = uiUtil.stateCardType(newVal);
 
-    } else {
+      if (!oldVal || uiUtil.stateCardType(oldVal) != newCardType) {
+        if (root.lastChild) {
+          root.removeChild(root.lastChild);
+        }
 
-      cardContainer.lastChild.stateObj = newVal;
-
-    }
-  },
-});
+        var stateCard = document.createElement("state-card-" + newCardType);
+        stateCard.stateObj = newVal;
+        root.appendChild(stateCard);
+      } else {
+        root.lastChild.stateObj = newVal;
+      }
+    },
+  });
+})();
 </script>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-scene.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-scene.html
index 4f2a1403e09..051293eb4d2 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-scene.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-scene.html
@@ -3,25 +3,37 @@
 <link rel="import" href="./state-card-display.html">
 <link rel="import" href="./state-card-toggle.html">
 
-<polymer-element name="state-card-scene" attributes="stateObj">
+<dom-module is="state-card-scene">
   <template>
-    <template if={{allowToggle}}>
-      <state-card-toggle stateObj="{{stateObj}}"></state-card-toggle>
+    <template is='dom-if' if=[[allowToggle]]>
+      <state-card-toggle state-obj="[[stateObj]]"></state-card-toggle>
     </template>
-    <template if={{!allowToggle}}>
-      <state-card-display stateObj="{{stateObj}}"></state-card-display>
+    <template is='dom-if' if=[[!allowToggle]]>
+      <state-card-display state-obj="[[stateObj]]"></state-card-display>
     </template>
   </template>
-  <script>
+</dom-module>
+
+<script>
 (function() {
   Polymer({
-    allowToggle: false,
+    is: 'state-card-scene',
 
-    stateObjChanged: function(oldVal, newVal) {
-      this.allowToggle = newVal.state === 'off' ||
-                         newVal.attributes.active_requested;
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+
+      allowToggle: {
+        type: Boolean,
+        value: false,
+        computed: 'computeAllowToggle(stateObj)',
+      },
+    },
+
+    computeAllowToggle: function(stateObj) {
+      return stateObj.state === 'off' || stateObj.attributes.active_requested;
     },
   });
 })();
-  </script>
-</polymer-element>
+</script>
\ No newline at end of file
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-thermostat.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-thermostat.html
index 63c6708ce67..0625d0bf536 100644
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-thermostat.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-thermostat.html
@@ -2,8 +2,7 @@
 
 <link rel="import" href="../components/state-info.html">
 
-<polymer-element name="state-card-thermostat" attributes="stateObj api">
-<template>
+<dom-module is="state-card-thermostat">
   <style>
   .state {
     margin-left: 16px;
@@ -21,21 +20,33 @@
       margin-top: -2px;
   }
   </style>
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <div class='state'>
+        <div class='target'>[[stateObj.stateDisplay]]</div>
 
-  <div horizontal justified layout> 
-    <state-info stateObj="{{stateObj}}"></state-info>
-    <div class='state'>
-      <div class='target'>
-        {{stateObj.stateDisplay}}
-      </div>
-
-      <div class='current'>
-        Currently: {{stateObj.attributes.current_temperature}} {{stateObj.attributes.unit_of_measurement}}
+        <div class='current'>
+          <span>Currently: </span>
+          <span>[[stateObj.attributes.current_temperature]]</span>
+          <span> </span>
+          <span>[[stateObj.attributes.unit_of_measurement]]</span>
+        </div>
       </div>
     </div>
-  </div>
-</template>
+  </template>
+</dom-module>
+
 <script>
-Polymer({});
+(function() {
+  Polymer({
+    is: 'state-card-thermostat',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+  });
+})();
 </script>
-</polymer-element>
diff --git a/homeassistant/components/frontend/www_static/polymer/cards/state-card-toggle.html b/homeassistant/components/frontend/www_static/polymer/cards/state-card-toggle.html
index fc4eb895e23..44635db0d8c 100755
--- a/homeassistant/components/frontend/www_static/polymer/cards/state-card-toggle.html
+++ b/homeassistant/components/frontend/www_static/polymer/cards/state-card-toggle.html
@@ -1,36 +1,45 @@
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/paper-toggle-button/paper-toggle-button.html">
-<link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="../components/state-info.html">
 
-<polymer-element name="state-card-toggle" attributes="stateObj">
+<dom-module is="state-card-toggle">
   <template>
-    <core-style ref='ha-paper-toggle'></core-style>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
 
-    <div horizontal justified layout>      
-      <state-info flex stateObj="{{stateObj}}"></state-info>
-
-      <paper-toggle-button self-center
-        checked="{{toggleChecked}}"
-        on-change="{{toggleChanged}}"
-        on-click="{{toggleClicked}}">
+      <paper-toggle-button class='self-center'
+        checked="[[toggleChecked]]"
+        on-change="toggleChanged"
+        on-click="toggleClicked">
       </paper-toggle-button>
     </div>
 
   </template>
-  <script>
+</dom-module>
+
+<script>
+(function() {
   var serviceActions = window.hass.serviceActions;
 
   Polymer({
-    toggleChecked: false,
+    is: 'state-card-toggle',
 
-    observe: {
-      'stateObj.state': 'stateChanged'
+    properties: {
+      stateObj: {
+        type: Object,
+        observer: 'stateObjChanged',
+      },
+
+      toggleChecked: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     ready: function() {
       this.forceStateChange = this.forceStateChange.bind(this);
+      this.forceStateChange();
     },
 
     toggleClicked: function(ev) {
@@ -47,22 +56,22 @@
       }
     },
 
-    stateObjChanged: function(oldVal, newVal) {
+    stateObjChanged: function(newVal) {
       if (newVal) {
-        this.stateChanged(null, newVal.state);
+        this.updateToggle(newVal);
       }
     },
 
-    stateChanged: function(oldVal, newVal) {
-      this.toggleChecked = newVal === "on";
+    updateToggle: function(stateObj) {
+      this.toggleChecked = stateObj && stateObj.state === "on";
     },
 
     forceStateChange: function() {
-      this.stateChanged(null, this.stateObj.state);
+      this.updateToggle(this.stateObj);
     },
 
     turn_on: function() {
-      // We call stateChanged after a successful call to re-sync the toggle
+      // We call updateToggle after a successful call to re-sync the toggle
       // with the state. It will be out of sync if our service call did not
       // result in the entity to be turned on. Since the state is not changing,
       // the resync is not called automatic.
@@ -70,12 +79,12 @@
     },
 
     turn_off: function() {
-      // We call stateChanged after a successful call to re-sync the toggle
+      // We call updateToggle after a successful call to re-sync the toggle
       // with the state. It will be out of sync if our service call did not
       // result in the entity to be turned on. Since the state is not changing,
       // the resync is not called automatic.
       serviceActions.callTurnOff(this.stateObj.entityId).then(this.forceStateChange);
     },
   });
-  </script>
-</polymer-element>
+})();
+</script>
diff --git a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
index 5bc632dc981..6f937b5ed59 100644
--- a/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
+++ b/homeassistant/components/frontend/www_static/polymer/layouts/partial-states.html
@@ -34,8 +34,6 @@
   </style>
 
   <template>
-    <!-- <core-style ref="ha-animations"></core-style> -->
-
     <partial-base narrow="[[narrow]]" togglePanel="[[togglePanel]]">
       <span header-title>{{headerTitle}}</span>
 
@@ -207,7 +205,7 @@
           return !(state.domain in uiConstants.STATE_FILTERS);
         });
       }
-      
+
       this.states = states.toArray().filter(
               function (el) {return !el.attributes.hidden;});
     },
diff --git a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
index b44d49f14f5..e12d46ecb6d 100644
--- a/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
+++ b/homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html
@@ -12,7 +12,7 @@
       // how to render the card for this state
       cardType: {
         get: function() {
-          console.warning('Deprecated method. Please use hass.uiUtil.stateCardType');
+          console.warn('Deprecated method. Please use hass.uiUtil.stateCardType');
           return window.hass.uiUtil.stateCardType(this);
         }
       },
@@ -20,7 +20,7 @@
       // how to render the more info of this state
       moreInfoType: {
         get: function() {
-          console.warning('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
+          console.warn('Deprecated method. Please use hass.uiUtil.stateMoreInfoType');
           return window.hass.uiUtil.stateMoreInfoType(this);
         }
       },