Show attribute in more-info of light and lock. (#179)

* Show attribute in more-info of light and lock. * Use <ha-attributes> in weather card * Inline functions from hass-util Inline functions from hass-util now that ha-attributes is the only user. * Inline functions from hass-util * Weathrer's FILTER_KEYS is no longer needed. * Cache csv split
2017-01-25 19:30:02 +02:00 · 2017-01-25 19:30:02 +02:00 · 5159326a7b
parent 741774f3c6
commit 5159326a7b
6 changed files with 103 additions and 101 deletions
--- a/src/cards/ha-weather-card.html
+++ b/src/cards/ha-weather-card.html
@ -5,7 +5,7 @@
 <link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>

 <link rel='import' href='../components/ha-card.html'>
-
+<link rel='import' href='../components/ha-attributes.html'>
 <dom-module id='ha-weather-card'>
  <template>
    <style>
@ -21,11 +21,8 @@
    <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
    <ha-card header='[[computeTitle(stateObj)]]'>
      <div class='content'>
-        <template is='dom-repeat' items='[[computeDisplayAttributes(stateObj)]]' as="attribute">
-          <div>[[formatAttribute(attribute)]]: [[formatAttributeValue(stateObj, attribute)]]</div>
-        </template>
        <div id='chart_area'></div>
-        <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
+        <ha-attributes state-obj='[[stateObj]]' extra-filters='forecast'></ha-attributes>
      </div>
    </ha-card>
  </template>
@ -35,8 +32,6 @@
 (function () {
  'use strict';

-  var FILTER_KEYS = ['attribution', 'forecast', 'friendly_name'];
-
  Polymer({
    is: 'ha-weather-card',

@ -55,22 +50,6 @@
      return stateObj.attributes.friendly_name;
    },

-    computeDisplayAttributes: function (stateObj) {
-      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
-    },
-
-    formatAttribute: function (attribute) {
-      return window.hassUtil.formatAttribute(attribute);
-    },
-
-    formatAttributeValue: function (stateObj, attribute) {
-      return window.hassUtil.formatAttributeValue(stateObj, attribute);
-    },
-
-    computeAttribution: function (stateObj) {
-      return window.hassUtil.computeAttribution(stateObj);
-    },
-
    getDataArray: function () {
      var dataArray = [];
      var data = this.stateObj.attributes.forecast;
--- a/src/components/ha-attributes.html
+++ b/src/components/ha-attributes.html
@ -0,0 +1,87 @@
+<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="../util/hass-util.html">
+
+<dom-module id="ha-attributes">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      .data-entry .value {
+        max-width: 200px;
+      }
+      .attribution {
+        color: var(--secondary-text-color);
+        text-align: right;
+      }
+    </style>
+
+    <div class='layout vertical'>
+      <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj, filtersArray)]]" as="attribute">
+        <div class='data-entry layout justified horizontal'>
+          <div class='key'>[[formatAttribute(attribute)]]</div>
+          <div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
+        </div>
+      </template>
+      <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+(function () {
+  'use strict';
+
+  var FILTER_KEYS = [
+    'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
+    'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
+    'homebridge_hidden', 'homebridge_name', 'supported_features', 'attribution',
+  ];
+  Polymer({
+    is: 'ha-attributes',
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+      extraFilters: {
+        type: String,
+        value: '',
+      },
+      filtersArray: {
+        type: Array,
+        computed: 'computeFiltersArray(extraFilters)',
+      },
+    },
+
+    computeFiltersArray: function (extraFilters) {
+      return FILTER_KEYS + (extraFilters ? extraFilters.split(',') : []);
+    },
+
+    computeDisplayAttributes: function (stateObj, filtersArray) {
+      if (!stateObj) {
+        return [];
+      }
+      return Object.keys(stateObj.attributes).filter(
+        function (key) {
+          return filtersArray.indexOf(key) === -1;
+        });
+    },
+
+    formatAttribute: function (attribute) {
+      return attribute.replace(/_/g, ' ');
+    },
+
+    formatAttributeValue: function (stateObj, attribute) {
+      var value = stateObj.attributes[attribute];
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
+    },
+
+    computeAttribution: function (stateObj) {
+      return stateObj.attributes.attribution;
+    },
+  });
+}());
+</script>
--- a/src/more-infos/more-info-default.html
+++ b/src/more-infos/more-info-default.html
@ -1,67 +1,21 @@
 <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/ha-attributes.html">

 <dom-module id="more-info-default">
  <template>
-    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-    <style>
-      .data-entry .value {
-        max-width: 200px;
-      }
-
-      .attribution {
-        color: var(--secondary-text-color);
-        text-align: right;
-      }
-    </style>
-
-    <div class='layout vertical'>
-      <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
-        <div class='data-entry layout justified horizontal'>
-          <div class='key'>[[formatAttribute(attribute)]]</div>
-          <div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
-        </div>
-      </template>
-      <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
-    </div>
+    <ha-attributes state-obj="[[stateObj]]"></ha-attributes>
  </template>
 </dom-module>

 <script>
-(function () {
-  'use strict';
+Polymer({
+  is: 'more-info-default',

-  var FILTER_KEYS = [
-    'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
-    'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
-    'homebridge_hidden', 'homebridge_name', 'attribution',
-  ];
-
-  Polymer({
-    is: 'more-info-default',
-
-    properties: {
-      stateObj: {
-        type: Object,
-      },
+  properties: {
+    stateObj: {
+      type: Object,
    },
-
-    computeDisplayAttributes: function (stateObj) {
-      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
-    },
-
-    formatAttribute: function (attribute) {
-      return window.hassUtil.formatAttribute(attribute);
-    },
-
-    formatAttributeValue: function (stateObj, attribute) {
-      return window.hassUtil.formatAttributeValue(stateObj, attribute);
-    },
-
-    computeAttribution: function (stateObj) {
-      return window.hassUtil.computeAttribution(stateObj);
-    },
-  });
-}());
+  },
+});
 </script>
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@ -7,6 +7,7 @@

 <link rel='import' href='../components/ha-labeled-slider.html'>
 <link rel='import' href='../components/ha-color-picker.html'>
+<link rel='import' href='../components/ha-attributes.html'>

 <dom-module id='more-info-light'>
  <template>
@ -80,6 +81,8 @@

      <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
      </ha-color-picker>
+
+      <ha-attributes state-obj="[[stateObj]]" extra-filters="brightness,color_temp,white_value,effect_list,effect,rgb_color,xy_color"></ha-attributes>
    </div>
  </template>
 </dom-module>
--- a/src/more-infos/more-info-lock.html
+++ b/src/more-infos/more-info-lock.html
@ -2,6 +2,7 @@

 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
+<link rel='import' href='../components/ha-attributes.html'>

 <dom-module id='more-info-lock'>
  <template>
@ -16,6 +17,7 @@
      <paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
      <paper-button on-tap='handleLockTap' hidden$=[[isLocked]]>Lock</paper-button>
    </div>
+    <ha-attributes state-obj='[[stateObj]]' extra-filters='code_format'></ha-attributes>
  </template>
 </dom-module>

--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@ -341,27 +341,4 @@ window.hassUtil.stateIcon = function (state) {
  return window.hassUtil.domainIcon(state.domain, state.state);
 };

-window.hassUtil.computeDisplayAttributes = function (stateObj, filterKeys) {
-  if (!stateObj) {
-    return [];
-  }
-
-  return Object.keys(stateObj.attributes).filter(
-    function (key) { return filterKeys.indexOf(key) === -1; });
-};
-
-window.hassUtil.formatAttribute = function (attribute) {
-  return attribute.replace(/_/g, ' ');
-};
-
-window.hassUtil.formatAttributeValue = function (stateObj, attribute) {
-  var value = stateObj.attributes[attribute];
-
-  return Array.isArray(value) ? value.join(', ') : value;
-};
-
-window.hassUtil.computeAttribution = function (stateObj) {
-  return stateObj.attributes.attribution;
-};
-
 </script>