add rewards panels and change styles

src/main.ts

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

src/view.tsx

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

src/view/App.tsx

@@ -1,6 +1,6 @@
 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"
 
@@ -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);
 
     }
@@ -114,6 +115,23 @@ class App extends React.Component<any,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) {
@@ -125,6 +143,8 @@ class App extends React.Component<any,any> {
             }
         })
     }
+
+
     handleChangeDailys(event: any) {
         this.state.tasks.dailys.forEach((element: any) => {
             if (element.id == event.target.id) {
@@ -155,7 +175,16 @@ class App extends React.Component<any,any> {
             })
         }
     }
-
+    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)
@@ -165,9 +194,10 @@ class App extends React.Component<any,any> {
         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} handleChangeRewards={this.handleChangeRewards}/>
-                <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits}/>
                 {content}
+                <div></div>
+                <Statsview user_data={this.state.user_data} />
             </div>
             );
         }

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 id="profile-name">{props.user_data.profile.name}</div> */}
-            <div className = "substats" id="hp"><i className="material-icons">favorite</i>HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            {console.log(props)}
-            <div className = "substats" id="lvl"><i className="material-icons">star</i>LVL: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="hp">HP: {(props.user_data.stats.hp).toPrecision(3)}</div>
+            <div className = "substats" id="lvl">LEVEL: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="gold">GOLD: {(props.user_data.stats.gp).toPrecision(3)}</div>
         </div>
     );
 }

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

@@ -7,10 +7,11 @@ function HabitItem(props: any) {
             <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}>
                 -{props.downCount}
             </button>
+            <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
+
         </div>
     )
 }

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_circle_outline</span>
+                                <span className="material-icons md-24">add_chart</span>
+                            </Tab>
+                            <Tab>
+                                <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);

src/view/habiticaAPI.ts

@@ -40,3 +40,17 @@ 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)
+}

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;
+  color: black;
-  padding: 7px 10px;
+  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;
+  color: black;
-  padding: 7px 10px;
+  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 {