Add more features to gallery (#1477)

* Add more features to gallery

* Feedback

* Fix margin

* Use array-style config

* Split into DemoCards and DemoCard

* Move padding

* Use min-height

gallery/src/components/demo-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 JsYaml from 'js-yaml';
+
+import '../../../src/panels/lovelace/cards/hui-glance-card.js';
+import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
+import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js';
+
+import HomeAssistant from '../data/hass.js';
+import demoStates from '../data/demo_dump.js';
+
+class DemoCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          padding: 8px 8px 32px 8px;
+        }
+        h2 {
+          margin: 0;
+          color: var(--primary-color);
+          margin-bottom: 20px;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      type: String,
+      config: {
+        type: Object,
+        observer: '_configChanged'
+      }
+    };
+  }
+
+  _configChanged(config) {
+    const root = this.$.root;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    const hass = new HomeAssistant();
+    hass.states = demoStates;
+
+    const heading = document.createElement('h2');
+    heading.innerText = config.heading;
+    root.appendChild(heading);
+    const el = document.createElement(this.type);
+    el.setConfig(JsYaml.safeLoad(config.config)[0]);
+    el.hass = hass;
+    root.appendChild(el);
+    const yaml = document.createElement('pre');
+    yaml.innerText = config.config.trim();
+    root.appendChild(yaml);
+  }
+}
+
+customElements.define('demo-card', DemoCard);

gallery/src/components/demo-cards.js

@@ -0,0 +1,47 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import './demo-card.js';
+
+class DemoCards extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          flex-wrap: wrap;
+        }
+        #root > * {
+          flex-basis: 600px;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      type: String,
+      configs: {
+        type: Object,
+        observer: '_configsChanged'
+      }
+    };
+  }
+
+  _configsChanged(configs) {
+    const root = this.$.root;
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    configs.forEach((config) => {
+      const el = document.createElement('demo-card');
+      el.config = config;
+      el.type = this.type;
+      root.appendChild(el);
+    });
+  }
+}
+
+customElements.define('demo-cards', DemoCards);

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

@@ -1,77 +1,146 @@
 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 '../components/demo-cards.js';
-
-import HomeAssistant from '../data/hass.js';
-import demoStates from '../data/demo_dump.js';
 
 const CONFIGS = [
   {
-    entities: [
+    heading: 'Basic example',
-      'binary_sensor.movement_backyard',
+    config: `
-      'light.bed_light',
+- type: glance
-      'binary_sensor.basement_floor_wet',
+  entities:
-      'sensor.outside_temperature',
+    - device_tracker.demo_paulus
-      'light.ceiling_lights',
+    - media_player.living_room
-      'switch.ac',
+    - sun.sun
-      'lock.kitchen_door'
+    - cover.kitchen_window
-    ],
+    - light.kitchen_lights
-    type: 'glance',
+    - lock.kitchen_door
-    title: 'Glance card sample'
+    - light.ceiling_lights
+    `
   },
   {
-    entities: [
+    heading: 'With title',
-      'binary_sensor.movement_backyard',
+    config: `
-      'light.bed_light',
+- type: glance
-      'binary_sensor.basement_floor_wet',
+  title: This is glance
-      'sensor.outside_temperature',
+  entities:
-      'light.ceiling_lights',
+    - device_tracker.demo_paulus
-      'switch.ac',
+    - media_player.living_room
-      'lock.kitchen_door'
+    - sun.sun
-    ],
+    - cover.kitchen_window
-    type: 'glance',
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
   },
   {
-    entities: [
+    heading: 'Custom column width',
-      'lock.kitchen_door'
+    config: `
-    ],
+- type: glance
-    type: 'glance',
+  column_width: calc(100% / 7)
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
+  {
+    heading: 'No name',
+    config: `
+- type: glance
+  show_name: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
+  {
+    heading: 'No state',
+    config: `
+- type: glance
+  show_state: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
+  {
+    heading: 'No name and no state',
+    config: `
+- type: glance
+  show_name: false
+  show_state: false
+  entities:
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
+  {
+    heading: 'Custom name',
+    config: `
+- type: glance
+  entities:
+    - entity: device_tracker.demo_paulus
+      name: ¯\\_(ツ)_/¯
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    - lock.kitchen_door
+    - light.ceiling_lights
+    `
+  },
+  {
+    heading: 'Custom tap action',
+    config: `
+- type: glance
+  entities:
+    - entity: lock.kitchen_door
+      tap_action: toggle
+    - entity: light.ceiling_lights
+      tap_action: turn-on
+    - device_tracker.demo_paulus
+    - media_player.living_room
+    - sun.sun
+    - cover.kitchen_window
+    - light.kitchen_lights
+    `
   },
-
 ];
 
 class DemoPicEntity extends PolymerElement {
   static get template() {
     return html`
-      <style>
+      <demo-cards type="hui-glance-card" configs="[[_configs]]"></demo-cards>
-        #root {
-        }
-        hui-glance-card {
-          width: 400px;
-          display: inline-block;
-          margin-left: 20px;
-          margin-top: 20px;
-        }
-      </style>
-      <div id='root'>
-      </div>
     `;
   }
 
-  ready() {
+  static get properties() {
-    super.ready();
+    return {
-
+      _configs: {
-    const root = this.$.root;
+        type: Object,
-    const hass = new HomeAssistant();
+        value: CONFIGS
-    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);
-    });
   }
 }
 

gallery/src/ha-gallery.js

@@ -20,7 +20,7 @@ class HaGallery extends PolymerElement {
         -moz-user-select: initial;
       }
       app-header-layout {
-        height: 100vh;
+        min-height: 100vh;
       }
       paper-icon-button.invisible {
         visibility: hidden;

package.json

@@ -70,6 +70,7 @@
     "fecha": "^2.3.3",
     "home-assistant-js-websocket": "2.0.1",
     "intl-messageformat": "^2.2.0",
+    "js-yaml": "^3.12.0",
     "leaflet": "^1.3.1",
     "marked": "^0.4.0",
     "mdn-polyfills": "^5.8.0",