Commit to dev branch includes

- Due date on Todos
- Dailies segragation to not include non-due Dailies
- Checklist-items are now working
- Made a completely new wrapper for markdown+emojis, can render emojis in description as well as task name

package.json

@@ -36,6 +36,7 @@
   "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",

src/main.ts

@@ -7,10 +7,14 @@ interface HabiticaSyncSettings {
     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;

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;
@@ -62,6 +63,18 @@ export class HabiticaSyncSettingsTab extends PluginSettingTab {
                     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/App.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask, makeCronReq, costReward } 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> {
     private _username = "";
@@ -44,6 +45,7 @@ class App extends React.Component<any, any> {
         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);
 
     }
@@ -144,8 +146,6 @@ class App extends React.Component<any, any> {
             }
         })
     }
-
-
     handleChangeDailys(event: any) {
         this.state.tasks.dailys.forEach((element: any) => {
             if (element.id == event.target.id) {
@@ -186,6 +186,26 @@ class App extends React.Component<any, any> {
             }
         })
     }
+    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)
@@ -197,7 +217,7 @@ class App extends React.Component<any, any> {
                 {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}/>
+                <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>
             );

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

@@ -11,8 +11,8 @@ function DailyItem(props: any) {
             <div>
                 <p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
                 <div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
-                {console.log(props.checklist)}
+                {/* {console.log(props.checklist)} */}
-                <DailySubTasks subtasks={props.daily_subtasks} onChange={props.onChange}></DailySubTasks>
+                <DailySubTasks subtasks={props.daily_subtasks} onChangeChecklistItem={props.onChangeChecklistItem}></DailySubTasks>
             </div>
 
         </div>

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

@@ -8,7 +8,7 @@ function DailySubTasks(props: any) {
             let subtask_text = renderMarkdown(subtask.text);
             return (
                 <div className="subtask" id={subtask.id}>
-                    <input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
+                    <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>
             )

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

@@ -7,8 +7,24 @@ export default function Index(props: any){
         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) {
                     let daily_notes = '';
                     let daily_subtasks = '';
                     if (props.settings.showTaskDescription) {
@@ -20,18 +36,33 @@ export default function Index(props: any){
                     }
                     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}/>
+                        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} daily_notes={daily.notes} 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 display = <div id="classDisplay">
                             <Tabs>
                             <TabList>
                                 <Tab>Active</Tab>
                                 <Tab>Completed</Tab>
+                                <Tab>Not Due</Tab>
                             </TabList>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
@@ -39,6 +70,9 @@ export default function Index(props: any){
                             <TabPanel>
                                 <ul>{completedDailies}</ul>
                             </TabPanel>
+                            <TabPanel>
+                                <ul>{notDueDailies}</ul>
+                            </TabPanel>
                             </Tabs>
                         </div>
         return(display);

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

@@ -1,8 +1,10 @@
 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 (
@@ -11,7 +13,8 @@ function TodoItem(props: any) {
             <div>
                 <p><span dangerouslySetInnerHTML={{__html: text_html}}></span></p>
                 <div className="description" dangerouslySetInnerHTML={{__html: note_html}}></div>
-                <TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
+                <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

@@ -7,7 +7,7 @@ function TodoSubTasks(props: any) {
             let subtask_text = renderMarkdown(subtask.text);
             return (
                 <div className="subtask" id={subtask.id}>
-                    <input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
+                    <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>
             )

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

@@ -21,7 +21,7 @@ export default function Index(props: any){
                     }
                     return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} 
                         todo_notes={todo_notes} todo_subtasks={todo_subtasks}
-                        onChange={props.onChange} completed={todo.completed}/>
+                        onChange={props.onChange} onChangeChecklistItem={props.onChangeChecklistItem} completed={todo.completed} dueDate={todo.date} dueDateFormat={props.settings.dueDateFormat}/>
                 }
                     
         })

src/view/Components/Taskview/index.tsx

@@ -24,13 +24,13 @@ export default function Index(props: any){
                             </Tab>
                         </TabList>
                         <TabPanel>
-                            <Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} />
+                            <Dailiesview dailys={props.data.dailys} settings = {props.settings} onChange={props.handleChangeDailys} onChangeChecklistItem={props.handleChangeChecklistItem}/>
                         </TabPanel>
                         <TabPanel>
                             <Habitsview habits={props.data.habits} settings = {props.settings} onChange={props.handleChangeHabits}/>
                         </TabPanel>
                         <TabPanel>
-                        <Todoview todos={props.data.todos} settings = {props.settings} 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} />

src/view/habiticaAPI.ts

@@ -54,3 +54,17 @@ export async function costReward(username: string, credentials: string, taskID:
     })
     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)
+}

styles.css

@@ -305,3 +305,7 @@ button {
 .emoji {
   height: 1em;
 }
+.description>ul {
+  list-style-type: disc;
+  margin-left: 10% !important;
+}