diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index 3ef0e5e993..7c50df3c85 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -14,12 +14,14 @@ import toggleEntity from '../common/entity/toggle-entity.js';
import EventsMixin from '../../../mixins/events-mixin.js';
import LocalizeMixin from '../../../mixins/localize-mixin.js';
+import NavigateMixin from '../../../mixins/navigate-mixin.js';
/*
* @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin
+ * @appliesMixin NavigateMixin
*/
-class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(PolymerElement))) {
static get template() {
return html`
-
@@ -83,7 +90,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
@@ -150,7 +157,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
return stateIcon(states[entityId]);
}
- _computeClass(entityId, states) {
+ _computeButtonClass(entityId, states) {
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])}`;
}
+ _computeImageClass(config) {
+ return config.navigation_path ? 'clickable' : '';
+ }
+
_openDialog(ev) {
this.fire('hass-more-info', { entityId: ev.model.item });
}
@@ -166,6 +177,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
const entityId = ev.model.item;
toggleEntity(this.hass, entityId);
}
+
+ _handleImageClick() {
+ if (!this._config.navigation_path) return;
+ this.navigate(this._config.navigation_path);
+ }
}
customElements.define('hui-picture-glance-card', HuiPictureGlanceCard);