feature: add/edit/delete tasks
This commit is contained in:
kkzzhizhou
parent
876fe85f08
commit
ac57825452
7 changed files with 75 additions and 48 deletions
|
|
@ -1,9 +1,10 @@
|
|||
import * as React from "react";
|
||||
import { Notice } from "obsidian";
|
||||
import { getStats, scoreTask, makeCronReq, costReward, addTask, deleteTask } from "./habiticaAPI"
|
||||
import { getStats, scoreTask, makeCronReq, costReward, addTask, deleteTask, updateTask } from "./habiticaAPI"
|
||||
import Statsview from "./Components/Statsview"
|
||||
import Taskview from "./Components/Taskview"
|
||||
import "../i18n"
|
||||
import { exit } from "process";
|
||||
|
||||
class App extends React.Component<any, any> {
|
||||
private _username = "";
|
||||
|
|
@ -40,7 +41,6 @@ class App extends React.Component<any, any> {
|
|||
todos: [],
|
||||
dailys: [],
|
||||
habits: [],
|
||||
input_task: "",
|
||||
}
|
||||
this.handleChangeTodos = this.handleChangeTodos.bind(this);
|
||||
this.handleChangeDailys = this.handleChangeDailys.bind(this);
|
||||
|
|
@ -167,9 +167,22 @@ class App extends React.Component<any, any> {
|
|||
}
|
||||
}
|
||||
|
||||
async sendEditTask(id: string, type: string) {
|
||||
console.log(id, type)
|
||||
return (<div className="loading">Loading....</div>)
|
||||
async sendUpdateTask(id: string, type: string,message: string, title: string, notes: string) {
|
||||
try {
|
||||
let response = await updateTask(this.username, this.credentials, id, type, title, notes);
|
||||
let result = await response.json();
|
||||
if (result.success === true) {
|
||||
new Notice(message);
|
||||
this.reloadData();
|
||||
} else {
|
||||
new Notice("Resyncing, please try again");
|
||||
this.reloadData();
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
new Notice("API Error: Please check credentials")
|
||||
}
|
||||
// console.log(id, type,title,notes)
|
||||
}
|
||||
|
||||
handleChangeTodos(event: any) {
|
||||
|
|
@ -205,9 +218,11 @@ class App extends React.Component<any, any> {
|
|||
this.state.tasks.dailys.forEach((element: any) => {
|
||||
if (element.id == event.target.id) {
|
||||
if (element.id == event.target.id) {
|
||||
if ( event.target.innerText == 'create' ) {
|
||||
this.sendEditTask(event.target.id, "daily")
|
||||
} else if (event.target.innerText == 'clear') {
|
||||
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',"Update!",task_title,task_notes)
|
||||
} else if (event.target.attributes.title.value == 'delete') {
|
||||
this.sendDeleteTask(event.target.id, "Deleted!")
|
||||
} else if ( !element.completed) {
|
||||
this.sendScore(event.target.id, "up", "Checked!")
|
||||
|
|
@ -259,7 +274,7 @@ class App extends React.Component<any, any> {
|
|||
if (event.target.innerText == 'clear') {
|
||||
this.sendDeleteTask(event.target.id, "Deleted!")
|
||||
} else if (event.target.innerText == 'create') {
|
||||
this.sendEditTask(event.target.id, "Edit!")
|
||||
this.sendUpdateTask(event.target.id,'reward',"Edit!","1","1")
|
||||
} else {
|
||||
this.sendReward(target_id, "down", "Cost!")
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,24 +2,36 @@ import Emoji from "react-emoji-render";
|
|||
import * as React from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
|
||||
function DailyItem(props: any) {
|
||||
return (
|
||||
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} />
|
||||
<div className="todo-content">
|
||||
<p><Emoji text={props.daily_text}></Emoji></p>
|
||||
<ReactMarkdown children={props.daily_notes} />
|
||||
</div>
|
||||
|
||||
<button className="task-operation" >
|
||||
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
|
||||
<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}>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-daily-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>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default DailyItem
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import Emoji from "react-emoji-render";
|
||||
import * as React from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
|
||||
function EditDailyItem(props: any) {
|
||||
return (
|
||||
<div className="edit-todo-item" id={props.id}>
|
||||
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
|
||||
<div className="todo-content">
|
||||
<p><Emoji text={props.daily_text}></Emoji></p>
|
||||
<ReactMarkdown children={props.daily_notes} />
|
||||
</div>
|
||||
|
||||
<button className="task-operation" >
|
||||
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>create</span>
|
||||
</button>
|
||||
<button className="task-operation">
|
||||
<span className="material-icons md-24" id={props.id} onClick={props.onChange}>clear</span>
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default EditDailyItem
|
||||
|
|
@ -1,30 +1,30 @@
|
|||
import * as React from "react";
|
||||
import DailyItem from "./DailyItem"
|
||||
import EditDailyItem from "./EditDailyItem"
|
||||
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
|
||||
import { Trans } from 'react-i18next';
|
||||
|
||||
export default function Index(props: any) {
|
||||
const [title, setTitle] = React.useState('')
|
||||
|
||||
if (props.dailys == undefined) {
|
||||
return <div id="classDisplay">
|
||||
<input type="text" placeholder="添加每日任务" onChange={event => setTitle(event.target.value)} />
|
||||
<button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
|
||||
<Trans>No Dailies Present</Trans>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else {
|
||||
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} />
|
||||
<DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed} status="view" />
|
||||
)
|
||||
})
|
||||
const completedDailies = 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} />
|
||||
})
|
||||
|
||||
|
||||
const display = <div id="classDisplay">
|
||||
<Tabs>
|
||||
<TabList>
|
||||
|
|
@ -32,9 +32,12 @@ export default function Index(props: any) {
|
|||
<Tab><Trans>Completed</Trans></Tab>
|
||||
</TabList>
|
||||
<TabPanel>
|
||||
<input type="text" placeholder="添加每日任务" onChange={event => setTitle(event.target.value)} />
|
||||
<button className="submit-button" id="add-daily" onClick={props.onChange} name={title}><Trans>submit</Trans></button>
|
||||
<ul>{incompleteDailies}</ul>
|
||||
<input type="text" id="task-input-box" placeholder="添加每日任务" 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 className="task-panel">
|
||||
<ul>{incompleteDailies}</ul>
|
||||
</div>
|
||||
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<ul>{completedDailies}</ul>
|
||||
|
|
|
|||
|
|
@ -83,4 +83,19 @@ 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) {
|
||||
const url = "https://habitica.com/api/v4/tasks/".concat(id)
|
||||
const response = fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
|
||||
"x-api-user": username,
|
||||
"x-api-key": credentials,
|
||||
},
|
||||
body: JSON.stringify({id: id,type: type, text: title,notes: notes})
|
||||
})
|
||||
return(response)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue