Merge pull request #37 from Ferrhat/main

Update packages

.gitignore

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

README.md

@@ -1,24 +1,46 @@
 # Habitica Sync in Obsidian
 This plugin for Obsidian incorporates a view to display and interact with the task management app Habitica.
 
+Please open issues for any bugs/functionality requests :)
+
 ## Usage
-The plugin's view is enabled by clicking on the "Open Habitica Pane" option in the side ribbon. To sync your account, go to the settings page of the plugin and enter your user ID and API token credentials.
+The plugin's view is enabled by clicking on the "Open Habitica Pane" option in the side ribbon (default hotkey is `Ctrl+Shift+H`). 
+
+To sync your Habitica account, go to the settings page of the plugin and enter your user ID and API token credentials.
 ## Features
-- View current HP and XP
+### Pane View
-- View todos, dailies, and habits
+#### View stats (HP, XP, coins)
-- Check off tasks/dailies in the view, which sync to habitica website
+#### Views
-- Modify habit counters (+/-)
+Task Information:
-## Settings
+- Title, description, subtasks
+  - Markdown and emoji support
+
+Tabs:
+- To Do's
+	- Active/Completed
+- Dailies
+	- Due/Not Due/Completed
+	- [![Image from Gyazo](https://i.gyazo.com/1966b17f954dcffa954922570e860a06.png)](https://gyazo.com/1966b17f954dcffa954922570e860a06)
+- Habits
+	- [![Image from Gyazo](https://i.gyazo.com/280494e620fc91548838d5b29a62652b.png)](https://gyazo.com/280494e620fc91548838d5b29a62652b)
+- Rewards
+#### Interactivity
+- Check off tasks/dailies in the view
+	- Can uncheck completed habits/todos
+	- [![Image from Gyazo](https://i.gyazo.com/efb858cd9d54f9d9df936da1bd5858ed.gif)](https://gyazo.com/efb858cd9d54f9d9df936da1bd5858ed)
+- modify habit counters (+/-)
+
+### Settings
+
+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
-The following two inputs help fetch your user data to be displayed in the Obsidian view.
+- **Show Subtasks:** Toggles whether subtasks for to do's/dailies will be shown or not
 
 ## Roadmap
-We will be implementing additional features including:
-- Add/delete/customize tasks and habits
-- View/claim rewards 
 
-Feeling generous? 
+*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' />
+

manifest.json

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

package.json

@@ -1,36 +1,51 @@
 {
   "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",
+    "dev": "rollup --config rollup.config.mjs -w",
-    "build": "rollup --config rollup.config.js --environment BUILD:production"
+    "build": "rollup --config rollup.config.mjs --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-commonjs": "^25.0.7",
-    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-typescript": "^8.2.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/node": "^14.14.37",
+    "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^17.0.27",
+    "@types/markdown-it": "^13.0.7",
-    "@types/react-dom": "^17.0.9",
+    "@types/markdown-it-emoji": "^2.0.4",
-    "@types/react-tabs": "^2.3.3",
+    "@types/node": "^20.11.0",
-    "css-loader": "^6.4.0",
+    "@types/node-emoji": "^1.8.2",
-    "extract-text-webpack-plugin": "^2.1.2",
+    "@types/react": "^18.2.47",
-    "obsidian": "^0.12.0",
+    "@types/react-dom": "^18.2.18",
-    "rollup": "^2.32.1",
+    "@types/react-tabs": "^5.0.4",
-    "style-loader": "^3.3.0",
+    "@types/twemoji": "^13.1.1",
-    "tslib": "^2.2.0",
+    "css-loader": "^6.9.0",
-    "typescript": "^4.2.4"
+    "mini-css-extract-plugin": "^2.7.7",
+    "obsidian": "^1.4.11",
+    "obsidian-plugin-cli": "^0.0.5",
+    "rollup": "^4.9.4",
+    "style-loader": "^3.3.4",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "webpack": "^5.89.0"
   },
   "dependencies": {
-    "node": "^16.10.0",
+    "markdown-it": "^14.0.0",
-    "node-fetch": "^3.0.0",
+    "markdown-it-emoji": "^2.0.2",
-    "react": "^17.0.2",
+    "moment": "^2.30.1",
-    "react-dom": "^17.0.2",
+    "node": "^21.2.0",
-    "react-tabs": "^3.2.2"
+    "node-emoji": "^2.1.3",
+    "node-fetch": "^3.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-emoji-render": "^2.0.1",
+    "react-markdown": "^9.0.1",
+    "react-tabs": "^6.0.2",
+    "twemoji": "^14.0.2"
   }
 }

rollup.config.mjs

@@ -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(),
   ]
 };

src/main.ts

@@ -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();
 

src/settings.ts

@@ -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();
+                })
+        );
+        
     }
 }

src/view.tsx

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

src/view/App.tsx

@@ -1,18 +1,31 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask } 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";
 
-let username = ""
+class App extends React.Component<any, any> {
-let credentials = ""
+    private _username = "";
-
+    public get username() {
-class App extends React.Component<any,any> {
+        return this._username;
+    }
+    public set username(value) {
+        this._username = value;
+    }
+    private _credentials = "";
+    public get credentials() {
+        return this._credentials;
+    }
+    public set credentials(value) {
+        this._credentials = value;
+    }
     constructor(props: any) {
         super(props)
-        username = this.props.plugin.settings.userID
+        this.username = this.props.plugin.settings.userID
-        credentials = this.props.plugin.settings.apiToken
+        this.credentials = this.props.plugin.settings.apiToken
         this.state = {
+            needCron: false,
             isLoaded: false,
             user_data: {
                 profile: {
@@ -21,118 +34,191 @@ class App extends React.Component<any,any> {
                 stats: {
                     hp: 0,
                     lvl: 0,
-                }
+                    gold: 0,
+                },
+                lastCron: "",
             },
             todos: [],
             dailys: [],
             habits: [],
         }
-        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.handleChangeChecklistItem = this.handleChangeChecklistItem.bind(this);
+        this.runCron = this.runCron.bind(this);
 
     }
-    sendNotice(message: string){
+    CheckCron(lastCron: string) {
-        new Notice(message)
+        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 id="cronButton" onClick={this.runCron}>Continue</button>
+                </div>
+            );
+        }
+        else {
+            return null
+        };
+    }
+    async runCron() {
+        console.log("running cron");
+        try {
+            let response = await makeCronReq(this.username, this.credentials);
+            this.setState({
+                needCron: false,
+            })
+        } catch (error) {
+            console.log(error);
+            new Notice("There was an error running the cron. Please try again later.");
+        }
+        this.reloadData();
     }
     async reloadData() {
-        const result = (await getStats(username, credentials)).json()
+        try {
-        result.then(
+            let response = await getStats(this.username, this.credentials);
-            result => {
+            let result = await response.json();
-                    if(result.success === false){
+            if (result.success === false) {
-                        this.sendNotice("Login Failed, Please check credentials and try again!")
+                new Notice('Login Failed, Please check credentials and try again!');
-                    } else {
+            }
+            else {
                 this.setState({
                     isLoaded: true,
                     user_data: result,
                     tasks: result.tasks,
-                        })
+                });
             }
-                },
+        } catch (e) {
-                (error) => {
+            console.log(e);
-                    this.setState({
+            new Notice("API Error: Please check credentials")
-                        isLoaded: true,
-                        error
-                })
         }
-        )
     }
     componentDidMount() {
         this.reloadData()
     }
 
-    async sendScore(id:string , score: string, message: string){
+    async sendScore(id: string, score: string, message: string) {
-        const result = (await scoreTask(username, credentials, id, score)).json()
+        try {
-        result.then(
+            let response = await scoreTask(this.username, this.credentials, id, score);
-            result => {
+            let result = await response.json();
-                if(result.success) {
+            if (result.success === true) {
-                    this.sendNotice(message)
+                new Notice(message);
-                    this.reloadData()
+                this.reloadData();
             } else {
-                    this.sendNotice("Resyncing, please try again")
+                new Notice("Resyncing, please try again");
-                    this.reloadData()
+                this.reloadData();
             }
-            },
+        } catch (e) {
-            (error) => {
+            console.log(e);
-                this.sendNotice("API Error: Please Check crendentials and try again")
+            new Notice("API Error: Please check credentials")
-                console.log(error)
         }
-        )
     }
 
-    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) => {
-            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 {
-                    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) => {
-            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 {
-                        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)
-        if(event.target.id.slice(0,4) == "plus"){
+        if (event.target.id.slice(0, 4) == "plus") {
             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 {
             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) {
+        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", "Redeemed!")
+                }
+            }
+        })
+    }
+    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(){
+    render() {
-        if(this.state.error)
+        let content = this.CheckCron(this.state.user_data.lastCron);
-            return(<div className="loading">Loading....</div>)
+        if (this.state.error)
-        else if(!this.state.isLoaded)
+            return (<div className="loading">Loading....</div>)
+        else if (!this.state.isLoaded)
             return <div className="loading">Loading....</div>
         else {
             return (<div className="plugin-root">
+                {content}
+                <Statsview className ="stats-view" user_data={this.state.user_data} />
                 <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} settings = {this.props.plugin.settings} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards} handleChangeChecklistItem={this.handleChangeChecklistItem}/>
-                <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits}/>
+                
             </div>
             );
         }

src/view/Components/Statsview/index.tsx

@@ -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 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="hp">HP: {numberWithCommas((props.user_data.stats.hp).toFixed(0))}</div>
-            <div className = "substats" id="lvl"><i className="material-icons">star</i>LVL: {props.user_data.stats.lvl}</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, ",");
+}

src/view/Components/Taskview/Dailiesview/DailyItem.tsx

@@ -1,10 +1,20 @@
- import * as React from "react";
+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}/>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
-            <p>{props.daily_text}</p>
+            <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>
     )
 }

src/view/Components/Taskview/Dailiesview/DailySubTasks.tsx

@@ -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

src/view/Components/Taskview/Dailiesview/index.tsx

@@ -3,23 +3,89 @@ 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)
+                if (!daily.completed&&daily.isDue) {
-                    return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={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 completedDailies = props.dailys.map((daily: any) => {
-            if(daily.completed)
+            // if(daily.completed)
-                return <DailyItem key={daily.id} id={daily.id}daily_text={daily.text} onChange={props.onChange} completed={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 allDailies = 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}/>
+            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>
+                                <Tab>All</Tab>
                             </TabList>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
@@ -27,10 +93,15 @@ export default function Index(props: any){
                             <TabPanel>
                                 <ul>{completedDailies}</ul>
                             </TabPanel>
+                            <TabPanel>
+                                <ul>{notDueDailies}</ul>
+                            </TabPanel>
+                            <TabPanel>
+                                <ul>{allDailies}</ul>
+                            </TabPanel>
                             </Tabs>
                         </div>
         return(display);
     }
         
 }
-

src/view/Components/Taskview/Habitsview/HabitItem.tsx

@@ -1,16 +1,24 @@
- import * as React from "react";
+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">{props.habit_text}</p>
+                <button className="habit-button" id={"mins" + props.id} onClick={props.onChange}>
-            <button className="habit-minus" 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>
     )
 }
 

src/view/Components/Taskview/Habitsview/index.tsx

@@ -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>

src/view/Components/Taskview/Rewardview/RewardItem.tsx

@@ -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

src/view/Components/Taskview/Rewardview/index.tsx

@@ -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);
+    }
+}
+

src/view/Components/Taskview/TodoItem.tsx

@@ -1,12 +0,0 @@
- 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}/>
-            <p>{props.todo_text}</p>
-        </div>
-    )
-}
-
-export default TodoItem

src/view/Components/Taskview/Todoview/TodoItem.tsx

@@ -1,10 +1,21 @@
- import * as React from "react";
+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>{props.todo_text}</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>
     )
 }

src/view/Components/Taskview/Todoview/TodoSubTasks.tsx

@@ -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

src/view/Components/Taskview/Todoview/index.tsx

@@ -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>
@@ -22,10 +36,10 @@ export default function Index(props: any){
                                 <Tab>Completed</Tab>
                             </TabList>
                             <TabPanel>
-                                <ul>{incompleteTodos}</ul>
+                                <ul className="todolist-indent">{incompleteTodos}</ul>
                             </TabPanel>
                             <TabPanel>
-                                <ul>{completedTodos}</ul>
+                                <ul className="todolist-indent">{completedTodos}</ul>
                             </TabPanel>
                             </Tabs>
                         </div>

src/view/Components/Taskview/Todoview/tabs.ts

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

src/view/Components/Taskview/index.tsx

@@ -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
+}                 
 

src/view/Components/Taskview/markdownRender.ts

@@ -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);
+}

src/view/habiticaAPI.ts

@@ -6,7 +6,7 @@ export async function getStats(username: string, credentials: string){
         method: 'GET',
         headers: {
             "Content-Type": "application/json",
-            "x-client": username.concat("-testAPI"),
+            "x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
             "x-api-user": username,
             "x-api-key": credentials,
         },
@@ -20,7 +20,48 @@ export async function scoreTask(username: string, credentials: string, taskID: s
         method: 'POST',
         headers: {
             "Content-Type": "application/json",
-            "x-client": username.concat("-testAPI"),
+            "x-client": "278e719e-5f9c-43b1-9dba-8b73343dc062-HabiticaSync",
+            "x-api-user": username,
+            "x-api-key": credentials,
+        }
+    })
+    return(response)
+}
+export async function makeCronReq(username: string, credentials: string){
+    const url = "https://habitica.com/api/v3/cron";
+    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 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,
         }

styles.css

@@ -1,3 +1,9 @@
+@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');
+
+.add-task-input {
+  display: flex;
+}
 
 #profile-name {
   font-size: x-large;
@@ -5,79 +11,149 @@
   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;
+    display: grid;
-  justify-content: flex-start;
+    grid-template-columns: 1fr 30fr 1fr 1fr;
-  align-items: center;
+    justify-content: left;
-  padding: 0px 0px 0;
+    align-items: flex-start;
-  width: 80%;
+    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;
+    padding-left: 0;
+}
+
+.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;
+  text-align: left !important;
-  padding: 0px;
+  font-weight: bold;
-  width: 80px;
+  padding-top: 5px;
+  width: 80%;
   margin-right: 20px;
 }
 
-.habit-plus {
+.habit-button {
-  /* background-color: #fff; */
+  background-color: var(--interactive-accent);
   border: none;
-  color: white;
+  /* color: black; */
-  padding: 7px 10px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
+  display: block;
+  width: 100%;
+  color: var(--text-on-accent);
 }
-
+/* habit-button on hover css selector */
-.habit-minus {
+.habit-button:hover {
-  /* background-color: #fff; */
+  color: var(--text-on-accent);
-  /* border-radius: 50%; */
+  background-color: var(--interactive-accent-hover);
-  border: none;
-  color: white;
-  padding: 7px 10px;
-  text-align: center;
-  text-decoration: none;
-  font-size: 16px;
 }
 
 .habit-item {
   display: flex;
-  /* justify-content: center; */
+  grid-template-columns: 60px 1fr;
-  align-content: space-between;
-  align-items: center;
-  padding: 0px 0px 0;
   width: 100%;
+  gap: 5px;
   border-bottom: 1px solid #cecece;
-  font-family: Roboto, sans-serif;
+  font-family: Open Sans, sans-serif;
-  font-weight: 50%;
+  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 +170,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,8 +220,104 @@ 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 {
   display: block;
 }
+ul li:not(.task-list-item)::before {
+  content: "•";
+  color: transparent;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1em;
+  padding: 0;
+  font-weight: bold;
+  text-shadow: 0 0 0.5em transparent;
+}
+
+.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;
+  justify-content: center;
+  text-align: center;;
+  margin-top: 5px;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-bottom: 10px;
+  border-radius: 10px;
+}
+#cronMessage {
+  margin: 20px;
+  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;
+}

tsconfig.json

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