Add PN532 toolkit firmware, web UI, and embedded SPIFFS assets
Includes ESP-IDF NFC stack (deep capture, 4K Classic geometry, UL write API, open SoftAP), React dashboard with live tag diagnostics, and docs. README updated for APIs and lab Wi-Fi defaults. Made-with: Cursor
This commit is contained in:
55
web/src/pages/Settings.tsx
Normal file
55
web/src/pages/Settings.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useToast } from "../toast";
|
||||
|
||||
export default function Settings() {
|
||||
const toast = useToast();
|
||||
const [apiBase, setApiBase] = useState("");
|
||||
const [light, setLight] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setApiBase(localStorage.getItem("apiBase") || "");
|
||||
setLight(document.documentElement.classList.contains("light"));
|
||||
}, []);
|
||||
|
||||
const save = () => {
|
||||
localStorage.setItem("apiBase", apiBase);
|
||||
toast("Saved API base — reload for WS");
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
const next = !light;
|
||||
setLight(next);
|
||||
document.documentElement.classList.toggle("light", next);
|
||||
document.documentElement.classList.toggle("dark", !next);
|
||||
localStorage.setItem("theme", next ? "light" : "dark");
|
||||
toast(next ? "Light" : "Dark");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="glass max-w-xl space-y-6 p-6">
|
||||
<h1 className="font-display text-2xl font-bold">Settings</h1>
|
||||
<label className="block text-sm">
|
||||
API base (empty = same host)
|
||||
<input
|
||||
value={apiBase}
|
||||
onChange={(e) => setApiBase(e.target.value)}
|
||||
className="mt-1 w-full rounded-2xl border border-white/10 bg-black/25 px-4 py-2"
|
||||
placeholder="http://192.168.4.1"
|
||||
/>
|
||||
</label>
|
||||
<button type="button" onClick={save} className="rounded-2xl bg-bubble-accent px-4 py-2 font-semibold">
|
||||
Save
|
||||
</button>
|
||||
<div className="flex items-center justify-between rounded-2xl border border-white/10 bg-black/20 px-4 py-3">
|
||||
<span className="text-sm">Theme</span>
|
||||
<button type="button" onClick={toggleTheme} className="rounded-full border border-white/15 px-4 py-1 text-sm">
|
||||
{light ? "Switch to dark" : "Switch to light"}
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Firmware opens a <strong>password-free</strong> SoftAP named <strong>PN532-Toolkit</strong> (lab
|
||||
default). mDNS: <code>pn532tool.local</code>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user