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();
@@ -324,6 +329,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 +356,11 @@ export default function Time(props) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {ranges.map((range) => (
+            {ranges.map((range) => {
+              if (onlyShowAvaliable) {
+                return;
+              }
+              return (
                 <TableRow key={range.id}>
                   <TableCell>{range.name}</TableCell>
                   <TableCell>{range.range}</TableCell>
@@ -376,7 +396,8 @@ export default function Time(props) {
                     )}
                   </TableCell>
                 </TableRow>
-            ))}
+              );
+            })}
           </TableBody>
         </Table>
       </TableContainer>