Added support for states

README.md

@@ -10,6 +10,7 @@ This element is **not** all that useful as a card (it can be used for that to),
 | name | string | **Required** | The name you want to show.
 | url | string | **Required** | The url you want to open.
 | icon | string | **Required** | The icon you want to show.
+| entity | string | **Optional** | The entity you want to the state from (if defined).
 
 ## Installation
 
@@ -47,6 +48,7 @@ Add a custom element in your `ui-lovelace.yaml`
       name: Home Assistant
       url: https://www.home-assistant.io/
       icon: mdi:home-assistant
+      entity: sensor.commute_to_home
 ```
 
 **Give this result:**\

VERSION

@@ -1 +1 @@
-0.0.1
+0.1.0

ext-weblink.js

@@ -1,35 +1,52 @@
 class ExtWebLink extends HTMLElement {
-  setConfig(config) {
-    if (!config || !config.name || !config.url) {
-      throw new Error('Error in card configuration.');
+  set hass(hass) {
+    if (!this.config.entity) {
+      var state = "";
+    } else {
+      var state = hass.states[this.config.entity].state;
     }
-    this.innerHTML = `
+    this.innerHTML =`
       <style>
         a {
           display: flex;
           align-items: center;
           color: var(--primary-color);
+          text-decoration-line: none;
         }
         ha-icon {
           padding: 8px;
           color: var(--paper-item-icon-color);
         }
+        ha-icon .innline {
+          padding: 0px;
+          color: var(--paper-item-icon-color);
+        }
         div {
           flex: 1;
           white-space: nowrap;
           overflow: hidden;
           text-overflow: ellipsis;
           margin-left: 16px;
         }
+        div .state {
+          text-align: right;
+        }
       </style>
-      <a href="${config.url}" target="_blank">
-      <ha-icon icon="${config.icon}"></ha-icon>
-        <div>
-          ${config.name}
+      <a href="${this.config.url}" target="_blank">
+      <ha-icon icon="${this.config.icon}"></ha-icon>
+        <div class="name">
+          ${this.config.name} <ha-icon icon="mdi:open-in-new" class="innline"></ha-icon>
+        </div>
+        <div class="state">
+          ${state}
         </div>
       </a>
     `;
   }
+  setConfig(config) {
+    this.config = config;
+  }
+
   getCardSize() {
     return 1;
   }