Add more demos (#1476)

gallery/src/demos/demo-hui-glance-card.js

@@ -0,0 +1,78 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../src/panels/lovelace/cards/hui-glance-card.js';
+
+import HomeAssistant from '../data/hass.js';
+import demoStates from '../data/demo_dump.js';
+
+const CONFIGS = [
+  {
+    entities: [
+      'binary_sensor.movement_backyard',
+      'light.bed_light',
+      'binary_sensor.basement_floor_wet',
+      'sensor.outside_temperature',
+      'light.ceiling_lights',
+      'switch.ac',
+      'lock.kitchen_door'
+    ],
+    type: 'glance',
+    title: 'Glance card sample'
+  },
+  {
+    entities: [
+      'binary_sensor.movement_backyard',
+      'light.bed_light',
+      'binary_sensor.basement_floor_wet',
+      'sensor.outside_temperature',
+      'light.ceiling_lights',
+      'switch.ac',
+      'lock.kitchen_door'
+    ],
+    type: 'glance',
+  },
+  {
+    entities: [
+      'lock.kitchen_door'
+    ],
+    type: 'glance',
+  },
+
+];
+
+class DemoPicEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+        }
+        hui-glance-card {
+          width: 400px;
+          display: inline-block;
+          margin-left: 20px;
+          margin-top: 20px;
+        }
+      </style>
+      <div id='root'>
+      </div>
+    `;
+  }
+
+  ready() {
+    super.ready();
+
+    const root = this.$.root;
+    const hass = new HomeAssistant();
+    hass.states = demoStates;
+    console.log(demoStates);
+    CONFIGS.forEach((config) => {
+      const el = document.createElement('hui-glance-card');
+      el.setConfig(config);
+      el.hass = hass;
+      root.appendChild(el);
+    });
+  }
+}
+
+customElements.define('demo-hui-glance-card', DemoPicEntity);

gallery/src/demos/demo-hui-picture-entity-card.js

@@ -0,0 +1,61 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
+
+import HomeAssistant from '../data/hass.js';
+import demoStates from '../data/demo_dump.js';
+
+const CONFIGS = [
+  {
+    type: 'picture-entity',
+    image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
+    entity: 'light.bed_light',
+  },
+  {
+    type: 'picture-entity',
+    image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
+    entity: 'light.kitchen_lights',
+  },
+  {
+    type: 'picture-glance',
+    image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
+    entity: 'light.non_existing'
+  },
+];
+
+class DemoPicEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+        }
+        hui-picture-entity-card {
+          width: 400px;
+          display: inline-block;
+          margin-left: 20px;
+          margin-top: 20px;
+        }
+      </style>
+      <div id='root'>
+      </div>
+    `;
+  }
+
+  ready() {
+    super.ready();
+
+    const root = this.$.root;
+    const hass = new HomeAssistant();
+    hass.states = demoStates;
+    console.log(demoStates);
+    CONFIGS.forEach((config) => {
+      const el = document.createElement('hui-picture-entity-card');
+      el.setConfig(config);
+      el.hass = hass;
+      root.appendChild(el);
+    });
+  }
+}
+
+customElements.define('demo-hui-picture-entity-card', DemoPicEntity);

gallery/src/demos/demo-hui-picture-glance-card.js

@@ -37,6 +37,22 @@ const CONFIGS = [
       'light.ceiling_lights',
     ]
   },
+  {
+    type: 'picture-glance',
+    image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
+    entities: [
+      'switch.decorative_lights',
+      'light.ceiling_lights',
+    ]
+  },
+  {
+    type: 'picture-glance',
+    image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
+    entities: [
+      'binary_sensor.movement_backyard',
+      'binary_sensor.basement_floor_wet',
+    ]
+  },
 ];
 
 class DemoPicGlance extends PolymerElement {