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

new feature: add task

Browse source
This commit is contained in:
kkzzhizhou 2021-11-23 20:11:19 +08:00
parent 070b437bab
commit bfb4ae627f
7 changed files with 74 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/view/App.tsx
View file

@ -1,6 +1,6 @@
import * as React from "react";
import { Notice } from "obsidian";
import { getStats, scoreTask, makeCronReq, costReward } from "./habiticaAPI"
import { getStats, scoreTask, makeCronReq, costReward, addTask } from "./habiticaAPI"
import Statsview from "./Components/Statsview"
import Taskview from "./Components/Taskview"
import "../i18n"
@ -52,15 +52,11 @@ class App extends React.Component<any, any> {
let cronDate = new Date(lastCron);
let now = new Date();
if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
// return (
// <div className="cron">
// <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
// <button onClick={this.runCron}>Continue</button>
// </div>
// );
return (
<div className="cron"></div>
)
<div className="cron">
<button onClick={this.runCron}>Refresh</button>
</div>
);
}
else {
return null
@ -136,6 +132,23 @@ class App extends React.Component<any, any> {
}
}
async sendDaily(type: string, title: string, message: string) {
try {
let response = await addTask(this.username, this.credentials, title, type);
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")
}
}
handleChangeTodos(event: any) {
this.state.tasks.todos.forEach((element: any) => {
if (element.id == event.target.id) {
@ -162,6 +175,8 @@ class App extends React.Component<any, any> {
}
})
}
handleChangeHabits(event: any) {
const target_id = event.target.id.slice(4)
if (event.target.id.slice(0, 4) == "plus") {
@ -198,7 +213,7 @@ class App extends React.Component<any, any> {
else {
return (<div className="plugin-root">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards}/>
<Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} />
{content}
<div></div>
<Statsview user_data={this.state.user_data} />

2
src/view/Components/Statsview/index.tsx
View file

@ -6,7 +6,7 @@ export default function Index(props: any) {
return(
<div className="stats">
{/* <div id="profile-name">{props.user_data.profile.name}</div> */}
{console.log(props)}
{/* {console.log(props)} */}
<div className = "substats" id="hp"><i className="material-icons">favorite</i>{t('HP')}: {(props.user_data.stats.hp).toPrecision(2)}</div>
<div className = "substats" id="lvl"><i className="material-icons">star</i>{t('LEVEL')}: {props.user_data.stats.lvl}</div>
<div className = "substats" id="gold"><i className="material-icons">credit_card</i>{t('GOLD')}: {(props.user_data.stats.gp).toPrecision(2)}</div>

30
src/view/Components/Taskview/AddTask.tsx Normal file
View file

@ -0,0 +1,30 @@
import * as React from "react";
import { useForm } from "react-hook-form";
import { Trans } from 'react-i18next';
type FormData = {
title: string;
};
export default function Index(props: any) {
const { register, setValue, handleSubmit, formState: { errors } } = useForm<FormData>();
const onSubmit = handleSubmit(data => {
const url = "https://habitica.com/api/v4/tasks/user"
const response = fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
"x-api-user": this.app.plugins.plugins["obsidian-habitica-integration"].settings.userID,
"x-api-key": this.app.plugins.plugins["obsidian-habitica-integration"].settings.apiToken,
},
body: JSON.stringify({ type: props.type, text: data.title })
})
})
return (
<form className="add-task-input" onSubmit={onSubmit}>
<input type="text" defaultValue="" {...register("title")}></input>
<button className="submit-button" type="submit" ><Trans>submit</Trans></button>
</form>
);
}

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

@ -5,6 +5,7 @@ import ReactMarkdown from "react-markdown";
function DailyItem(props: any) {
return (
<div className="todo-item" id={props.id}>
{console.log(props)}
<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>

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

@ -1,13 +1,9 @@
import * as React from "react";
import DailyItem from "./DailyItem"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import { useTranslation, Trans, Translation } from 'react-i18next'
import { useTranslation, Trans, Translation } from 'react-i18next';
import { useForm, SubmitHandler } from "react-hook-form";
import { addDaily } from "src/view/habiticaAPI";
type Inputs = {
title: string
};
import AddTask from "../AddTask";
export default function Index(props: any){
if(props.dailys == undefined) {
@ -22,10 +18,6 @@ export default function Index(props: 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 { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
const onSubmit: SubmitHandler<Inputs> = data => {
addDaily(this.props.plugin.settings.userID,this.props.plugin.settings.apiToken,data.title)
}
const display = <div id="classDisplay">
<Tabs>
@ -33,10 +25,7 @@ export default function Index(props: any){
<Tab><Trans>Active</Trans></Tab>
<Tab><Trans>Completed</Trans></Tab>
</TabList>
<form className="add-task-input" onSubmit={handleSubmit(onSubmit)}>
<input type="text" defaultValue="" {...register("title")}></input>
<button className="submit-button" type="submit"><Trans>submit</Trans></button>
</form>
<AddTask type="daily"></AddTask>
<TabPanel>
<ul>{incompleteDailies}</ul>
</TabPanel>

4
src/view/habiticaAPI.ts
View file

@ -56,7 +56,7 @@ export async function costReward(username: string, credentials: string, taskID:
}
export async function addDaily(username: string, credentials: string, title: string) {
export async function addTask(username: string, credentials: string, title: string, type: string) {
const url = "https://habitica.com/api/v4/tasks/user".concat(title)
const response = fetch(url, {
method: 'POST',
@ -66,7 +66,7 @@ export async function addDaily(username: string, credentials: string, title: str
"x-api-user": username,
"x-api-key": credentials,
},
body: JSON.stringify({type: "daliy", text: title})
body: JSON.stringify({type: type, text: title})
})
return(response)
}

20
styles.css
View file

@ -121,10 +121,6 @@ input[type=checkbox]:focus {
outline: 0;
}
.task-view {
overflow: scroll;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
@ -132,13 +128,20 @@ input[type=checkbox]:focus {
.plugin-root {
min-width: 260px;
display: grid;
grid-template-rows: 93% 5% 2%;
grid-template-rows: 97% 1% 0.5%;
height: inherit;
}
#classDisplay {
height: 100%;
}
.substats {
font-size: medium;
}
ul {
margin: 0;
}
/* react-tabs internal file :wink: */
@ -157,7 +160,7 @@ input[type=checkbox]:focus {
.react-tabs {
-webkit-tap-highlight-color: transparent;
height: 100%;
}
.react-tabs__tab-list {
@ -208,6 +211,8 @@ input[type=checkbox]:focus {
.react-tabs__tab-panel {
display: none;
left: 0px;
height: 88%;
overflow: scroll;
}
.react-tabs__tab-panel--selected {
@ -223,7 +228,7 @@ ul li:not(.task-list-item)::before {
font-weight: bold;
text-shadow: 0 0 0.5em transparent;
}
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 {
button {
margin: auto;
margin-bottom: 5px;
white-space: nowrap;
@ -238,7 +243,6 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
margin-left: 10%;
margin-right: 10%;
margin-bottom: 10px;
background-color: var(--background-secondary-alt);
border-radius: 10px;
}
#cronMessage {