|
0
|
1 import { LitElement, TemplateResult, css, html } from "lit";
|
|
|
2 import { customElement, property } from "lit/decorators.js";
|
|
|
3 export { SgSource, SgView, StreamedGraph } from "@bigasterisk/streamed-graph";
|
|
|
4
|
|
|
5 @customElement("fd-page")
|
|
|
6 export class FdPage extends LitElement {
|
|
|
7 static styles = [
|
|
|
8 css`
|
|
|
9 :host {
|
|
|
10 display: flex;
|
|
|
11 flex-direction: column;
|
|
|
12 height: 100vh;
|
|
|
13 }
|
|
|
14 button {
|
|
|
15 margin: 10px;
|
|
|
16 padding: 20px;
|
|
|
17 }
|
|
|
18 `,
|
|
|
19 ];
|
|
|
20 @property() status: {} = { "loading...": "" };
|
|
|
21 @property() lastCommand: {} = { command: "none" };
|
|
|
22 connectedCallback(): void {
|
|
|
23 super.connectedCallback();
|
|
|
24 this.getStatus();
|
|
|
25 }
|
|
|
26
|
|
|
27 async getStatus() {
|
|
|
28 this.status = await (await fetch("api/status")).json();
|
|
|
29 setTimeout(() => {
|
|
|
30 requestAnimationFrame(() => {
|
|
|
31 this.getStatus();
|
|
|
32 });
|
|
|
33 }, 1000);
|
|
|
34 }
|
|
|
35 render() {
|
|
|
36 return html`
|
|
|
37 <h1>Front door lock</h1>
|
|
|
38
|
|
|
39 <div>Status: ${JSON.stringify(this.status)} ${JSON.stringify(this.lastCommand)}</div>
|
|
|
40 <div>
|
|
|
41 <button @click=${() => this.simple("unlock")}>Unlock</button>
|
|
|
42 <button @click=${() => this.simple("stayUnlocked")}>Unlock and stay unlocked</button>
|
|
|
43 <button @click=${() => this.simple("lock")}>Lock</button>
|
|
|
44 </div>
|
|
|
45 <streamed-graph expanded="true">
|
|
|
46 <sg-source url="./api/graph"></sg-source>
|
|
|
47 <sg-source url="./view.n3"></sg-source>
|
|
|
48 <sg-view uri="#view"></sg-view>
|
|
|
49 </streamed-graph>
|
|
|
50 <p>
|
|
|
51 <a href="metrics">metrics</a> |
|
|
|
52 <a href="api/graph">graph</a>
|
|
|
53 </p>
|
|
|
54 <bigast-loginbar></bigast-loginbar>
|
|
|
55 `;
|
|
|
56 }
|
|
|
57 async simple(command: string) {
|
|
|
58 const t1 = Date.now();
|
|
|
59 this.lastCommand = { command: command, sentAt: t1 };
|
|
|
60 var status;
|
|
|
61 try {
|
|
|
62 const resp = await fetch(`api/simple/${command}`, { method: "PUT" });
|
|
|
63 status = resp.status;
|
|
|
64 } catch (e) {
|
|
|
65 status = "" + e;
|
|
|
66 }
|
|
|
67 const t2 = Date.now();
|
|
|
68 this.lastCommand = { command: command, sentAt: t1, tookMs: t2 - t1, status: status };
|
|
|
69 }
|
|
|
70 }
|
