From f350875d908e17e516f759137959e71363b99353 Mon Sep 17 00:00:00 2001
From: kkzzhizhou <806508401@qq.com>
Date: Mon, 22 Nov 2021 17:12:08 +0800
Subject: [PATCH] =?UTF-8?q?add=20ui=20for=20create=E3=80=81modify=E3=80=81?=
 =?UTF-8?q?delete=20for=20tasks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/i18n/en-us.json                           | 16 +++---
 src/i18n/zh-cn.json                           | 21 ++++---
 .../Components/Taskview/Addview/index.tsx     | 27 +++++++++
 .../Taskview/Dailiesview/DailyItem.tsx        |  9 ++-
 .../Components/Taskview/Dailiesview/index.tsx |  6 ++
 .../Taskview/Habitsview/HabitItem.tsx         |  6 ++
 .../Components/Taskview/Habitsview/index.tsx  |  5 ++
 .../Taskview/Rewardview/RewardItem.tsx        |  7 ++-
 .../Components/Taskview/Rewardview/index.tsx  |  5 ++
 .../Components/Taskview/Todoview/TodoItem.tsx |  6 ++
 .../Components/Taskview/Todoview/index.tsx    |  7 ++-
 src/view/Components/Taskview/index.tsx        |  3 +-
 styles.css                                    | 55 ++++++++++++++-----
 14 files changed, 138 insertions(+), 36 deletions(-)
 create mode 100644 src/view/Components/Taskview/Addview/index.tsx

diff --git a/package.json b/package.json
index 8ca6194..5aed428 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-emoji-render": "^1.2.4",
+    "react-hook-form": "^7.20.2",
     "react-i18next": "^11.14.2",
     "react-markdown": "^7.1.0",
     "react-tabs": "^3.2.2"
diff --git a/src/i18n/en-us.json b/src/i18n/en-us.json
index 1b720cc..c0a6bb1 100644
--- a/src/i18n/en-us.json
+++ b/src/i18n/en-us.json
@@ -1,10 +1,10 @@
 {
-    "Active":"Active",
-    "Completed":"Completed",
-    "HP":"HP",
-    "LEVEL":"LEVEL",
-    "GOLD":"GOLD",
-    "No Dailies Present":"No Dailies Present",
-    "No habits present.":"No habits present.",
-    "No Rewards present.":"No Rewards present."
+    "Active": "Active",
+    "Completed": "Completed",
+    "HP": "HP",
+    "LEVEL": "LEVEL",
+    "GOLD": "GOLD",
+    "No Dailies Present": "No Dailies Present",
+    "No habits present.": "No habits present.",
+    "No Rewards present.": "No Rewards present."
 }
\ No newline at end of file
diff --git a/src/i18n/zh-cn.json b/src/i18n/zh-cn.json
index 796318b..684d63d 100644
--- a/src/i18n/zh-cn.json
+++ b/src/i18n/zh-cn.json
@@ -1,10 +1,15 @@
 {
-    "Active":"进行中",
-    "Completed":"已完成",
-    "HP":"生命值",
-    "LEVEL":"等级",
-    "GOLD":"金币",
-    "No Dailies Present":"目前每日任务为空",
-    "No habits present.":"目前习惯为空",
-    "No Rewards present.":"目前奖励为空"
+    "Active": "进行中",
+    "Completed": "已完成",
+    "HP": "生命值",
+    "LEVEL": "等级",
+    "GOLD": "金币",
+    "title": "标题",
+    "notes": "备注",
+    "type": "类型",
+    "Daily": "每日任务",
+    "submit": "添加",
+    "No Dailies Present": "目前每日任务为空",
+    "No habits present.": "目前习惯为空",
+    "No Rewards present.": "目前奖励为空"
 }
\ No newline at end of file
diff --git a/src/view/Components/Taskview/Addview/index.tsx b/src/view/Components/Taskview/Addview/index.tsx
new file mode 100644
index 0000000..ec59339
--- /dev/null
+++ b/src/view/Components/Taskview/Addview/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { Trans,useTranslation } from 'react-i18next'
+
+export default function Index(props: any) {
+
+    const display = <div id="addDisplay">
+                        <form>
+                            <label><Trans>type</Trans>
+                                <select>
+                                <option value="Daily">Daily</option>
+                                <option value="Habit">Habit</option>
+                                <option value="Todo">Todo</option>
+                                <option value="Reward">Reward</option>
+                                </select>
+                            </label>               
+                            <label><Trans>title</Trans>
+                                <input type="text" />
+                            </label>
+                            <label><Trans>notes</Trans>
+                                <input type="text" />
+                            </label>
+                        </form>
+                    </div>
+
+    return (display);
+}
\ No newline at end of file
diff --git a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
index 741eb8c..8a4e104 100644
--- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
+++ b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
@@ -6,10 +6,17 @@ function DailyItem(props: any) {
     return (
         <div className="todo-item" id={props.id}>
             <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
-            <div>
+            <div className="todo-content">
                 <p><Emoji text={props.daily_text}></Emoji></p>
                 <ReactMarkdown children={props.daily_notes} />
             </div>
+            <button className="modify-todo" id={props.id}>
+                <span className="material-icons md-24">create</span>
+            </button>
+            <button className="delete-todo" id={props.id}>
+                <span className="material-icons md-24">clear</span>
+            </button>
+
 
         </div>
     )
diff --git a/src/view/Components/Taskview/Dailiesview/index.tsx b/src/view/Components/Taskview/Dailiesview/index.tsx
index e19728c..08d8c5d 100644
--- a/src/view/Components/Taskview/Dailiesview/index.tsx
+++ b/src/view/Components/Taskview/Dailiesview/index.tsx
@@ -22,6 +22,11 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
+                            <div className="add-task-input">
+                                <input type="text">
+                                </input>
+                                <button className="submit-button"><Trans>submit</Trans></button>
+                            </div>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
                             </TabPanel>
@@ -29,6 +34,7 @@ export default function Index(props: any){
                                 <ul>{completedDailies}</ul>
                             </TabPanel>
                             </Tabs>
+                            
                         </div>
         return(display);
     }
diff --git a/src/view/Components/Taskview/Habitsview/HabitItem.tsx b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
index f458752..47c3cba 100644
--- a/src/view/Components/Taskview/Habitsview/HabitItem.tsx
+++ b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
@@ -15,6 +15,12 @@ function HabitItem(props: any) {
                 <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
                 <ReactMarkdown children={props.habit_notes} />
             </div>
+                <button className="modify-habit" id={props.id}>
+                    <span className="material-icons md-24">create</span>
+                </button>
+                <button className="delete-habit" id={props.id}>
+                    <span className="material-icons md-24">clear</span>
+                </button>
         </div>
     )
 }
diff --git a/src/view/Components/Taskview/Habitsview/index.tsx b/src/view/Components/Taskview/Habitsview/index.tsx
index 07d5549..c2535ec 100644
--- a/src/view/Components/Taskview/Habitsview/index.tsx
+++ b/src/view/Components/Taskview/Habitsview/index.tsx
@@ -13,6 +13,11 @@ export default function Index(props: any){
             return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} habit_notes={habit.notes} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
         })
         const display = <div id="classDisplay">
+                            <div className="add-task-input">
+                                <input type="text">
+                                </input>
+                                <button className="submit-button"><Trans>submit</Trans></button>
+                            </div>
                             <ul>{allHabits}</ul>
                         </div>
 
diff --git a/src/view/Components/Taskview/Rewardview/RewardItem.tsx b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
index 0d86c01..b281cf5 100644
--- a/src/view/Components/Taskview/Rewardview/RewardItem.tsx
+++ b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
@@ -9,7 +9,12 @@ function RewardItem(props: any) {
             <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
             <ReactMarkdown children={props.reward_notes} />
             </div>
-            
+            <button className="modify-reward" id={props.id}>
+                <span className="material-icons md-24">create</span>
+            </button>
+            <button className="delete-reward" id={props.id}>
+                <span className="material-icons md-24">clear</span>
+            </button>
         </div>
     )
 }
diff --git a/src/view/Components/Taskview/Rewardview/index.tsx b/src/view/Components/Taskview/Rewardview/index.tsx
index f6ae497..a294016 100644
--- a/src/view/Components/Taskview/Rewardview/index.tsx
+++ b/src/view/Components/Taskview/Rewardview/index.tsx
@@ -13,6 +13,11 @@ export default function Index(props: any){
             return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
         })
         const display = <div id="classDisplay">
+                            <div className="add-task-input">
+                                <input type="text">
+                                </input>
+                                <button className="submit-button"><Trans>submit</Trans></button>
+                            </div>
                             <ul>{allRewards}</ul>
                         </div>
 
diff --git a/src/view/Components/Taskview/Todoview/TodoItem.tsx b/src/view/Components/Taskview/Todoview/TodoItem.tsx
index d0ba9fc..edd0835 100644
--- a/src/view/Components/Taskview/Todoview/TodoItem.tsx
+++ b/src/view/Components/Taskview/Todoview/TodoItem.tsx
@@ -10,6 +10,12 @@ function TodoItem(props: any) {
                 <p><Emoji text={props.todo_text}></Emoji></p>
                 <ReactMarkdown children={props.todo_notes} />
             </div>
+            <button className="modify-todo" id={props.id}>
+                <span className="material-icons md-24">create</span>
+            </button>
+            <button className="delete-todo" id={props.id}>
+                <span className="material-icons md-24">clear</span>
+            </button>
         </div>
     )
 }
diff --git a/src/view/Components/Taskview/Todoview/index.tsx b/src/view/Components/Taskview/Todoview/index.tsx
index aa091e0..03cdb68 100644
--- a/src/view/Components/Taskview/Todoview/index.tsx
+++ b/src/view/Components/Taskview/Todoview/index.tsx
@@ -22,6 +22,11 @@ export default function Index(props: any){
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
+                            <div className="add-task-input">
+                                <input type="text">
+                                </input>
+                                <button className="submit-button"><Trans>submit</Trans></button>
+                            </div>
                             <TabPanel>
                                 <ul>{incompleteTodos}</ul>
                             </TabPanel>
@@ -30,8 +35,6 @@ export default function Index(props: any){
                             </TabPanel>
                             </Tabs>
                         </div>
-                        
-
         return(display);
     }
 }
\ No newline at end of file
diff --git a/src/view/Components/Taskview/index.tsx b/src/view/Components/Taskview/index.tsx
index 64898b2..480b2f6 100644
--- a/src/view/Components/Taskview/index.tsx
+++ b/src/view/Components/Taskview/index.tsx
@@ -3,13 +3,14 @@ import Dailiesview from "./Dailiesview"
 import Habitsview from "./Habitsview"
 import Todoview from "./Todoview"
 import Rewardview from "./Rewardview"
+import Addview from "./Addview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { useTranslation, Trans, Translation } from 'react-i18next'
 
 export default function Index(props: any){
     const display = <div className="task-view">
                     <Tabs>
                         <TabList>
-
                             <Tab>
                                 <span className="material-icons md-24">today</span>
                             </Tab>
diff --git a/styles.css b/styles.css
index f9390e3..e99e114 100644
--- a/styles.css
+++ b/styles.css
@@ -2,6 +2,9 @@
   padding: 0;
 }
 
+.add-task-input {
+  display: flex;
+}
 
 #profile-name {
   font-size: x-large;
@@ -14,8 +17,25 @@
 }
 
 .todo-item {
-  display: flex;
-  justify-content: flex-start;
+    display: grid;
+    grid-template-columns: 1fr 30fr 1fr 1fr;
+    justify-content: left;
+    align-items: flex-start;
+    padding: 0px 0px 0;
+    width: 100%;
+    border-bottom: 1px solid #cecece;
+    font-family: Roboto, sans-serif;
+    font-weight: normal;
+    font-size: 16px;
+}
+
+p {
+    margin: 0;
+}
+
+.reward-item {
+  display: grid;
+  grid-template-columns: 1fr 10fr 1fr 1fr;
   align-items: center;
   padding: 0px 0px 0;
   width: 100%;
@@ -25,16 +45,8 @@
   font-size: 16px;
 }
 
-.reward-item {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 0px 0px 0;
-  width: 100%;
-  border-bottom: 1px solid #cecece;
-  font-family: Roboto, sans-serif;
-  font-weight: normal;
-  font-size: 16px;
+.reward-click {
+  padding: 5px 15px;
 }
 
 
@@ -67,8 +79,8 @@
 }
 
 .habit-item {
-  display: flex;
-  /* justify-content: center; */
+  display: grid;
+  grid-template-columns: 2fr 2fr 10fr 2fr 2fr;
   align-content: space-between;
   align-items: center;
   padding: 0px 0px 0;
@@ -82,6 +94,17 @@
 
 input[type=checkbox] {
   margin-right: 10px;
+  align-self: center;
+}
+
+.todo-content {
+  align-self: center;
+}
+
+.submit-button {
+    padding: 5px 15px;
+    font-size: 15px;
+    border: 1px solid #aaa;
 }
 
 input[type=checkbox]:focus {
@@ -105,6 +128,7 @@ input[type=checkbox]:focus {
 
 .substats {
   font-size: medium;
+
 }
 
 /* react-tabs internal file :wink: */
@@ -128,7 +152,7 @@ input[type=checkbox]:focus {
 
 .react-tabs__tab-list {
   border-bottom: 1px solid #aaa;
-  margin: 0 0 10px;
+  margin: 0 0 5px;
   padding: 0;
 }
 
@@ -192,6 +216,7 @@ ul li:not(.task-list-item)::before {
 body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div.workspace-tabs > div.workspace-leaf > div > div.view-content > div > div.cron > button {
   margin: auto;
   margin-bottom: 5px;
+  white-space: nowrap
 }
 .cron {
   display: inline-grid;