97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
import * as React from "react";
|
|
import Layout from "./Layout";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Typography,
|
|
List,
|
|
ListItem,
|
|
IconButton,
|
|
ListItemButton,
|
|
ListItemText,
|
|
} from "@mui/material";
|
|
import { Delete } from "@mui/icons-material";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { get, del } from "../fetches";
|
|
import { UsernameContext } from "./Login";
|
|
|
|
const TimeSlot = () => {
|
|
const navigator = useNavigate();
|
|
const params = useParams();
|
|
const { timetableID, timeslotID } = params;
|
|
const { username, token } = React.useContext(UsernameContext);
|
|
const [takes, setTakes] = React.useState([]);
|
|
const deleteThis = async () => {
|
|
await del(`/timetables/${timetableID}/${timeslotID}`, {
|
|
token,
|
|
});
|
|
navigator("./../");
|
|
};
|
|
const refresh = async () => {
|
|
const data = await get(`/timetables/${timetableID}/${timeslotID}`);
|
|
setTakes(data.takes);
|
|
};
|
|
React.useEffect(() => {
|
|
refresh();
|
|
}, []);
|
|
const deleteTake = async (takeusername) => {
|
|
await del(`/timetables/${timetableID}/${timeslotID}/${takeusername}`, {
|
|
token,
|
|
});
|
|
await refresh();
|
|
};
|
|
return (
|
|
<Layout>
|
|
<Typography variant="h5">报名列表</Typography>
|
|
<List>
|
|
{takes.map((take) => {
|
|
const created = new Date(take.created);
|
|
const date = `${created.getFullYear()}年${created.getMonth()}月${created.getDay()}日 ${created.getHours()}:${created.getMinutes()}:${created.getSeconds()}`;
|
|
return (
|
|
<ListItem key={take.username}>
|
|
<ListItemButton>
|
|
<ListItemText>
|
|
<Typography
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<span>{take.username}</span>
|
|
<span>{date}</span>
|
|
</Typography>
|
|
</ListItemText>
|
|
</ListItemButton>
|
|
{username === "admin" && (
|
|
<IconButton
|
|
onClick={() => {
|
|
deleteTake(take.username);
|
|
}}
|
|
>
|
|
<Delete />
|
|
</IconButton>
|
|
)}
|
|
</ListItem>
|
|
);
|
|
})}
|
|
</List>
|
|
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
|
|
<Button
|
|
variant="contained"
|
|
onClick={() => {
|
|
navigator("./../");
|
|
}}
|
|
>
|
|
返回
|
|
</Button>
|
|
<Button variant="contained" color="warning" onClick={deleteThis}>
|
|
删除
|
|
</Button>
|
|
</Box>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default TimeSlot;
|