显示数量上限

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,13 +229,23 @@ export default function Time(props) {
           </Box>
         </Box>
       )}
-      <Button
+      <Box
-        variant="contained"
+        sx={{
-        color="primary"
+          display: "flex",
-        onClick={() => refreshRanges()}
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
       >
-        Refresh
+        <Button
-      </Button>
+          variant="contained"
+          color="primary"
+          onClick={() => refreshRanges()}
+        >
+          Refresh
+        </Button>
+        <Typography>当前每人排班数量上限：{limit}</Typography>
+      </Box>
       <TableContainer>
         <Table>
           <TableHead>