Merge branch 'only-show-avaliable'

pages/time.js

@@ -4,6 +4,9 @@ import {
   Alert,
   Snackbar,
   Button,
+  FormGroup,
+  FormControlLabel,
+  Checkbox,
   Stack,
   Dialog,
   DialogTitle,
@@ -36,6 +39,8 @@ export default function Time(props) {
   const [token, setToken] = useState("");
   const [stats, setStats] = useState({});
 
+  const [onlyShowAvaliable, setOnlyShowAvaliable] = useState(true);
+
   const [modifyTime, setModifyTime] = useState({});
 
   const router = useRouter();
@@ -136,8 +141,6 @@ export default function Time(props) {
   };
 
   const refreshRanges = () => {
-    getLimit();
-    getStats();
     fetch(`${prefix}/api/time/ranges`)
       .then((res) => res.json())
       .then((res) => {
@@ -219,11 +222,17 @@ export default function Time(props) {
 
   useEffect(() => {
     refreshRanges();
+    getLimit();
+    getStats();
     const interval = setInterval(() => {
+      getLimit();
+      getStats();
+      if (!onlyShowAvaliable) {
         refreshRanges();
+      }
     }, 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [onlyShowAvaliable]);
 
   /*
   useEffect(() => {
@@ -324,6 +333,17 @@ export default function Time(props) {
         >
           Refresh
         </Button>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={onlyShowAvaliable}
+                onChange={(e) => setOnlyShowAvaliable(e.target.checked)}
+              />
+            }
+            label="仅显示空余"
+          />
+        </FormGroup>
         <Typography>
           当前每人数量上限: {limit}
           <br />
@@ -340,7 +360,11 @@ export default function Time(props) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {ranges.map((range) => (
+            {ranges.map((range) => {
+              if (onlyShowAvaliable && range.username !== "") {
+                return;
+              }
+              return (
                 <TableRow key={range.id}>
                   <TableCell>{range.name}</TableCell>
                   <TableCell>{range.range}</TableCell>
@@ -376,7 +400,8 @@ export default function Time(props) {
                     )}
                   </TableCell>
                 </TableRow>
-            ))}
+              );
+            })}
           </TableBody>
         </Table>
       </TableContainer>