mirror of
https://github.com/interfacerproject/zenflows-fabaccess.git
synced 2025-03-12 15:01:44 +01:00
71 lines
2.0 KiB
TypeScript
71 lines
2.0 KiB
TypeScript
import Head from "next/head";
|
|
import { Inter } from "@next/font/google";
|
|
import styles from "@/styles/Home.module.css";
|
|
import { useState } from "react";
|
|
|
|
const inter = Inter({ subsets: ["latin"] });
|
|
type TS = {
|
|
timestamp: string;
|
|
state: string;
|
|
result: string;
|
|
};
|
|
export default function Home() {
|
|
const [message, setMessage] = useState("");
|
|
const [on, setOn] = useState(false);
|
|
const [logs, setLogs] = useState<TS[]>([]);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Fabaccess Demo</title>
|
|
<meta name="description" content="Dyne.org::Loves fabaccess" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className={styles.main}>
|
|
<h1>Activate machine via Fabaccess using w3c-did</h1>
|
|
<button
|
|
className={styles.button}
|
|
onClick={async () => {
|
|
const res = await fetch(`/api/${on ? "off" : "on"}`);
|
|
const data = await res.json();
|
|
setMessage(JSON.stringify(data, null, 2));
|
|
setLogs([
|
|
{
|
|
timestamp: data.query.timestamp,
|
|
state: data.query.command,
|
|
result: JSON.stringify(data.result),
|
|
},
|
|
...logs,
|
|
]);
|
|
setOn(!on);
|
|
}}
|
|
>
|
|
{on ? "OFF" : "ON"}
|
|
</button>
|
|
<pre style={{ overflow: "auto" }}>{message}</pre>
|
|
<div
|
|
style={{
|
|
border: "2px solid green",
|
|
padding: "20px",
|
|
maxHeight: "400px",
|
|
width: "60%",
|
|
overflow: "scroll",
|
|
}}
|
|
>
|
|
<h3>LOG</h3>
|
|
<ul>
|
|
{logs.map((l) => {
|
|
return (
|
|
<li style={{ paddingTop: "10px" }}>
|
|
{l.state} @{l.timestamp} <br /> RESULT: {l.result} <br />
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|