From f4c36e37bb9fe7fe8e256ec20f4805b2c64f39be Mon Sep 17 00:00:00 2001
From: PeteBa <pete_ba@yahoo.com>
Date: Fri, 25 May 2018 23:26:47 +0100
Subject: [PATCH] Add entity_picture capability to plant card (#1145)

* Add entity_picture support to plant card

* Align font size with camera card
---
 src/cards/ha-plant-card.js | 43 ++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/cards/ha-plant-card.js b/src/cards/ha-plant-card.js
index 20aa0b87ea..f385af53bf 100644
--- a/src/cards/ha-plant-card.js
+++ b/src/cards/ha-plant-card.js
@@ -11,10 +11,38 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
+      .banner {
+        display: flex;
+        align-items: flex-end;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+        padding-top: 12px;
+      }
+      .has-plant-image .banner {
+        padding-top: 30%;
+      }
+      .header {
+        @apply --paper-font-headline;
+        line-height: 40px;
+        padding: 8px 16px;
+      }
+      .has-plant-image .header {
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 16px;
+        padding: 16px;
+        color: white;
+        width: 100%;
+        background:rgba(0, 0, 0, var(--dark-secondary-opacity));
+      }
       .content {
         display: flex;
         justify-content: space-between;
-        padding: 0 32px 24px 32px;
+        padding: 16px 32px 24px 32px;
+      }
+      .has-plant-image .content {
+        padding-bottom: 16px;
       }
       iron-icon {
         color: var(--paper-item-icon-color);
@@ -35,12 +63,15 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
       }
     </style>
 
-    <ha-card header="[[computeTitle(stateObj)]]">
+    <ha-card class$="[[computeImageClass(stateObj.attributes.entity_picture)]]">
+      <div class="banner" style="background-image:url([[stateObj.attributes.entity_picture]])">
+        <div class="header">[[computeTitle(stateObj)]]</div>
+      </div>
       <div class="content">
         <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
           <div class="attributes" on-click="attributeClicked">
             <div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
-            <div class\$="[[computeClass(stateObj.attributes.problem, item)]]">
+            <div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
               [[computeValue(stateObj.attributes, item)]]
             </div>
             <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
@@ -97,10 +128,14 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
     return dict[attr] || '';
   }
 
-  computeClass(problem, attr) {
+  computeAttributeClass(problem, attr) {
     return problem.indexOf(attr) === -1 ? '' : 'problem';
   }
 
+  computeImageClass(entityPicture) {
+    return entityPicture ? 'has-plant-image' : '';
+  }
+
   attributeClicked(ev) {
     this.fire('hass-more-info', { entityId: this.stateObj.attributes.sensors[ev.model.item] });
   }