Continued session, admin page
This commit is contained in:
parent
176c0b5ad4
commit
5c4130d3e4
|
|
@ -26,7 +26,7 @@ function AdminCreator(props){
|
|||
formData.append("email", adminEmail)
|
||||
let body = new URLSearchParams(formData)
|
||||
|
||||
fetch(process.env.REACT_APP_API_URL + `/admins/create`, {
|
||||
fetch(process.env.REACT_APP_API_URL + `/users/createBlank`, {
|
||||
method: "POST",
|
||||
body: body
|
||||
})
|
||||
|
|
@ -45,7 +45,7 @@ function AdminCreator(props){
|
|||
return (
|
||||
<Paper sx={{width: "90vw", margin: "10px auto", padding: "15px"}} component={Stack} direction="column">
|
||||
<div align="center">
|
||||
<TextField id="adminEmailInput" sx={{ width: "70%" }} label="Admin Email" variant="outlined" />
|
||||
<TextField id="adminEmailInput" sx={{ width: "70%" }} label="Admin Email" variant="outlined" type="email" />
|
||||
{/* <Button variant="contained" color="primary" onClick={postCreate}>Create Team</Button> */}
|
||||
<Button variant="contained" color="success" onClick={postCreate} sx={{width: "20%", marginLeft: "5px"}}>
|
||||
<Box sx={{padding: "10px"}}>
|
||||
|
|
@ -58,16 +58,16 @@ function AdminCreator(props){
|
|||
)
|
||||
}
|
||||
|
||||
function AdminList(props){
|
||||
const deleteAdmin = adminId => {
|
||||
fetch(process.env.REACT_APP_API_URL + `/users/${adminId}`, {method: "DELETE"})
|
||||
function UserList(props){
|
||||
const deleteUsers = userId => {
|
||||
fetch(process.env.REACT_APP_API_URL + `/users/${userId}`, {method: "DELETE"})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if(data.status !== "OK"){
|
||||
showError(data.data);
|
||||
return;
|
||||
}
|
||||
props.setAdmins(props.admins.filter(admin => admin.id !== adminId));
|
||||
props.setUsers(props.users.filter(user => user.id !== userId));
|
||||
})
|
||||
.catch(error => showError(error));
|
||||
}
|
||||
|
|
@ -79,20 +79,27 @@ function AdminList(props){
|
|||
<Table aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Admin</TableCell>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell>Email</TableCell>
|
||||
<TableCell>Rank</TableCell>
|
||||
<TableCell align="center">Actions</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{props.admins.map((admin) => (
|
||||
<TableRow key={admin.id}>
|
||||
<TableCell component="th" scope="row"> <b>
|
||||
{admin.name}
|
||||
</b></TableCell>
|
||||
{props.users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell component="th" scope="row">
|
||||
<b>
|
||||
{user.name}
|
||||
</b>
|
||||
</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
{/* TODO Drop down menu for selecting rank */}
|
||||
<TableCell>{'user.rank'}</TableCell>
|
||||
{/* <TableCell align="right">{team.members}</TableCell> */}
|
||||
<TableCell align="center">
|
||||
{/* <Button variant="contained" sx={{margin: "auto 5px"}} color="primary" onClick={() => props.setSelectedTeamId(team.id)} endIcon={<EditIcon />}>Edit</Button> */}
|
||||
<Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {deleteAdmin(admin.id)}} endIcon={<DeleteIcon />}>Delete</Button>
|
||||
<Button variant="contained" sx={{margin: "auto 5px"}} color="error" onClick={() => {deleteUsers(user.id)}} endIcon={<DeleteIcon />}>Delete</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
|
@ -103,23 +110,23 @@ function AdminList(props){
|
|||
)
|
||||
}
|
||||
|
||||
export default function Admins(props) {
|
||||
const [admins, setAdmins] = React.useState([]);
|
||||
const { adminId } = useParams();
|
||||
export default function Users(props) {
|
||||
const [users, setUsers] = React.useState([]);
|
||||
const { userId } = useParams();
|
||||
|
||||
function getAdmins() {
|
||||
function getUsers() {
|
||||
fetch(process.env.REACT_APP_API_URL + `/users/getUsers`)
|
||||
.then((res) => res.json())
|
||||
.then((data) =>{
|
||||
if(data.status !== "OK") {
|
||||
showError(data.data);
|
||||
}
|
||||
setAdmins(data.data);
|
||||
setUsers(data.data);
|
||||
})
|
||||
.catch((err) => showError(err));
|
||||
}
|
||||
React.useEffect(() => {
|
||||
getAdmins()
|
||||
getUsers()
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -127,7 +134,7 @@ export default function Admins(props) {
|
|||
<Appbar pageTitle="Admins" />
|
||||
<div className="admins">
|
||||
<AdminCreator />
|
||||
<AdminList />
|
||||
<UserList users={users}/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,15 +8,25 @@ export default function ProfilePage(props) {
|
|||
if (!props.login) {
|
||||
return <h1>Something went very wrong</h1>
|
||||
}
|
||||
console.log(props.login.user);
|
||||
|
||||
let user = props.login.user;
|
||||
console.log(props.login);
|
||||
return (<>
|
||||
<AppBar pageTitle="Profile" />
|
||||
<Container sx={{minHeight: "30vh", width: "90vw", padding: "20px 20px"}} component={Container} direction="column" align="center">
|
||||
{props.login.isLoggedIn ? <>
|
||||
<Box sx={{ padding: "20px", width: "90vw", height: "30vh", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", alignContent: "center", flexGrow: 1}}>
|
||||
|
||||
</Box>
|
||||
</>:<>
|
||||
{props.login.isLoggedIn() ? <>
|
||||
<Paper sx={{minHeight: "30vh", width: "90vw", margin: "10px auto"}} component={Stack} direction="column" justifyContent="center">
|
||||
<div align="center">
|
||||
<h2><b>Your profile</b></h2>
|
||||
<Box>
|
||||
<h3><b>Name: </b> {user.name}</h3>
|
||||
<h3><b>Email: </b> {user.email}</h3>
|
||||
<h3><b>Role: </b> {user.isManager() ? "Manager" : "Administrator"}</h3>
|
||||
<h3><b>Picture: </b> <img src={user.imgURL} alt="Your profile"></img></h3>
|
||||
</Box>
|
||||
</div>
|
||||
</Paper>
|
||||
</> : <>
|
||||
<Box sx={{ padding: "20px", width: "90vw", height: "30vh", display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "center", alignContent: "center", flexGrow: 1}}>
|
||||
You are not logged in.
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,8 @@ function shorten(description, maxLength) {
|
|||
|
||||
<Typography variant="h5" color="text.primary" gutterBottom> Players: {props.tournament.teamCount} / {props.tournament.teamLimit} </Typography>
|
||||
<Description />
|
||||
|
||||
<Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold" align="vertical-center"/> Prize: {props.tournament.prize} </Typography>
|
||||
|
||||
<Box sx={{flexGrow: 1, marginTop: "20px"}}>
|
||||
<Grid container spacing={4} justifyContent="center" wrap="wrap">
|
||||
<Grid item >
|
||||
|
|
@ -67,7 +68,6 @@ function shorten(description, maxLength) {
|
|||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Typography variant="body" color="text.primary"><EmojiEventsIcon alt="A trohpy" color="gold" align="vertical-center"/> Prize: {props.tournament.prize} </Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Paper>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { AppBar, Typography, Toolbar, CssBaseline, Box, Button, IconButton, Grid
|
|||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||
import HistoryIcon from '@mui/icons-material/History';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import LogoutIcon from '@mui/icons-material/Logout';
|
||||
import LoginIcon from '@mui/icons-material/Login';
|
||||
import logo from "./../Asura2222.png";
|
||||
|
|
@ -35,6 +36,7 @@ function LoggedInMenu() {
|
|||
<Link to="/" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<AccountCircleIcon />}>Profile</Button></MenuItem></Link>
|
||||
<Link to="/history" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<HistoryIcon />}>History</Button></MenuItem></Link>
|
||||
<Link to="/" style={{color:"black"}}><MenuItem onClick={logout}><Button endIcon={<LogoutIcon />} >Logout</Button></MenuItem></Link>
|
||||
<Link to="/admins" style={{color:"black"}}><MenuItem onClick={handleClose}><Button endIcon={<EditIcon />} >Admins</Button></MenuItem></Link>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:center;
|
||||
width:20%;
|
||||
width:20vw;
|
||||
list-style:none;
|
||||
padding:0;
|
||||
font-size: 1.5rem;
|
||||
|
|
|
|||
Loading…
Reference in New Issue