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

add rewards panels and change styles

Browse source
This commit is contained in:
kkzzhizhou 2021-11-18 14:16:20 +08:00
parent ffa79454a0
commit bc97bcfc3f
8 changed files with 163 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/main.ts
View file

@ -15,6 +15,7 @@ export default class HabiticaSync extends Plugin {
view: HabiticaSyncView; view: HabiticaSyncView;
async onload() { async onload() {
console.log("正在加载habitica-sync")
await this.loadSettings(); await this.loadSettings();
this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this)); this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
this.registerView( this.registerView(
@ -40,7 +41,7 @@ export default class HabiticaSync extends Plugin {
await this.saveData(this.settings); await this.saveData(this.settings);
} }
async onunload() { async onunload() {
await this.view.onClose(); // await this.view.onClose();
this.app.workspace this.app.workspace
.getLeavesOfType(VIEW_TYPE) .getLeavesOfType(VIEW_TYPE)

6
src/view.tsx
View file

@ -32,7 +32,7 @@ export class HabiticaSyncView extends ItemView {
) )
} }
async onClose(){ // async onClose(){
ReactDOM.unmountComponentAtNode(this.containerEl.children[1]); // ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
} // }
} }

88
src/view/App.tsx
View file

@ -1,10 +1,10 @@
import * as React from "react"; import * as React from "react";
import { Notice } from "obsidian"; import { Notice } from "obsidian";
import { getStats, scoreTask, makeCronReq } from "./habiticaAPI" import { getStats, scoreTask, makeCronReq, costReward } from "./habiticaAPI"
import Statsview from "./Components/Statsview" import Statsview from "./Components/Statsview"
import Taskview from "./Components/Taskview" import Taskview from "./Components/Taskview"
class App extends React.Component<any,any> { class App extends React.Component<any, any> {
private _username = ""; private _username = "";
public get username() { public get username() {
return this._username; return this._username;
@ -43,6 +43,7 @@ class App extends React.Component<any,any> {
this.handleChangeTodos = this.handleChangeTodos.bind(this); this.handleChangeTodos = this.handleChangeTodos.bind(this);
this.handleChangeDailys = this.handleChangeDailys.bind(this); this.handleChangeDailys = this.handleChangeDailys.bind(this);
this.handleChangeHabits = this.handleChangeHabits.bind(this); this.handleChangeHabits = this.handleChangeHabits.bind(this);
this.handleChangeRewards = this.handleChangeRewards.bind(this);
this.runCron = this.runCron.bind(this); this.runCron = this.runCron.bind(this);
} }
@ -50,7 +51,7 @@ class App extends React.Component<any,any> {
let cronDate = new Date(lastCron); let cronDate = new Date(lastCron);
let now = new Date(); let now = new Date();
if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) { if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
return( return (
<div className="cron"> <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> <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> <button onClick={this.runCron}>Continue</button>
@ -97,11 +98,11 @@ class App extends React.Component<any,any> {
this.reloadData() this.reloadData()
} }
async sendScore(id:string , score: string, message: string){ async sendScore(id: string, score: string, message: string) {
try { try {
let response = await scoreTask(this.username, this.credentials, id, score); let response = await scoreTask(this.username, this.credentials, id, score);
let result = await response.json(); let result = await response.json();
if(result.success === true){ if (result.success === true) {
new Notice(message); new Notice(message);
this.reloadData(); this.reloadData();
} else { } else {
@ -114,60 +115,89 @@ class App extends React.Component<any,any> {
} }
} }
handleChangeTodos(event: any){ async sendReward(id: string, score: string, message: string) {
try {
let response = await costReward(this.username, this.credentials, id, score);
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) => { this.state.tasks.todos.forEach((element: any) => {
if(element.id == event.target.id){ if (element.id == event.target.id) {
if(!element.completed){ if (!element.completed) {
this.sendScore(event.target.id,"up", "Checked!") this.sendScore(event.target.id, "up", "Checked!")
} else { } else {
this.sendScore(event.target.id,"down", "Un-Checked!") this.sendScore(event.target.id, "down", "Un-Checked!")
} }
} }
}) })
} }
handleChangeDailys(event: any){
handleChangeDailys(event: any) {
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 (element.id == event.target.id) {
if(!element.completed){ if (!element.completed) {
this.sendScore(event.target.id,"up", "Checked!") this.sendScore(event.target.id, "up", "Checked!")
} else { } else {
this.sendScore(event.target.id,"down", "Un-Checked!") this.sendScore(event.target.id, "down", "Un-Checked!")
} }
} }
} }
}) })
} }
handleChangeHabits(event: any){ handleChangeHabits(event: any) {
const target_id = event.target.id.slice(4) const target_id = event.target.id.slice(4)
if(event.target.id.slice(0,4) == "plus"){ if (event.target.id.slice(0, 4) == "plus") {
this.state.tasks.habits.forEach((element: any) => { this.state.tasks.habits.forEach((element: any) => {
if(element.id == target_id){ if (element.id == target_id) {
this.sendScore(target_id,"up", "Plus!") this.sendScore(target_id, "up", "Plus!")
} }
}) })
} }
else { else {
this.state.tasks.habits.forEach((element: any) => { this.state.tasks.habits.forEach((element: any) => {
if(element.id == target_id){ if (element.id == target_id) {
this.sendScore(target_id,"down", "Minus :(") this.sendScore(target_id, "down", "Minus :(")
} }
}) })
} }
} }
handleChangeRewards(event: any) {
render(){ const target_id = event.target.id
this.state.tasks.rewards.forEach((element: any) => {
if (element.id == event.target.id) {
if (element.id == target_id) {
this.sendReward(target_id, "down", "Cost!")
}
}
})
}
render() {
let content = this.CheckCron(this.state.user_data.lastCron); let content = this.CheckCron(this.state.user_data.lastCron);
if(this.state.error) if (this.state.error)
return(<div className="loading">Loading....</div>) return (<div className="loading">Loading....</div>)
else if(!this.state.isLoaded) else if (!this.state.isLoaded)
return <div className="loading">Loading....</div> return <div className="loading">Loading....</div>
else { else {
return (<div className="plugin-root"> return (<div className="plugin-root">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<Statsview user_data={this.state.user_data} /> <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}/>
{content} {content}
<div></div>
<Statsview user_data={this.state.user_data} />
</div> </div>
); );
} }

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

@ -3,9 +3,11 @@ import * as React from 'react';
export default function Index(props: any) { export default function Index(props: any) {
return( return(
<div className="stats"> <div className="stats">
<div id="profile-name">{props.user_data.profile.name}</div> {/* <div id="profile-name">{props.user_data.profile.name}</div> */}
<div className = "substats" id="hp"><i className="material-icons">favorite</i>HP: {(props.user_data.stats.hp).toPrecision(3)}</div> {console.log(props)}
<div className = "substats" id="lvl"><i className="material-icons">star</i>LVL: {props.user_data.stats.lvl}</div> <div className = "substats" id="hp">HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
<div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
<div className = "substats" id="gold">GOLD: {(props.user_data.stats.gp).toPrecision(3)}</div>
</div> </div>
); );
} }

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

@ -4,13 +4,14 @@ import * as React from "react";
function HabitItem(props: any) { function HabitItem(props: any) {
return ( return (
<div className="habit-item" id={props.id}> <div className="habit-item" id={props.id}>
<button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}> <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
+{props.upCount} +{props.upCount}
</button> </button>
<p className="habit-text"><Emoji text = {props.habit_text}></Emoji></p> <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
<button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
-{props.downCount} -{props.downCount}
</button> </button>
<p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
</div> </div>
) )
} }

22
src/view/Components/Taskview/index.tsx
View file

@ -2,31 +2,39 @@ import * as React from "react";
import Dailiesview from "./Dailiesview" import Dailiesview from "./Dailiesview"
import Habitsview from "./Habitsview" import Habitsview from "./Habitsview"
import Todoview from "./Todoview" import Todoview from "./Todoview"
import Rewardview from "./Rewardview"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs"; import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
export default function Index(props: any){ export default function Index(props: any){
const display = <div className="task-view"> const display = <div className="task-view">
<Tabs> <Tabs>
<TabList> <TabList>
<Tab >
<span className="material-icons md-24">task_alt</span>
</Tab>
<Tab> <Tab>
<span className="material-icons md-24">today</span> <span className="material-icons md-24">today</span>
</Tab> </Tab>
<Tab >
<span className="material-icons md-24">add_chart</span>
</Tab>
<Tab> <Tab>
<span className="material-icons md-24">add_circle_outline</span> <span className="material-icons md-24">assignment_turned_in</span>
</Tab>
<Tab>
<span className="material-icons md-24">account_balance</span>
</Tab> </Tab>
</TabList> </TabList>
<TabPanel>
<Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel> <TabPanel>
<Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} /> <Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} />
</TabPanel> </TabPanel>
<TabPanel>
<Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel> <TabPanel>
<Todoview todos={props.data.todos} onChange={props.handleChangeTodos} /> <Todoview todos={props.data.todos} onChange={props.handleChangeTodos} />
</TabPanel> </TabPanel>
<TabPanel>
<Rewardview rewards={props.data.rewards} onChange={props.handleChangeRewards} />
</TabPanel>
</Tabs> </Tabs>
</div> </div>
return(display); return(display);

14
src/view/habiticaAPI.ts
View file

@ -40,3 +40,17 @@ export async function makeCronReq(username: string, credentials: string){
}) })
return(response) return(response)
} }
export async function costReward(username: string, credentials: string, taskID: string, direction: string) {
const url = "https://habitica.com/api/v4/tasks/".concat(taskID).concat("/score/").concat(direction)
const response = fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
"x-api-user": username,
"x-api-key": credentials,
}
})
return(response)
}

47
styles.css
View file

@ -1,3 +1,8 @@
* {
margin: 0;
padding: 0;
}
#profile-name { #profile-name {
font-size: x-large; font-size: x-large;
@ -5,7 +10,8 @@
padding-bottom: 3%; padding-bottom: 3%;
} }
.stats { .stats {
padding-bottom: 6px; display: flex;
justify-content: space-between;
} }
.todo-item { .todo-item {
@ -13,25 +19,38 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 0px 0px 0; padding: 0px 0px 0;
width: 80%; width: 100%;
border-bottom: 1px solid #cecece; border-bottom: 1px solid #cecece;
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
font-weight: normal; font-weight: normal;
font-size: 16px; font-size: 16px;
} }
.reward-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0px 0px 0;
width: 100%;
border-bottom: 1px solid #cecece;
font-family: Roboto, sans-serif;
font-weight: normal;
font-size: 16px;
}
.habit-text { .habit-text {
text-align: center !important; text-align: left !important;
padding: 0px; padding: 0px;
width: 50%; width: 80%;
margin-right: 20px; margin-right: 20px;
} }
.habit-plus { .habit-plus {
/* background-color: #fff; */ /* background-color: #fff; */
border: none; border: none;
color: white; color: black;
padding: 7px 10px; padding: 7px 5px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
@ -41,8 +60,8 @@
/* background-color: #fff; */ /* background-color: #fff; */
/* border-radius: 50%; */ /* border-radius: 50%; */
border: none; border: none;
color: white; color: black;
padding: 7px 10px; padding: 7px 5px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
font-size: 16px; font-size: 16px;
@ -70,8 +89,19 @@ input[type=checkbox]:focus {
outline: 0; outline: 0;
} }
.task-view {
overflow: scroll;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.plugin-root { .plugin-root {
min-width: 260px; min-width: 260px;
display: grid;
grid-template-rows: 93% 5% 2%;
height: inherit;
} }
.substats { .substats {
@ -144,6 +174,7 @@ input[type=checkbox]:focus {
.react-tabs__tab-panel { .react-tabs__tab-panel {
display: none; display: none;
left: 0px;
} }
.react-tabs__tab-panel--selected { .react-tabs__tab-panel--selected {