From 7590dacbc036655257a9af638b58bd932915c9fa Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 22 May 2022 18:28:06 +0800
Subject: [PATCH 1/3] only show avaliable

---
 pages/time.js | 95 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 37 deletions(-)

diff --git a/pages/time.js b/pages/time.js
index edad8c3..72ed578 100644
--- a/pages/time.js
+++ b/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) => (
-              <TableRow key={range.id}>
-                <TableCell>{range.name}</TableCell>
-                <TableCell>{range.range}</TableCell>
-                <TableCell>
-                  <Button
-                    sx={{
-                      userSelect: "none",
-                    }}
-                    disabled={range.username !== ""}
-                    variant="contained"
-                    color="primary"
-                    onClick={() => updateUsername(range.id, props.username)}
-                  >
-                    {range.username ? range.username : "抢！"}
-                  </Button>
-                  {isAdmin() && (
-                    <>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => setModifyTime(range)}
-                      >
-                        修改
-                      </Button>
-                      <Button
-                        variant="contained"
-                        color="secondary"
-                        onClick={() => deleteRange(range.id)}
-                      >
-                        删除
-                      </Button>
-                    </>
-                  )}
-                </TableCell>
-              </TableRow>
-            ))}
+            {ranges.map((range) => {
+              if (onlyShowAvaliable) {
+                return;
+              }
+              return (
+                <TableRow key={range.id}>
+                  <TableCell>{range.name}</TableCell>
+                  <TableCell>{range.range}</TableCell>
+                  <TableCell>
+                    <Button
+                      sx={{
+                        userSelect: "none",
+                      }}
+                      disabled={range.username !== ""}
+                      variant="contained"
+                      color="primary"
+                      onClick={() => updateUsername(range.id, props.username)}
+                    >
+                      {range.username ? range.username : "抢！"}
+                    </Button>
+                    {isAdmin() && (
+                      <>
+                        <Button
+                          variant="contained"
+                          color="secondary"
+                          onClick={() => setModifyTime(range)}
+                        >
+                          修改
+                        </Button>
+                        <Button
+                          variant="contained"
+                          color="secondary"
+                          onClick={() => deleteRange(range.id)}
+                        >
+                          删除
+                        </Button>
+                      </>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
           </TableBody>
         </Table>
       </TableContainer>

From 25c556ea4462b968b4cbf5f668df388266be31c6 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 22 May 2022 18:30:10 +0800
Subject: [PATCH 2/3] fix bug

---
 pages/time.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/time.js b/pages/time.js
index 72ed578..9426023 100644
--- a/pages/time.js
+++ b/pages/time.js
@@ -357,7 +357,7 @@ export default function Time(props) {
           </TableHead>
           <TableBody>
             {ranges.map((range) => {
-              if (onlyShowAvaliable) {
+              if (onlyShowAvaliable && range.name === "") {
                 return;
               }
               return (

From 6aee86182e50617967cef4a8c6b9d1710af35cc9 Mon Sep 17 00:00:00 2001
From: heimoshuiyu <heimoshuiyu@gmail.com>
Date: Sun, 22 May 2022 18:55:49 +0800
Subject: [PATCH 3/3] handel interval onlyShowAvaliable

---
 pages/time.js | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/pages/time.js b/pages/time.js
index 9426023..505a10c 100644
--- a/pages/time.js
+++ b/pages/time.js
@@ -141,8 +141,6 @@ export default function Time(props) {
   };
 
   const refreshRanges = () => {
-    getLimit();
-    getStats();
     fetch(`${prefix}/api/time/ranges`)
       .then((res) => res.json())
       .then((res) => {
@@ -224,11 +222,17 @@ export default function Time(props) {
 
   useEffect(() => {
     refreshRanges();
+    getLimit();
+    getStats();
     const interval = setInterval(() => {
-      refreshRanges();
+      getLimit();
+      getStats();
+      if (!onlyShowAvaliable) {
+        refreshRanges();
+      }
     }, 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [onlyShowAvaliable]);
 
   /*
   useEffect(() => {
@@ -357,7 +361,7 @@ export default function Time(props) {
           </TableHead>
           <TableBody>
             {ranges.map((range) => {
-              if (onlyShowAvaliable && range.name === "") {
+              if (onlyShowAvaliable && range.username !== "") {
                 return;
               }
               return (