50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { createSignal, Show, type Component, type JSX } from "solid-js";
|
|
import { type RouteSectionProps, useNavigate } from "@solidjs/router";
|
|
|
|
import { setDb, SQL } from "~/db";
|
|
import { Portal } from "solid-js/web";
|
|
import { Flex } from "~/components/ui/flex";
|
|
import { Title } from "@solidjs/meta";
|
|
|
|
export const Home: Component<RouteSectionProps> = () => {
|
|
const [isLoadingDb, setIsLoadingDb] = createSignal(false);
|
|
const navigate = useNavigate();
|
|
|
|
const onFileChange: JSX.ChangeEventHandler<HTMLInputElement, Event> = (event) => {
|
|
const file = event.currentTarget.files?.[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
|
|
reader.addEventListener("load", () => {
|
|
setIsLoadingDb(true);
|
|
|
|
setTimeout(() => {
|
|
const Uints = new Uint8Array(reader.result as ArrayBuffer);
|
|
setDb(new SQL.Database(Uints));
|
|
setIsLoadingDb(false);
|
|
navigate("/overview");
|
|
}, 10);
|
|
});
|
|
|
|
reader.readAsArrayBuffer(file);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Portal>
|
|
<Show when={isLoadingDb()}>
|
|
<Flex alignItems="center" justifyContent="center" class="fixed inset-0 backdrop-blur-lg backdrop-filter">
|
|
<p class="font-bold text-2xl">Loading database</p>
|
|
</Flex>
|
|
</Show>
|
|
</Portal>
|
|
<Title>Signal stats</Title>
|
|
<div>
|
|
<input type="file" accept=".sqlite" onChange={onFileChange}></input>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Home;
|