mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
More info (#1500)
* Add more info * Lint * Minor cleanup * Address comments
This commit is contained in:
Paulus Schoutsen
GitHub
parent
a899fb1df8
commit
b589412fdd
@ -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,
|
||||
}
|
||||
|
||||
93
gallery/src/components/demo-more-info.js
Normal file
93
gallery/src/components/demo-more-info.js
Normal file
@ -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);
|
||||
58
gallery/src/components/demo-more-infos.js
Normal file
58
gallery/src/components/demo-more-infos.js
Normal file
@ -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);
|
||||
60
gallery/src/demos/demo-more-info-light.js
Normal file
60
gallery/src/demos/demo-more-info-light.js
Normal file
@ -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);
|
||||
@ -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 {
|
||||
<div class='content'>
|
||||
<div id='demo'></div>
|
||||
<template is='dom-if' if='[[!_demo]]'>
|
||||
<paper-card heading="Lovelace card demos">
|
||||
<div class='card-content intro'>
|
||||
<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>
|
||||
<div class='pickers'>
|
||||
<paper-card heading="Lovelace card demos">
|
||||
<div class='card-content intro'>
|
||||
<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>
|
||||
This gallery helps our developers and designers to see all the different states that each card can be in.
|
||||
</p>
|
||||
<p>
|
||||
This gallery helps our developers and designers to see all the different states that each card can be in.
|
||||
</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>.
|
||||
</p>
|
||||
</div>
|
||||
<template is='dom-repeat' items='[[_demos]]'>
|
||||
<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>
|
||||
<p>
|
||||
Check <a href='https://www.home-assistant.io/lovelace'>the official website</a> for instructions on how to get started with Lovelace.</a>.
|
||||
</p>
|
||||
</div>
|
||||
<template is='dom-repeat' items='[[_lovelaceDemos]]'>
|
||||
<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>
|
||||
|
||||
<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);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user