mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-18 23:06:40 +00:00
parent
1b039aee50
commit
a78aba5f50
@ -14,16 +14,23 @@ class DemoCard extends PolymerElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin: 0;
|
margin: 0 0 20px;
|
||||||
color: var(--primary-color);
|
color: var(--primary-color);
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
#card {
|
#card {
|
||||||
max-width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
pre {
|
pre {
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
.root {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<h2>[[config.heading]]</h2>
|
<h2>[[config.heading]]</h2>
|
||||||
<div class='root'>
|
<div class='root'>
|
||||||
|
@ -15,7 +15,6 @@ class DemoCards extends PolymerElement {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
demo-card {
|
demo-card {
|
||||||
display: block;
|
|
||||||
margin: 16px 16px 32px;
|
margin: 16px 16px 32px;
|
||||||
}
|
}
|
||||||
app-toolbar {
|
app-toolbar {
|
||||||
@ -36,7 +35,6 @@ class DemoCards extends PolymerElement {
|
|||||||
<template is='dom-repeat' items='[[configs]]'>
|
<template is='dom-repeat' items='[[configs]]'>
|
||||||
<demo-card
|
<demo-card
|
||||||
config='[[item]]'
|
config='[[item]]'
|
||||||
type='[[type]]'
|
|
||||||
show-config='[[showConfig]]'
|
show-config='[[showConfig]]'
|
||||||
></demo-card>
|
></demo-card>
|
||||||
</template>
|
</template>
|
||||||
@ -46,9 +44,7 @@ class DemoCards extends PolymerElement {
|
|||||||
|
|
||||||
static get properties() {
|
static get properties() {
|
||||||
return {
|
return {
|
||||||
configs: {
|
configs: Object,
|
||||||
type: Object,
|
|
||||||
},
|
|
||||||
showConfig: {
|
showConfig: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false,
|
value: false,
|
||||||
|
96
gallery/src/demos/demo-hui-entities-card.js
Normal file
96
gallery/src/demos/demo-hui-entities-card.js
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'Basic',
|
||||||
|
config: `
|
||||||
|
- type: entities
|
||||||
|
entities:
|
||||||
|
- scene.romantic_lights
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- cover.kitchen_window
|
||||||
|
- group.kitchen
|
||||||
|
- lock.kitchen_door
|
||||||
|
- light.bed_light
|
||||||
|
- light.non_existing
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With title, toggle-able',
|
||||||
|
config: `
|
||||||
|
- type: entities
|
||||||
|
entities:
|
||||||
|
- scene.romantic_lights
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- cover.kitchen_window
|
||||||
|
- group.kitchen
|
||||||
|
- lock.kitchen_door
|
||||||
|
- light.bed_light
|
||||||
|
title: Random group
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With title, toggle = false',
|
||||||
|
config: `
|
||||||
|
- type: entities
|
||||||
|
entities:
|
||||||
|
- scene.romantic_lights
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- cover.kitchen_window
|
||||||
|
- group.kitchen
|
||||||
|
- lock.kitchen_door
|
||||||
|
- light.bed_light
|
||||||
|
title: Random group
|
||||||
|
show_header_toggle: false
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With title, cant\'t toggle',
|
||||||
|
config: `
|
||||||
|
- type: entities
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
title: Random group
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Custom name, secondary info',
|
||||||
|
config: `
|
||||||
|
- type: entities
|
||||||
|
entities:
|
||||||
|
- entity: scene.romantic_lights
|
||||||
|
name: ¯\\_(ツ)_/¯
|
||||||
|
- entity: device_tracker.demo_paulus
|
||||||
|
secondary_info: entity-id
|
||||||
|
- entity: cover.kitchen_window
|
||||||
|
secondary_info: last-changed
|
||||||
|
- group.kitchen
|
||||||
|
- lock.kitchen_door
|
||||||
|
- light.bed_light
|
||||||
|
title: Random group
|
||||||
|
show_header_toggle: false
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoEntities extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-entities-card', DemoEntities);
|
61
gallery/src/demos/demo-hui-entity-filter-card.js
Normal file
61
gallery/src/demos/demo-hui-entity-filter-card.js
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'Basic',
|
||||||
|
config: `
|
||||||
|
- type: entity-filter
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_anne_therese
|
||||||
|
- device_tracker.demo_home_boy
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- light.bed_light
|
||||||
|
- light.ceiling_lights
|
||||||
|
- light.kitchen_lights
|
||||||
|
state_filter:
|
||||||
|
- "on"
|
||||||
|
- not_home
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With card config',
|
||||||
|
config: `
|
||||||
|
- type: entity-filter
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_anne_therese
|
||||||
|
- device_tracker.demo_home_boy
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- light.bed_light
|
||||||
|
- light.ceiling_lights
|
||||||
|
- light.kitchen_lights
|
||||||
|
state_filter:
|
||||||
|
- "on"
|
||||||
|
- not_home
|
||||||
|
card:
|
||||||
|
type: glance
|
||||||
|
show_state: false
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoFilter extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-entity-filter-card', DemoFilter);
|
57
gallery/src/demos/demo-hui-iframe-card.js
Normal file
57
gallery/src/demos/demo-hui-iframe-card.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'Without title',
|
||||||
|
config: `
|
||||||
|
- type: iframe
|
||||||
|
url: https://embed.windy.com/embed2.html
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With title',
|
||||||
|
config: `
|
||||||
|
- type: iframe
|
||||||
|
url: https://embed.windy.com/embed2.html
|
||||||
|
title: Weather radar
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Height-Width 3:4',
|
||||||
|
config: `
|
||||||
|
- type: iframe
|
||||||
|
url: https://embed.windy.com/embed2.html
|
||||||
|
aspect_ratio: 75%
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Height-Width 1:1',
|
||||||
|
config: `
|
||||||
|
- type: iframe
|
||||||
|
url: https://embed.windy.com/embed2.html
|
||||||
|
aspect_ratio: 100%
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoIframe extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-iframe-card', DemoIframe);
|
55
gallery/src/demos/demo-hui-map-card.js
Normal file
55
gallery/src/demos/demo-hui-map-card.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'Without title',
|
||||||
|
config: `
|
||||||
|
- type: map
|
||||||
|
entities:
|
||||||
|
- entity: device_tracker.demo_paulus
|
||||||
|
- zone.home
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'With title',
|
||||||
|
config: `
|
||||||
|
- type: map
|
||||||
|
entities:
|
||||||
|
- entity: device_tracker.demo_paulus
|
||||||
|
- zone.home
|
||||||
|
title: Where is Paulus?
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Height-Width 1:2',
|
||||||
|
config: `
|
||||||
|
- type: map
|
||||||
|
entities:
|
||||||
|
- entity: device_tracker.demo_paulus
|
||||||
|
- zone.home
|
||||||
|
aspect_ratio: 50%
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoMap extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-map-card', DemoMap);
|
272
gallery/src/demos/demo-hui-markdown-card.js
Normal file
272
gallery/src/demos/demo-hui-markdown-card.js
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'markdown-it demo',
|
||||||
|
config: `
|
||||||
|
- type: markdown
|
||||||
|
content: >
|
||||||
|
# h1 Heading 8-)
|
||||||
|
|
||||||
|
## h2 Heading
|
||||||
|
|
||||||
|
### h3 Heading
|
||||||
|
|
||||||
|
#### h4 Heading
|
||||||
|
|
||||||
|
##### h5 Heading
|
||||||
|
|
||||||
|
###### h6 Heading
|
||||||
|
|
||||||
|
|
||||||
|
## Horizontal Rules
|
||||||
|
|
||||||
|
___
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
|
||||||
|
## Typographic replacements
|
||||||
|
|
||||||
|
Enable typographer option to see result.
|
||||||
|
|
||||||
|
(c) (C) (r) (R) (tm) (TM) (p) (P) +-
|
||||||
|
|
||||||
|
test.. test... test..... test?..... test!....
|
||||||
|
|
||||||
|
!!!!!! ???? ,, -- ---
|
||||||
|
|
||||||
|
"Smartypants, double quotes" and 'single quotes'
|
||||||
|
|
||||||
|
|
||||||
|
## Emphasis
|
||||||
|
|
||||||
|
**This is bold text**
|
||||||
|
|
||||||
|
__This is bold text__
|
||||||
|
|
||||||
|
*This is italic text*
|
||||||
|
|
||||||
|
_This is italic text_
|
||||||
|
|
||||||
|
~~Strikethrough~~
|
||||||
|
|
||||||
|
|
||||||
|
## Blockquotes
|
||||||
|
|
||||||
|
|
||||||
|
> Blockquotes can also be nested...
|
||||||
|
>> ...by using additional greater-than signs right next to each other...
|
||||||
|
> > > ...or with spaces between arrows.
|
||||||
|
|
||||||
|
|
||||||
|
## Lists
|
||||||
|
|
||||||
|
Unordered
|
||||||
|
|
||||||
|
+ Create a list by starting a line with \`+\`, \`-\`, or \`*\`
|
||||||
|
+ Sub-lists are made by indenting 2 spaces:
|
||||||
|
- Marker character change forces new list start:
|
||||||
|
* Ac tristique libero volutpat at
|
||||||
|
+ Facilisis in pretium nisl aliquet
|
||||||
|
- Nulla volutpat aliquam velit
|
||||||
|
+ Very easy!
|
||||||
|
|
||||||
|
|
||||||
|
Ordered
|
||||||
|
|
||||||
|
1. Lorem ipsum dolor sit amet
|
||||||
|
2. Consectetur adipiscing elit
|
||||||
|
3. Integer molestie lorem at massa
|
||||||
|
|
||||||
|
|
||||||
|
1. You can use sequential numbers...
|
||||||
|
1. ...or keep all the numbers as \`1.\`
|
||||||
|
|
||||||
|
Start numbering with offset:
|
||||||
|
|
||||||
|
57. foo
|
||||||
|
1. bar
|
||||||
|
|
||||||
|
|
||||||
|
## Code
|
||||||
|
|
||||||
|
Inline \`code\`
|
||||||
|
|
||||||
|
Indented code
|
||||||
|
|
||||||
|
// Some comments
|
||||||
|
line 1 of code
|
||||||
|
line 2 of code
|
||||||
|
line 3 of code
|
||||||
|
|
||||||
|
|
||||||
|
Block code "fences"
|
||||||
|
|
||||||
|
\`\`\`
|
||||||
|
Sample text here...
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
Syntax highlighting
|
||||||
|
|
||||||
|
\`\`\` js
|
||||||
|
var foo = function (bar) {
|
||||||
|
return bar++;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(foo(5));
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
| Option | Description |
|
||||||
|
| ------ | ----------- |
|
||||||
|
| data | path to data files to supply the data that will be passed into templates. |
|
||||||
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
|
Right aligned columns
|
||||||
|
|
||||||
|
| Option | Description |
|
||||||
|
| ------:| -----------:|
|
||||||
|
| data | path to data files to supply the data that will be passed into templates. |
|
||||||
|
| engine | engine to be used for processing templates. Handlebars is the default. |
|
||||||
|
| ext | extension to be used for dest files. |
|
||||||
|
|
||||||
|
|
||||||
|
## Links
|
||||||
|
|
||||||
|
[link text](http://dev.nodeca.com)
|
||||||
|
|
||||||
|
[link with title](http://nodeca.github.io/pica/demo/ "title text!")
|
||||||
|
|
||||||
|
Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
|
||||||
|
|
||||||
|
|
||||||
|
## Images
|
||||||
|
|
||||||
|

|
||||||
|

|
||||||
|
|
||||||
|
Like links, Images also have a footnote style syntax
|
||||||
|
|
||||||
|
![Alt text][id]
|
||||||
|
|
||||||
|
With a reference later in the document defining the URL location:
|
||||||
|
|
||||||
|
[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"
|
||||||
|
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
The killer feature of \`markdown-it\` is very effective support of
|
||||||
|
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
|
||||||
|
|
||||||
|
|
||||||
|
### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
|
||||||
|
|
||||||
|
> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
|
||||||
|
>
|
||||||
|
> Shortcuts (emoticons): :-) :-( 8-) ;)
|
||||||
|
|
||||||
|
see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
|
||||||
|
|
||||||
|
|
||||||
|
### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
|
||||||
|
|
||||||
|
- 19^th^
|
||||||
|
- H~2~O
|
||||||
|
|
||||||
|
|
||||||
|
### [<ins>](https://github.com/markdown-it/markdown-it-ins)
|
||||||
|
|
||||||
|
++Inserted text++
|
||||||
|
|
||||||
|
|
||||||
|
### [<mark>](https://github.com/markdown-it/markdown-it-mark)
|
||||||
|
|
||||||
|
==Marked text==
|
||||||
|
|
||||||
|
|
||||||
|
### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
|
||||||
|
|
||||||
|
Footnote 1 link[^first].
|
||||||
|
|
||||||
|
Footnote 2 link[^second].
|
||||||
|
|
||||||
|
Inline footnote^[Text of inline footnote] definition.
|
||||||
|
|
||||||
|
Duplicated footnote reference[^second].
|
||||||
|
|
||||||
|
[^first]: Footnote **can have markup**
|
||||||
|
|
||||||
|
and multiple paragraphs.
|
||||||
|
|
||||||
|
[^second]: Footnote text.
|
||||||
|
|
||||||
|
|
||||||
|
### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
|
||||||
|
|
||||||
|
Term 1
|
||||||
|
|
||||||
|
: Definition 1
|
||||||
|
with lazy continuation.
|
||||||
|
|
||||||
|
Term 2 with *inline markup*
|
||||||
|
|
||||||
|
: Definition 2
|
||||||
|
|
||||||
|
{ some code, part of Definition 2 }
|
||||||
|
|
||||||
|
Third paragraph of definition 2.
|
||||||
|
|
||||||
|
_Compact style:_
|
||||||
|
|
||||||
|
Term 1
|
||||||
|
~ Definition 1
|
||||||
|
|
||||||
|
Term 2
|
||||||
|
~ Definition 2a
|
||||||
|
~ Definition 2b
|
||||||
|
|
||||||
|
|
||||||
|
### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
|
||||||
|
|
||||||
|
This is HTML abbreviation example.
|
||||||
|
|
||||||
|
It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
|
||||||
|
|
||||||
|
*[HTML]: Hyper Text Markup Language
|
||||||
|
|
||||||
|
### [Custom containers](https://github.com/markdown-it/markdown-it-container)
|
||||||
|
|
||||||
|
::: warning
|
||||||
|
*here be dragons*
|
||||||
|
:::
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoMarkdown extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-markdown-card', DemoMarkdown);
|
@ -1,60 +1,65 @@
|
|||||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
import '../../../src/panels/lovelace/cards/hui-picture-entity-card.js';
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
import HomeAssistant from '../data/hass.js';
|
|
||||||
import demoStates from '../data/demo_dump.js';
|
|
||||||
|
|
||||||
const CONFIGS = [
|
const CONFIGS = [
|
||||||
{
|
{
|
||||||
type: 'picture-entity',
|
heading: 'State on',
|
||||||
image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
|
config: `
|
||||||
entity: 'light.bed_light',
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
|
||||||
|
entity: light.kitchen_lights
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-entity',
|
heading: 'State off',
|
||||||
image: 'https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490',
|
config: `
|
||||||
entity: 'light.kitchen_lights',
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg
|
||||||
|
entity: light.bed_light
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'Entity unavailable',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
entity: 'light.non_existing'
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
|
entity: light.non_existing
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Camera entity',
|
||||||
|
config: `
|
||||||
|
- type: picture-entity
|
||||||
|
entity: camera.demo_camera
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Hidden info',
|
||||||
|
config: `
|
||||||
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
|
||||||
|
entity: light.kitchen_lights
|
||||||
|
show_info: false
|
||||||
|
`
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
class DemoPicEntity extends PolymerElement {
|
class DemoPicEntity extends PolymerElement {
|
||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
#root {
|
|
||||||
}
|
|
||||||
hui-picture-entity-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-picture-entity-card');
|
|
||||||
el.setConfig(config);
|
|
||||||
el.hass = hass;
|
|
||||||
root.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,91 +1,92 @@
|
|||||||
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
import '../../../src/panels/lovelace/cards/hui-picture-glance-card.js';
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
import HomeAssistant from '../data/hass.js';
|
|
||||||
import demoStates from '../data/demo_dump.js';
|
|
||||||
|
|
||||||
const CONFIGS = [
|
const CONFIGS = [
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'Title, dialog, toggle',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
title: 'Picture glance',
|
- type: picture-glance
|
||||||
entities: [
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
'switch.decorative_lights',
|
title: Living room
|
||||||
'light.ceiling_lights',
|
entities:
|
||||||
'binary_sensor.movement_backyard',
|
- switch.decorative_lights
|
||||||
'binary_sensor.basement_floor_wet',
|
- light.ceiling_lights
|
||||||
]
|
- binary_sensor.movement_backyard
|
||||||
|
- binary_sensor.basement_floor_wet
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'Title, dialog, no toggle',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
entities: [
|
- type: picture-glance
|
||||||
'switch.decorative_lights',
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
'light.ceiling_lights',
|
title: Living room
|
||||||
'binary_sensor.movement_backyard',
|
entities:
|
||||||
'binary_sensor.basement_floor_wet',
|
- binary_sensor.movement_backyard
|
||||||
]
|
- binary_sensor.basement_floor_wet
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'Title, no dialog, toggle',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
title: 'Picture glance',
|
- type: picture-glance
|
||||||
entities: [
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
'switch.decorative_lights',
|
title: Living room
|
||||||
'light.ceiling_lights',
|
entities:
|
||||||
]
|
- switch.decorative_lights
|
||||||
|
- light.ceiling_lights
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'No title, dialog, toggle',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
entities: [
|
- type: picture-glance
|
||||||
'switch.decorative_lights',
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
'light.ceiling_lights',
|
entities:
|
||||||
]
|
- switch.decorative_lights
|
||||||
|
- light.ceiling_lights
|
||||||
|
- binary_sensor.movement_backyard
|
||||||
|
- binary_sensor.basement_floor_wet
|
||||||
|
`
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'picture-glance',
|
heading: 'No title, dialog, no toggle',
|
||||||
image: 'https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495',
|
config: `
|
||||||
entities: [
|
- type: picture-glance
|
||||||
'binary_sensor.movement_backyard',
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
'binary_sensor.basement_floor_wet',
|
entities:
|
||||||
]
|
- binary_sensor.movement_backyard
|
||||||
|
- binary_sensor.basement_floor_wet
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'No title, no dialog, toggle',
|
||||||
|
config: `
|
||||||
|
- type: picture-glance
|
||||||
|
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg
|
||||||
|
entities:
|
||||||
|
- switch.decorative_lights
|
||||||
|
- light.ceiling_lights
|
||||||
|
`
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
class DemoPicGlance extends PolymerElement {
|
class DemoPicGlance extends PolymerElement {
|
||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
#root {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
hui-picture-glance-card {
|
|
||||||
width: 400px;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
</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-picture-glance-card');
|
|
||||||
el.setConfig(config);
|
|
||||||
el.hass = hass;
|
|
||||||
root.appendChild(el);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
76
gallery/src/demos/demo-hui-stack-card.js
Normal file
76
gallery/src/demos/demo-hui-stack-card.js
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||||
|
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||||
|
|
||||||
|
import '../components/demo-cards.js';
|
||||||
|
|
||||||
|
const CONFIGS = [
|
||||||
|
{
|
||||||
|
heading: 'Vertical Stack',
|
||||||
|
config: `
|
||||||
|
- type: vertical-stack
|
||||||
|
cards:
|
||||||
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
|
||||||
|
entity: light.kitchen_lights
|
||||||
|
- type: glance
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_anne_therese
|
||||||
|
- device_tracker.demo_home_boy
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Horizontal Stack',
|
||||||
|
config: `
|
||||||
|
- type: horizontal-stack
|
||||||
|
cards:
|
||||||
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
|
||||||
|
entity: light.kitchen_lights
|
||||||
|
- type: glance
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_anne_therese
|
||||||
|
- device_tracker.demo_home_boy
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
`
|
||||||
|
},
|
||||||
|
{
|
||||||
|
heading: 'Combination of both',
|
||||||
|
config: `
|
||||||
|
- type: vertical-stack
|
||||||
|
cards:
|
||||||
|
- type: horizontal-stack
|
||||||
|
cards:
|
||||||
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/1027508/pexels-photo-1027508.jpeg
|
||||||
|
entity: light.kitchen_lights
|
||||||
|
- type: glance
|
||||||
|
entities:
|
||||||
|
- device_tracker.demo_anne_therese
|
||||||
|
- device_tracker.demo_home_boy
|
||||||
|
- device_tracker.demo_paulus
|
||||||
|
- type: picture-entity
|
||||||
|
image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg
|
||||||
|
entity: light.bed_light
|
||||||
|
`
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
class DemoStack extends PolymerElement {
|
||||||
|
static get template() {
|
||||||
|
return html`
|
||||||
|
<demo-cards configs="[[_configs]]"></demo-cards>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
static get properties() {
|
||||||
|
return {
|
||||||
|
_configs: {
|
||||||
|
type: Object,
|
||||||
|
value: CONFIGS
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('demo-hui-stack-card', DemoStack);
|
Loading…
x
Reference in New Issue
Block a user