85 lines
2.1 KiB
TypeScript
85 lines
2.1 KiB
TypeScript
import {
|
|
Tab,
|
|
TabList,
|
|
makeStyles,
|
|
typographyStyles,
|
|
} from "@fluentui/react-components";
|
|
import {
|
|
DesktopFilled,
|
|
DesktopRegular,
|
|
InfoFilled,
|
|
InfoRegular,
|
|
bundleIcon,
|
|
} from "@fluentui/react-icons";
|
|
import React from "react";
|
|
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";
|
|
|
|
const useStyles = makeStyles({
|
|
title: typographyStyles.title2,
|
|
});
|
|
|
|
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..."
|
|
build={() => <AppInner />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function AppInner(): React.ReactElement {
|
|
const styles = useStyles();
|
|
const [tab, setTab] = React.useState<"vm" | "info">("vm");
|
|
|
|
if (!ServerApi.Config.authenticated && !ServerApi.Config.disable_auth)
|
|
return <AuthRouteWidget />;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
width: "95%",
|
|
maxWidth: "1000px",
|
|
margin: "50px auto",
|
|
}}
|
|
>
|
|
<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>
|
|
</div>
|
|
{tab === "vm" && <VirtualMachinesWidget />}
|
|
{tab === "info" && <SystemInfoWidget />}
|
|
</div>
|
|
);
|
|
}
|