From 70b04333f1146412596bf1bea48b3801671e3523 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 16 Feb 2016 20:46:21 -0800
Subject: [PATCH 1/4] More info dialog cleanup

---
 src/dialogs/more-info-dialog.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/dialogs/more-info-dialog.js b/src/dialogs/more-info-dialog.js
index af172b6043..4d246db935 100644
--- a/src/dialogs/more-info-dialog.js
+++ b/src/dialogs/more-info-dialog.js
@@ -15,7 +15,6 @@ const {
   moreInfoActions,
 } = hass;
 
-// if you don't want the history component to show add the domain to this array
 const DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
 
 export default new Polymer({
@@ -63,6 +62,7 @@ export default new Polymer({
     showHistoryComponent: {
       type: Boolean,
       value: false,
+      computed: 'computeShowHistoryComponent(hasHistoryComponent, stateObj)',
     },
 
     dialogOpen: {
@@ -87,6 +87,11 @@ export default new Polymer({
     return !_delayedDialogOpen || _isLoadingHistoryData;
   },
 
+  computeShowHistoryComponent(hasHistoryComponent, stateObj) {
+    return this.hasHistoryComponent && stateObj &&
+      DOMAINS_WITH_NO_HISTORY.indexOf(stateObj.domain) === -1;
+  },
+
   fetchHistoryData() {
     if (this.stateObj && this.hasHistoryComponent &&
         this.shouldFetchHistory) {
@@ -100,11 +105,6 @@ export default new Polymer({
       return;
     }
 
-    this.showHistoryComponent = (
-      this.hasHistoryComponent &&
-      DOMAINS_WITH_NO_HISTORY.indexOf(this.stateObj.domain) === -1
-    );
-
     this.async(() => {
       // Firing action while other action is happening confuses nuclear
       this.fetchHistoryData();

From 1fb3f2bbf4d9b8e6663b647deffa46a73a541f59 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 16 Feb 2016 21:24:09 -0800
Subject: [PATCH 2/4] Rename domain-card -> entities-card

---
 .../{ha-domain-card.html => ha-entities-card.html}   |  4 ++--
 src/cards/{ha-domain-card.js => ha-entities-card.js} | 12 +++++-------
 src/components/ha-cards.html                         |  6 +++---
 src/components/ha-cards.js                           |  2 +-
 4 files changed, 11 insertions(+), 13 deletions(-)
 rename src/cards/{ha-domain-card.html => ha-entities-card.html} (91%)
 rename src/cards/{ha-domain-card.js => ha-entities-card.js} (84%)

diff --git a/src/cards/ha-domain-card.html b/src/cards/ha-entities-card.html
similarity index 91%
rename from src/cards/ha-domain-card.html
rename to src/cards/ha-entities-card.html
index b5082eb590..16de3e6f6b 100644
--- a/src/cards/ha-domain-card.html
+++ b/src/cards/ha-entities-card.html
@@ -4,7 +4,7 @@
 <link rel='import' href='../components/entity/ha-entity-toggle.html'>
 <link rel='import' href='../state-summary/state-card-content.html'>
 
-<dom-module id='ha-domain-card'>
+<dom-module id='ha-entities-card'>
   <style>
     .states {
       padding-bottom: 16px;
@@ -29,7 +29,7 @@
   <template>
     <ha-card>
       <div class='header horizontal layout center'>
-        <div class='flex name'>[[computeDomainTitle(domain)]]</div>
+        <div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
         <template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
           <ha-entity-toggle state-obj='[[groupEntity]]'></ha-entity-toggle>
         </template>
diff --git a/src/cards/ha-domain-card.js b/src/cards/ha-entities-card.js
similarity index 84%
rename from src/cards/ha-domain-card.js
rename to src/cards/ha-entities-card.js
index 671ddd306f..af29824a50 100644
--- a/src/cards/ha-domain-card.js
+++ b/src/cards/ha-entities-card.js
@@ -9,12 +9,9 @@ require('../state-summary/state-card-content');
 const { moreInfoActions } = hass;
 
 export default new Polymer({
-  is: 'ha-domain-card',
+  is: 'ha-entities-card',
 
   properties: {
-    domain: {
-      type: String,
-    },
     states: {
       type: Array,
     },
@@ -23,8 +20,9 @@ export default new Polymer({
     },
   },
 
-  computeDomainTitle(domain) {
-    return domain.replace(/_/g, ' ');
+  computeTitle(states, groupEntity) {
+    return groupEntity ? groupEntity.entityDisplay :
+                         states[0].domain.replace(/_/g, ' ');
   },
 
   entityTapped(ev) {
@@ -43,6 +41,6 @@ export default new Polymer({
     }
 
     // only show if we can toggle 2+ entities in group
-    return states.reduce((sum, state) => sum + canToggle(state.entityId), 0) > 1;
+    return states.reduce((sum, state) => sum + canToggle(state.entityId)) > 1;
   },
 });
diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index 04d2cddbc4..740a6939e5 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -2,7 +2,7 @@
 
 <link rel="import" href="./ha-demo-badge.html">
 <link rel="import" href="../cards/ha-badges-card.html">
-<link rel="import" href="../cards/ha-domain-card.html">
+<link rel="import" href="../cards/ha-entities-card.html">
 <link rel="import" href="../cards/ha-introduction-card.html">
 
 <dom-module id="ha-cards">
@@ -77,10 +77,10 @@
               </template>
               <template is='dom-repeat' items='[[column]]' as='domain'>
                 <div class='zone-card'>
-                  <ha-domain-card domain='[[domain]]'
+                  <ha-entities-card
                     states='[[computeStatesOfCard(cards, domain)]]'
                     group-entity='[[computeGroupEntityOfCard(cards, domain)]]'
-                  ></ha-domain-card>
+                  ></ha-entities-card>
                 </div>
               </template>
             </div>
diff --git a/src/components/ha-cards.js b/src/components/ha-cards.js
index 327dc07919..27e78dc6f0 100644
--- a/src/components/ha-cards.js
+++ b/src/components/ha-cards.js
@@ -3,7 +3,7 @@ import hass from '../util/home-assistant-js-instance';
 
 require('.//ha-demo-badge');
 require('../cards/ha-badges-card');
-require('../cards/ha-domain-card');
+require('../cards/ha-entities-card');
 require('../cards/ha-introduction-card');
 
 const { util } = hass;

From 09d0e529edc74078dce805a177e11971fc599387 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 16 Feb 2016 23:26:56 -0800
Subject: [PATCH 3/4] Add support for entity cards

---
 src/cards/ha-camera-card.html  | 37 +++++++++++++++++
 src/cards/ha-camera-card.js    | 52 ++++++++++++++++++++++++
 src/cards/ha-card-chooser.html |  5 +++
 src/cards/ha-card-chooser.js   | 53 ++++++++++++++++++++++++
 src/components/ha-cards.html   | 34 ++++++----------
 src/components/ha-cards.js     | 74 +++++++++++++++++++++-------------
 6 files changed, 204 insertions(+), 51 deletions(-)
 create mode 100644 src/cards/ha-camera-card.html
 create mode 100644 src/cards/ha-camera-card.js
 create mode 100644 src/cards/ha-card-chooser.html
 create mode 100644 src/cards/ha-card-chooser.js

diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
new file mode 100644
index 0000000000..76576cb069
--- /dev/null
+++ b/src/cards/ha-camera-card.html
@@ -0,0 +1,37 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html">
+
+<dom-module id='ha-camera-card'>
+  <style include="paper-material">
+    :host {
+      display: block;
+      position: relative;
+      font-size: 0px;
+      border-radius: 2px;
+      cursor: pointer;
+    }
+    .camera-feed {
+      width: 100%;
+      height: auto;
+    }
+    .caption {
+      position: absolute;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 16px;
+
+      text-transform: capitalize;
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 16px;
+      color: white;
+    }
+  </style>
+  <template>
+    <img src='[[cameraFeedSrc]]' class='camera-feed'>
+    <div class='caption'>[[stateObj.entityDisplay]]</div>
+  </template>
+</dom-module>
diff --git a/src/cards/ha-camera-card.js b/src/cards/ha-camera-card.js
new file mode 100644
index 0000000000..2c77bbc40a
--- /dev/null
+++ b/src/cards/ha-camera-card.js
@@ -0,0 +1,52 @@
+import Polymer from '../polymer';
+import hass from '../util/home-assistant-js-instance';
+
+const { moreInfoActions } = hass;
+
+const UPDATE_INTERVAL = 10000; // ms
+
+export default new Polymer({
+  is: 'ha-camera-card',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'updateCameraFeedSrc',
+    },
+
+    cameraFeedSrc: {
+      type: String,
+    },
+
+    /**
+     * The z-depth of the card, from 0-5.
+     */
+    elevation: {
+      type: Number,
+      value: 1,
+      reflectToAttribute: true,
+    },
+  },
+
+  listeners: {
+    tap: 'cardTapped',
+  },
+
+  attached() {
+    this.timer = setInterval(() => this.updateCameraFeedSrc(this.stateObj),
+                             UPDATE_INTERVAL);
+  },
+
+  detached() {
+    clearInterval(this.timer);
+  },
+
+  cardTapped() {
+    this.async(() => moreInfoActions.selectEntity(this.stateObj.entityId), 1);
+  },
+
+  updateCameraFeedSrc(stateObj) {
+    const time = (new Date()).getTime();
+    this.cameraFeedSrc = `${stateObj.attributes.entity_picture}?time=${time}`;
+  },
+});
diff --git a/src/cards/ha-card-chooser.html b/src/cards/ha-card-chooser.html
new file mode 100644
index 0000000000..d5ab9ad31a
--- /dev/null
+++ b/src/cards/ha-card-chooser.html
@@ -0,0 +1,5 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='./ha-camera-card.html'>
+<link rel='import' href='./ha-entities-card.html'>
+<link rel='import' href='./ha-introduction-card.html'>
diff --git a/src/cards/ha-card-chooser.js b/src/cards/ha-card-chooser.js
new file mode 100644
index 0000000000..c6fd37d6f4
--- /dev/null
+++ b/src/cards/ha-card-chooser.js
@@ -0,0 +1,53 @@
+import Polymer from '../polymer';
+
+require('./ha-camera-card');
+require('./ha-entities-card');
+require('./ha-introduction-card');
+
+export default new Polymer({
+  is: 'ha-card-chooser',
+
+  properties: {
+    cardData: {
+      type: Object,
+      observer: 'cardDataChanged',
+    },
+  },
+
+  cardDataChanged(newData, oldData) {
+    const root = Polymer.dom(this);
+
+    if (!newData) {
+      if (root.lastChild) {
+        root.removeChild(root.lastChild);
+      }
+      return;
+    }
+
+    const newElement = !oldData || oldData.cardType !== newData.cardType;
+    let card;
+    if (newElement) {
+      if (root.lastChild) {
+        root.removeChild(root.lastChild);
+      }
+
+      card = document.createElement(`ha-${newData.cardType}-card`);
+    } else {
+      card = root.lastChild;
+    }
+
+    Object.keys(newData).forEach(key => card[key] = newData[key]);
+
+    if (oldData) {
+      Object.keys(oldData).forEach(key => {
+        if (!(key in newData)) {
+          card[key] = undefined;
+        }
+      });
+    }
+
+    if (newElement) {
+      root.appendChild(card);
+    }
+  },
+});
diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index 740a6939e5..85af2af87e 100644
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@@ -2,8 +2,7 @@
 
 <link rel="import" href="./ha-demo-badge.html">
 <link rel="import" href="../cards/ha-badges-card.html">
-<link rel="import" href="../cards/ha-entities-card.html">
-<link rel="import" href="../cards/ha-introduction-card.html">
+<link rel="import" href="../cards/ha-card-chooser.html">
 
 <dom-module id="ha-cards">
   <style>
@@ -53,7 +52,7 @@
 
   <template>
     <div class='main'>
-      <template is='dom-if' if='[[cards._badges.length]]'>
+      <template is='dom-if' if='[[cards._badges]]'>
         <div class='badges'>
           <template is='dom-if' if='[[cards._demo]]'>
             <ha-demo-badge></ha-demo-badge>
@@ -62,29 +61,20 @@
           <ha-badges-card states='[[cards._badges]]'></ha-badges-card>
         </div>
       </template>
-      <template is='dom-if' if='[[!cards._badges.length]]'>
+      <template is='dom-if' if='[[!cards._badges]]'>
         <div class='no-badges'> </div>
       </template>
+
       <div class='horizontal layout'>
         <template is='dom-repeat' items='[[cards._columns]]' as='column'>
-          <template is='dom-if'
-                    if='[[computeShouldRenderColumn(index, column)]]'>
-            <div class='column flex-1'>
-              <template is='dom-if' if='[[computeShowIntroduction(index, showIntroduction, cards)]]'>
-                <div class='zone-card'>
-                  <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states, cards)]]'></ha-introduction-card>
-                </div>
-              </template>
-              <template is='dom-repeat' items='[[column]]' as='domain'>
-                <div class='zone-card'>
-                  <ha-entities-card
-                    states='[[computeStatesOfCard(cards, domain)]]'
-                    group-entity='[[computeGroupEntityOfCard(cards, domain)]]'
-                  ></ha-entities-card>
-                </div>
-              </template>
-            </div>
-          </template>
+          <div class='column flex-1'>
+            <template is='dom-repeat' items='[[column]]' as='card'>
+              <div class='zone-card'>
+                <ha-card-chooser card-data='[[computeCardDataOfCard(cards, card)]]'
+                ></ha-entities-card>
+              </div>
+            </template>
+          </div>
         </template>
     </div>
   </template>
diff --git a/src/components/ha-cards.js b/src/components/ha-cards.js
index 27e78dc6f0..58ec37cdfe 100644
--- a/src/components/ha-cards.js
+++ b/src/components/ha-cards.js
@@ -3,10 +3,12 @@ import hass from '../util/home-assistant-js-instance';
 
 require('.//ha-demo-badge');
 require('../cards/ha-badges-card');
-require('../cards/ha-entities-card');
-require('../cards/ha-introduction-card');
+require('../cards/ha-card-chooser');
 
 const { util } = hass;
+
+const DOMAINS_WITH_CARD = ['camera'];
+
 const PRIORITY = {
   configurator: -20,
   group: -10,
@@ -15,7 +17,6 @@ const PRIORITY = {
   sun: 1,
   device_tracker: 2,
   alarm_control_panel: 3,
-  camera: 4,
   sensor: 5,
   binary_sensor: 6,
   scene: 7,
@@ -77,15 +78,45 @@ export default new Polymer({
       return old;
     }
     if (showIntroduction) {
-      increaseIndex();
+      cards._columns[increaseIndex()].push('ha-introduction');
+      cards['ha-introduction'] = {
+        cardType: 'introduction',
+        showHideInstruction: states.size > 0 && !__DEMO__,
+      };
     }
 
-    function pushCard(name, entities, groupEntity = false) {
-      if (entities.length === 0) {
-        return;
+    function addEntitiesCard(name, entities, groupEntity = false) {
+      if (entities.length === 0) return;
+
+      const owncard = [];
+      const other = [];
+
+      entities.forEach(entity => {
+        if (DOMAINS_WITH_CARD.indexOf(entity.domain) === -1) {
+          other.push(entity);
+        } else {
+          owncard.push(entity);
+        }
+      });
+
+      const curIndex = increaseIndex();
+
+      if (other.length > 0) {
+        cards._columns[curIndex].push(name);
+        cards[name] = {
+          cardType: 'entities',
+          states: other,
+          groupEntity,
+        };
       }
-      cards._columns[increaseIndex()].push(name);
-      cards[name] = { entities, groupEntity };
+
+      owncard.forEach(entity => {
+        cards._columns[curIndex].push(entity.entityId);
+        cards[entity.entityId] = {
+          cardType: entity.domain,
+          stateObj: entity,
+        };
+      });
     }
 
     byDomain.keySeq().sortBy(domain => getPriority(domain))
@@ -106,34 +137,19 @@ export default new Polymer({
             .forEach(groupState => {
               const entities = util.expandGroup(groupState, states);
               entities.forEach(entity => hasGroup[entity.entityId] = true);
-              pushCard(groupState.entityDisplay, entities.toArray(), groupState);
+              addEntitiesCard(groupState.entityId, entities.toArray(), groupState);
             }
           );
         } else {
-          pushCard(domain, filterGrouped(byDomain.get(domain)).sortBy(entitySortBy).toArray());
+          addEntitiesCard(
+            domain, filterGrouped(byDomain.get(domain)).sortBy(entitySortBy).toArray());
         }
       }
     );
     return cards;
   },
 
-  computeShouldRenderColumn(index, items) {
-    return index === 0 || items.length;
-  },
-
-  computeShowIntroduction(index, showIntroduction, cards) {
-    return index === 0 && (showIntroduction || cards._demo);
-  },
-
-  computeShowHideInstruction(states, cards) {
-    return states.size > 0 && !__DEMO__ && !cards._demo;
-  },
-
-  computeGroupEntityOfCard(cards, card) {
-    return card in cards && cards[card].groupEntity;
-  },
-
-  computeStatesOfCard(cards, card) {
-    return card in cards && cards[card].entities;
+  computeCardDataOfCard(cards, card) {
+    return cards[card];
   },
 });

From 2736dab59e3cece88b1780a749945a2c272095bb Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 16 Feb 2016 23:27:05 -0800
Subject: [PATCH 4/4] Remove unused component

---
 src/cards/ha-getting-started-card.html | 17 -----------------
 src/cards/ha-getting-started-card.js   |  7 -------
 2 files changed, 24 deletions(-)
 delete mode 100644 src/cards/ha-getting-started-card.html
 delete mode 100644 src/cards/ha-getting-started-card.js

diff --git a/src/cards/ha-getting-started-card.html b/src/cards/ha-getting-started-card.html
deleted file mode 100644
index f09d24d5dd..0000000000
--- a/src/cards/ha-getting-started-card.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
-
-<link rel='import' href='../components/ha-card.html'>
-
-<dom-module id='ha-getting-started-card'>
-  <template>
-    <ha-card>
-      <h3>Hi there!</h3>
-      <p>
-        It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
-      </p>
-      <p>
-        Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
-      </p>
-    </ha-card>
-  </template>
-</dom-module>
diff --git a/src/cards/ha-getting-started-card.js b/src/cards/ha-getting-started-card.js
deleted file mode 100644
index 65114bb7b8..0000000000
--- a/src/cards/ha-getting-started-card.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Polymer from '../polymer';
-
-require('../components/ha-card');
-
-export default new Polymer({
-  is: 'ha-getting-started-card',
-});