Fixes picture-glance no longer compatible with entity-filter (#1448)

* fixes https://github.com/home-assistant/ui-schema/issues/101

* Updates based on feedback

* More updates from feedback

* Cleanup
This commit is contained in:
Marius 2018-07-17 09:43:20 +03:00 committed by Paulus Schoutsen
parent 1f80769d9e
commit 9c66d47afa

View File

@ -10,6 +10,7 @@ import computeStateDisplay from '../../../common/entity/compute_state_display.js
import computeStateName from '../../../common/entity/compute_state_name.js'; import computeStateName from '../../../common/entity/compute_state_name.js';
import stateIcon from '../../../common/entity/state_icon.js'; import stateIcon from '../../../common/entity/state_icon.js';
import toggleEntity from '../common/entity/toggle-entity.js'; import toggleEntity from '../common/entity/toggle-entity.js';
import processConfigEntities from '../common/process-config-entities';
import EventsMixin from '../../../mixins/events-mixin.js'; import EventsMixin from '../../../mixins/events-mixin.js';
import LocalizeMixin from '../../../mixins/localize-mixin.js'; import LocalizeMixin from '../../../mixins/localize-mixin.js';
@ -56,15 +57,12 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
.box .title { .box .title {
font-weight: 500; font-weight: 500;
} }
paper-icon-button, iron-icon { paper-icon-button {
color: #A9A9A9; color: #A9A9A9;
} }
paper-icon-button.state-on, iron-icon.state-on { paper-icon-button.state-on {
color: white; color: white;
} }
iron-icon {
padding: 8px;
}
</style> </style>
<ha-card> <ha-card>
@ -81,24 +79,24 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
<div class="title">[[_config.title]]</div> <div class="title">[[_config.title]]</div>
<div> <div>
<template is="dom-repeat" items="[[_entitiesDialog]]"> <template is="dom-repeat" items="[[_entitiesDialog]]">
<template is="dom-if" if="[[_showEntity(item, hass.states)]]"> <template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_openDialog" on-click="_openDialog"
class$="[[_computeButtonClass(item, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
icon="[[_computeIcon(item, hass.states)]]" icon="[[_computeIcon(item.entity, hass.states)]]"
title="[[_computeTooltip(item, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
</template> </template>
</template> </template>
</div> </div>
<div> <div>
<template is="dom-repeat" items="[[_entitiesToggle]]"> <template is="dom-repeat" items="[[_entitiesToggle]]">
<template is="dom-if" if="[[_showEntity(item, hass.states)]]"> <template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_callService" on-click="_callService"
class$="[[_computeButtonClass(item, hass.states)]]" class$="[[_computeButtonClass(item.entity, hass.states)]]"
icon="[[_computeIcon(item, hass.states)]]" icon="[[_computeIcon(item.entity, hass.states)]]"
title="[[_computeTooltip(item, hass.states)]]" title="[[_computeTooltip(item.entity, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
</template> </template>
</template> </template>
@ -112,15 +110,8 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
return { return {
hass: Object, hass: Object,
_config: Object, _config: Object,
_entitiesDialog: { _entitiesDialog: Array,
type: Array, _entitiesToggle: Array
computed: '_computeEntitiesDialog(hass, _config, _entitiesToggle)',
},
_entitiesToggle: {
type: Array,
value: [],
computed: '_computeEntitiesToggle(hass, _config)',
},
}; };
} }
@ -134,26 +125,22 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
(config.state_image && !config.entity)) { (config.state_image && !config.entity)) {
throw new Error('Invalid card configuration'); throw new Error('Invalid card configuration');
} }
const entities = processConfigEntities(config.entities);
const dialog = [];
const toggle = [];
this._config = config; entities.forEach((item) => {
} if (config.force_dialog || !DOMAINS_TOGGLE.has(computeDomain(item.entity))) {
dialog.push(item);
_computeEntitiesDialog(hass, config, entitiesService) { } else {
if (config.force_dialog) { toggle.push(item);
return config.entities; }
} });
this.setProperties({
return config.entities.filter(entity => !entitiesService.includes(entity) && _config: config,
(entity in hass.states)); _entitiesDialog: dialog,
} _entitiesToggle: toggle
});
_computeEntitiesToggle(hass, config) {
if (config.force_dialog) {
return [];
}
return config.entities.filter(entity =>
(entity in hass.states) && DOMAINS_TOGGLE.has(computeDomain(entity)));
} }
_showEntity(entityId, states) { _showEntity(entityId, states) {
@ -177,12 +164,11 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
} }
_openDialog(ev) { _openDialog(ev) {
this.fire('hass-more-info', { entityId: ev.model.item }); this.fire('hass-more-info', { entityId: ev.model.item.entity });
} }
_callService(ev) { _callService(ev) {
const entityId = ev.model.item; toggleEntity(this.hass, ev.model.item.entity);
toggleEntity(this.hass, entityId);
} }
_handleImageClick() { _handleImageClick() {
@ -196,5 +182,4 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
} }
} }
} }
customElements.define('hui-picture-glance-card', HuiPictureGlanceCard); customElements.define('hui-picture-glance-card', HuiPictureGlanceCard);