Skip to content

Commit

Permalink
fix nav error and add comp banner
Browse files Browse the repository at this point in the history
  • Loading branch information
@thisisibrahimd
thisisibrahimd committed Aug 26, 2022
1 parent a7ae21d commit 3e42825
Show file tree
Hide file tree
Showing 13 changed files with 1,216 additions and 1,262 deletions.
17 changes: 0 additions & 17 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@ import Logs from "./routes/logs";
import { ReportProvider } from "./contexts/ReportContext";
import Ranks from "./routes/scoreboard/ranks";
import Details from "./routes/scoreboard/details";
import Hosts from "./routes/settings/hosts";
import Users from "./routes/settings/users";
import Teams from "./routes/settings/teams";
import Services from "./routes/settings/services";
import ServiceGroups from "./routes/settings/service_groups";
import Properties from "./routes/settings/properties";
import HostGroups from "./routes/settings/host_groups";
import Scoreboard from "./routes/scoreboard";
import ScoreboardLayout from "./layouts/ScoreboardLayout";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
Expand Down Expand Up @@ -90,16 +83,6 @@ function App() {
</Route>
<Route path={"settings"} element={<DefaultLayout />}>
<Route index element={<Settings />} />
<Route path={"hosts"} element={<Hosts />} />
<Route path={"host_groups"} element={<HostGroups />} />
<Route path={"properties"} element={<Properties />} />
<Route
path={"service_groups"}
element={<ServiceGroups />}
/>
<Route path={"services"} element={<Services />} />
<Route path={"teams"} element={<Teams />} />
<Route path={"users"} element={<Users />} />
</Route>
</Routes>
</TitleContextProvider>
Expand Down
215 changes: 89 additions & 126 deletions src/components/MainNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Typography from "@material-ui/core/Typography";
import AppBar from "@material-ui/core/AppBar";
import { makeStyles } from "@material-ui/core/styles";
import { Brightness4, Brightness7 } from "@material-ui/icons";
import { Button, Container, Menu, MenuItem, useTheme } from "@material-ui/core";
import { Box, Button, Container, Menu, MenuItem, useTheme } from "@material-ui/core";
import { usePaletteType } from "../contexts/PaletteTypeContext";
import { useBannerTitle } from "../contexts/BannerTitleContext";
import { Role, token } from "../grpc/token/token";
Expand All @@ -24,13 +24,16 @@ import { usePolicy } from "../contexts/PolicyContext";
import { MouseEvent, useState } from "react";

const useStyles = makeStyles((_) => ({
root: {
flexGrow: 1,
},
toolbar: {
position: "relative",
paddingRight: 24,
justifyContent: 'space-between'
},
title: {
flexGrow: 1,
},
textDecoration: "none"
}
}));

export function MainNav() {
Expand All @@ -42,137 +45,97 @@ export function MainNav() {
const { bannerTitle } = useBannerTitle();
const navigate = useNavigate();

const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);

const handleMenu = (event: MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

const navigateSettings = (to: To, options?: NavigateOptions) => {
return () => {
handleClose();
navigate(`/settings${to}`, options);
};
};

const handleLogout = () => {
token.logout();
navigate("/");
};

return (
<AppBar position="static">
<Container maxWidth={"xl"}>
<Toolbar className={classes.toolbar}>
{/*<IconButton*/}
{/* edge="start"*/}
{/* color="inherit"*/}
{/* aria-label="open drawer"*/}
{/* onClick={handleDrawerOpen}*/}
{/* className={clsx(*/}
{/* classes.menuButton,*/}
{/* open && classes.menuButtonHidden*/}
{/* )}*/}
{/*>*/}
{/* <MenuIcon />*/}
{/*</IconButton>*/}
<Typography
component={RouterLink}
to={"/"}
variant="h6"
color="inherit"
className={classes.title}
>
{report?.Round === 0
? "Competition has not yet started!"
: `Round: ${report?.Round}`}
</Typography>
{
<>
{((policy && policy.showPoints?.value) ||
token.getCurrentRole() === Role.Black) && (
<IconButton href={"/scoreboard"}>
<CheckCircleIcon />
</IconButton>
)}
<IconButton href={"/scoreboard/ranks"}>
<BarChartIcon />
</IconButton>
{(token.getCurrentRole() === Role.Red ||
token.getCurrentRole() === Role.Blue ||
token.getCurrentRole() === Role.Black) && (
<IconButton href={"/scoreboard/details"}>
<DetailsIcon />
</IconButton>
)}
</>
}
{!token.isAValidToken() ? (
<Button href={"/auth/sign_in"} color={"inherit"}>
Sign In
</Button>
) : (
<>
<Button color={"inherit"} onClick={handleLogout}>
Sign Out
</Button>
{token.getCurrentRole() === Role.Black && (
<div className={classes.root}>
<AppBar position="static">
<Container maxWidth={"xl"} >
<Toolbar className={classes.toolbar}>
<Box>
<Typography
component={RouterLink}
to={"/"}
variant="h5"
color="inherit"
className={classes.title}
>
<strong>
{process.env.REACT_APP_COMPETITION_NAME ?? "ScoreTrak"}
</strong>
</Typography>
</Box>

<Box>
<Typography
component={RouterLink}
to={"/"}
variant="h6"
color="inherit"
className={classes.title}
>
{report?.Round === 0
? "Competition has not yet started!"
: `Round: ${report?.Round}`}
</Typography>
</Box>

<Box>
{
<>
<IconButton href={"/logs"}>
<DescriptionIcon />
</IconButton>
<IconButton onClick={handleMenu}>
<SettingsIcon />
{((policy && policy.showPoints?.value) ||
token.getCurrentRole() === Role.Black) && (
<IconButton component={RouterLink} to={"/scoreboard"}>
<CheckCircleIcon />
</IconButton>
)}
<IconButton component={RouterLink} to={"/scoreboard/ranks"}>
<BarChartIcon />
</IconButton>
{(token.getCurrentRole() === Role.Red ||
token.getCurrentRole() === Role.Blue ||
token.getCurrentRole() === Role.Black) && (
<IconButton component={RouterLink} to={"/scoreboard/details"}>
<DetailsIcon />
</IconButton>
)}
</>
}
{!token.isAValidToken() ? (
<Button component={RouterLink} to={"/auth/sign_in"} color={"inherit"}>
<Typography>
Sign In
</Typography>
</Button>
) : (
<>
<Button color={"inherit"} onClick={handleLogout}>
<Typography>
Sign Out
</Typography>
</Button>
{token.getCurrentRole() === Role.Black && (
<>
<IconButton component={RouterLink} to={"/logs"}>
<DescriptionIcon />
</IconButton>
<IconButton component={RouterLink} to={"/settings"}>
<SettingsIcon />
</IconButton>
</>
)}
</>
)}
</>
)}
<IconButton onClick={togglePaletteType}>
{theme.palette.type !== "light" ? <Brightness7 /> : <Brightness4 />}
</IconButton>

{token.getCurrentRole() === Role.Black && (
<Menu
id="settings-menu"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right",
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={open}
onClose={handleClose}
>
<MenuItem onClick={navigateSettings("")}>Settings</MenuItem>
<MenuItem onClick={navigateSettings("/hosts")}>Hosts</MenuItem>
<MenuItem onClick={navigateSettings("/host_groups")}>
Host Groups
</MenuItem>
<MenuItem onClick={navigateSettings("/services")}>
Services
</MenuItem>
<MenuItem onClick={navigateSettings("/service_groups")}>
Service Groups
</MenuItem>
<MenuItem onClick={navigateSettings("/properties")}>
Properties
</MenuItem>
<MenuItem onClick={navigateSettings("/teams")}>Teams</MenuItem>
<MenuItem onClick={navigateSettings("/users")}>Users</MenuItem>
</Menu>
)}
</Toolbar>
</Container>
</AppBar>
<IconButton onClick={togglePaletteType}>
{theme.palette.type !== "light" ? <Brightness7 /> : <Brightness4 />}
</IconButton>
</Box>
</Toolbar>
</Container>
</AppBar>
</div>
);
}
19 changes: 19 additions & 0 deletions src/components/PreCompBanner.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Box, Typography } from "@material-ui/core";
import React from "react";


export default function PreCompBanner() {
return (
<>
<Box mt={2} sx={{textAlign: "center"}}>
<Typography variant={"h4"}>
Welcome to the <strong>{ process.env.REACT_APP_COMPETITION_NAME }</strong> Competition!
</Typography>
<Typography variant={"h6"}>
This window will automatically reload once the first round is
scored.
</Typography>
</Box>
</>
)
}
Loading

0 comments on commit 3e42825

Please sign in to comment.