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,43 +356,48 @@ export default function Time(props) {
             </TableRow>
           </TableHead>
           <TableBody>
-            {ranges.map((range) => (
+            {ranges.map((range) => {
-              <TableRow key={range.id}>
+              if (onlyShowAvaliable) {
-                <TableCell>{range.name}</TableCell>
+                return;
-                <TableCell>{range.range}</TableCell>
+              }
-                <TableCell>
+              return (
-                  <Button
+                <TableRow key={range.id}>
-                    sx={{
+                  <TableCell>{range.name}</TableCell>
-                      userSelect: "none",
+                  <TableCell>{range.range}</TableCell>
-                    }}
+                  <TableCell>
-                    disabled={range.username !== ""}
+                    <Button
-                    variant="contained"
+                      sx={{
-                    color="primary"
+                        userSelect: "none",
-                    onClick={() => updateUsername(range.id, props.username)}
+                      }}
-                  >
+                      disabled={range.username !== ""}
-                    {range.username ? range.username : "抢！"}
+                      variant="contained"
-                  </Button>
+                      color="primary"
-                  {isAdmin() && (
+                      onClick={() => updateUsername(range.id, props.username)}
-                    <>
+                    >
-                      <Button
+                      {range.username ? range.username : "抢！"}
-                        variant="contained"
+                    </Button>
-                        color="secondary"
+                    {isAdmin() && (
-                        onClick={() => setModifyTime(range)}
+                      <>
-                      >
+                        <Button
-                        修改
+                          variant="contained"
-                      </Button>
+                          color="secondary"
-                      <Button
+                          onClick={() => setModifyTime(range)}
-                        variant="contained"
+                        >
-                        color="secondary"
+                          修改
-                        onClick={() => deleteRange(range.id)}
+                        </Button>
-                      >
+                        <Button
-                        删除
+                          variant="contained"
-                      </Button>
+                          color="secondary"
-                    </>
+                          onClick={() => deleteRange(range.id)}
-                  )}
+                        >
-                </TableCell>
+                          删除
-              </TableRow>
+                        </Button>
-            ))}
+                      </>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
           </TableBody>
         </Table>
       </TableContainer>