support limit

web/src/components/Home.js

@@ -22,6 +22,7 @@ const Home = () => {
 
   const [timetables, setTimetables] = React.useState([]);
   const [newTimetableName, setNewTimetableName] = React.useState("");
+  const [newLimit, setNewLimit] = React.useState(null);
   const navigator = useNavigate();
 
   const fetchData = async () => {
@@ -48,6 +49,18 @@ const Home = () => {
             }}
             placeholder="班表名"
           />
+          <TextField
+            value={newLimit}
+            onChange={(event) => {
+              let num = parseInt(event.target.value)
+              if (num <= 0) {
+                num = 1;
+              }
+              setNewLimit(num);
+            }}
+            placeholder="每人选择上限"
+            type="number"
+          />
           <Button
             variant="contained"
             color="secondary"
@@ -55,6 +68,7 @@ const Home = () => {
               await post("/timetables", {
                 token,
                 newTimetableName,
+                newLimit,
               });
               await fetchData();
             }}

web/src/components/Timetable.js

@@ -18,10 +18,11 @@ import { UsernameContext } from "./Login";
 import { useNavigate, useParams } from "react-router-dom";
 import { get, post, put } from "../fetches";
 
-const AdminComponent = ({ refresh, timetableStatus }) => {
+const AdminComponent = ({ refresh, timetableStatus, timetableLimit }) => {
   const { username, token } = React.useContext(UsernameContext);
   const [newName, setNewName] = React.useState("");
   const [newTime, setNewTime] = React.useState("");
+  const [newLimit, setNewLimit] = React.useState(timetableLimit);
   const [newCapacity, setNewCapacity] = React.useState(1);
   const params = useParams();
   let { timetableID } = params;
@@ -34,17 +35,11 @@ const AdminComponent = ({ refresh, timetableStatus }) => {
     });
     await refresh();
   };
-  const handleOpen = async () => {
+  const handleChangeStatus = async (status, limit) => {
     await put(`/timetables/${timetableID}`, {
       token,
-      status: true,
-    });
-    await refresh();
-  };
-  const handleClose = async () => {
-    await put(`/timetables/${timetableID}`, {
-      token,
-      status: false,
+      limit,
+      status,
     });
     await refresh();
   };
@@ -85,15 +80,47 @@ const AdminComponent = ({ refresh, timetableStatus }) => {
           添加
         </Button>
         {timetableStatus && (
-          <Button variant="contained" color="warning" onClick={handleClose}>
+          <Button
+            variant="contained"
+            color="warning"
+            onClick={() => {
+              handleChangeStatus(false, timetableLimit);
+            }}
+          >
             暂停报名
           </Button>
         )}
         {!timetableStatus && (
-          <Button variant="contained" color="success" onClick={handleOpen}>
+          <Button
+            variant="contained"
+            color="success"
+            onClick={() => {
+              handleChangeStatus(true, timetableLimit);
+            }}
+          >
             开放报名
           </Button>
         )}
+        <TextField
+          value={newLimit}
+          onChange={(event) => {
+            let number = parseInt(event.target.value);
+            if (number <= 0) {
+              number = 1;
+            }
+            setNewLimit(number);
+          }}
+          type="number"
+        />
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            handleChangeStatus(timetableStatus, newLimit);
+          }}
+        >
+          修改报名限制
+        </Button>
       </Stack>
     )
   );
@@ -103,6 +130,7 @@ const Timetable = () => {
   const [timeslots, setTimeslots] = React.useState([]);
   const [timetableName, setTimetableName] = React.useState("");
   const [timetableStatus, setTimetableStatus] = React.useState(true);
+  const [timetableLimit, setTimetableLimit] = React.useState(null);
   const { username } = React.useContext(UsernameContext);
   const navigator = useNavigate();
   const params = useParams();
@@ -115,6 +143,7 @@ const Timetable = () => {
     setTimeslots(data.timeslots);
     setTimetableName(data.timetableName);
     setTimetableStatus(data.timetableStatus);
+    setTimetableLimit(data.timetableLimit);
   };
   const handleTakeSlot = async (slotID, status) => {
     if (username === "admin") {
@@ -129,7 +158,7 @@ const Timetable = () => {
     }
   };
   React.useEffect(() => {
-    refresh()
+    refresh();
     const interval = setInterval(() => {
       refresh();
     }, 1000);
@@ -150,9 +179,13 @@ const Timetable = () => {
       </Button>
       <Typography variant="h4">{timetableName}</Typography>
 
-      <AdminComponent refresh={refresh} timetableStatus={timetableStatus} />
+      <AdminComponent
+        refresh={refresh}
+        timetableStatus={timetableStatus}
+        timetableLimit={timetableLimit}
+      />
 
-      <Typography>列表实时更新中</Typography>
+      <Typography>列表实时更新中，每人报名限制：{timetableLimit}</Typography>
       <LinearProgress />
       <TableContainer>
         <Table>