|
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";
|
|
5
|
4 export { MetricRow } from "./MetricRow";
|
|
0
|
5
|
|
|
6 @customElement("fd-page")
|
|
|
7 export class FdPage extends LitElement {
|
|
|
8 static styles = [
|
|
|
9 css`
|
|
|
10 :host {
|
|
|
11 display: flex;
|
|
|
12 flex-direction: column;
|
|
|
13 height: 100vh;
|
|
|
14 }
|
|
|
15 button {
|
|
|
16 margin: 10px;
|
|
|
17 padding: 20px;
|
|
|
18 }
|
|
|
19 `,
|
|
|
20 ];
|
|
|
21 @property() status: {} = { "loading...": "" };
|
|
|
22 @property() lastCommand: {} = { command: "none" };
|
|
|
23 connectedCallback(): void {
|
|
|
24 super.connectedCallback();
|
|
|
25 this.getStatus();
|
|
|
26 }
|
|
|
27
|
|
|
28 async getStatus() {
|
|
|
29 this.status = await (await fetch("api/status")).json();
|
|
|
30 setTimeout(() => {
|
|
|
31 requestAnimationFrame(() => {
|
|
|
32 this.getStatus();
|
|
|
33 });
|
|
|
34 }, 1000);
|
|
|
35 }
|
|
|
36 render() {
|
|
|
37 return html`
|
|
|
38 <h1>Front door lock</h1>
|
|
|
39
|
|
|
40 <div>Status: ${JSON.stringify(this.status)} ${JSON.stringify(this.lastCommand)}</div>
|
|
|
41 <div>
|
|
|
42 <button @click=${() => this.simple("unlock")}>Unlock</button>
|
|
|
43 <button @click=${() => this.simple("stayUnlocked")}>Unlock and stay unlocked</button>
|
|
|
44 <button @click=${() => this.simple("lock")}>Lock</button>
|
|
|
45 </div>
|
|
|
46 <streamed-graph expanded="true">
|
|
|
47 <sg-source url="./api/graph"></sg-source>
|
|
|
48 <sg-source url="./view.n3"></sg-source>
|
|
|
49 <sg-view uri="#view"></sg-view>
|
|
|
50 </streamed-graph>
|
|
|
51 <p>
|
|
5
|
52 <a href="metrics">metrics</a> | <a href="api/graph">graph</a> |
|
|
|
53 <a href="https://bigasterisk.com/k/clusters/local/namespaces/default/deployments/front-door-lock">deploy</a> |
|
|
|
54 <a href="https://bigasterisk.com/k/clusters/local/namespaces/default/deployments/front-door-lock/logs">logs</a> |
|
|
|
55 <a href="https://bigasterisk.com/vmalert/groups#group-14459482342649697182">alert group</a>
|
|
|
56 </p>
|
|
|
57 <p>
|
|
|
58 <metric-row label="reader esp32: mqtt connected " q='hw_connected{job="fingerprint"}'></metric-row>
|
|
|
59 <metric-row label="reader service: up " q='up{job="fingerprint"}'></metric-row>
|
|
|
60 <metric-row label="reader service: mqtt connected" q='mqtt_connected{job="fingerprint"}'></metric-row>
|
|
|
61 <metric-row label="Lock service (this page): up " q='up{job="front-door-lock"}'></metric-row>
|
|
|
62 <metric-row label="Lock service: mqtt connected " q='mqtt_connected{job="front-door-lock"}'></metric-row>
|
|
|
63 <metric-row label="Lock esp32: mqtt-connected " q='hw_connected{job="front-door-lock"}'></metric-row>
|
|
0
|
64 </p>
|
|
|
65 <bigast-loginbar></bigast-loginbar>
|
|
|
66 `;
|
|
|
67 }
|
|
|
68 async simple(command: string) {
|
|
|
69 const t1 = Date.now();
|
|
|
70 this.lastCommand = { command: command, sentAt: t1 };
|
|
|
71 var status;
|
|
|
72 try {
|
|
|
73 const resp = await fetch(`api/simple/${command}`, { method: "PUT" });
|
|
|
74 status = resp.status;
|
|
|
75 } catch (e) {
|
|
|
76 status = "" + e;
|
|
|
77 }
|
|
|
78 const t2 = Date.now();
|
|
|
79 this.lastCommand = { command: command, sentAt: t1, tookMs: t2 - t1, status: status };
|
|
|
80 }
|
|
|
81 }
|
