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
"use strict";
import { LitElement, html, css } from "lit-element";
import { state } from "./state.js";
import "@authentic/mwc-icon";
const pad = (string, amount) => Array(amount).join('0').substr(0, amount - String(string).length) + string;
const formatDate = (date) => (
'' +
date.getFullYear() +
'/' +
pad(date.getMonth() + 1, 2) +
'/' +
pad(date.getDate(), 2) +
' ' +
date.getHours() +
':' +
pad(date.getMinutes(), 2)
);
class ConnectionStatus extends LitElement {
constructor() {
super(...arguments);
state.subscribe(this.requestUpdate.bind(this));
}
render() {
return html`
${state.connected ? html`
<p><mwc-icon>cloud_queue</mwc-icon> Connected</p>
` : html`
<p><mwc-icon>cloud_off</mwc-icon> Disconnected</p>
<p class="lastupdate">last updated ${formatDate(state.data.lastUpdated)}</p>
`}
`;
}
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;
justify-content: center;
align-items: center;
}
mwc-icon {
padding-right: .5em;
}
p {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
p.lastupdate {
font-size: 1em;
}
`;
}
}
customElements.define("smarthome-connection-status", ConnectionStatus);