From 811d99b68ca690d53934fce7c3d5b180ce1279f7 Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Fri, 27 Apr 2018 16:26:34 +0200
Subject: [PATCH] Rework plant card (#1123)

* Rework plant card

* Lint

* Fix updates for battery icon
---
 src/cards/ha-plant-card.html | 173 +++++++++++++++--------------------
 1 file changed, 73 insertions(+), 100 deletions(-)

diff --git a/src/cards/ha-plant-card.html b/src/cards/ha-plant-card.html
index e554222b5f..00c5f2be7f 100644
--- a/src/cards/ha-plant-card.html
+++ b/src/cards/ha-plant-card.html
@@ -1,5 +1,5 @@
 <link rel='import' href='../../bower_components/polymer/polymer-element.html'>
-<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
 <link rel='import' href='../components/ha-card.html'>
 <link rel='import' href='../util/hass-mixins.html'>
 
@@ -7,125 +7,98 @@
   <template>
     <style>
       .content {
+        display: flex;
+        justify-content: space-between;
         padding: 0 32px 24px 32px;
       }
-      paper-icon-button {
+      iron-icon {
         color: var(--paper-item-icon-color);
+        margin-bottom: 8px;
       }
-      paper-icon-button[disabled], td.missing {
-        color: var(--disabled-text-color);
+      .attributes {
+        cursor: pointer;
       }
-      th {
-        width: 20%;
-      }
-      td {
+      .attributes div {
         text-align: center;
-        color: var(--primary-text-color);
       }
-      td.problem {
-        color: var(--label-badge-red);
+      .problem {
+        color: var(--google-red-500);
         font-weight: bold;
       }
+      .uom {
+        color: var(--secondary-text-color);
+      }
     </style>
 
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-          <table style='width:100%'>
-            <tr>
-              <template is='dom-repeat' items='{{sensors}}'>
-                <th>
-                  <paper-icon-button
-                    disabled$='[[computeDisabled(stateObj, item)]]'
-                    icon='[[computeIcon(stateObj, item)]]'
-                    on-click='showSensorHistory'>
-                  </paper-icon-button>
-                </th>
-              </template>
-            </tr><tr>
-              <template is='dom-repeat' items='{{sensors}}'>
-                <td class$='[[computeClass(stateObj, item)]]'>
-                  [[computeValue(stateObj, item)]]<br>
-                  [[computeUOM(stateObj, item)]]
-                </td>
-              </template>
-            </tr>
-          </table>
+        <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)]]">
+              [[computeValue(stateObj.attributes, item)]]
+            </div>
+            <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
+          </div>
+        </template>
       </div>
     </ha-card>
   </template>
 </dom-module>
 
 <script>
-{
-  var _SENSORS = ['moisture', 'temperature', 'brightness', 'conductivity', 'battery'];
-  var _ICONS = {
-    moisture: 'mdi:water',
-    temperature: 'mdi:thermometer',
-    brightness: 'mdi:white-balance-sunny',
-    conductivity: 'mdi:emoticon-poop',
-    battery: 'mdi:battery'
-  };
-
-  class HaPlantCard extends window.hassMixins.EventsMixin(Polymer.Element) {
-    static get is() { return 'ha-plant-card'; }
-    static get properties() {
-      return {
-        hass: Object,
-        stateObj: Object,
-        sensors: { type: Object, value: _SENSORS }
-      };
-    }
-
-    computeTitle(stateObj) {
-      return window.hassUtil.computeStateName(stateObj);
-    }
-
-    computeClass(stateObj, sensor) {
-      if (sensor in stateObj.attributes) {
-        const prob = stateObj.attributes.problem;
-        return (prob.indexOf(sensor) === -1) ? 'ok' : 'problem';
-      }
-      return 'missing';
-    }
-
-    computeIcon(stateObj, sensor) {
-      var icon = _ICONS[sensor];
-      if ((sensor === 'battery') && (sensor in stateObj.attributes)) {
-        const level = stateObj.attributes.battery;
-        if (level <= 5) {
-          icon += '-alert';
-        } else if (level < 95) {
-          icon += '-' + (Math.round((level / 10) - 0.01) * 10).toString();
-        }
-      }
-      return icon;
-    }
-
-    computeValue(stateObj, sensor) {
-      if (sensor in stateObj.attributes) {
-        return stateObj.attributes[sensor];
-      }
-      return '-';
-    }
-
-    computeUOM(stateObj, sensor) {
-      if (sensor in stateObj.attributes.unit_of_measurement_dict) {
-        return stateObj.attributes.unit_of_measurement_dict[sensor];
-      }
-      return '';
-    }
-
-    computeDisabled(stateObj, sensor) {
-      return (!(sensor in stateObj.attributes));
-    }
-
-    showSensorHistory(ev) {
-      ev.stopPropagation();
-      var sensorId = this.stateObj.attributes.sensors[ev.model.item];
-      this.fire('hass-more-info', { entityId: sensorId });
-    }
+class HaPlantCard extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-plant-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object
+    };
   }
 
-  customElements.define(HaPlantCard.is, HaPlantCard);
+  constructor() {
+    super();
+    this.sensors = {
+      moisture: 'mdi:water',
+      temperature: 'mdi:thermometer',
+      brightness: 'mdi:white-balance-sunny',
+      conductivity: 'mdi:emoticon-poop',
+      battery: 'mdi:battery'
+    };
+  }
+
+  computeTitle(stateObj) {
+    return window.hassUtil.computeStateName(stateObj);
+  }
+
+  computeAttributes(data) {
+    return Object.keys(this.sensors).filter(key => key in data);
+  }
+
+  computeIcon(attr, batLvl) {
+    if (attr === 'battery') {
+      return batLvl <= 5 ? `${this.sensors[attr]}-alert` :
+        `${this.sensors[attr]}-${(Math.round((batLvl / 10) - 0.01) * 10).toString()}`;
+    }
+    return this.sensors[attr];
+  }
+
+  computeValue(attributes, attr) {
+    return attributes[attr];
+  }
+
+  computeUom(dict, attr) {
+    return dict[attr] || '';
+  }
+
+  computeClass(problem, attr) {
+    return problem.indexOf(attr) === -1 ? '' : 'problem';
+  }
+
+  attributeClicked(ev) {
+    this.fire('hass-more-info', { entityId: this.stateObj.attributes.sensors[ev.model.item] });
+  }
 }
+
+customElements.define(HaPlantCard.is, HaPlantCard);
 </script>