Add navigation_path to picture-glance (#1397)

* Add navigation_path to picture-glance

* Lint
This commit is contained in:
Paulus Schoutsen 2018-07-03 10:57:26 -04:00 committed by GitHub
parent d299166f2a
commit 5cccf4836f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -14,12 +14,14 @@ import toggleEntity from '../common/entity/toggle-entity.js';
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';
import NavigateMixin from '../../../mixins/navigate-mixin.js';
/* /*
* @appliesMixin EventsMixin * @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin * @appliesMixin LocalizeMixin
* @appliesMixin NavigateMixin
*/ */
class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) { class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(PolymerElement))) {
static get template() { static get template() {
return html` return html`
<style> <style>
@ -28,6 +30,9 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
min-height: 48px; min-height: 48px;
overflow: hidden; overflow: hidden;
} }
hui-image.clickable {
cursor: pointer;
}
.box { .box {
@apply --paper-font-common-nowrap; @apply --paper-font-common-nowrap;
position: absolute; position: absolute;
@ -57,9 +62,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
</style> </style>
<ha-card> <ha-card>
<hui-image <hui-image
hass="[[hass]]" class$='[[_computeImageClass(_config)]]'
image="[[_config.image]]" on-click='_handleImageClick'
hass="[[hass]]"
image="[[_config.image]]"
state-image="[[_config.state_image]]" state-image="[[_config.state_image]]"
camera-image="[[_config.camera_image]]" camera-image="[[_config.camera_image]]"
entity="[[_config.entity]]" entity="[[_config.entity]]"
@ -71,7 +78,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[_showEntity(item, hass.states)]]"> <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_openDialog" on-click="_openDialog"
class$="[[_computeClass(item, hass.states)]]" class$="[[_computeButtonClass(item, hass.states)]]"
icon="[[_computeIcon(item, hass.states)]]" icon="[[_computeIcon(item, hass.states)]]"
title="[[_computeTooltip(item, hass.states)]]" title="[[_computeTooltip(item, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
@ -83,7 +90,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[_showEntity(item, hass.states)]]"> <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
<paper-icon-button <paper-icon-button
on-click="_callService" on-click="_callService"
class$="[[_computeClass(item, hass.states)]]" class$="[[_computeButtonClass(item, hass.states)]]"
icon="[[_computeIcon(item, hass.states)]]" icon="[[_computeIcon(item, hass.states)]]"
title="[[_computeTooltip(item, hass.states)]]" title="[[_computeTooltip(item, hass.states)]]"
></paper-icon-button> ></paper-icon-button>
@ -150,7 +157,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
return stateIcon(states[entityId]); return stateIcon(states[entityId]);
} }
_computeClass(entityId, states) { _computeButtonClass(entityId, states) {
return STATES_OFF.includes(states[entityId].state) ? '' : 'state-on'; return STATES_OFF.includes(states[entityId].state) ? '' : 'state-on';
} }
@ -158,6 +165,10 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
return `${computeStateName(states[entityId])}: ${computeStateDisplay(this.localize, states[entityId])}`; return `${computeStateName(states[entityId])}: ${computeStateDisplay(this.localize, states[entityId])}`;
} }
_computeImageClass(config) {
return config.navigation_path ? 'clickable' : '';
}
_openDialog(ev) { _openDialog(ev) {
this.fire('hass-more-info', { entityId: ev.model.item }); this.fire('hass-more-info', { entityId: ev.model.item });
} }
@ -166,6 +177,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
const entityId = ev.model.item; const entityId = ev.model.item;
toggleEntity(this.hass, entityId); toggleEntity(this.hass, entityId);
} }
_handleImageClick() {
if (!this._config.navigation_path) return;
this.navigate(this._config.navigation_path);
}
} }
customElements.define('hui-picture-glance-card', HuiPictureGlanceCard); customElements.define('hui-picture-glance-card', HuiPictureGlanceCard);