Add Binary Sensor State Card (#273)

* Add binary sensor state card

* use state-card-display as a template instead of state-card-toggle

* change == to ===

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

@@ -0,0 +1,73 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="../components/entity/state-info.html">
+
+<dom-module id="state-card-binary_sensor">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .state {
+        @apply(--paper-font-body1);
+        color: var(--primary-text-color);
+
+        margin-left: 16px;
+        text-align: right;
+        line-height: 40px;
+      }
+    </style>
+
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <div class='state'>[[computeStateDisplay(stateObj)]]</div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-binary_sensor',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+  computeStateDisplay: function (stateObj) {
+    var state = window.hassUtil.computeStateState(stateObj);
+    switch (stateObj.attributes.device_class) {
+      case 'moisture':
+        return (state === 'off') ? 'dry' : 'wet';
+      case 'gas':
+      case 'motion':
+      case 'occupancy':
+      case 'smoke':
+      case 'sound':
+      case 'vibration':
+        return (state === 'off') ? 'clear' : 'detected';
+      case 'opening':
+        return (state === 'off') ? 'closed' : 'open';
+      case 'safety':
+        return (state === 'off') ? 'safe' : 'unsafe';
+      case 'cold':
+      case 'connectivity':
+      case 'heat':
+      case 'light':
+      case 'moving':
+      case 'power':
+      default:
+        return state;
+    }
+  },
+});
+</script>

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

@@ -1,5 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="state-card-binary_sensor.html">
 <link rel="import" href="state-card-climate.html">
 <link rel="import" href="state-card-configurator.html">
 <link rel="import" href="state-card-cover.html">

src/util/hass-util.html

@@ -11,6 +11,7 @@ window.hassUtil.DEFAULT_ICON = 'mdi:bookmark';
 window.hassUtil.OFF_STATES = ['off', 'closed', 'unlocked'];
 
 window.hassUtil.DOMAINS_WITH_CARD = [
+  'binary_sensor',
   'climate',
   'cover',
   'configurator',
@@ -23,7 +24,7 @@ window.hassUtil.DOMAINS_WITH_CARD = [
 ];
 
 window.hassUtil.DOMAINS_WITH_MORE_INFO = [
-  'alarm_control_panel', 'automation', 'camera', 'climate', 'configurator',
+  'alarm_control_panel', 'automation', 'binary_sensor', 'camera', 'climate', 'configurator',
   'cover', 'fan', 'group', 'light', 'lock', 'media_player', 'script',
   'sun', 'updater',
 ];