110 lines
2.6 KiB
JavaScript
110 lines
2.6 KiB
JavaScript
import * as React from "react";
|
||
import Layout from "./Layout";
|
||
import {
|
||
Box,
|
||
Chip,
|
||
Button,
|
||
List,
|
||
ListItem,
|
||
ListItemButton,
|
||
ListItemText,
|
||
IconButton,
|
||
TextField,
|
||
Typography,
|
||
} from "@mui/material";
|
||
import { Delete } from "@mui/icons-material";
|
||
import { UsernameContext } from "./Login";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { get, post, del } from "../fetches";
|
||
|
||
const Home = () => {
|
||
const { username, token } = React.useContext(UsernameContext);
|
||
|
||
const [timetables, setTimetables] = React.useState([]);
|
||
const [newTimetableName, setNewTimetableName] = React.useState("");
|
||
const navigator = useNavigate();
|
||
|
||
const fetchData = async () => {
|
||
const data = await get("/timetables");
|
||
setTimetables(data.timetables);
|
||
};
|
||
|
||
React.useEffect(() => {
|
||
fetchData();
|
||
}, []);
|
||
|
||
return (
|
||
<Layout>
|
||
{username === "admin" && (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
}}
|
||
>
|
||
<TextField
|
||
value={newTimetableName}
|
||
onChange={(event) => {
|
||
setNewTimetableName(event.target.value);
|
||
}}
|
||
placeholder="班表名"
|
||
/>
|
||
<Button
|
||
variant="contained"
|
||
color="secondary"
|
||
onClick={async () => {
|
||
await post("/timetables", {
|
||
token,
|
||
newTimetableName,
|
||
});
|
||
await fetchData();
|
||
}}
|
||
>
|
||
添加新班表
|
||
</Button>
|
||
</Box>
|
||
)}
|
||
|
||
<Typography>选择班表：</Typography>
|
||
|
||
<List>
|
||
{timetables.map(({ id, name, status }) => (
|
||
<ListItem key={id}>
|
||
<ListItemButton
|
||
onClick={() => {
|
||
navigator(`/timetable/${id}`);
|
||
}}
|
||
>
|
||
<ListItemText
|
||
sx={{ display: "flex", justifyContent: "space-between" }}
|
||
>
|
||
{name}
|
||
<Chip
|
||
label={status ? "招募中" : "未开放"}
|
||
sx={{ mx: 5 }}
|
||
color={status ? "success" : "default"}
|
||
/>
|
||
</ListItemText>
|
||
</ListItemButton>
|
||
{username === "admin" && (
|
||
<IconButton
|
||
onClick={async () => {
|
||
console.log(
|
||
await del(`/timetables/${id}`, {
|
||
token,
|
||
})
|
||
);
|
||
await fetchData();
|
||
}}
|
||
>
|
||
<Delete />
|
||
</IconButton>
|
||
)}
|
||
</ListItem>
|
||
))}
|
||
</List>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default Home;
|