Merge pull request #17 from kkzzhizhou/main

Show task notes and add rewards panel. UI Overhaul. Credit to @kkzzhizhou!
2021-11-21 11:43:37 +05:30 · 2021-11-21 11:43:37 +05:30 · 8deee0ecc6
commit 8deee0ecc6
parent 86dc33e57c e45182547f
19 changed files with 240 additions and 93 deletions
--- a/.gitignore
+++ b/.gitignore
@ -6,6 +6,9 @@
 node_modules
 package-lock.json

+# yarn
+yarn.lock
+

 *.js.map

--- a/.hotreload
+++ b/.hotreload
--- a/package.json
+++ b/package.json
@ -5,7 +5,8 @@
  "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",
@ -21,6 +22,7 @@
    "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",
@ -32,6 +34,7 @@
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-emoji-render": "^1.2.4",
+    "react-markdown": "^7.1.0",
    "react-tabs": "^3.2.2"
  }
 }
--- a/src/main.ts
+++ b/src/main.ts
@ -15,6 +15,7 @@ export default class HabiticaSync extends Plugin {
    view: HabiticaSyncView;

    async onload() {
+        console.log("load plugin: habitica-sync")
        await this.loadSettings();
        this.addSettingTab(new HabiticaSyncSettingsTab(this.app, this));
        this.registerView(
@ -32,6 +33,8 @@ export default class HabiticaSync extends Plugin {
                this.activateView();
            }
        });
+        this.activateView();
+        
    }
    async loadSettings() {
        this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData())
@ -39,9 +42,10 @@ export default class HabiticaSync extends Plugin {
    async saveSettings() {
        await this.saveData(this.settings);
    }
-    async onunload() {
-        await this.view.onClose();

+    async onunload() {
+        // await this.view.onClose();
+    
        this.app.workspace
            .getLeavesOfType(VIEW_TYPE)
            .forEach((leaf) => leaf.detach());
--- a/src/view.tsx
+++ b/src/view.tsx
@ -31,8 +31,7 @@ export class HabiticaSyncView extends ItemView {
           this.containerEl.children[1]
        )
    }
-
-    async onClose(){
+    async onClose(){      
        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
    }
 }
--- a/src/view/App.tsx
+++ b/src/view/App.tsx
@ -1,10 +1,10 @@
 import * as React from "react";
 import { Notice } from "obsidian";
-import { getStats, scoreTask, makeCronReq } from "./habiticaAPI"
+import { getStats, scoreTask, makeCronReq, costReward } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"

-class App extends React.Component<any,any> {
+class App extends React.Component<any, any> {
    private _username = "";
    public get username() {
        return this._username;
@ -43,6 +43,7 @@ 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.runCron = this.runCron.bind(this);

    }
@ -50,15 +51,17 @@ class App extends React.Component<any,any> {
        let cronDate = new Date(lastCron);
        let now = new Date();
        if (cronDate.getDate() != now.getDate() || (cronDate.getMonth() != now.getMonth() || cronDate.getFullYear() != now.getFullYear())) {
-            return(
-                <div className="cron">
-                    <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
-                    <button onClick={this.runCron}>Continue</button>
-                </div>
-            );
+            // return (
+            //     <div className="cron">
+            //         <div id="cronMessage"> Welcome back! Please check your tasks for the last day and hit continue to get your daily rewards. </div>
+            //         <button onClick={this.runCron}>Continue</button>
+            //     </div>
+            // );
+            return (
+                <div className="cron"></div>
+            )
        }
        else {
-            console.log("Cron is up to date");
            return null
        };
    }
@ -74,103 +77,131 @@ class App extends React.Component<any,any> {
            new Notice("There was an error running the cron. Please try again later.");
        }
        this.reloadData();
-    }    
+    }
    async reloadData() {
        try {
-			let response = await getStats(this.username, this.credentials);
-			let result = await response.json();
-			if (result.success === false) {
-				new Notice('Login Failed, Please check credentials and try again!');
-			}
-			else {
-                console.log(result);
-				this.setState({
-					isLoaded: true,
-					user_data: result,
-					tasks: result.tasks,
-				});
-			}
-		} catch (e) {
+            let response = await getStats(this.username, this.credentials);
+            let result = await response.json();
+            if (result.success === false) {
+                new Notice('Login Failed, Please check credentials and try again!');
+            }
+            else {
+                this.setState({
+                    isLoaded: true,
+                    user_data: result,
+                    tasks: result.tasks,
+                });
+            }
+        } catch (e) {
            console.log(e);
            new Notice("API Error: Please check credentials")
-		}
+        }
    }
    componentDidMount() {
        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){
+            let response = await scoreTask(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) {
+        } catch (e) {
            console.log(e);
            new Notice("API Error: Please check credentials")
-		}
+        }
    }

-    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.completed){
-                    this.sendScore(event.target.id,"up", "Checked!")
+            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!")
+                    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.completed){
-                        this.sendScore(event.target.id,"up", "Checked!")
+            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!")
+                        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){
-                    this.sendScore(target_id,"up", "Plus!")
+                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 :(")
+                if (element.id == target_id) {
+                    this.sendScore(target_id, "down", "Minus :(")
                }
            })
        }
    }
-
-    render(){
+    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!")
+                }
+            }
+        })
+    }
+    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}/>
+                <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards}/>
                {content}
-                </div>
+                <div></div>
+                <Statsview user_data={this.state.user_data} />
+            </div>
            );
        }
    }
--- a/src/view/Components/Statsview/index.tsx
+++ b/src/view/Components/Statsview/index.tsx
@ -3,9 +3,11 @@ 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> */}
+            {console.log(props)}
+            <div className = "substats" id="hp">HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            <div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="gold">GOLD: {(props.user_data.stats.gp).toPrecision(3)}</div>
        </div>
    );
 }
--- a/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
+++ b/src/view/Components/Taskview/Dailiesview/DailyItem.tsx
@ -1,11 +1,16 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";

 function DailyItem(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><Emoji text={props.daily_text}></Emoji></p>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed} />
+            <div>
+                <p><Emoji text={props.daily_text}></Emoji></p>
+                <ReactMarkdown children={props.daily_notes} />
+            </div>
+
        </div>
    )
 }
--- a/src/view/Components/Taskview/Dailiesview/index.tsx
+++ b/src/view/Components/Taskview/Dailiesview/index.tsx
@ -9,11 +9,11 @@ export default function Index(props: any){
    else {
        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}/>
+                    return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
        })
        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}/>
+                return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
        })
        const display = <div id="classDisplay">
                            <Tabs>
--- a/src/view/Components/Taskview/Habitsview/HabitItem.tsx
+++ b/src/view/Components/Taskview/Habitsview/HabitItem.tsx
@ -1,16 +1,20 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";

 function HabitItem(props: any) {
    return (
        <div className="habit-item" id={props.id}>
-            <button className="habit-plus" id={"plus"+props.id} onClick={props.onChange}>
+            <button className="habit-plus" id={"plus" + props.id} onClick={props.onChange}>
                +{props.upCount}
            </button>
-            <p className="habit-text"><Emoji text = {props.habit_text}></Emoji></p>
-            <button className="habit-minus" id={"mins"+props.id} onClick={props.onChange}>
+            <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
                -{props.downCount}
            </button>
+            <div>
+                <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+                <ReactMarkdown children={props.habit_notes} />
+            </div>
        </div>
    )
 }
--- a/src/view/Components/Taskview/Habitsview/index.tsx
+++ b/src/view/Components/Taskview/Habitsview/index.tsx
@ -9,7 +9,7 @@ export default function Index(props: any){
    }
    else {
        const allHabits = props.habits.map((habit: any) => {
-            return <HabitItem key={habit.id} id={habit.id} habit_text={habit.text} upCount={habit.counterUp} downCount={habit.counterDown} onChange={props.onChange}/>
+            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}/>
        })
        const display = <div id="classDisplay">
                            <ul>{allHabits}</ul>
--- a/src/view/Components/Taskview/Rewardview/RewardItem.tsx
+++ b/src/view/Components/Taskview/Rewardview/RewardItem.tsx
@ -0,0 +1,17 @@
+import Emoji from "react-emoji-render";
+import * as React from "react";
+import ReactMarkdown from "react-markdown";
+function RewardItem(props: any) {
+    return (
+        <div className="reward-item" id={props.id}>
+            <button className="reward-click" id={props.id} onClick={props.onChange}>-{props.reward_value}</button>
+            <div>
+            <p className="reward-text"><Emoji text={props.reward_text}></Emoji></p>
+            <ReactMarkdown children={props.reward_notes} />
+            </div>
+            
+        </div>
+    )
+}
+
+export default RewardItem
--- a/src/view/Components/Taskview/Rewardview/index.tsx
+++ b/src/view/Components/Taskview/Rewardview/index.tsx
@ -0,0 +1,21 @@
+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) => {
+            return <RewardItem key={reward.id} id={reward.id} reward_text={reward.text} reward_notes={reward.notes} reward_value={reward.value} onChange={props.onChange}/>
+        })
+        const display = <div id="classDisplay">
+                            <ul>{allRewards}</ul>
+                        </div>
+
+        return(display);
+    }
+}
+
--- a/src/view/Components/Taskview/TodoItem.tsx
+++ b/src/view/Components/Taskview/TodoItem.tsx
@ -5,7 +5,7 @@ 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>
+            <Emoji text = {props.todo_text}></Emoji><Emoji text = {props.todo_text}></Emoji>
        </div>
    )
 }
--- a/src/view/Components/Taskview/Todoview/TodoItem.tsx
+++ b/src/view/Components/Taskview/Todoview/TodoItem.tsx
@ -1,11 +1,16 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
+import ReactMarkdown from "react-markdown";

 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><Emoji text ={props.todo_text}></Emoji></p>
+            {/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
+            <div>
+                <p><Emoji text={props.todo_text}></Emoji></p>
+                <ReactMarkdown children={props.todo_notes} />
+            </div>
        </div>
    )
 }
--- a/src/view/Components/Taskview/Todoview/index.tsx
+++ b/src/view/Components/Taskview/Todoview/index.tsx
@ -9,11 +9,11 @@ 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}/>
+                    return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} todo_notes={todo.notes} onChange={props.onChange} completed={todo.completed}/>
        })
        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>
--- a/src/view/Components/Taskview/index.tsx
+++ b/src/view/Components/Taskview/index.tsx
@ -2,31 +2,39 @@ 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}/>
-                        </TabPanel>
                        <TabPanel>
                            <Dailiesview dailys={props.data.dailys} onChange={props.handleChangeDailys} />
                        </TabPanel>
+                        <TabPanel>
+                            <Habitsview habits={props.data.habits} onChange={props.handleChangeHabits}/>
+                        </TabPanel>
                        <TabPanel>
                        <Todoview todos={props.data.todos} onChange={props.handleChangeTodos} />
                        </TabPanel>
+                        <TabPanel>
+                        <Rewardview rewards={props.data.rewards} onChange={props.handleChangeRewards} />
+                        </TabPanel>
                    </Tabs>
                </div>
    return(display);
--- a/src/view/habiticaAPI.ts
+++ b/src/view/habiticaAPI.ts
@ -39,4 +39,18 @@ 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)
+}
--- a/styles.css
+++ b/styles.css
@ -1,3 +1,8 @@
+* {
+  /* margin: 0; */
+  padding: 0;
+}
+

 #profile-name {
  font-size: x-large;
@ -5,7 +10,8 @@
  padding-bottom: 3%;
 }
 .stats {
-  padding-bottom: 6px;
+  display: flex;
+  justify-content: space-between;
 }

 .todo-item {
@ -13,25 +19,38 @@
  justify-content: flex-start;
  align-items: center;
  padding: 0px 0px 0;
-  width: 80%;
+  width: 100%;
  border-bottom: 1px solid #cecece;
  font-family: Roboto, sans-serif;
  font-weight: normal;
  font-size: 16px;
 }

+.reward-item {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 0px 0px 0;
+  width: 100%;
+  border-bottom: 1px solid #cecece;
+  font-family: Roboto, sans-serif;
+  font-weight: normal;
+  font-size: 16px;
+}
+
+
 .habit-text {
-  text-align: center !important;
+  text-align: left !important;
  padding: 0px;
-  width: 50%;
+  width: 80%;
  margin-right: 20px;
 }

 .habit-plus {
  /* background-color: #fff; */
  border: none;
-  color: white;
-  padding: 7px 10px;
+  /* color: black; */
+  padding: 7px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
@ -41,8 +60,8 @@
  /* background-color: #fff; */
  /* border-radius: 50%; */
  border: none;
-  color: white;
-  padding: 7px 10px;
+  /* color: black; */
+  padding: 7px 5px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
@ -70,8 +89,19 @@ input[type=checkbox]:focus {
  outline: 0;
 }

+.task-view {
+  overflow: scroll;
+}
+
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+
 .plugin-root {
  min-width: 260px;
+  display: grid;
+  grid-template-rows: 93% 5% 2%;
+  height: inherit;
 }

 .substats {
@ -144,6 +174,7 @@ input[type=checkbox]:focus {

 .react-tabs__tab-panel {
  display: none;
+  left: 0px;
 }

 .react-tabs__tab-panel--selected {