显示数量上限

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
-        variant="contained"
-        color="primary"
-        onClick={() => refreshRanges()}
+      <Box
+        sx={{
+          display: "flex",
+          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>