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
"use strict";
import { LitElement, html, css } from "lit-element";
import "./history.js";
import "./live.js";
const pages = {
"live": { name: "Live", content: id => html`<smarthome-power-meter-live .viewid="${id}"></smarthome-power-meter-live>` },
"history": { name: "History", content: id => html`<smarthome-power-meter-history .viewid="${id}"></smarthome-power-meter-history>` },
};
class PowerMeter extends LitElement {
constructor() {
super(...arguments);
this.activePage = pages["live"];
}
_setPage(path) {
return () => {
this.activePage = pages[path];
this.requestUpdate();
};
}
render() {
return html`
<div id="pages">
${Object.entries(pages).map(([path, page]) => html`
<a href="#/powermeter" class="page-link ${this.activePage == page ? "active" : "inactive"}" @click=${this._setPage(path)}>
${page.name}
</a>
`)}
</div>
${this.activePage.content(this.viewid)}
`;
}
static get styles() {
return css`
:host {
display: flex;
flex-direction: column;
--mdc-theme-on-primary: white;
--mdc-theme-primary: #43a047;
--mdc-theme-on-secondary: white;
--mdc-theme-secondary: #616161;
}
#pages {
display: flex;
flex-direction: row;
justify-content: center;
}
.page-link {
padding: .5em;
margin: .5em;
color: black;
text-decoration: none;
}
.page-link.active {
border-bottom: 4px solid #43a047;
}
`;
}
static get properties() {
return {
viewid: { type: String }
};
}
}
customElements.define("smarthome-power-meter", PowerMeter);