add ui for create、modify、delete for tasks
This commit is contained in:
parent
1b468b8454
commit
f350875d90
14 changed files with 138 additions and 36 deletions
|
|
@ -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."
|
||||
}
|
||||
|
|
@ -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.": "目前奖励为空"
|
||||
}
|
||||
27
src/view/Components/Taskview/Addview/index.tsx
Normal file
27
src/view/Components/Taskview/Addview/index.tsx
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue