More info (#1500)

* Add more info

* Lint

* Minor cleanup

* Address comments

gallery/src/components/demo-cards.js

@@ -27,7 +27,7 @@ class DemoCards extends PolymerElement {
       <app-toolbar>
         <div class='filters'>
           <paper-toggle-button
-            checked='{{showConfig}}'
+            checked='{{_showConfig}}'
           >Show config</paper-toggle-button>
         </div>
       </app-toolbar>
@@ -35,7 +35,7 @@ class DemoCards extends PolymerElement {
         <template is='dom-repeat' items='[[configs]]'>
           <demo-card
             config='[[item]]'
-            show-config='[[showConfig]]'
+            show-config='[[_showConfig]]'
             hass='[[hass]]'
           ></demo-card>
         </template>
@@ -47,7 +47,7 @@ class DemoCards extends PolymerElement {
     return {
       configs: Object,
       hass: Object,
-      showConfig: {
+      _showConfig: {
         type: Boolean,
         value: false,
       }

gallery/src/components/demo-more-info.js

@@ -0,0 +1,93 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../src/state-summary/state-card-content.js';
+import '../../../src/dialogs/more-info/controls/more-info-content.js';
+import '../../../src/components/ha-card.js';
+
+
+class DemoMoreInfo extends PolymerElement {
+  static get template() {
+    return html`
+        <style>
+          :host {
+            display: flex;
+            align-items: start;
+          }
+
+          ha-card {
+            width: 333px;
+          }
+
+          state-card-content {
+            display: block;
+            padding: 16px;
+          }
+
+          more-info-content {
+            padding: 0 16px;
+          }
+
+          pre {
+            width: 400px;
+            margin: 16px;
+            overflow: auto;
+          }
+
+          @media only screen and (max-width: 800px) {
+            :host {
+              flex-direction: column;
+            }
+            pre {
+              margin-left: 0;
+            }
+          }
+        </style>
+        <ha-card>
+          <state-card-content
+            state-obj="[[_stateObj]]"
+            hass="[[hass]]"
+            in-dialog
+          ></state-card-content>
+
+          <more-info-content
+            hass='[[hass]]'
+            state-obj='[[_stateObj]]'
+          ></more-info-content>
+        </ha-card>
+        <template is='dom-if' if='[[showConfig]]'>
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      entityId: String,
+      showConfig: Boolean,
+      _stateObj: {
+        type: Object,
+        computed: '_getState(entityId, hass.states)'
+      }
+    };
+  }
+
+  _getState(entityId, states) {
+    return states[entityId];
+  }
+
+  _jsonEntity(stateObj) {
+    // We are caching some things on stateObj
+    // (it sucks, we will remove in the future)
+    const tmp = {};
+    Object.keys(stateObj).forEach((key) => {
+      if (key[0] !== '_') {
+        tmp[key] = stateObj[key];
+      }
+    });
+    return JSON.stringify(tmp, null, 2);
+  }
+}
+
+customElements.define('demo-more-info', DemoMoreInfo);

gallery/src/components/demo-more-infos.js

@@ -0,0 +1,58 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/app-layout/app-toolbar/app-toolbar.js';
+import '@polymer/paper-toggle-button/paper-toggle-button.js';
+
+import './demo-more-info.js';
+
+class DemoMoreInfos extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        .cards {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        demo-more-info {
+          margin: 16px 16px 32px;
+        }
+        app-toolbar {
+          background-color: var(--light-primary-color);
+        }
+        .filters {
+          margin-left: 60px;
+        }
+      </style>
+      <app-toolbar>
+        <div class='filters'>
+          <paper-toggle-button
+            checked='{{_showConfig}}'
+          >Show entity</paper-toggle-button>
+        </div>
+      </app-toolbar>
+      <div class='cards'>
+        <template is='dom-repeat' items='[[entities]]'>
+          <demo-more-info
+            entity-id='[[item]]'
+            show-config='[[_showConfig]]'
+            hass='[[hass]]'
+          ></demo-more-info>
+        </template>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      entities: Array,
+      hass: Object,
+      _showConfig: {
+        type: Boolean,
+        value: false,
+      }
+    };
+  }
+}
+
+customElements.define('demo-more-infos', DemoMoreInfos);

gallery/src/demos/demo-more-info-light.js

@@ -0,0 +1,60 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../src/dialogs/more-info/controls/more-info-content.js';
+import '../../../src/components/ha-card.js';
+
+import getEntity from '../data/entity.js';
+import provideHass from '../data/provide_hass.js';
+
+import '../components/demo-more-infos.js';
+
+/* eslint-disable no-unused-vars */
+
+const SUPPORT_BRIGHTNESS = 1;
+const SUPPORT_COLOR_TEMP = 2;
+const SUPPORT_EFFECT = 4;
+const SUPPORT_FLASH = 8;
+const SUPPORT_COLOR = 16;
+const SUPPORT_TRANSITION = 32;
+const SUPPORT_WHITE_VALUE = 128;
+
+const ENTITIES = [
+  getEntity('light', 'bed_light', 'on', {
+    friendly_name: 'Basic Light'
+  }),
+  getEntity('light', 'kitchen_light', 'on', {
+    friendly_name: 'Brightness Light',
+    brightness: 80,
+    supported_features: SUPPORT_BRIGHTNESS,
+  }),
+];
+
+
+class DemoMoreInfoLight extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-more-infos
+        hass='[[hass]]'
+        entities='[[_entities]]'
+      ></demo-more-infos>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _entities: {
+        type: Array,
+        value: ENTITIES.map(ent => ent.entityId),
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this);
+    hass.addEntities(ENTITIES);
+  }
+}
+
+customElements.define('demo-more-info-light', DemoMoreInfoLight);

gallery/src/ha-gallery.js

@@ -11,7 +11,7 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../src/managers/notification-manager.js';
 
-const demos = require.context('./demos', true, /^(.*\.(js$))[^.]*$/im);
+const DEMOS = require.context('./demos', true, /^(.*\.(js$))[^.]*$/im);
 
 const fixPath = path => path.substr(2, path.length - 5);
 
@@ -31,10 +31,21 @@ class HaGallery extends PolymerElement {
         visibility: hidden;
       }
 
-      paper-card {
+      .pickers {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: start;
+      }
+
+      .pickers paper-card {
+        width: 400px;
         display: block;
-        max-width: 400px;
+        margin: 16px 8px 0;
-        margin: 20px auto;
+      }
+
+      .pickers paper-card:last-child {
+        margin-bottom: 16px;
       }
 
       .intro {
@@ -67,29 +78,47 @@ class HaGallery extends PolymerElement {
         <div class='content'>
           <div id='demo'></div>
           <template is='dom-if' if='[[!_demo]]'>
-            <paper-card heading="Lovelace card demos">
+            <div class='pickers'>
-              <div class='card-content intro'>
+              <paper-card heading="Lovelace card demos">
-                <p>
+                <div class='card-content intro'>
-                  Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
+                  <p>
-                </p>
+                    Lovelace has many different cards. Each card allows the user to tell a different story about what is going on in their house. These cards are very customizable, as no household is the same.
+                  </p>
 
-                <p>
+                  <p>
-                  This gallery helps our developers and designers to see all the different states that each card can be in.
+                    This gallery helps our developers and designers to see all the different states that each card can be in.
-                </p>
+                  </p>
 
-                <p>
+                  <p>
-                  Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
+                    Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
-                </p>
+                  </p>
-              </div>
+                </div>
-              <template is='dom-repeat' items='[[_demos]]'>
+                <template is='dom-repeat' items='[[_lovelaceDemos]]'>
-                <a href='#[[item]]'>
+                  <a href='#[[item]]'>
-                  <paper-item>
+                    <paper-item>
-                    <paper-item-body>{{ item }}</paper-item-body>
+                      <paper-item-body>{{ item }}</paper-item-body>
-                    <iron-icon icon="hass:chevron-right"></iron-icon>
+                      <iron-icon icon="hass:chevron-right"></iron-icon>
-                  </paper-item>
+                    </paper-item>
-                </a>
+                  </a>
-              </template>
+                </template>
-            </paper-card>
+              </paper-card>
+
+              <paper-card heading="More Info demos">
+                <div class='card-content intro'>
+                  <p>
+                    More info screens show up when an entity is clicked.
+                  </p>
+                </div>
+                <template is='dom-repeat' items='[[_moreInfoDemos]]'>
+                  <a href='#[[item]]'>
+                    <paper-item>
+                      <paper-item-body>{{ item }}</paper-item-body>
+                      <iron-icon icon="hass:chevron-right"></iron-icon>
+                    </paper-item>
+                  </a>
+                </template>
+              </paper-card>
+            </div>
           </template>
         </div>
       </app-header-layout>
@@ -106,8 +135,16 @@ class HaGallery extends PolymerElement {
       },
       _demos: {
         type: Array,
-        value: demos.keys().map(fixPath)
+        value: DEMOS.keys().map(fixPath)
-      }
+      },
+      _lovelaceDemos: {
+        type: Array,
+        computed: '_computeLovelace(_demos)',
+      },
+      _moreInfoDemos: {
+        type: Array,
+        computed: '_computeMoreInfos(_demos)',
+      },
     };
   }
 
@@ -138,7 +175,7 @@ class HaGallery extends PolymerElement {
     while (root.lastChild) root.removeChild(root.lastChild);
 
     if (demo) {
-      demos(`./${demo}.js`);
+      DEMOS(`./${demo}.js`);
       const el = document.createElement(demo);
       root.appendChild(el);
     }
@@ -151,6 +188,14 @@ class HaGallery extends PolymerElement {
   _backTapped() {
     document.location.hash = '';
   }
+
+  _computeLovelace(demos) {
+    return demos.filter(demo => demo.includes('hui'));
+  }
+
+  _computeMoreInfos(demos) {
+    return demos.filter(demo => demo.includes('more-info'));
+  }
 }
 
 customElements.define('ha-gallery', HaGallery);