ha-frontend-cdce8p/src/components/ha-view-tabs.html
2016-05-28 16:07:25 -07:00

81 lines
2.0 KiB
HTML

<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
<dom-module id="ha-view-tabs">
<style>
paper-tab {
text-transform: uppercase;
}
</style>
<template>
<paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
on-iron-select='viewSelected' scrollable=''>
<paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
<template is='dom-repeat' items='[[views]]'>
<paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
<template is='dom-if' if='[[item.attributes.icon]]'>
<iron-icon icon='[[item.attributes.icon]]'></iron-icon>
</template>
<template is='dom-if' if='[[!item.attributes.icon]]'>
[[item.entityDisplay]]
</template>
</paper-tab>
</template>
</paper-tabs>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-view-tabs',
behaviors: [window.hassBehavior],
properties: {
hass: {
type: Object,
},
locationName: {
type: String,
bindNuclear: function (hass) { return hass.configGetters.locationName; },
},
currentView: {
type: String,
bindNuclear: function (hass) {
return [
hass.viewGetters.currentView,
function (view) { return view || ''; },
];
},
},
views: {
type: Array,
bindNuclear: function (hass) {
return [
hass.viewGetters.views,
function (views) {
return views.valueSeq()
.sortBy(function (view) { return view.attributes.order; })
.toArray();
},
];
},
},
},
viewTapped() {
this.fire('view-tapped');
},
viewSelected(ev) {
var view = ev.detail.item.getAttribute('data-entity') || null;
var current = this.currentView || null;
if (view !== current) {
this.async(function () { this.hass.viewActions.selectView(view); }.bind(this), 0);
}
},
});
</script>