diff --git a/gallery/src/components/demo-cards.js b/gallery/src/components/demo-cards.js index f4d6edf755..498c860a45 100644 --- a/gallery/src/components/demo-cards.js +++ b/gallery/src/components/demo-cards.js @@ -27,7 +27,7 @@ class DemoCards extends PolymerElement {
Show config
@@ -35,7 +35,7 @@ class DemoCards extends PolymerElement { @@ -47,7 +47,7 @@ class DemoCards extends PolymerElement { return { configs: Object, hass: Object, - showConfig: { + _showConfig: { type: Boolean, value: false, } diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js new file mode 100644 index 0000000000..8273366f3b --- /dev/null +++ b/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` + + + + + + + + `; + } + + 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); diff --git a/gallery/src/components/demo-more-infos.js b/gallery/src/components/demo-more-infos.js new file mode 100644 index 0000000000..b59c01c40f --- /dev/null +++ b/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` + + +
+ Show entity +
+ +
+ +
+ `; + } + + static get properties() { + return { + entities: Array, + hass: Object, + _showConfig: { + type: Boolean, + value: false, + } + }; + } +} + +customElements.define('demo-more-infos', DemoMoreInfos); diff --git a/gallery/src/demos/demo-more-info-light.js b/gallery/src/demos/demo-more-info-light.js new file mode 100644 index 0000000000..896e4e7512 --- /dev/null +++ b/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` + + `; + } + + 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); diff --git a/gallery/src/ha-gallery.js b/gallery/src/ha-gallery.js index d09dd5e0d7..348c1df467 100644 --- a/gallery/src/ha-gallery.js +++ b/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: 20px auto; + margin: 16px 8px 0; + } + + .pickers paper-card:last-child { + margin-bottom: 16px; } .intro { @@ -67,29 +78,47 @@ class HaGallery extends PolymerElement {
@@ -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);