/
demo-card.js
97 lines (87 loc) · 2.23 KB
/
demo-card.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import JsYaml from "js-yaml";
import HomeAssistant from "../data/hass";
import { demoConfig } from "../data/demo_config";
import { demoServices } from "../data/demo_services";
import demoResources from "../data/demo_resources";
import demoStates from "../data/demo_states";
import createCardElement from "../../../src/panels/lovelace/common/create-card-element";
class DemoCard extends PolymerElement {
static get template() {
return html`
<style>
.root {
display: flex;
}
h2 {
margin: 0 0 20px;
color: var(--primary-color);
}
#card {
width: 400px;
}
pre {
width: 400px;
margin: 16px;
overflow: auto;
}
@media only screen and (max-width: 800px) {
.root {
flex-direction: column;
}
pre {
margin-left: 0;
}
}
</style>
<h2>[[config.heading]]</h2>
<div class='root'>
<div id="card"></div>
<template is='dom-if' if='[[showConfig]]'>
<pre>[[_trim(config.config)]]</pre>
</template>
</div>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: "_hassChanged",
},
config: {
type: Object,
observer: "_configChanged",
},
showConfig: Boolean,
};
}
_configChanged(config) {
const card = this.$.card;
while (card.lastChild) {
card.removeChild(card.lastChild);
}
const el = createCardElement(JsYaml.safeLoad(config.config)[0]);
if (this.hass) {
el.hass = this.hass;
} else {
const hass = new HomeAssistant(demoStates);
hass.config = demoConfig;
hass.services = demoServices;
hass.resources = demoResources;
hass.language = "en";
hass.states = demoStates;
el.hass = hass;
}
card.appendChild(el);
}
_hassChanged(hass) {
const card = this.$.card.lastChild;
if (card) card.hass = hass;
}
_trim(config) {
return config.trim();
}
}
customElements.define("demo-card", DemoCard);