From dc9a227aa3cd00ac169de00126295648e7f9bd43 Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Tue, 19 Jun 2018 01:19:01 +0200
Subject: [PATCH] Exp. UI: Add error card (#1298)

* Exp. UI: Add error card

* Cleanup

* Lint

* Typo

* Requested changes
---
 src/panels/experimental-ui/hui-error-card.js | 30 ++++++++++++++++++++
 src/panels/experimental-ui/hui-view.js       | 27 +++++++++++-------
 2 files changed, 47 insertions(+), 10 deletions(-)
 create mode 100644 src/panels/experimental-ui/hui-error-card.js

diff --git a/src/panels/experimental-ui/hui-error-card.js b/src/panels/experimental-ui/hui-error-card.js
new file mode 100644
index 0000000000..b2eb430b34
--- /dev/null
+++ b/src/panels/experimental-ui/hui-error-card.js
@@ -0,0 +1,30 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+class HuiErrorCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          background-color: red;
+          color: white;
+          text-align: center;
+          padding: 8px;
+        }
+      </style>
+      [[config.error]]
+    `;
+  }
+
+  static get properties() {
+    return {
+      config: Object
+    };
+  }
+
+  getCardSize() {
+    return 1;
+  }
+}
+
+customElements.define('hui-error-card', HuiErrorCard);
diff --git a/src/panels/experimental-ui/hui-view.js b/src/panels/experimental-ui/hui-view.js
index ca722a4d86..26dd5d60dc 100644
--- a/src/panels/experimental-ui/hui-view.js
+++ b/src/panels/experimental-ui/hui-view.js
@@ -3,6 +3,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import './hui-entities-card.js';
 import './hui-entity-filter-card.js';
+import './hui-error-card.js';
 
 import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
 
@@ -96,16 +97,22 @@ class HUIView extends PolymerElement {
     const elements = [];
 
     for (let i = 0; i < cards.length; i++) {
-      const cardConfig = cards[i];
-      const tag = cardElement(cardConfig.type);
-      if (!tag) {
-        // eslint-disable-next-line
-        console.error('Unknown type encountered:', cardConfig.type);
-        continue;
-      } else if (!customElements.get(tag)) {
-        // eslint-disable-next-line
-        console.error('Custom element doesn\'t exist:', tag);
-        continue;
+      let error = null;
+      let cardConfig = cards[i];
+      let tag;
+      if (!cardConfig.type) {
+        error = 'Card type not configured.';
+      } else {
+        tag = cardElement(cardConfig.type);
+        if (tag === null) {
+          error = `Unknown card type encountered: "${cardConfig.type}".`;
+        } else if (!customElements.get(tag)) {
+          error = `Custom element doesn't exist: "${tag}".`;
+        }
+      }
+      if (error) {
+        tag = 'hui-error-card';
+        cardConfig = { error };
       }
       const element = document.createElement(tag);
       element.config = cardConfig;