--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main.ts	Sun Aug 27 11:12:20 2023 -0700
@@ -0,0 +1,70 @@
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+export { SgSource, SgView, StreamedGraph } from "@bigasterisk/streamed-graph";
+
+@customElement("fd-page")
+export class FdPage extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+      }
+      button {
+        margin: 10px;
+        padding: 20px;
+      }
+    `,
+  ];
+  @property() status: {} = { "loading...": "" };
+  @property() lastCommand: {} = { command: "none" };
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.getStatus();
+  }
+
+  async getStatus() {
+    this.status = await (await fetch("api/status")).json();
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        this.getStatus();
+      });
+    }, 1000);
+  }
+  render() {
+    return html`
+      <h1>Front door lock</h1>
+
+      <div>Status: ${JSON.stringify(this.status)} ${JSON.stringify(this.lastCommand)}</div>
+      <div>
+        <button @click=${() => this.simple("unlock")}>Unlock</button>
+        <button @click=${() => this.simple("stayUnlocked")}>Unlock and stay unlocked</button>
+        <button @click=${() => this.simple("lock")}>Lock</button>
+      </div>
+      <streamed-graph expanded="true">
+        <sg-source url="./api/graph"></sg-source>
+        <sg-source url="./view.n3"></sg-source>
+        <sg-view uri="#view"></sg-view>
+      </streamed-graph>
+      <p>
+        <a href="metrics">metrics</a> |
+        <a href="api/graph">graph</a>
+      </p>
+      <bigast-loginbar></bigast-loginbar>
+    `;
+  }
+  async simple(command: string) {
+    const t1 = Date.now();
+    this.lastCommand = { command: command, sentAt: t1 };
+    var status;
+    try {
+      const resp = await fetch(`api/simple/${command}`, { method: "PUT" });
+      status = resp.status;
+    } catch (e) {
+      status = "" + e;
+    }
+    const t2 = Date.now();
+    this.lastCommand = { command: command, sentAt: t1, tookMs: t2 - t1, status: status };
+  }
+}