mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-17 14:26:35 +00:00
Display controls for all members of group if all members are of the s… (#61)
* Display controls for all members of group if all members are of the same domain. * Clean up for eslint * Pick the most capable member of a group as a basis for whole group controls * Create a new state with only necessary attribute changes for group control * Always use first member of group for base entity of group controls
This commit is contained in:
parent
77f4dd1fed
commit
4a667eb77e
@ -29,10 +29,13 @@
|
|||||||
ha-entity-toggle {
|
ha-entity-toggle {
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
.header-more-info {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<ha-card>
|
<ha-card>
|
||||||
<div class='header horizontal layout center'>
|
<div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
|
||||||
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
<div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
|
||||||
<template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
|
<template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
|
||||||
<ha-entity-toggle state-obj='[[groupEntity]]'></ha-entity-toggle>
|
<ha-entity-toggle state-obj='[[groupEntity]]'></ha-entity-toggle>
|
||||||
|
@ -24,14 +24,27 @@ export default new Polymer({
|
|||||||
return groupEntity ? groupEntity.entityDisplay :
|
return groupEntity ? groupEntity.entityDisplay :
|
||||||
states[0].domain.replace(/_/g, ' ');
|
states[0].domain.replace(/_/g, ' ');
|
||||||
},
|
},
|
||||||
|
computeTitleClass(groupEntity) {
|
||||||
|
let classes = 'header horizontal layout center ';
|
||||||
|
if (groupEntity) {
|
||||||
|
classes += 'header-more-info';
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
entityTapped(ev) {
|
entityTapped(ev) {
|
||||||
if (ev.target.classList.contains('paper-toggle-button') ||
|
if (ev.target.classList.contains('paper-toggle-button') ||
|
||||||
ev.target.classList.contains('paper-icon-button')) {
|
ev.target.classList.contains('paper-icon-button') ||
|
||||||
|
(!ev.model && !this.groupEntity)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
const entityId = ev.model.item.entityId;
|
|
||||||
|
let entityId;
|
||||||
|
if (ev.model) {
|
||||||
|
entityId = ev.model.item.entityId;
|
||||||
|
} else {
|
||||||
|
entityId = this.groupEntity.entityId;
|
||||||
|
}
|
||||||
this.async(() => moreInfoActions.selectEntity(entityId), 1);
|
this.async(() => moreInfoActions.selectEntity(entityId), 1);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
<link rel="import" href="../state-summary/state-card-content.html">
|
<link rel="import" href="../state-summary/state-card-content.html">
|
||||||
|
|
||||||
|
|
||||||
<dom-module id="more-info-group">
|
<dom-module id="more-info-group">
|
||||||
<style>
|
<style>
|
||||||
.child-card {
|
.child-card {
|
||||||
@ -13,6 +14,7 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
|
<div id="groupedControlDetails"></div>
|
||||||
<template is='dom-repeat' items="[[states]]" as='state'>
|
<template is='dom-repeat' items="[[states]]" as='state'>
|
||||||
<div class='child-card'>
|
<div class='child-card'>
|
||||||
<state-card-content state-obj="[[state]]"></state-card-content>
|
<state-card-content state-obj="[[state]]"></state-card-content>
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
import hass from '../util/home-assistant-js-instance';
|
import hass from '../util/home-assistant-js-instance';
|
||||||
|
|
||||||
import Polymer from '../polymer';
|
import Polymer from '../polymer';
|
||||||
import nuclearObserver from '../util/bound-nuclear-behavior';
|
import nuclearObserver from '../util/bound-nuclear-behavior';
|
||||||
|
import dynamicContentUpdater from '../util/dynamic-content-updater';
|
||||||
|
import stateMoreInfoType from '../util/state-more-info-type';
|
||||||
|
|
||||||
require('../state-summary/state-card-content');
|
require('../state-summary/state-card-content');
|
||||||
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
entityGetters,
|
entityGetters,
|
||||||
moreInfoGetters,
|
moreInfoGetters,
|
||||||
@ -36,4 +38,40 @@ export default new Polymer({
|
|||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
observers: [
|
||||||
|
'statesChanged(stateObj, states)',
|
||||||
|
],
|
||||||
|
|
||||||
|
statesChanged(stateObj, states) {
|
||||||
|
let groupDomainStateObj = false;
|
||||||
|
|
||||||
|
if (states && states.length > 0) {
|
||||||
|
const baseStateObj = states[0];
|
||||||
|
|
||||||
|
groupDomainStateObj = baseStateObj.set('entityId', stateObj.entityId).set(
|
||||||
|
'attributes', Object.assign({}, baseStateObj.attributes));
|
||||||
|
|
||||||
|
for (let i = 0; i < states.length; i++) {
|
||||||
|
const s = states[i];
|
||||||
|
if (s && s.domain) {
|
||||||
|
if (groupDomainStateObj.domain !== s.domain) {
|
||||||
|
groupDomainStateObj = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!groupDomainStateObj) {
|
||||||
|
const el = Polymer.dom(this.$.groupedControlDetails);
|
||||||
|
if (el.lastChild) {
|
||||||
|
el.removeChild(el.lastChild);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
dynamicContentUpdater(
|
||||||
|
this.$.groupedControlDetails,
|
||||||
|
`MORE-INFO-${stateMoreInfoType(groupDomainStateObj).toUpperCase()}`,
|
||||||
|
{ stateObj: groupDomainStateObj });
|
||||||
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user