PolyPaw/habitica-sync
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: edit task

Browse source
This commit is contained in:
kkzzhizhou 2021-11-29 23:20:09 +08:00
parent 6433c4c72a
commit 300f44503b
12 changed files with 253 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/i18n/zh-cn.json
View file

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

68
src/view/App.tsx
View file

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

12
src/view/Components/Taskview/Dailiesview/DailyItem.tsx
View file

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

17
src/view/Components/Taskview/Dailiesview/index.tsx
View file

@ -5,11 +5,13 @@ import { Trans, useTranslation } from 'react-i18next';
export default function Index(props: any) { export default function Index(props: any) {
const [title, setTitle] = React.useState('') const [title, setTitle] = React.useState('')
let { t ,i18n} = useTranslation() let { t, i18n } = useTranslation()
if (props.dailys == undefined) { if (props.dailys == undefined) {
return <div id="classDisplay"> 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> <Trans>No Dailies Present</Trans>
</div> </div>
} }
@ -17,7 +19,7 @@ export default function Index(props: any) {
const incompleteDailies = props.dailys.map((daily: any) => { const incompleteDailies = props.dailys.map((daily: any) => {
if (!daily.completed) if (!daily.completed)
return ( 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) => { const completedDailies = props.dailys.map((daily: any) => {
@ -32,12 +34,13 @@ export default function Index(props: any) {
<Tab><Trans>Completed</Trans></Tab> <Tab><Trans>Completed</Trans></Tab>
</TabList> </TabList>
<TabPanel> <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">
<button className="submit-button" id="add-daily" onClick={function (e) { setTitle(""); props.onChange(e) }} 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>
<div className="task-panel"> <div className="task-panel">
<ul>{incompleteDailies}</ul> <ul>{incompleteDailies}</ul>
</div> </div>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<ul>{completedDailies}</ul> <ul>{completedDailies}</ul>

53
src/view/Components/Taskview/Habitsview/HabitItem.tsx
View file

@ -3,26 +3,43 @@ import * as React from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
function HabitItem(props: any) { function HabitItem(props: any) {
return ( const [state, setState] = React.useState('view')
<div className="habit-item" id={props.id}> const [title, setTitle] = React.useState('')
<button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}> const [notes, setNotes] = React.useState('')
+{props.upCount} if (state == 'view') {
</button> return (
<button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}> <div className="habit-item" id={props.id}>
-{props.downCount} <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
</button> +{props.upCount}
<div> </button>
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p> <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
<ReactMarkdown children={props.habit_notes} /> -{props.downCount}
</div> </button>
<button className="task-operation" > <div>
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span> <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
<ReactMarkdown children={props.habit_notes} />
</div>
<button className="task-operation">
<span className="material-icons md-24" id={props.id} onClick={() => setState('edit')}>create</span>
</button> </button>
<button className="task-operation"> <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> </button>
</div> </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 export default HabitItem

34
src/view/Components/Taskview/Habitsview/index.tsx
View file

@ -1,30 +1,32 @@
import * as React from "react"; import * as React from "react";
import HabitItem from "./HabitItem" import HabitItem from "./HabitItem"
import { useTranslation, Trans, Translation } from 'react-i18next' import { useTranslation, Trans } from 'react-i18next'
export default function Index(props: any){ export default function Index(props: any) {
const [title, setTitle] = React.useState('') const [title, setTitle] = React.useState('')
let { t ,i18n} = useTranslation() let { t, i18n } = useTranslation()
if(props.habits == undefined) { if (props.habits == undefined) {
return (<div id="classDisplay"> 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} />
<Trans>No habits present.</Trans> <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
</div>) </div>
<Trans>No habits present.</Trans>
</div>)
} }
else { else {
const allHabits = props.habits.map((habit: 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}/> 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"> 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} />
<ul>{allHabits}</ul> <button className="submit-button" id="add-habit" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
</div> </div>
<ul>{allHabits}</ul>
</div>
return(display); return (display);
} }
} }

47
src/view/Components/Taskview/Rewardview/RewardItem.tsx
View file

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

32
src/view/Components/Taskview/Rewardview/index.tsx
View file

@ -1,28 +1,32 @@
import * as React from "react"; import * as React from "react";
import RewardItem from "./RewardItem" import RewardItem from "./RewardItem"
import { Trans,useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
export default function Index(props: any){ export default function Index(props: any) {
const [title, setTitle] = React.useState('') const [title, setTitle] = React.useState('')
let { t ,i18n} = useTranslation() let { t, i18n } = useTranslation()
if(props.rewards == undefined) { if (props.rewards == undefined) {
return (<div id="classDisplay"> 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} />
<Trans>No Rewards present.</Trans> <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
</div>) </div>
<Trans>No Rewards present.</Trans>
</div>)
} }
else { else {
const allRewards = props.rewards.map((reward: any) => { const allRewards = props.rewards.map((reward: any) => {
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/> 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"> 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} />
<ul>{allRewards}</ul> <button className="submit-button" id="add-reward" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
</div> </div>
<ul>{allRewards}</ul>
</div>
return(display); return (display);
} }
} }

44
src/view/Components/Taskview/Todoview/TodoItem.tsx
View file

@ -3,21 +3,37 @@ import * as React from "react";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
function TodoItem(props: any) { function TodoItem(props: any) {
return ( const [state, setState] = React.useState('view')
<div className="todo-item" id={props.id}> const [title, setTitle] = React.useState('')
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/> const [notes, setNotes] = React.useState('')
<div> if (state === 'view') {
<p><Emoji text={props.todo_text}></Emoji></p> return (
<ReactMarkdown children={props.todo_notes} /> <div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
<div>
<p><Emoji text={props.todo_text}></Emoji></p>
<ReactMarkdown children={props.todo_notes} />
</div>
<button className="task-operation" >
<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} title="delete">clear</span>
</button>
</div> </div>
<button className="task-operation" > )
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span> } else {
</button> return (
<button className="task-operation"> <div className="edit-todo-item edit-item">
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span> <input type="text" onChange={event => setTitle(event.target.value)} defaultValue={props.todo_text}></input>
</button> <input type="text" onChange={event => setNotes(event.target.value)} defaultValue={props.todo_notes}></input>
</div> <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 export default TodoItem

58
src/view/Components/Taskview/Todoview/index.tsx
View file

@ -1,43 +1,47 @@
import * as React from "react"; import * as React from "react";
import TodoItem from "./TodoItem" import TodoItem from "./TodoItem"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { Trans,useTranslation } from 'react-i18next' import { Trans, useTranslation } from 'react-i18next'
export default function Index(props: any){ export default function Index(props: any) {
const [title, setTitle] = React.useState('') const [title, setTitle] = React.useState('')
let { t ,i18n} = useTranslation() let { t, i18n } = useTranslation()
if(props.todos == undefined) { if (props.todos == undefined) {
return <div id="classDisplay"> 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> </div>
<Trans>No Todos present.</Trans>
</div>
} }
else { else {
const incompleteTodos = props.todos.map((todo: any) => { const incompleteTodos = props.todos.map((todo: any) => {
if(!todo.completed) if (!todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/> return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed} />
}) })
const completedTodos = props.todos.map((todo: any) => { const completedTodos = props.todos.map((todo: any) => {
if(todo.completed) if (todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/> return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed} />
}) })
const display = <div id="classDisplay"> const display = <div id="classDisplay">
<Tabs> <Tabs>
<TabList> <TabList>
<Tab><Trans>Active</Trans></Tab> <Tab><Trans>Active</Trans></Tab>
<Tab><Trans>Completed</Trans></Tab> <Tab><Trans>Completed</Trans></Tab>
</TabList> </TabList>
<TabPanel> <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} />
<ul>{incompleteTodos}</ul> <button className="submit-button" id="add-todo" onClick={function (e) { setTitle(""); props.onChange(e) }} name={title}><Trans>submit</Trans></button>
</TabPanel> </div>
<TabPanel> <ul>{incompleteTodos}</ul>
<ul>{completedTodos}</ul> </TabPanel>
</TabPanel> <TabPanel>
</Tabs> <ul>{completedTodos}</ul>
</div> </TabPanel>
return(display); </Tabs>
</div>
return (display);
} }
} }

4
src/view/habiticaAPI.ts
View file

@ -85,7 +85,7 @@ export async function deleteTask(username: string, credentials: string, id: stri
return(response) 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 url = "https://habitica.com/api/v4/tasks/".concat(id)
const response = fetch(url, { const response = fetch(url, {
method: 'PUT', method: 'PUT',
@ -95,7 +95,7 @@ export async function updateTask(username: string, credentials: string, id: stri
"x-api-user": username, "x-api-user": username,
"x-api-key": credentials, "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) return(response)
} }

34
styles.css
View file

@ -111,10 +111,12 @@ input[type=checkbox] {
} }
.submit-button { .submit-button {
padding: 5px 15px; /* padding: 5px 5px; */
font-size: 15px; font-size: 15px;
border: 1px solid #aaa; border: 1px solid #aaa;
white-space: nowrap; /* white-space: nowrap; */
/* margin: 10px; */
margin: 0;
} }
input[type=checkbox]:focus { input[type=checkbox]:focus {
@ -236,6 +238,34 @@ ul li:not(.task-list-item)::before {
.task-operation { .task-operation {
align-self: center; 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 { button {