Display attributions separately in more-info (#176)

* Display attributions separately in more-info

* Fix js lint

* Rename to formatAttributeValue

* Properly declare the computed bindings

src/cards/ha-weather-card.html

@@ -14,23 +14,29 @@
         }
 
         .attribution {
-          color:grey;
+          color: var(--secondary-text-color);
+          text-align: right;
         }
     </style>
     <google-legacy-loader on-api-load='googleApiLoaded'></google-legacy-loader>
     <ha-card header='[[computeTitle(stateObj)]]'>
       <div class='content'>
-        <template is='dom-repeat' items='[[computeCurrentWeather(stateObj)]]'>
-          <div>[[item.key]]: [[item.value]]</div>
+        <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'>[[computeAttribution(stateObj)]]</div>
+        <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
       </div>
     </ha-card>
   </template>
 </dom-module>
 
 <script>
+(function () {
+  'use strict';
+
+  var FILTER_KEYS = ['attribution', 'forecast', 'friendly_name'];
+
   Polymer({
     is: 'ha-weather-card',
 
@@ -49,19 +55,20 @@
       return stateObj.attributes.friendly_name;
     },
 
-    computeAttribution: function (stateObj) {
-      return stateObj.attributes.attribution;
+    computeDisplayAttributes: function (stateObj) {
+      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
     },
 
-    computeCurrentWeather: function (stateObj) {
-      return Object.keys(stateObj.attributes).filter(function (key) {
-        return ['attribution', 'forecast', 'friendly_name'].indexOf(key) === -1;
-      }).map(function (key) {
-        return {
-          key: key,
-          value: stateObj.attributes[key]
-        };
-      });
+    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 () {
@@ -134,4 +141,5 @@
       });
     },
   });
-</script>
+}());
+</script>

src/more-infos/more-info-default.html

@@ -9,15 +9,21 @@
       .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'>[[getAttributeValue(stateObj, attribute)]]</div>
+          <div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
         </div>
       </template>
+      <div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
     </div>
   </template>
 </dom-module>
@@ -29,7 +35,7 @@
   var FILTER_KEYS = [
     'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
     'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
-    'homebridge_hidden', 'homebridge_name',
+    'homebridge_hidden', 'homebridge_name', 'attribution',
   ];
 
   Polymer({
@@ -42,22 +48,19 @@
     },
 
     computeDisplayAttributes: function (stateObj) {
-      if (!stateObj) {
-        return [];
-      }
-
-      return Object.keys(stateObj.attributes).filter(
-        function (key) { return FILTER_KEYS.indexOf(key) === -1; });
+      return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
     },
 
     formatAttribute: function (attribute) {
-      return attribute.replace(/_/g, ' ');
+      return window.hassUtil.formatAttribute(attribute);
     },
 
-    getAttributeValue: function (stateObj, attribute) {
-      var value = stateObj.attributes[attribute];
+    formatAttributeValue: function (stateObj, attribute) {
+      return window.hassUtil.formatAttributeValue(stateObj, attribute);
+    },
 
-      return Array.isArray(value) ? value.join(', ') : value;
+    computeAttribution: function (stateObj) {
+      return window.hassUtil.computeAttribution(stateObj);
     },
   });
 }());

src/util/hass-util.html

@@ -341,4 +341,27 @@ 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>