Add weblink support to the frontend

src/state-summary/state-card-content.html

@@ -1,9 +1,10 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
-<link rel="import" href="state-card-display.html">
-<link rel="import" href="state-card-toggle.html">
-<link rel="import" href="state-card-thermostat.html">
 <link rel="import" href="state-card-configurator.html">
-<link rel="import" href="state-card-scene.html">
+<link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-media_player.html">
 <link rel="import" href="state-card-rollershutter.html">
+<link rel="import" href="state-card-scene.html">
+<link rel="import" href="state-card-thermostat.html">
+<link rel="import" href="state-card-toggle.html">
+<link rel="import" href="state-card-weblink.html">

src/state-summary/state-card-content.js

@@ -2,13 +2,14 @@ import Polymer from '../polymer';
 
 import stateCardType from '../util/state-card-type';
 
-require('./state-card-display');
-require('./state-card-toggle');
-require('./state-card-thermostat');
 require('./state-card-configurator');
-require('./state-card-scene');
+require('./state-card-display');
 require('./state-card-media_player');
+require('./state-card-scene');
 require('./state-card-rollershutter');
+require('./state-card-thermostat');
+require('./state-card-toggle');
+require('./state-card-weblink');
 
 export default new Polymer({
   is: 'state-card-content',

src/state-summary/state-card-weblink.html

@@ -0,0 +1,25 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../components/entity/state-badge.html">
+
+<dom-module id="state-card-weblink">
+  <style>
+  state-badge {
+    float: left;
+  }
+
+  .name {
+    margin-left: 56px;
+    text-transform: capitalize;
+    font-weight: 400;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    line-height: 40px;
+  }
+  </style>
+
+  <template>
+    <state-badge state-obj='[[stateObj]]'></state-badge>
+    <div class='name'>[[stateObj.entityDisplay]]</div>
+  </template>
+</dom-module>

src/state-summary/state-card-weblink.js

@@ -0,0 +1,22 @@
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+export default new Polymer({
+  is: 'state-card-weblink',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap(ev) {
+    ev.stopPropagation();
+    window.open(this.stateObj.state, '_blank');
+  },
+});

src/util/domain-icon.js

@@ -49,9 +49,6 @@ export default function domainIcon(domain, state) {
     case 'notify':
       return 'mdi:comment-alert';
 
-    case 'updater':
-      return 'mdi:cloud-upload';
-
     case 'rollershutter':
       return state && state === 'open' ? 'mdi:window-open' : 'mdi:window-closed';
 
@@ -76,6 +73,12 @@ export default function domainIcon(domain, state) {
     case 'thermostat':
       return 'mdi:nest-thermostat';
 
+    case 'updater':
+      return 'mdi:cloud-upload';
+
+    case 'weblink':
+      return 'mdi:open-in-new';
+
     default:
     /* eslint-disable no-console */
       console.warn(`Unable to find icon for domain ${domain} (${state})`);

src/util/state-card-type.js

@@ -1,7 +1,13 @@
 import canToggle from './can-toggle';
 
 const DOMAINS_WITH_CARD = [
-  'thermostat', 'configurator', 'scene', 'media_player', 'rollershutter'];
+  'configurator',
+  'media_player',
+  'rollershutter',
+  'scene',
+  'thermostat',
+  'weblink',
+];
 
 export default function stateCardType(state) {
   if (DOMAINS_WITH_CARD.indexOf(state.domain) !== -1) {