显示数量上限

pages/api/time/limit.js

@@ -1,4 +1,4 @@
-import { authenticate, setLimit } from "../../../libs/db";
+import { authenticate, setLimit, getLimit } from "../../../libs/db";
 
 export default function handler(req, res) {
   // put method
@@ -24,6 +24,11 @@ export default function handler(req, res) {
 
     setLimit(limitInt);
     res.status(200).send({ success: true });
+  } else if (req.method === "GET") {
+    res.setHeader("Cache-Control", "no-cache no-store must-revalidate");
+    res.status(200).json({
+      limit: getLimit(),
+    });
   } else {
     res.status(405).send({ error: "方法" + req.method + "不被允许" });
   }

pages/time.js

@@ -4,6 +4,8 @@ import {
   Alert,
   Snackbar,
   Button,
+  Stack,
+  Typography,
   TextField,
   TableContainer,
   Table,
@@ -35,6 +37,19 @@ export default function Time(props) {
     }
   };
 
+  const getLimit = () => {
+    fetch("/api/time/limit", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        setLimit(res.limit);
+      });
+  };
+
   const addRange = () => {
     fetch("/api/time/ranges", {
       method: "POST",
@@ -60,6 +75,7 @@ export default function Time(props) {
   };
 
   const refreshRanges = () => {
+    getLimit();
     fetch("/api/time/ranges")
       .then((res) => res.json())
       .then((res) => {
@@ -213,6 +229,14 @@ export default function Time(props) {
           </Box>
         </Box>
       )}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
         <Button
           variant="contained"
           color="primary"
@@ -220,6 +244,8 @@ export default function Time(props) {
         >
           Refresh
         </Button>
+        <Typography>当前每人排班数量上限：{limit}</Typography>
+      </Box>
       <TableContainer>
         <Table>
           <TableHead>