From 5cccf4836f68fd118dc3ae78b86b80d0b8b52231 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Tue, 3 Jul 2018 10:57:26 -0400
Subject: [PATCH] Add navigation_path to picture-glance (#1397)

* Add navigation_path to picture-glance

* Lint
---
 .../lovelace/cards/hui-picture-glance-card.js | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

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`
       <style>
@@ -28,6 +30,9 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           min-height: 48px;
           overflow: hidden;
         }
+        hui-image.clickable {
+          cursor: pointer;
+        }
         .box {
           @apply --paper-font-common-nowrap;
           position: absolute;
@@ -57,9 +62,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </style>
 
       <ha-card>
-        <hui-image 
-          hass="[[hass]]" 
-          image="[[_config.image]]" 
+        <hui-image
+          class$='[[_computeImageClass(_config)]]'
+          on-click='_handleImageClick'
+          hass="[[hass]]"
+          image="[[_config.image]]"
           state-image="[[_config.state_image]]"
           camera-image="[[_config.camera_image]]"
           entity="[[_config.entity]]"
@@ -71,7 +78,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
                 <paper-icon-button
                   on-click="_openDialog"
-                  class$="[[_computeClass(item, hass.states)]]"
+                  class$="[[_computeButtonClass(item, hass.states)]]"
                   icon="[[_computeIcon(item, hass.states)]]"
                   title="[[_computeTooltip(item, hass.states)]]"
                 ></paper-icon-button>
@@ -83,7 +90,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
               <template is="dom-if" if="[[_showEntity(item, hass.states)]]">
                 <paper-icon-button
                   on-click="_callService"
-                  class$="[[_computeClass(item, hass.states)]]"
+                  class$="[[_computeButtonClass(item, hass.states)]]"
                   icon="[[_computeIcon(item, hass.states)]]"
                   title="[[_computeTooltip(item, hass.states)]]"
                 ></paper-icon-button>
@@ -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);