Add simple picture card (#1385)

* Add simple picture card

* navigate_path -> navigation_path

src/panels/lovelace/cards/hui-picture-card.js

@@ -0,0 +1,67 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../components/ha-card.js';
+
+import NavigateMixin from '../../../mixins/navigate-mixin.js';
+
+/*
+ * @appliesMixin NavigateMixin
+ */
+class HuiPictureCard extends NavigateMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        ha-card {
+          overflow: hidden;
+        }
+        ha-card[clickable] {
+          cursor: pointer;
+        }
+        img {
+          display: block;
+          width: 100%;
+        }
+      </style>
+
+      <ha-card on-click="_cardClicked" clickable$='[[_computeClickable(_config)]]'>
+        <img src='[[_config.image]]' />
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+    };
+  }
+
+  getCardSize() {
+    return 3;
+  }
+
+  setConfig(config) {
+    if (!config || !config.image) {
+      throw new Error('Error in card configuration.');
+    }
+
+    this._config = config;
+  }
+
+  _computeClickable(config) {
+    return config.navigation_path || config.service;
+  }
+
+  _cardClicked() {
+    if (this._config.navigation_path) {
+      this.navigate(this._config.navigation_path);
+    }
+    if (this._config.service) {
+      const [domain, service] = this._config.service.split('.', 2);
+      this.hass.callService(domain, service, this._config.service_data);
+    }
+  }
+}
+
+customElements.define('hui-picture-card', HuiPictureCard);

src/panels/lovelace/common/create-card-element.js

@@ -10,6 +10,7 @@ import '../cards/hui-horizontal-stack-card.js';
 import '../cards/hui-iframe-card.js';
 import '../cards/hui-markdown-card.js';
 import '../cards/hui-media-control-card.js';
+import '../cards/hui-picture-card.js';
 import '../cards/hui-picture-elements-card';
 import '../cards/hui-picture-entity-card';
 import '../cards/hui-picture-glance-card';
@@ -30,6 +31,7 @@ const CARD_TYPES = [
   'iframe',
   'markdown',
   'media-control',
+  'picture',
   'picture-elements',
   'picture-entity',
   'picture-glance',