Implement subtasks view and settings option,

clean up CSS

src/view/App.tsx

@@ -194,9 +194,10 @@ class App extends React.Component<any, any> {
         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" />
                 <Taskview data={this.state.tasks} handleChangeTodos={this.handleChangeTodos} settings = {this.props.plugin.settings} handleChangeDailys={this.handleChangeDailys} handleChangeHabits={this.handleChangeHabits} handleChangeRewards={this.handleChangeRewards}/>
-                <Statsview user_data={this.state.user_data} />
+                
             </div>
             );
         }

src/view/Components/Statsview/index.tsx

@@ -4,7 +4,6 @@ export default function Index(props: any) {
     return(
         <div className="stats">
             {/* <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>

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

@@ -1,6 +1,7 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
+import DailySubTasks from "./DailySubTasks";
 
 function DailyItem(props: any) {
     return (
@@ -8,7 +9,9 @@ function DailyItem(props: any) {
             <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} />
+                <ReactMarkdown className="description" children={props.daily_notes} />
+                {console.log(props.checklist)}
+                <DailySubTasks subtasks={props.daily_subtasks} onChange={props.onChange}></DailySubTasks>
             </div>
 
         </div>

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

@@ -0,0 +1,20 @@
+import Emoji from "react-emoji-render";
+import * as React from "react";
+
+function DailySubTasks(props: any) {
+    if (props.subtasks) {
+        const subtasks = props.subtasks.map((subtask: any) => {
+            return (
+                <div className="subtask" id={subtask.id}>
+                    <input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
+                    <p id={subtask.id}><Emoji text={subtask.text}></Emoji></p>
+                </div>
+            )
+        });
+        return subtasks
+    }
+    else {
+        return <div></div>
+    }
+}
+export default DailySubTasks

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

@@ -8,13 +8,21 @@ export default function Index(props: any){
     }
     else {
         const incompleteDailies = props.dailys.map((daily: any) => {
-                if(!daily.completed)
+                if (!daily.completed) {
+                    let daily_notes = '';
+                    let daily_subtasks = '';
                     if (props.settings.showTaskDescription) {
-                    return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} daily_notes={daily.notes} onChange={props.onChange} completed={daily.completed}/>
-                    } else {
-                        return <DailyItem key={daily.id} id={daily.id} daily_text={daily.text} onChange={props.onChange} completed={daily.completed}/>
+                        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}/>
+                }
+            })
         const completedDailies = 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}/>

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

@@ -5,15 +5,17 @@ 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}>
-                +{props.upCount}
-            </button>
-            <button className="habit-minus" id={"mins" + props.id} onClick={props.onChange}>
-                -{props.downCount}
-            </button>
+            <div className="habit-button-grp">
+                <button className="habit-button" id={"plus" + props.id} onClick={props.onChange}>
+                    +{props.upCount}
+                </button>
+                <button className="habit-button" id={"mins" + props.id} onClick={props.onChange}>
+                    -{props.downCount}
+                </button>
+            </div>
             <div>
                 <p className="habit-text"><Emoji text={props.habit_text}></Emoji></p>
-                <ReactMarkdown children={props.habit_notes} />
+                <ReactMarkdown className="description" children={props.habit_notes} />
             </div>
         </div>
     )

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

@@ -3,11 +3,13 @@ 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 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="reward-text"><Emoji text={props.reward_text}></Emoji></p>
-            <ReactMarkdown children={props.reward_notes} />
+            <p className="habit-text"><Emoji text={props.reward_text}></Emoji></p>
+            <ReactMarkdown className="description" children={props.reward_notes} />
             </div>
             
         </div>

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

@@ -1,6 +1,7 @@
 import Emoji from "react-emoji-render";
 import * as React from "react";
 import ReactMarkdown from "react-markdown";
+import TodoSubTasks from "./TodoSubTasks";
 
 function TodoItem(props: any) {
     return (
@@ -9,7 +10,8 @@ function TodoItem(props: any) {
             {/* <p><Emoji text ={props.todo_text}></Emoji></p> */}
             <div>
                 <p><Emoji text={props.todo_text}></Emoji></p>
-                <ReactMarkdown children={props.todo_notes} />
+                <ReactMarkdown className="description" children={props.todo_notes} />
+                <TodoSubTasks subtasks={props.todo_subtasks} onChange={props.onChange}></TodoSubTasks>
             </div>
         </div>
     )

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

@@ -0,0 +1,20 @@
+import Emoji from "react-emoji-render";
+import * as React from "react";
+
+function TodoSubTasks(props: any) {
+    if (props.subtasks) {
+        const subtasks = props.subtasks.map((subtask: any) => {
+            return (
+                <div className="subtask" id={subtask.id}>
+                    <input type="checkbox" className="checkbox" onChange={props.onChange} checked={subtask.completed} />
+                    <p id={subtask.id}><Emoji text={subtask.text}></Emoji></p>
+                </div>
+            )
+        });
+        return subtasks
+    }
+    else {
+        return <div></div>
+    }
+}
+export default TodoSubTasks

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

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