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
2025-12-20 02:38:53 +00:00 · 2017-01-25 19:30:02 +02:00
parent 741774f3c6
commit 5159326a7b
6 changed files with 103 additions and 101 deletions
--- 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>