From 56935cbc8a8fa0885d9ec0f50cd8b8c1a6155c68 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Sun, 1 Nov 2015 21:52:54 -0800
Subject: [PATCH] Add a state badge with support for icon attribute

---
 src/components/entity/ha-state-icon.html | 11 +++++++++++
 src/components/entity/ha-state-icon.js   | 17 ++++++++++++++++
 src/components/entity/state-badge.html   | 17 ++++++++--------
 src/components/entity/state-badge.js     |  2 +-
 src/util/default-icon.js                 |  1 +
 src/util/domain-icon.js                  |  6 ++++--
 src/util/state-icon.js                   | 25 ++++++++++++++++++++++++
 7 files changed, 67 insertions(+), 12 deletions(-)
 create mode 100644 src/components/entity/ha-state-icon.html
 create mode 100644 src/components/entity/ha-state-icon.js
 create mode 100644 src/util/default-icon.js
 create mode 100644 src/util/state-icon.js

diff --git a/src/components/entity/ha-state-icon.html b/src/components/entity/ha-state-icon.html
new file mode 100644
index 0000000000..2080c8af70
--- /dev/null
+++ b/src/components/entity/ha-state-icon.html
@@ -0,0 +1,11 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+
+<link rel="import" href="../../resources/home-assistant-icons.html">
+
+<dom-module id="ha-state-icon">
+  <template>
+    <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
+  </template>
+</dom-module>
diff --git a/src/components/entity/ha-state-icon.js b/src/components/entity/ha-state-icon.js
new file mode 100644
index 0000000000..fba64f972b
--- /dev/null
+++ b/src/components/entity/ha-state-icon.js
@@ -0,0 +1,17 @@
+import Polymer from '../../polymer';
+
+import stateIcon from '../../util/state-icon';
+
+export default new Polymer({
+  is: 'ha-state-icon',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeIcon(stateObj) {
+    return stateIcon(stateObj);
+  },
+});
diff --git a/src/components/entity/state-badge.html b/src/components/entity/state-badge.html
index acf7cdd55d..d99f55640c 100644
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@@ -1,7 +1,7 @@
 <link rel='import' href='../../../bower_components/polymer/polymer.html'>
 <link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
 
-<link rel='import' href='../domain-icon.html'>
+<link rel='import' href='./ha-state-icon.html'>
 
 <dom-module id='state-badge'>
   <style>
@@ -23,25 +23,24 @@
     border-radius: 50%;
   }
 
-  domain-icon {
+  ha-state-icon {
     margin: 0 auto;
     transition: color .3s ease-in-out;
   }
 
   /* Color the icon if light or sun is on */
-  domain-icon[data-domain=light][data-state=on],
-  domain-icon[data-domain=switch][data-state=on],
-  domain-icon[data-domain=sun][data-state=above_horizon] {
+  ha-state-icon[data-domain=light][data-state=on],
+  ha-state-icon[data-domain=switch][data-state=on],
+  ha-state-icon[data-domain=sun][data-state=above_horizon] {
     color: #DCC91F;
   }
   </style>
 
   <template>
     <div class='layout horizontal center badge'>
-      <domain-icon id='icon'
-        domain='[[stateObj.domain]]' data-domain$='[[stateObj.domain]]'
-        state='[[stateObj.state]]' data-state$='[[stateObj.state]]'>
-      </domain-icon>
+      <ha-state-icon id='icon' state-obj='[[stateObj]]'
+        data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
+      </ha-state-icon>
       <template is='dom-if' if='[[stateObj.attributes.entity_picture]]'>
         <iron-image
           sizing='cover' class='fit'
diff --git a/src/components/entity/state-badge.js b/src/components/entity/state-badge.js
index 60425ab44e..cf3cc66011 100644
--- a/src/components/entity/state-badge.js
+++ b/src/components/entity/state-badge.js
@@ -2,7 +2,7 @@ import Polymer from '../../polymer';
 
 import xyBriToRgb from '../../util/xybri-to-rgb';
 
-require('../domain-icon');
+require('./ha-state-icon');
 
 export default new Polymer({
   is: 'state-badge',
diff --git a/src/util/default-icon.js b/src/util/default-icon.js
new file mode 100644
index 0000000000..f97c8583fb
--- /dev/null
+++ b/src/util/default-icon.js
@@ -0,0 +1 @@
+export default 'bookmark';
diff --git a/src/util/domain-icon.js b/src/util/domain-icon.js
index 15b41095e3..a45dcd27b1 100644
--- a/src/util/domain-icon.js
+++ b/src/util/domain-icon.js
@@ -1,3 +1,5 @@
+import defaultIcon from './default-icon';
+
 export default function domainIcon(domain, state) {
   switch (domain) {
   case 'homeassistant':
@@ -36,7 +38,7 @@ export default function domainIcon(domain, state) {
     return 'announcement';
 
   case 'thermostat':
-    return 'homeassistant-100:thermostat';
+    return 'settings-brightness';
 
   case 'sensor':
     return 'visibility';
@@ -58,6 +60,6 @@ export default function domainIcon(domain, state) {
       'icons:cloud-download' : 'icons:cloud-done';
 
   default:
-    return 'bookmark';
+    return defaultIcon;
   }
 }
diff --git a/src/util/state-icon.js b/src/util/state-icon.js
new file mode 100644
index 0000000000..deceb5e925
--- /dev/null
+++ b/src/util/state-icon.js
@@ -0,0 +1,25 @@
+import defaultIcon from './default-icon';
+import domainIcon from './domain-icon.js';
+import {
+  util,
+} from './home-assistant-js-instance';
+
+
+export default function stateIcon(state) {
+  if (!state) {
+    return defaultIcon;
+  } else if (state.attributes.icon) {
+    return state.attributes.icon;
+  }
+
+  const unit = state.attributes.unit_of_measurement;
+
+  if (unit && state.domain === 'sensor') {
+    if (unit === util.temperatureUnits.UNIT_TEMP_C ||
+        unit === util.temperatureUnits.UNIT_TEMP_F) {
+      return 'homeassistant-100:thermostat';
+    }
+  }
+
+  return domainIcon(state.domain, state.state);
+}