💥

web/src/components/TimeSlot.js

@@ -0,0 +1,96 @@
+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;