VirtWebRemote/remote_frontend/src/App.tsx

85 lines
2.1 KiB
TypeScript
Raw Normal View History

2024-05-04 08:18:37 +00:00
import {
Tab,
TabList,
makeStyles,
typographyStyles,
} from "@fluentui/react-components";
import {
DesktopFilled,
DesktopRegular,
InfoFilled,
InfoRegular,
bundleIcon,
} from "@fluentui/react-icons";
import React from "react";
2024-05-04 08:34:59 +00:00
import { ServerApi } from "./api/ServerApi";
import { AuthRouteWidget } from "./routes/AuthRouteWidget";
import { AsyncWidget } from "./widgets/AsyncWidget";
import { MainMenu } from "./widgets/MainMenu";
import { SystemInfoWidget } from "./widgets/SystemInfoWidget";
import { VirtualMachinesWidget } from "./widgets/VirtualMachinesWidget";
2024-05-03 20:03:25 +00:00
const useStyles = makeStyles({
title: typographyStyles.title2,
});
2024-05-04 08:18:37 +00:00
const InfoIcon = bundleIcon(InfoFilled, InfoRegular);
const DesktopIcon = bundleIcon(DesktopFilled, DesktopRegular);
export function App() {
return (
<AsyncWidget
loadKey={1}
errMsg="Failed to load server configuration!"
load={ServerApi.LoadConfig}
loadingMessage="Loading server configuration..."
2024-05-02 20:14:20 +00:00
build={() => <AppInner />}
/>
);
}
2024-05-02 20:14:20 +00:00
function AppInner(): React.ReactElement {
2024-05-03 20:03:25 +00:00
const styles = useStyles();
2024-05-04 08:18:37 +00:00
const [tab, setTab] = React.useState<"vm" | "info">("vm");
2024-05-03 20:03:25 +00:00
2024-05-02 20:14:20 +00:00
if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
return <AuthRouteWidget />;
2024-05-03 20:03:25 +00:00
return (
<div
style={{
2024-05-04 07:11:30 +00:00
width: "95%",
2024-05-03 20:03:25 +00:00
maxWidth: "1000px",
margin: "50px auto",
}}
>
2024-05-04 08:18:37 +00:00
<span className={styles.title}>VirtWebRemote</span>
<div
style={{
display: "flex",
justifyContent: "space-between",
marginTop: "30px",
}}
>
<TabList
selectedValue={tab}
onTabSelect={(_, d) => setTab(d.value as any)}
>
<Tab value="vm" icon={<DesktopIcon />}>
Virtual machines
</Tab>
<Tab value="info" icon={<InfoIcon />}>
System info
</Tab>
</TabList>
<div>
<MainMenu />
</div>
2024-05-03 20:03:25 +00:00
</div>
2024-05-04 08:18:37 +00:00
{tab === "vm" && <VirtualMachinesWidget />}
{tab === "info" && <SystemInfoWidget />}
2024-05-03 20:03:25 +00:00
</div>
);
2024-05-02 20:14:20 +00:00
}