Skip to content

Commit 5159326

Browse files
andrey-gitballoob
andrey-git
authored and
balloob
committed
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
1 parent 741774f commit 5159326

File tree

6 files changed

+103
-101
lines changed

6 files changed

+103
-101
lines changed

‎src/cards/ha-weather-card.html

+2-23
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
66

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

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

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

58-
computeDisplayAttributes: function (stateObj) {
59-
return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
60-
},
61-
62-
formatAttribute: function (attribute) {
63-
return window.hassUtil.formatAttribute(attribute);
64-
},
65-
66-
formatAttributeValue: function (stateObj, attribute) {
67-
return window.hassUtil.formatAttributeValue(stateObj, attribute);
68-
},
69-
70-
computeAttribution: function (stateObj) {
71-
return window.hassUtil.computeAttribution(stateObj);
72-
},
73-
7453
getDataArray: function () {
7554
var dataArray = [];
7655
var data = this.stateObj.attributes.forecast;

‎src/components/ha-attributes.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<link rel="import" href="../../bower_components/polymer/polymer.html">
2+
3+
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
4+
<link rel="import" href="../util/hass-util.html">
5+
6+
<dom-module id="ha-attributes">
7+
<template>
8+
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
9+
<style>
10+
.data-entry .value {
11+
max-width: 200px;
12+
}
13+
.attribution {
14+
color: var(--secondary-text-color);
15+
text-align: right;
16+
}
17+
</style>
18+
19+
<div class='layout vertical'>
20+
<template is='dom-repeat' items="[[computeDisplayAttributes(stateObj, filtersArray)]]" as="attribute">
21+
<div class='data-entry layout justified horizontal'>
22+
<div class='key'>[[formatAttribute(attribute)]]</div>
23+
<div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
24+
</div>
25+
</template>
26+
<div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
27+
</div>
28+
</template>
29+
</dom-module>
30+
31+
<script>
32+
(function () {
33+
'use strict';
34+
35+
var FILTER_KEYS = [
36+
'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
37+
'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
38+
'homebridge_hidden', 'homebridge_name', 'supported_features', 'attribution',
39+
];
40+
Polymer({
41+
is: 'ha-attributes',
42+
properties: {
43+
stateObj: {
44+
type: Object,
45+
},
46+
extraFilters: {
47+
type: String,
48+
value: '',
49+
},
50+
filtersArray: {
51+
type: Array,
52+
computed: 'computeFiltersArray(extraFilters)',
53+
},
54+
},
55+
56+
computeFiltersArray: function (extraFilters) {
57+
return FILTER_KEYS + (extraFilters ? extraFilters.split(',') : []);
58+
},
59+
60+
computeDisplayAttributes: function (stateObj, filtersArray) {
61+
if (!stateObj) {
62+
return [];
63+
}
64+
return Object.keys(stateObj.attributes).filter(
65+
function (key) {
66+
return filtersArray.indexOf(key) === -1;
67+
});
68+
},
69+
70+
formatAttribute: function (attribute) {
71+
return attribute.replace(/_/g, ' ');
72+
},
73+
74+
formatAttributeValue: function (stateObj, attribute) {
75+
var value = stateObj.attributes[attribute];
76+
if (Array.isArray(value)) {
77+
return value.join(', ');
78+
}
79+
return (value instanceof Object) ? JSON.stringify(value, null, 2) : value;
80+
},
81+
82+
computeAttribution: function (stateObj) {
83+
return stateObj.attributes.attribution;
84+
},
85+
});
86+
}());
87+
</script>

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

+9-55
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,21 @@
11
<link rel="import" href="../../bower_components/polymer/polymer.html">
22

3-
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
3+
<link rel="import" href="../components/ha-attributes.html">
44

55
<dom-module id="more-info-default">
66
<template>
7-
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
8-
<style>
9-
.data-entry .value {
10-
max-width: 200px;
11-
}
12-
13-
.attribution {
14-
color: var(--secondary-text-color);
15-
text-align: right;
16-
}
17-
</style>
18-
19-
<div class='layout vertical'>
20-
<template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
21-
<div class='data-entry layout justified horizontal'>
22-
<div class='key'>[[formatAttribute(attribute)]]</div>
23-
<div class='value'>[[formatAttributeValue(stateObj, attribute)]]</div>
24-
</div>
25-
</template>
26-
<div class='attribution' hidden$='[[!computeAttribution(stateObj)]]'>[[computeAttribution(stateObj)]]</div>
27-
</div>
7+
<ha-attributes state-obj="[[stateObj]]"></ha-attributes>
288
</template>
299
</dom-module>
3010

3111
<script>
32-
(function () {
33-
'use strict';
34-
35-
var FILTER_KEYS = [
36-
'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
37-
'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
38-
'homebridge_hidden', 'homebridge_name', 'attribution',
39-
];
40-
41-
Polymer({
42-
is: 'more-info-default',
43-
44-
properties: {
45-
stateObj: {
46-
type: Object,
47-
},
48-
},
49-
50-
computeDisplayAttributes: function (stateObj) {
51-
return window.hassUtil.computeDisplayAttributes(stateObj, FILTER_KEYS);
52-
},
53-
54-
formatAttribute: function (attribute) {
55-
return window.hassUtil.formatAttribute(attribute);
56-
},
57-
58-
formatAttributeValue: function (stateObj, attribute) {
59-
return window.hassUtil.formatAttributeValue(stateObj, attribute);
60-
},
12+
Polymer({
13+
is: 'more-info-default',
6114

62-
computeAttribution: function (stateObj) {
63-
return window.hassUtil.computeAttribution(stateObj);
15+
properties: {
16+
stateObj: {
17+
type: Object,
6418
},
65-
});
66-
}());
19+
},
20+
});
6721
</script>

‎src/more-infos/more-info-light.html

+3
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

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

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

8182
<ha-color-picker on-colorselected='colorPicked' height='200' width='250'>
8283
</ha-color-picker>
84+
85+
<ha-attributes state-obj="[[stateObj]]" extra-filters="brightness,color_temp,white_value,effect_list,effect,rgb_color,xy_color"></ha-attributes>
8386
</div>
8487
</template>
8588
</dom-module>

‎src/more-infos/more-info-lock.html

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

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

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

‎src/util/hass-util.html

-23
Original file line numberDiff line numberDiff line change
@@ -341,27 +341,4 @@
341341
return window.hassUtil.domainIcon(state.domain, state.state);
342342
};
343343

344-
window.hassUtil.computeDisplayAttributes = function (stateObj, filterKeys) {
345-
if (!stateObj) {
346-
return [];
347-
}
348-
349-
return Object.keys(stateObj.attributes).filter(
350-
function (key) { return filterKeys.indexOf(key) === -1; });
351-
};
352-
353-
window.hassUtil.formatAttribute = function (attribute) {
354-
return attribute.replace(/_/g, ' ');
355-
};
356-
357-
window.hassUtil.formatAttributeValue = function (stateObj, attribute) {
358-
var value = stateObj.attributes[attribute];
359-
360-
return Array.isArray(value) ? value.join(', ') : value;
361-
};
362-
363-
window.hassUtil.computeAttribution = function (stateObj) {
364-
return stateObj.attributes.attribution;
365-
};
366-
367344
</script>

0 commit comments

Comments
 (0)