Add: 修改

pages/time.js

@@ -5,6 +5,10 @@ import {
   Snackbar,
   Button,
   Stack,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   TextField,
   TableContainer,
@@ -32,18 +36,17 @@ export default function Time(props) {
   const [token, setToken] = useState("");
   const [stats, setStats] = useState({});
 
+  const [modifyTime, setModifyTime] = useState({});
+
   const router = useRouter();
 
-  const updateUsernameByAdmin = (id, username) => {
-    fetch(`${prefix}/api/time/ranges/${id}`, {
+  const modifyRange = () => {
+    fetch(`${prefix}/api/time/ranges/${modifyTime.id}`, {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        username,
-        token,
-      }),
+      body: JSON.stringify({ token, ...modifyTime }),
     })
       .then((res) => res.json())
       .then((res) => {
@@ -51,6 +54,7 @@ export default function Time(props) {
           setSnackbarError(true);
           setSnackbarErrorMessage(res.error);
         } else {
+          setModifyTime({});
           setSnackbarSuccess(true);
           refreshRanges();
         }
@@ -356,9 +360,10 @@ export default function Time(props) {
                     <>
                       <Button
                         variant="contained"
-                        onClick={() => updateUsernameByAdmin(range.id, "")}
+                        color="secondary"
+                        onClick={() => setModifyTime(range)}
                       >
-                        清空
+                        修改
                       </Button>
                       <Button
                         variant="contained"
@@ -401,6 +406,44 @@ export default function Time(props) {
           操作成功！
         </Alert>
       </Snackbar>
+      <Dialog open={modifyTime.id} onClose={() => setModifyTime({})}>
+        <DialogTitle>修改时间段 {modifyTime.id}</DialogTitle>
+        <DialogContent>
+          <Stack
+            sx={{
+              mt: 1,
+            }}
+            spacing={2}
+          >
+            <TextField
+              label="名称"
+              value={modifyTime.name}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, name: e.target.value })
+              }
+            />
+            <TextField
+              label="时间段"
+              value={modifyTime.range}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, range: e.target.value })
+              }
+              placeholder="2022-01-01 00:00:00"
+            />
+            <TextField
+              label="姓名"
+              value={modifyTime.username}
+              onChange={(e) =>
+                setModifyTime({ ...modifyTime, username: e.target.value })
+              }
+            />
+          </Stack>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setModifyTime({})}>取消</Button>
+          <Button onClick={modifyRange}>确定</Button>
+        </DialogActions>
+      </Dialog>
     </Container>
   );
 }