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

Merge pull request #24 from SuperChamp234/dev

Browse source 
Version 1.0.0 update
This commit is contained in:
Zain 2022-01-15 09:51:24 +05:30 • committed by GitHub
commit e7b4572d2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 642 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored
View file

@ -6,6 +6,9 @@
node_modules
package-lock.json
# yarn
yarn.lock
*.js.map

0
.hotreload Normal file
View file

4
README.md
View file

@ -24,6 +24,9 @@ To sync your Habitica account, go to the settings page of the plugin and enter y
The following two inputs help fetch your user data to be displayed in the Obsidian view:
- **Habitica User ID:** You can find this by clicking on the "User" icon in the top right of the Habitica webapp, "Settings", then "API"
- **Habitica Token API:** You can find this by clicking on the "User" icon in the top right of the Habitica webapp, "Settings", then "API"
- **Show Task Descriptions:** Toggles whether description/notes for tasks will be shown or not
- **Due date format:** Format in which the due date is displayed
- **Show Checklist items:** Toggles the checklist items for a task.
## Roadmap
@ -33,3 +36,4 @@ We will be implementing additional features including:
*Feel free to support us and donate!*
<a href='https://ko-fi.com/leonardandran' target='_blank'><img height='35' style='border:0px;height:46px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />

2
manifest.json
View file

@ -1,7 +1,7 @@
{
"id": "obsidian-habitica-integration",
"name": "Habitica Sync",
"version": "0.9.15",
"version": "1.0.0",
"minAppVersion": "0.9.12",
"description": "This plugin helps integrate Habitica user tasks and stats into Obsidian",
"author": "Leoh and Ran",

19
package.json
View file

@ -1,37 +1,50 @@
{
"name": "obsidian-habitica-integration",
"version": "0.12.0",
"version": "1.0.0",
"description": "This plugin allows for Habitica integration into Obsidian",
"main": "main.js",
"scripts": {
"dev": "rollup --config rollup.config.js -w",
"build": "rollup --config rollup.config.js --environment BUILD:production"
"build": "rollup --config rollup.config.js --environment BUILD:production",
"dev2": "obsidian-plugin dev src/main.ts"
},
"keywords": [],
"author": "Leonard and Ran",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "^18.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^11.2.1",
"@rollup/plugin-typescript": "^8.2.1",
"@types/markdown-it": "^12.2.3",
"@types/markdown-it-emoji": "^2.0.2",
"@types/node": "^14.14.37",
"@types/node-emoji": "^1.8.1",
"@types/react": "^17.0.27",
"@types/react-dom": "^17.0.9",
"@types/react-tabs": "^2.3.3",
"@types/twemoji": "^12.1.2",
"css-loader": "^6.4.0",
"extract-text-webpack-plugin": "^2.1.2",
"obsidian": "^0.12.0",
"obsidian-plugin-cli": "^0.4.3",
"rollup": "^2.32.1",
"style-loader": "^3.3.0",
"tslib": "^2.2.0",
"typescript": "^4.2.4"
},
"dependencies": {
"markdown-it": "^12.3.2",
"markdown-it-emoji": "^2.0.0",
"moment": "^2.29.1",
"node": "^16.10.0",
"node-emoji": "^1.11.0",
"node-fetch": "^3.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-emoji-render": "^1.2.4",
"react-tabs": "^3.2.2"
"react-markdown": "^7.1.0",
"react-tabs": "^3.2.2",
"twemoji": "^13.1.0"
}
}

2
rollup.config.js
View file

@ -1,6 +1,7 @@
import typescript from '@rollup/plugin-typescript';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
const isProd = (process.env.BUILD === 'production');
@ -26,5 +27,6 @@ export default {
typescript(),
nodeResolve({browser: true}),
commonjs(),
json(),
]
};

13
src/main.ts
View file

@ -5,23 +5,30 @@ import { HabiticaSyncView, VIEW_TYPE} from "./view"
interface HabiticaSyncSettings {
userID: string
apiToken: string
showTaskDescription: boolean
showSubTasks: boolean
dueDateFormat: string
}
const DEFAULT_SETTINGS: Partial<HabiticaSyncSettings> = {
userID: "",
apiToken: ""
apiToken: "",
showTaskDescription: true,
showSubTasks: true,
dueDateFormat: "DD-MM-YYYY"
}
export default class HabiticaSync extends Plugin {
settings: HabiticaSyncSettings;
view: HabiticaSyncView;
async onload() {
console.log("load plugin: habitica-sync")
await this.loadSettings();
this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
this.registerView(
VIEW_TYPE,
(leaf) => (new HabiticaSyncView(leaf, this))
);
this.addRibbonIcon("popup-open", "Open Habitica Pane", () => { //activate view
this.addRibbonIcon("popup-open", "Open Habitica Pane", () => {
this.activateView();
});
this.addCommand({
@ -32,6 +39,7 @@ export default class HabiticaSync extends Plugin {
this.activateView();
}
});
}
async loadSettings() {
this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
@ -39,6 +47,7 @@ export default class HabiticaSync extends Plugin {
async saveSettings() {
await this.saveData(this.settings);
}
async onunload() {
await this.view.onClose();

38
src/settings.ts
View file

@ -1,5 +1,6 @@
import HabiticaSync from "./main";
import { App, PluginSettingTab, Setting } from "obsidian";
import moment from "moment";
export class HabiticaSyncSettingsTab extends PluginSettingTab {
plugin: HabiticaSync;
@ -38,5 +39,42 @@ export class HabiticaSyncSettingsTab extends PluginSettingTab {
await this.plugin.saveSettings();
})
);
new Setting(containerEl)
.setName("Show Task Descriptions")
.setDesc("Updates require pane re-opening")
.addToggle(cb => {
cb
.setValue(this.plugin.settings.showTaskDescription)
.onChange(async (isEnable) => {
this.plugin.settings.showTaskDescription = isEnable;
await this.plugin.saveSettings();
})
});
new Setting(containerEl)
.setName("Show Sub-Tasks")
.setDesc("Updates require pane re-opening")
.addToggle(cb => {
cb
.setValue(this.plugin.settings.showSubTasks)
.onChange(async (isEnable) => {
this.plugin.settings.showSubTasks = isEnable;
await this.plugin.saveSettings();
})
});
new Setting(containerEl)
.setName("Due Date Format")
.setDesc("Update requires pane re-opening, check moment.js docs for formatting. Current Format: " + moment().format(this.plugin.settings.dueDateFormat))
.addText((text) =>
text
.setPlaceholder("DD-MM-YYYY")
.setValue(this.plugin.settings.dueDateFormat)
.onChange(async (value) => {
this.plugin.settings.dueDateFormat = value;
await this.plugin.saveSettings();
})
);
}
}

1
src/view.tsx
View file

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

153
src/view/App.tsx
View file

@ -1,10 +1,11 @@
import * as React from "react";
import { Notice } from "obsidian";
import { getStats, scoreTask, makeCronReq } from "./habiticaAPI"
import { getStats, scoreTask, makeCronReq, costReward, scoreChecklistItem } from "./habiticaAPI"
import Statsview from "./Components/Statsview"
import Taskview from "./Components/Taskview"
import ReactDOM from "react-dom";
class App extends React.Component<any,any> {
class App extends React.Component<any, any> {
private _username = "";
public get username() {
return this._username;
@ -33,6 +34,7 @@ class App extends React.Component<any,any> {
stats: {
hp: 0,
lvl: 0,
gold: 0,
},
lastCron: "",
},
@ -43,6 +45,8 @@ class App extends React.Component<any,any> {
this.handleChangeTodos = this.handleChangeTodos.bind(this);
this.handleChangeDailys = this.handleChangeDailys.bind(this);
this.handleChangeHabits = this.handleChangeHabits.bind(this);
this.handleChangeRewards = this.handleChangeRewards.bind(this);
this.handleChangeChecklistItem = this.handleChangeChecklistItem.bind(this);
this.runCron = this.runCron.bind(this);
}
@ -50,10 +54,10 @@ 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(
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 id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards.</div>
<button id="cronButton" onClick={this.runCron}>Continue</button>
</div>
);
}
@ -97,11 +101,11 @@ class App extends React.Component<any,any> {
this.reloadData()
}
async sendScore(id:string , score: string, message: string){
async sendScore(id: string, score: string, message: string) {
try {
let response = await scoreTask(this.username, this.credentials, id, score);
let result = await response.json();
if(result.success === true){
if (result.success === true) {
new Notice(message);
this.reloadData();
} else {
@ -114,60 +118,107 @@ class App extends React.Component<any,any> {
}
}
handleChangeTodos(event: any){
this.state.tasks.todos.forEach((element: any) => {
if(element.id == event.target.id){
if(!element.completed){
this.sendScore(event.target.id,"up", "Checked!")
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 {
this.sendScore(event.target.id,"down", "Un-Checked!")
new Notice("Resyncing, please try again");
this.reloadData();
}
}
})
}
handleChangeDailys(event: any){
this.state.tasks.dailys.forEach((element: any) => {
if(element.id == event.target.id){
if(element.id == event.target.id){
if(!element.completed){
this.sendScore(event.target.id,"up", "Checked!")
} else {
this.sendScore(event.target.id,"down", "Un-Checked!")
}
}
}
})
}
handleChangeHabits(event: any){
const target_id = event.target.id.slice(4)
if(event.target.id.slice(0,4) == "plus"){
this.state.tasks.habits.forEach((element: any) => {
if(element.id == target_id){
this.sendScore(target_id,"up", "Plus!")
}
})
}
else {
this.state.tasks.habits.forEach((element: any) => {
if(element.id == target_id){
this.sendScore(target_id,"down", "Minus :(")
}
})
} catch (e) {
console.log(e);
new Notice("API Error: Please check credentials")
}
}
render(){
handleChangeTodos(event: any) {
this.state.tasks.todos.forEach((element: any) => {
if (element.id == event.target.id) {
if (!element.completed) {
this.sendScore(event.target.id, "up", "Checked!")
} else {
this.sendScore(event.target.id, "down", "Un-Checked!")
}
}
})
}
handleChangeDailys(event: any) {
this.state.tasks.dailys.forEach((element: any) => {
if (element.id == event.target.id) {
if (element.id == event.target.id) {
if (!element.completed) {
this.sendScore(event.target.id, "up", "Checked!")
} else {
this.sendScore(event.target.id, "down", "Un-Checked!")
}
}
}
})
}
handleChangeHabits(event: any) {
const target_id = event.target.id.slice(4)
if (event.target.id.slice(0, 4) == "plus") {
this.state.tasks.habits.forEach((element: any) => {
if (element.id == target_id) {
this.sendScore(target_id, "up", "Plus!")
}
})
}
else {
this.state.tasks.habits.forEach((element: any) => {
if (element.id == target_id) {
this.sendScore(target_id, "down", "Minus :(")
}
})
}
}
handleChangeRewards(event: any) {
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!")
}
}
})
}
async handleChangeChecklistItem(event: any){
let parentID = event.target.parentNode.parentNode.parentNode.getAttribute("id")
let targetID = event.target.id
console.log(parentID+ " , " + targetID)
try{
let response = await scoreChecklistItem(this.username, this.credentials, targetID, parentID);
let result = await response.json();
if (result.success === true) {
new Notice("Checked!");
this.reloadData();
} else {
new Notice("Resyncing, please try again");
this.reloadData();
}
} catch (e) {
console.log(e);
new Notice("API Error: Please check credentials")
}
}
render() {
let content = this.CheckCron(this.state.user_data.lastCron);
if(this.state.error)
return(<div className="loading">Loading....</div>)
else if(!this.state.isLoaded)
if (this.state.error)
return (<div className="loading">Loading....</div>)
else if (!this.state.isLoaded)
return <div className="loading">Loading....</div>
else {
return (<div className="plugin-root">
<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}/>
{content}
<Statsview className ="stats-view" user_data={this.state.user_data} />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} settings = {this.props.plugin.settings} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} handleChangeChecklistItem={this.handleChangeChecklistItem}/>
</div>
);
}

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

@ -3,9 +3,13 @@ import * as React from 'react';
export default function Index(props: any) {
return(
<div className="stats">
<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>
<div className = "substats" id="lvl"><i className="material-icons">star</i>LVL: {props.user_data.stats.lvl}</div>
{/* <div id="profile-name">{props.user_data.profile.name}</div> */}
<div className = "substats" id="hp">HP: {numberWithCommas((props.user_data.stats.hp).toFixed(0))}</div>
<div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
<div className = "substats" id="gold">GOLD: {numberWithCommas(props.user_data.stats.gp.toFixed(2))}</div>
</div>
);
}
function numberWithCommas(x: any) {
return x.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}

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

@ -1,11 +1,20 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import DailySubTasks from "./DailySubTasks";
import renderMarkdown from "../markdownRender";
function DailyItem(props: any) {
var text_html = renderMarkdown(props.daily_text);
var note_html = renderMarkdown(props.daily_notes);
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<p><Emoji text={props.daily_text}></Emoji></p>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
<div>
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
{/* {console.log(props.checklist)} */}
<DailySubTasks key={props.daily_subtasks.id} subtasks={props.daily_subtasks} onChangeChecklistItem={props.onChangeChecklistItem}></DailySubTasks>
</div>
</div>
)
}

22
src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx Normal file
View file

@ -0,0 +1,22 @@
import * as React from "react";
import renderMarkdown from "../markdownRender";
function DailySubTasks(props: any) {
if (props.subtasks) {
const subtasks = props.subtasks.map((subtask: any) => {
let subtask_text = renderMarkdown(subtask.text);
return (
<div className="subtask" id={subtask.id} key={subtask.id} >
<input id={subtask.id} type="checkbox" className="checkbox-checklist" onChange={props.onChangeChecklistItem} checked={subtask.completed} />
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
</div>
)
});
return subtasks
}
else {
return <div></div>
}
}
export default DailySubTasks

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

@ -3,23 +3,71 @@ import DailyItem from "./DailyItem"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
export default function Index(props: any){
if(props.dailys == undefined) {
return <div id="classDisplay">No Dailies Present</div>
}
else {
const notDueDailies = props.dailys.map((daily: any) => {
if (!daily.isDue) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
daily_notes = daily.notes;
}
if (props.settings.showSubTasks) {
daily_subtasks = daily.checklist;
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const incompleteDailies = props.dailys.map((daily: any) => {
if(!daily.completed)
return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
if (!daily.completed&&daily.isDue) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
daily_notes = daily.notes;
}
if (props.settings.showSubTasks) {
daily_subtasks = daily.checklist;
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const completedDailies = props.dailys.map((daily: any) => {
if(daily.completed)
return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
// 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}/>
if (daily.completed) {
let daily_notes = '';
let daily_subtasks = '';
if (props.settings.showTaskDescription) {
daily_notes = daily.notes;
}
if (props.settings.showSubTasks) {
daily_subtasks = daily.checklist;
}
return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text}
daily_notes={daily_notes} daily_subtasks={daily_subtasks}
onChange={props.onChange} completed={daily.completed} onChangeChecklistItem={props.onChangeChecklistItem}/>
}
})
const display = <div id="classDisplay">
<Tabs>
<TabList>
<Tab>Active</Tab>
<Tab>Completed</Tab>
<Tab>Not Due</Tab>
</TabList>
<TabPanel>
<ul>{incompleteDailies}</ul>
@ -27,10 +75,12 @@ export default function Index(props: any){
<TabPanel>
<ul>{completedDailies}</ul>
</TabPanel>
<TabPanel>
<ul>{notDueDailies}</ul>
</TabPanel>
</Tabs>
</div>
return(display);
}
}

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

@ -1,17 +1,24 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import renderMarkdown from "../markdownRender";
function HabitItem(props: any) {
let habit_text = renderMarkdown(props.habit_text);
let habit_notes = renderMarkdown(props.habit_notes);
return (
<div className="habit-item" id={props.id}>
<button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
<div className="habit-button-grp">
<button className="habit-button" id={"plus" + props.id} onClick={props.onChange}>
+{props.upCount}
</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-button" id={"mins" + props.id} onClick={props.onChange}>
-{props.downCount}
</button>
</div>
<div>
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: habit_text}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: habit_notes}}></div>
</div>
</div>
)
}

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

@ -9,7 +9,11 @@ export default function Index(props: any){
}
else {
const allHabits = props.habits.map((habit: any) => {
if (props.settings.showTaskDescription) {
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}/>
} else {
return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
}
})
const display = <div id="classDisplay">
<ul>{allHabits}</ul>

21
src/view/Components/Taskview/Rewardview/RewardItem.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import renderMarkdown from "../markdownRender";
function RewardItem(props: any) {
let reward_text = renderMarkdown(props.reward_text);
let reward_notes = renderMarkdown(props.reward_notes);
return (
<div className="habit-item" id={props.id}>
<div className="habit-button-grp">
<button className="habit-button" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
</div>
<div>
<p className="habit-text"><span dangerouslySetInnerHTML={{__html: reward_text}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: reward_notes}}></div>
</div>
</div>
)
}
export default RewardItem

25
src/view/Components/Taskview/Rewardview/index.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react";
import RewardItem from "./RewardItem"
export default function Index(props: any){
if(props.rewards == undefined) {
return (<div id="classDisplay">
No Rewards present.
</div>)
}
else {
const allRewards = props.rewards.map((reward: any) => {
if (props.settings.showTaskDescription) {
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
} else {
return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_value={reward.value} onChange={props.onChange}/>
}
})
const display = <div id="classDisplay">
<ul>{allRewards}</ul>
</div>
return(display);
}
}

13
src/view/Components/Taskview/TodoItem.tsx
View file

@ -1,13 +0,0 @@
import { Emoji } from 'react-emoji-render';
import * as React from "react";
function TodoItem(props: any) {
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<Emoji text = {props.todo_text}></Emoji>
</div>
)
}
export default TodoItem

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

@ -1,11 +1,21 @@
import Emoji from "react-emoji-render";
import * as React from "react";
import TodoSubTasks from "./TodoSubTasks";
import renderMarkdown from "../markdownRender"
import moment from "moment";
function TodoItem(props: any) {
var dueDate = (props.dueDate==null)?"":("Due Date:"+(moment(props.dueDate).format(props.dueDateFormat)));
var text_html = renderMarkdown(props.todo_text);
var note_html = renderMarkdown(props.todo_notes);
return (
<div className="todo-item" id={props.id}>
<input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
<p><Emoji text ={props.todo_text}></Emoji></p>
<div>
<p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
<div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
<TodoSubTasks todoID={props.id} subtasks={props.todo_subtasks} onChange={props.onChangeChecklistItem}></TodoSubTasks>
<div className="due-date">{dueDate}</div>
</div>
</div>
)
}

21
src/view/Components/Taskview/Todoview/TodoSubTasks.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react";
import renderMarkdown from "../markdownRender";
function TodoSubTasks(props: any) {
if (props.subtasks) {
const subtasks = props.subtasks.map((subtask: any) => {
let subtask_text = renderMarkdown(subtask.text);
return (
<div className="subtask" id={subtask.id} key={subtask.id}>
<input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} id={subtask.id}/>
<p id={subtask.id}><span dangerouslySetInnerHTML={{__html: subtask_text}}></span></p>
</div>
)
});
return subtasks
}
else {
return <div></div>
}
}
export default TodoSubTasks

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

@ -8,12 +8,26 @@ export default function Index(props: any){
}
else {
const incompleteTodos = props.todos.map((todo: any) => {
if(!todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
if(!todo.completed) {
let todo_notes = '';
let todo_subtasks = '';
if (props.settings.showTaskDescription) {
todo_notes = todo.notes;
}
if (props.settings.showSubTasks) {
todo_subtasks = todo.checklist;
}
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text}
todo_notes={todo_notes} todo_subtasks={todo_subtasks}
onChange={props.onChange} onChangeChecklistItem={props.onChangeChecklistItem} completed={todo.completed} dueDate={todo.date} dueDateFormat={props.settings.dueDateFormat}/>
}
})
const completedTodos = props.todos.map((todo: any) => {
if(todo.completed)
return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} 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">
<Tabs>

1
src/view/Components/Taskview/Todoview/tabs.ts
View file

@ -1 +0,0 @@
import * as React from "react"

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

@ -2,33 +2,41 @@ import * as React from "react";
import Dailiesview from "./Dailiesview"
import Habitsview from "./Habitsview"
import Todoview from "./Todoview"
import Rewardview from "./Rewardview"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
export default function Index(props: any){
const display = <div className="task-view">
<Tabs>
<TabList>
<Tab >
<span className="material-icons md-24">task_alt</span>
</Tab>
<Tab>
<span className="material-icons md-24">today</span>
</Tab>
<Tab >
<span className="material-icons md-24">add_chart</span>
</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>
</TabList>
<TabPanel>
<Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
<Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} onChangeChecklistItem={props.handleChangeChecklistItem}/>
</TabPanel>
<TabPanel>
<Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} />
<Habitsview habits={props.data.habits} settings = {props.settings} onChange={props.handleChangeHabits}/>
</TabPanel>
<TabPanel>
<Todoview todos={props.data.todos} onChange={props.handleChangeTodos} />
<Todoview todos={props.data.todos} settings = {props.settings} onChange={props.handleChangeTodos} onChangeChecklistItem={props.handleChangeChecklistItem}/>
</TabPanel>
<TabPanel>
<Rewardview rewards={props.data.rewards} settings = {props.settings} onChange={props.handleChangeRewards} />
</TabPanel>
</Tabs>
</div>
return(display);
} //yes
}

21
src/view/Components/Taskview/markdownRender.ts Normal file
View file

@ -0,0 +1,21 @@
import MarkdownIt from "markdown-it";
import markdownitEmoji from "markdown-it-emoji"
import twemoji from "twemoji";
export default function renderMarkdown(markdown: string) {
//check if markdown is empty or not a string
if (markdown === "" || markdown === undefined) {
return "";
}
const md = new MarkdownIt({
html: true,
breaks: true,
linkify: true,
typographer: true
});
md.use(markdownitEmoji);
md.renderer.rules.emoji = function(token, idx) {
return twemoji.parse(token[idx].content);
};
return md.render(markdown);
}

28
src/view/habiticaAPI.ts
View file

@ -40,3 +40,31 @@ export async function makeCronReq(username: string, credentials: string){
})
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)
}
export async function scoreChecklistItem(username: string, credentials: string, checklistItemID: string, taskID: string) {
const url = "https://habitica.com/api/v3/tasks/".concat(taskID).concat("/checklist/").concat(checklistItemID).concat("/score")
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)
}

213
styles.css
View file

@ -1,3 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open Sans:ital,wght@0,400;1,100&family=Roboto&display=swap');
* {
padding: 0;
}
.add-task-input {
display: flex;
}
#profile-name {
font-size: x-large;
@ -5,79 +15,148 @@
padding-bottom: 3%;
}
.stats {
padding-bottom: 6px;
width: 95%;
display: flex;
justify-content: space-between;
font-weight: bold;
padding-bottom: 5px;
}
.stats-view {
border-bottom: 1px;
}
.modify-todo {
align-self: center;
}
.delete-todo {
align-self: center;
}
.todo-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0px 0px 0;
width: 80%;
display: grid;
grid-template-columns: 1fr 30fr 1fr 1fr;
justify-content: left;
align-items: flex-start;
padding-top: 5px;
padding-bottom: 5px;
width: 100%;
border-bottom: 1px solid #cecece;
font-family: Roboto, sans-serif;
font-weight: normal;
font-weight: bold;
font-size: 16px;
}
.description {
font-family: Open Sans, sans-serif;
font-weight: 100;
}
.description > ul {
list-style-type: none;
}
p {
margin: 0;
}
.habit-text {
text-align: center !important;
padding: 0px;
width: 50%;
text-align: left !important;
font-weight: bold;
padding-top: 5px;
width: 80%;
margin-right: 20px;
}
.habit-plus {
/* background-color: #fff; */
.habit-button {
background-color: var(--interactive-accent);
border: none;
color: white;
padding: 7px 10px;
/* color: black; */
text-align: center;
text-decoration: none;
font-size: 16px;
display: block;
width: 100%;
color: var(--text-on-accent);
}
.habit-minus {
/* background-color: #fff; */
/* border-radius: 50%; */
border: none;
color: white;
padding: 7px 10px;
text-align: center;
text-decoration: none;
font-size: 16px;
/* habit-button on hover css selector */
.habit-button:hover {
color: var(--text-on-accent);
background-color: var(--interactive-accent-hover);
}
.habit-item {
display: flex;
/* justify-content: center; */
align-content: space-between;
align-items: center;
padding: 0px 0px 0;
grid-template-columns: 60px 1fr;
width: 100%;
gap: 5px;
border-bottom: 1px solid #cecece;
font-family: Roboto, sans-serif;
font-weight: 50%;
font-family: Open Sans, sans-serif;
font-weight: 100%;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
}
.habit-button-grp {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: stretch;
height: 100%;
}
input[type=checkbox] {
margin-right: 10px;
margin-top: 5px;
align-self: start;
}
.todo-content {
align-self: center;
}
.submit-button {
/* padding: 5px 5px; */
font-size: 15px;
border: 1px solid #aaa;
/* white-space: nowrap; */
/* margin: 10px; */
margin: 0;
}
input[type=checkbox]:focus {
outline: 0;
}
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.plugin-root {
min-width: 260px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
#classDisplay {
height: 100%;
width: 100%;
}
.view-content {
margin-bottom: 0;
}
.substats {
font-size: medium;
}
ul {
margin: 0;
}
/* react-tabs internal file :wink: */
.material-icons {
font-size: 12px !important;
@ -94,12 +173,12 @@ input[type=checkbox]:focus {
.react-tabs {
-webkit-tap-highlight-color: transparent;
height: 100%;
}
.react-tabs__tab-list {
border-bottom: 1px solid #aaa;
margin: 0 0 10px;
margin: 0 0 5px;
padding: 0;
}
@ -144,6 +223,14 @@ input[type=checkbox]:focus {
.react-tabs__tab-panel {
display: none;
left: 0px;
height: 88%;
/* overflow: scroll; */
}
.task-panel {
overflow: scroll;
height: 100%;
}
.react-tabs__tab-panel--selected {
@ -159,9 +246,45 @@ 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 {
.task-operation {
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 {
margin: auto;
margin-bottom: 5px;
white-space: nowrap;
padding: 5px 5px;
margin-right: 0;
}
.cron {
display: inline-grid;
@ -171,7 +294,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 {
@ -179,3 +301,26 @@ body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed
margin-bottom: 10px;
color: var(--text-normal)
}
#cronButton {
margin: auto;
margin-bottom: 5px;
white-space: nowrap;
padding: 5px 5px;
background-color: var(--interactive-accent);
margin-right: auto;
}
.subtask {
display: flex;
flex-direction: row;
font-weight: normal;
font-family: Roboto, sans-serif;
justify-content: flex-start;
}
.emoji {
height: 1em;
}
.description>ul {
list-style-type: disc;
margin-left: 10% !important;
}

1
tsconfig.json
View file

@ -9,6 +9,7 @@
"noImplicitAny": true,
"moduleResolution": "node",
"importHelpers": true,
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es5",