update structure

haochengxu · Jan 14, 2024 · e37b9a8 · e37b9a8
1 parent 95e45c9
commit e37b9a8
Show file tree

Hide file tree

Showing 6 changed files with 224 additions and 33 deletions.
diff --git a/@types/projects/types.tsx b/@types/projects/types.tsx
@@ -1,4 +1,5 @@
 export interface Iteration {
+  index: number;
   elapsedTime: number;
   quality: number;
   notes: string;

diff --git a/package.json b/package.json
@@ -7,6 +7,8 @@
     "typecheck": "tsc"
   },
   "dependencies": {
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "gray-matter": "^4.0.3",

diff --git a/pages/projects/tiny/IterationDetailCard.tsx b/pages/projects/tiny/IterationDetailCard.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEdit, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { Iteration } from "../../../@types/projects/types";
+
+interface Props {
+  // Define the props for your component here
+  iteration: Iteration;
+  index: number;
+  name: string;
+  updateIteration: (iteration: Iteration) => void;
+}
+
+const IterationDetailCard: React.FC<Props> = ({
+  iteration,
+  index,
+  name,
+  updateIteration,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedIteration, setEditedIteration] = useState(iteration);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+  const handleSave = () => {
+    console.log(editedIteration);
+    updateIteration(editedIteration);
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    setEditedIteration(iteration);
+  }, [iteration]);
+
+  return (
+    <div className="bg-white p-4 shadow rounded mt-5 border-gray-400">
+      {!isEditing ? (
+        <FontAwesomeIcon
+          icon={faEdit}
+          onClick={handleEdit}
+          style={{ float: "right" }}
+        />
+      ) : (
+        <FontAwesomeIcon
+          icon={faTimes}
+          onClick={() => setIsEditing(false)}
+          style={{ float: "right" }}
+        />
+      )}
+
+      <p className="text-lg font-bold text-blue-600">
+        第{index + 1}次{name}
+      </p>
+
+      {isEditing ? (
+        <div className="flex flex-col space-y-4">
+          <label className="font-bold text-sm text-gray-600">开始时间</label>
+          <input
+            className="border-2 border-gray-300 p-2 rounded-md text-sm"
+            type="datetime-local"
+            value={editedIteration.startTime.slice(0, 16)}
+            onChange={(e) =>
+              setEditedIteration({
+                ...editedIteration,
+                startTime: e.target.value,
+              })
+            }
+          />
+          <label className="font-bold text-sm text-gray-600">持续时间</label>
+          <div className="flex items-center space-x-2">
+            <input
+              className="border-2 border-gray-300 p-2 rounded-md"
+              type="number"
+              value={editedIteration.elapsedTime / 60}
+              onChange={(e) =>
+                setEditedIteration({
+                  ...editedIteration,
+                  elapsedTime: Number(e.target.value) * 60,
+                })
+              }
+            />
+            <span>分钟</span>
+          </div>
+          <label className="font-bold text-sm text-gray-600">评分</label>
+          <input
+            className="border-2 border-gray-300 p-2 rounded-md"
+            type="number"
+            min="1"
+            max="5"
+            value={editedIteration.quality}
+            onChange={(e) =>
+              setEditedIteration({
+                ...editedIteration,
+                quality: Number(e.target.value),
+              })
+            }
+          />
+          <label className="font-bold text-sm text-gray-600">小记</label>
+          <textarea
+            className="border-2 border-gray-300 p-2 rounded-md"
+            value={editedIteration.notes}
+            onChange={(e) => {
+              console.log(e.target.value);
+              setEditedIteration({
+                ...editedIteration,
+                notes: e.target.value,
+              });
+            }}
+          />
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            onClick={handleSave}
+          >
+            Save
+          </button>
+        </div>
+      ) : (
+        <>
+          <p className="text-zinc-500">
+            开始时间:{" "}
+            {iteration.startTime
+              ? `${new Date(
+                  iteration.startTime
+                ).toLocaleDateString()} ${new Date(
+                  iteration.startTime
+                ).toLocaleTimeString()}`
+              : "未知"}
+          </p>
+          <p className="text-zinc-500">
+            持续时间: {Math.floor(iteration.elapsedTime / 3600)} 小时{" "}
+            {Math.floor((iteration.elapsedTime % 3600) / 60)} 分钟
+          </p>
+          <p className="text-zinc-500">评价: {iteration.quality}星</p>
+          <p className="text-zinc-500">小记: {iteration.notes}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default IterationDetailCard;
diff --git a/pages/projects/tiny/IterationDetail.tsx → pages/projects/tiny/IterationList.tsx b/pages/projects/tiny/IterationDetail.tsx → pages/projects/tiny/IterationList.tsx
@@ -1,13 +1,15 @@
 import React, { useState } from "react";
 import { Project } from "../../../@types/projects/types";
+import IterationDetailCard from "./IterationDetailCard";
+import { add } from "date-fns";
 
 interface Props {
   // Define the props for your component here
   project: Project;
   updateProject: (project: Project) => void;
 }
 
-const IterationDetail: React.FC<Props> = ({
+const IterationList: React.FC<Props> = ({
   project: currentProject,
   updateProject,
 }) => {
@@ -40,11 +42,12 @@ const IterationDetail: React.FC<Props> = ({
     setTimerId(null);
   };
 
-  const submitIteration = () => {
+  const addIteration = () => {
     if (!window.confirm(`你确定要完成这次${currentProject.name}吗？`)) {
       return;
     }
     const newIteration = {
+      index: currentProject.iterations ? currentProject.iterations.length : 0,
       startTime: startTime,
       elapsedTime: elapsedTime,
       notes: notes,
@@ -54,6 +57,18 @@ const IterationDetail: React.FC<Props> = ({
 
     currentProject.iterations = currentProject.iterations ? [...currentProject.iterations, newIteration] : [newIteration];
     updateProject(Object.assign({}, currentProject));
+    pauseTimer();
+    setShowPanel(false);
+    setStartTime('');
+  };
+
+  const modifyIteration = (iteration) => {
+    if (!window.confirm(`你确定要修改这次${currentProject.name}吗？`)) {
+      return;
+    }
+    currentProject.iterations[iteration.index] = iteration;
+    console.log(currentProject);
+    updateProject(Object.assign({}, currentProject));
   };
 
   return (
@@ -143,7 +158,7 @@ const IterationDetail: React.FC<Props> = ({
                 </p>
                 <button
                   className="mt-5 bg-green-500 text-white px-4 py-2 rounded"
-                  onClick={submitIteration}
+                  onClick={addIteration}
                 >
                   完成一次{currentProject.name}
                 </button>
@@ -154,35 +169,16 @@ const IterationDetail: React.FC<Props> = ({
               </div>
             </div>
           )}
-          {currentProject.iterations &&
-            currentProject.iterations.map((iteration, index) => {
-              return (
-                <div
-                  key={index}
-                  className="bg-white p-4 shadow rounded mt-5 border-gray-400"
-                >
-                  <p className="text-lg font-bold text-blue-600">
-                    第{index + 1}次{currentProject.name}
-                  </p>
-                  <p className="text-zinc-500">
-                    开始时间:{" "}
-                    {iteration.startTime
-                      ? `${new Date(iteration.startTime).toLocaleDateString()} ${new Date(iteration.startTime).toLocaleTimeString()}`
-                      : "未知"}
-                  </p>
-                  <p className="text-zinc-500">
-                    持续时间: {Math.floor(iteration.elapsedTime / 3600)} 小时{" "}
-                    {Math.floor((iteration.elapsedTime % 3600) / 60)} 分钟
-                  </p>
-                  <p className="text-zinc-500">评价: {iteration.quality}星</p>
-                  <p className="text-zinc-500">小记: {iteration.notes}</p>
-                </div>
-              );
-            })}
+          {
+            currentProject.iterations && currentProject.iterations.map((iteration, index) => {
+              return <IterationDetailCard updateIteration={ modifyIteration }
+                key={index} iteration={iteration} index={index} name={currentProject.name} />
+            })
+          }
         </>
       ) : null}
     </div>
   );
 };
 
-export default IterationDetail;
+export default IterationList;
diff --git a/pages/projects/tiny/index.tsx b/pages/projects/tiny/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Project } from "../../../@types/projects/types";
-import IterationDetail from "./IterationDetail";
+import IterationList from "./IterationList";
 
 const IterationTracker: React.FC = () => {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -78,10 +78,10 @@ const IterationTracker: React.FC = () => {
         </div>
 
         <div className="project-detail flex-1 ml-20 min-w-[300px]">
-          <IterationDetail
+          <IterationList
             project={currentProject}
             updateProject={updateProject}
-          ></IterationDetail>
+          ></IterationList>
         </div>
       </div>
     </div>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml