Rework plant card (#1123)

* Rework plant card

* Lint

* Fix updates for battery icon

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 {
+      .attributes {
-        color: var(--disabled-text-color);
+        cursor: pointer;
       }
-      th {
+      .attributes div {
-        width: 20%;
-      }
-      td {
         text-align: center;
-        color: var(--primary-text-color);
       }
-      td.problem {
+      .problem {
-        color: var(--label-badge-red);
+        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%'>
+        <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
-            <tr>
+          <div class="attributes" on-click="attributeClicked">
-              <template is='dom-repeat' items='{{sensors}}'>
+            <div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
-                <th>
+            <div class$="[[computeClass(stateObj.attributes.problem, item)]]">
-                  <paper-icon-button
+              [[computeValue(stateObj.attributes, item)]]
-                    disabled$='[[computeDisabled(stateObj, item)]]'
+            </div>
-                    icon='[[computeIcon(stateObj, item)]]'
+            <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
-                    on-click='showSensorHistory'>
+          </div>
-                  </paper-icon-button>
+        </template>
-                </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>
       </div>
     </ha-card>
   </template>
 </dom-module>
 
 <script>
-{
+class HaPlantCard extends window.hassMixins.EventsMixin(Polymer.Element) {
-  var _SENSORS = ['moisture', 'temperature', 'brightness', 'conductivity', 'battery'];
+  static get is() { return 'ha-plant-card'; }
-  var _ICONS = {
+  static get properties() {
-    moisture: 'mdi:water',
+    return {
-    temperature: 'mdi:thermometer',
+      hass: Object,
-    brightness: 'mdi:white-balance-sunny',
+      stateObj: Object
-    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 });
-    }
   }
 
-  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>