feature: edit task

src/i18n/zh-cn.json

@@ -12,6 +12,7 @@
     "No Dailies Present": "目前每日任务为空",
     "No habits present.": "目前习惯为空",
     "No Rewards present.": "目前奖励为空",
+    "No Todos present.": "目前待办事项为空",
     "There was an error running the cron. Please try again later.": "运行定时失败出错，请稍后再试。",
     "Login Failed, Please check credentials and try again!": "登录失败, 请检查凭据后再次尝试",
     "API Error: Please check credentials": "API错误，请检查凭据",

src/view/App.tsx

@@ -168,9 +168,9 @@ class App extends React.Component<any, any> {
         }
     }
 
-    async sendUpdateTask(id: string, type: string, message: string, title: string, notes: string) {
+    async sendUpdateTask(id: string, type: string, message: string, title: string, notes: string, coin: string = null) {
         try {
-            let response = await updateTask(this.username, this.credentials, id, type, title, notes);
+            let response = await updateTask(this.username, this.credentials, id, type, title, notes, coin);
             let result = await response.json();
             if (result.success === true) {
                 new Notice(message);
@@ -183,7 +183,6 @@ class App extends React.Component<any, any> {
             console.log(e);
             new Notice(i18next.t('API Error: Please check credentials'))
         }
-        // console.log(id, type,title,notes)
     }
 
     handleChangeTodos(event: any) {
@@ -194,9 +193,12 @@ class App extends React.Component<any, any> {
             this.state.tasks.todos.forEach((element: any) => {
                 if (element.id == event.target.id) {
                     if (event.type == "click") {
-                        console.log(event)
                         if (event.target.innerText == 'clear') {
                             this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
+                        } else if (event.target.attributes.title.value == 'submit') {
+                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                            this.sendUpdateTask(event.target.id, 'todo', i18next.t("Update!"), task_title, task_notes)
                         }
                     } else {
                         if (!element.completed) {
@@ -218,18 +220,20 @@ class App extends React.Component<any, any> {
         } else {
             this.state.tasks.dailys.forEach((element: any) => {
                 if (element.id == event.target.id) {
-                    if (element.id == event.target.id) {
+                    if (event.target.type == 'checkbox') {
-                        if (event.target.attributes.title.value == 'submit') {
+                        if (!element.completed) {
-                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
-                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
-                            this.sendUpdateTask(event.target.id, 'daily', "Update!", task_title, task_notes)
-                        } else if (event.target.attributes.title.value == 'delete') {
-                            this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
-                        } else if (!element.completed) {
                             this.sendScore(event.target.id, "up", i18next.t('Checked!'))
                         } else {
                             this.sendScore(event.target.id, "down", i18next.t('Un-Checked!'))
                         }
+                    } else {
+                        if (event.target.attributes.title.value == 'submit') {
+                            const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                            const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                            this.sendUpdateTask(event.target.id, 'daily', i18next.t("Update!"), task_title, task_notes)
+                        } else if (event.target.attributes.title.value == 'delete') {
+                            this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
+                        }
                     }
                 }
             })
@@ -240,28 +244,25 @@ class App extends React.Component<any, any> {
         if (event.target.id == "add-habit") {
             const title = event.target.name
             this.sendAddTask("habit", title, i18next.t('Add!'))
-        } else {
+        } else if (event.target.innerText == 'clear') {
-            if (event.target.innerText == 'clear') {
             this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
+        } else {
+            this.state.tasks.habits.forEach((element: any) => {
+                if (event.target.attributes.title.value == 'submit') {
+                    const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                    const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                    this.sendUpdateTask(event.target.id, 'daily', i18next.t("Update!"), task_title, task_notes)
                 } else {
                     const target_id = event.target.id.slice(4)
                     if (event.target.id.slice(0, 4) == "plus") {
-                    this.state.tasks.habits.forEach((element: any) => {
-                        if (element.id == target_id) {
                         this.sendScore(target_id, "up", i18next.t('Plus!'))
-                        }
+                    } else {
-                    })
-                }
-                else {
-                    this.state.tasks.habits.forEach((element: any) => {
-                        if (element.id == target_id) {
                         this.sendScore(target_id, "down", i18next.t("Minus :("))
                     }
+                }
             })
         }
     }
-        }
-    }
 
     handleChangeRewards(event: any) {
         console.log(event)
@@ -274,8 +275,11 @@ class App extends React.Component<any, any> {
                 if (element.id == target_id) {
                     if (event.target.innerText == 'clear') {
                         this.sendDeleteTask(event.target.id, i18next.t('Deleted!'))
-                    } else if (event.target.innerText == 'create') {
+                    } else if (event.target.attributes.title.value == 'submit') {
-                        this.sendUpdateTask(event.target.id, 'reward', i18next.t('Edit!'), "1", "1")
+                        const task_title = event.target.attributes['data-title'].value ? event.target.attributes['data-title'].value : element.text
+                        const task_notes = event.target.attributes['data-notes'].value ? event.target.attributes['data-notes'].value : element.notes
+                        const task_coin = event.target.attributes['data-coin'].value ? event.target.attributes['data-coin'].value : element.reward_value
+                        this.sendUpdateTask(event.target.id, 'reward', i18next.t('Edit!'), task_title, task_notes, task_coin)
                     } else {
                         this.sendReward(target_id, "down", i18next.t('Cost!'))
                     }

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -6,7 +6,7 @@ function DailyItem(props: any) {
     const [state, setState] = React.useState('view')
     const [title, setTitle] = React.useState('')
     const [notes, setNotes] = React.useState('')
-    if (state == 'view') {
+    if (state === 'view') {
         return (
             <div className="todo-item" id={props.id}>
                 <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
@@ -24,12 +24,14 @@ function DailyItem(props: any) {
         )
     } else {
         return (
-            <div className="edit-daily-item">
+            <div className="edit-daily-item edit-item">
                 <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.daily_text}></input>
                 <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.daily_notes}></input>
+                <div className="edit-daily-button edit-button">
                     <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
                     <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
                 </div>
+            </div>
         )
     }
 }

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -8,8 +8,10 @@ export default function Index(props: any) {
     let { t, i18n } = useTranslation()
     if (props.dailys == undefined) {
         return <div id="classDisplay">
-            <input type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-            <button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <Trans>No Dailies Present</Trans>
         </div>
     }
@@ -17,7 +19,7 @@ export default function Index(props: any) {
         const incompleteDailies = props.dailys.map((daily: any) => {
             if (!daily.completed)
                 return (
-                    <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} status="view" />
+                    <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} />
                 )
         })
         const completedDailies = props.dailys.map((daily: any) => {
@@ -32,12 +34,13 @@ export default function Index(props: any) {
                     <Tab><Trans>Completed</Trans></Tab>
                 </TabList>
                 <TabPanel>
-                    <input type="text" id="task-input-box" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
+                    <div className="task-submit">
+                        <input className="task-input-box" type="text" placeholder={t('Add Daily Task')} onChange={event => setTitle(event.target.value)} value={title} />
                         <button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
                     <div className="task-panel">
                         <ul>{incompleteDailies}</ul>
                     </div>
-
                 </TabPanel>
                 <TabPanel>
                     <ul>{completedDailies}</ul>

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -3,6 +3,10 @@ import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
 function HabitItem(props: any) {
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    if (state == 'view') {
         return (
             <div className="habit-item" id={props.id}>
                 <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
@@ -16,13 +20,26 @@ function HabitItem(props: any) {
                     <ReactMarkdown children={props.habit_notes} />
                 </div>
                 <button className="task-operation">
-                    <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
                 </button>
                 <button className="task-operation">
-                    <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
                 </button>
             </div>
         )
+    } else {
+        return (
+            <div className="edit-habit-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.habit_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.habit_notes}></input>
+                <div className="edit-habit-button edit-button">
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+    }
+
 }
 
 export default HabitItem

src/view/Components/Taskview/Habitsview/index.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
 import HabitItem from "./HabitItem"
-import { useTranslation, Trans, Translation } from 'react-i18next'
+import { useTranslation, Trans } from 'react-i18next'
 
 export default function Index(props: any) {
     const [title, setTitle] = React.useState('')
     let { t, i18n } = useTranslation()
     if (props.habits == undefined) {
         return (<div id="classDisplay">
-                    <input type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-                    <button className="submit-button" id="add-habit" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <Trans>No habits present.</Trans>
         </div>)
     }
@@ -16,11 +18,11 @@ export default function Index(props: any){
         const allHabits = props.habits.map((habit: 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">
-                            <input type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-                            <button className="submit-button" id="add-habit" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Habit')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <ul>{allHabits}</ul>
         </div>
 

src/view/Components/Taskview/Rewardview/RewardItem.tsx

@@ -2,6 +2,11 @@ import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
 function RewardItem(props: any) {
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    const [coin, setCoin] = React.useState(0)
+    if (state === 'view') {
         return (
             <div className="reward-item" id={props.id}>
                 <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
@@ -10,13 +15,27 @@ function RewardItem(props: any) {
                     <ReactMarkdown children={props.reward_notes} />
                 </div>
                 <button className="task-operation" >
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
                 </button>
                 <button className="task-operation">
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
                 </button>
             </div>
         )
+    } else {
+        return (
+            <div className="edit-reward-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.reward_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.reward_notes}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.reward_value}></input>
+                <div className="edit-reward-button edit-button">
+                    <button className="task-operation"  ><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes} data-coin={coin}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+
+    }
 }
 
 export default RewardItem

src/view/Components/Taskview/Rewardview/index.tsx

@@ -7,8 +7,10 @@ export default function Index(props: any){
     let { t, i18n } = useTranslation()
     if (props.rewards == undefined) {
         return (<div id="classDisplay">
-                    <input type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-                    <button className="submit-button" id="add-reward" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <Trans>No Rewards present.</Trans>
         </div>)
     }
@@ -17,8 +19,10 @@ 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">
-                            <input type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-                            <button className="submit-button" id="add-reward" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Reward')} onChange={event => setTitle(event.target.value)} value={title} />
+                <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
             <ul>{allRewards}</ul>
         </div>
 

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -3,6 +3,10 @@ import * as React from "react";
 import ReactMarkdown from "react-markdown";
 
 function TodoItem(props: any) {
+    const [state, setState] = React.useState('view')
+    const [title, setTitle] = React.useState('')
+    const [notes, setNotes] = React.useState('')
+    if (state === 'view') {
         return (
             <div className="todo-item" id={props.id}>
                 <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
@@ -11,13 +15,25 @@ function TodoItem(props: any) {
                     <ReactMarkdown children={props.todo_notes} />
                 </div>
                 <button className="task-operation" >
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
+                    <span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
                 </button>
                 <button className="task-operation">
-                <span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
+                    <span className="material-icons md-24" id={props.id} onClick={props.onChange} title="delete">clear</span>
                 </button>
             </div>
         )
+    } else {
+        return (
+            <div className="edit-todo-item edit-item">
+                <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.todo_text}></input>
+                <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.todo_notes}></input>
+                <div className="edit-todo-button edit-button">
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={function (e) { props.onChange(e); setState('view') }} title="submit" data-title={title} data-notes={notes}>check</span></button>
+                    <button className="task-operation"><span className="material-icons md-24" id={props.id} onClick={() => setState('view')} title="cancel">clear</span></button>
+                </div>
+            </div>
+        )
+    }
 }
 
 export default TodoItem

src/view/Components/Taskview/Todoview/index.tsx

@@ -8,9 +8,11 @@ export default function Index(props: any){
     let { t, i18n } = useTranslation()
     if (props.todos == undefined) {
         return <div id="classDisplay">
-            <input type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} />
+            <div className="task-submit">
-            <button className="submit-button" id="add-todo" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
-            No Todos present.
+                <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+            </div>
+            <Trans>No Todos present.</Trans>
         </div>
     }
     else {
@@ -29,8 +31,10 @@ export default function Index(props: any){
                     <Tab><Trans>Completed</Trans></Tab>
                 </TabList>
                 <TabPanel>
-                                <input type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} />
+                    <div className="task-submit">
-                                <button className="submit-button" id="add-todo" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
+                        <input className="task-input-box" type="text" placeholder={t('Add Todo')} onChange={event => setTitle(event.target.value)} value={title} />
+                        <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
+                    </div>
                     <ul>{incompleteTodos}</ul>
                 </TabPanel>
                 <TabPanel>

src/view/habiticaAPI.ts

@@ -85,7 +85,7 @@ export async function deleteTask(username: string, credentials: string, id: stri
     return(response)
 }
 
-export async function updateTask(username: string, credentials: string, id: string, type: string, title: string, notes: string) {
+export async function updateTask(username: string, credentials: string, id: string, type: string, title: string, notes: string, coin: string) {
     const url = "https://habitica.com/api/v4/tasks/".concat(id)
     const response = fetch(url, {
         method: 'PUT',
@@ -95,7 +95,7 @@ export async function updateTask(username: string, credentials: string, id: stri
             "x-api-user": username,
             "x-api-key": credentials,
         },
-        body: JSON.stringify({id: id,type: type, text: title,notes: notes})
+        body: type === 'reward' ? JSON.stringify({id: id,type: type, text: title,notes: notes, coin: coin}):JSON.stringify({id: id,type: type, text: title,notes: notes})
     })
     return(response)
 }

styles.css

@@ -111,10 +111,12 @@ input[type=checkbox] {
 }
 
 .submit-button {
-    padding: 5px 15px;
+    /* padding: 5px 5px; */
     font-size: 15px;
     border: 1px solid #aaa;
-    white-space: nowrap;
+    /* white-space: nowrap; */
+    /* margin: 10px; */
+    margin: 0;
 }
 
 input[type=checkbox]:focus {
@@ -236,6 +238,34 @@ ul li:not(.task-list-item)::before {
 
 .task-operation {
   align-self: center;
+  margin: 0;
+  padding: 0;
+}
+
+.edit-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.edit-button {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+.task-submit {
+  display: grid;
+  grid-template-columns: 10fr 5fr;
+}
+
+.add-task-input {
+  display: block;
+  width: 100%;
+}
+
+.task-input-box {
+  margin-right: 10px;
 }
 
 button {