2015-08-23 10:26:31 +02:00
|
|
|
<link rel='import' href='../../bower_components/polymer/polymer.html'>
|
|
|
|
|
2016-08-02 18:06:22 +02:00
|
|
|
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
|
|
|
|
2015-08-23 10:26:31 +02:00
|
|
|
<link rel='import' href='../components/ha-card.html'>
|
2015-09-24 08:17:23 +02:00
|
|
|
<link rel='import' href='../components/entity/ha-entity-toggle.html'>
|
2015-08-23 10:26:31 +02:00
|
|
|
<link rel='import' href='../state-summary/state-card-content.html'>
|
|
|
|
|
2016-02-17 06:24:09 +01:00
|
|
|
<dom-module id='ha-entities-card'>
|
2015-08-23 10:26:31 +02:00
|
|
|
<template>
|
2016-07-19 10:19:44 +02:00
|
|
|
<style is="custom-style" include="iron-flex"></style>
|
|
|
|
<style>
|
|
|
|
.states {
|
|
|
|
padding-bottom: 16px;
|
|
|
|
}
|
|
|
|
.state {
|
|
|
|
padding: 4px 16px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.header {
|
|
|
|
@apply(--paper-font-headline);
|
|
|
|
/* overwriting line-height +8 because entity-toggle can be 40px height,
|
|
|
|
compensating this with reduced padding */
|
|
|
|
line-height: 40px;
|
|
|
|
color: var(--primary-text-color);
|
|
|
|
padding: 20px 16px 12px;
|
|
|
|
text-transform: capitalize;
|
|
|
|
}
|
|
|
|
.header .name {
|
|
|
|
@apply(--paper-font-common-nowrap);
|
|
|
|
}
|
|
|
|
ha-entity-toggle {
|
|
|
|
margin-left: 16px;
|
|
|
|
}
|
|
|
|
.header-more-info {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2015-09-24 08:17:23 +02:00
|
|
|
<ha-card>
|
2016-05-21 22:01:43 +02:00
|
|
|
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
|
2016-02-17 06:24:09 +01:00
|
|
|
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
2015-09-24 16:59:37 +02:00
|
|
|
<template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
|
2016-05-28 10:32:39 +02:00
|
|
|
<ha-entity-toggle
|
|
|
|
hass='[[hass]]'
|
|
|
|
state-obj='[[groupEntity]]'></ha-entity-toggle>
|
2015-09-24 08:17:23 +02:00
|
|
|
</template>
|
|
|
|
</div>
|
2015-08-23 10:26:31 +02:00
|
|
|
<div class='states'>
|
|
|
|
<template is='dom-repeat' items="[[states]]">
|
2016-01-13 09:31:38 +01:00
|
|
|
<div class='state' on-tap='entityTapped'>
|
2016-05-28 10:32:39 +02:00
|
|
|
<state-card-content
|
|
|
|
hass='[[hass]]'
|
|
|
|
class="state-card"
|
|
|
|
state-obj="[[item]]"></state-card-content>
|
2015-08-23 10:26:31 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</ha-card>
|
|
|
|
</template>
|
|
|
|
</dom-module>
|
2016-07-18 08:18:48 +02:00
|
|
|
|
|
|
|
<script>
|
|
|
|
Polymer({
|
|
|
|
is: 'ha-entities-card',
|
|
|
|
|
|
|
|
properties: {
|
|
|
|
hass: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
|
|
|
|
states: {
|
|
|
|
type: Array,
|
|
|
|
},
|
|
|
|
groupEntity: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
computeTitle: function (states, groupEntity) {
|
|
|
|
return groupEntity ? groupEntity.entityDisplay :
|
|
|
|
states[0].domain.replace(/_/g, ' ');
|
|
|
|
},
|
|
|
|
|
|
|
|
computeTitleClass: function (groupEntity) {
|
|
|
|
var classes = 'header horizontal layout center ';
|
|
|
|
if (groupEntity) {
|
|
|
|
classes += 'header-more-info';
|
|
|
|
}
|
|
|
|
return classes;
|
|
|
|
},
|
|
|
|
|
|
|
|
entityTapped: function (ev) {
|
|
|
|
var entityId;
|
|
|
|
if (ev.target.classList.contains('paper-toggle-button') ||
|
|
|
|
ev.target.classList.contains('paper-icon-button') ||
|
|
|
|
(!ev.model && !this.groupEntity)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
ev.stopPropagation();
|
|
|
|
|
|
|
|
if (ev.model) {
|
|
|
|
entityId = ev.model.item.entityId;
|
|
|
|
} else {
|
|
|
|
entityId = this.groupEntity.entityId;
|
|
|
|
}
|
|
|
|
this.async(function () { this.hass.moreInfoActions.selectEntity(entityId); }.bind(this), 1);
|
|
|
|
},
|
|
|
|
|
|
|
|
showGroupToggle: function (groupEntity, states) {
|
|
|
|
var canToggleCount;
|
|
|
|
|
|
|
|
if (!groupEntity || !states ||
|
|
|
|
(groupEntity.state !== 'on' && groupEntity.state !== 'off')) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
// only show if we can toggle 2+ entities in group
|
|
|
|
canToggleCount = states.reduce(
|
|
|
|
function (sum, state) {
|
|
|
|
return sum + window.hassUtil.canToggle(this.hass, state.entityId);
|
|
|
|
}, 0);
|
|
|
|
|
|
|
|
return canToggleCount > 1;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
</script>
|