Created task menu, started habits menu

src/view/App.tsx

@@ -3,6 +3,8 @@ import { getStats, scoreTask } from "./habiticaAPI"
 import Statsview from "./Components/Statsview"
 import Taskview from "./Components/Taskview"
 
+import { domainToASCII } from "url";
+
 let username = ""
 let credentials = ""
 
@@ -22,7 +24,9 @@ class App extends React.Component<any,any> {
                     lvl: 0,
                 }
             },
-            todos: []
+            todos: [],
+            dailys: [],
+            habits: [],
         }
         this.handleChange = this.handleChange.bind(this)
     }
@@ -43,7 +47,10 @@ class App extends React.Component<any,any> {
                         this.setState({
                             isLoaded: true,
                             user_data: result,
-                            todos: result.tasks.todos
+                            tasks: result.tasks,
+                            todos: result.tasks.todos,
+                            dailys: result.tasks.dailys,
+                            habits: result.tasks.habits
                         })
                     }
                 },
@@ -102,6 +109,93 @@ class App extends React.Component<any,any> {
                 }
             }
         })
+        this.state.todos.forEach((element: any) => {
+            if(element.id == event.target.id){
+                if(!element.completed){
+                    scoreTask(username, credentials, event.target.id, "up")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success) {
+                                    this.sendNotice("Checked!")
+                                    console.log(result)
+                                    this.reloadData()
+                                } else {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                } else {
+                    scoreTask(username, credentials, event.target.id, "down")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success){
+                                    this.sendNotice("Un-checked!")
+                                    console.log(result)
+                                    this.reloadData()
+                                } else {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                }
+            }
+        })
+        this.state.dailys.forEach((element: any) => {
+            if(element.id == event.target.id){
+                if(!element.completed){
+                    scoreTask(username, credentials, event.target.id, "up")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success) {
+                                    this.sendNotice("Checked!")
+                                    console.log(result)
+                                    this.reloadData()
+                                } else {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                } else {
+                    scoreTask(username, credentials, event.target.id, "down")
+                        .then(res => res.json())
+                        .then(
+                            result => {
+                                if(result.success){
+                                    this.sendNotice("Un-checked!")
+                                    console.log(result)
+                                    this.reloadData()
+                                } else {
+                                    this.sendNotice("Resyncing, please try again")
+                                    this.reloadData()
+                                }
+                            },
+                            (error) => {
+                                this.sendNotice("API Error: Please Check crendentials and try again")
+                                console.log(error)
+                            }
+                        )
+                }
+            }
+        })
+        
     }
 
     render(){
@@ -113,7 +207,7 @@ class App extends React.Component<any,any> {
             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 todos={this.state.todos} onChange={this.handleChange} />
+                <Taskview state={this.state.tasks} onChange={this.handleChange} />
                 </div>
             );
         }

src/view/Components/Dailiesview/DailyItem.tsx

@@ -0,0 +1,13 @@
+ import * as React from "react";
+
+function DailyItem(props: any) {
+    console.log(props);
+    return (
+        <div className="todo-item" id={props.id}>
+            <input type="checkbox" className="checkbox" id={props.id} onChange={props.onChange} checked={props.completed}/>
+            <p>{props.daily_text}</p>
+        </div>
+    )
+}
+
+export default DailyItem

src/view/Components/Dailiesview/index.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import DailyItem from "./DailyItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    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}/>
+    })
+    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}/>
+    })
+    const display = <div id="classDisplay">
+                        <Tabs>
+                        <TabList>
+                            <Tab>Active</Tab>
+                            <Tab>Completed</Tab>
+                        </TabList>
+                        <TabPanel>
+                            <ul>{incompleteDailies}</ul>
+                        </TabPanel>
+                        <TabPanel>
+                            <ul>{completedDailies}</ul>
+                        </TabPanel>
+                        </Tabs>
+                    </div>
+
+    return(display);
+}
+

src/view/Components/Dailiesview/react-tabs.css

@@ -0,0 +1,56 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}

src/view/Components/Dailiesview/tabs.ts

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

src/view/Components/Habitsview/HabitItem.tsx

@@ -0,0 +1,18 @@
+ import * as React from "react";
+
+function HabitItem(props: any) {
+    console.log(props);
+    return (
+        <div className="habit-item" id={props.id}>
+            <button className="habit-plus" onClick={() => this.handleClick()}>
+                +
+            </button>
+            <p>{props.habit_text}</p>
+            <button className="habit-minus" onClick={() => this.handleClick()}>
+                -
+            </button>
+        </div>
+    )
+}
+
+export default HabitItem

src/view/Components/Habitsview/index.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import HabitItem from "./HabitItem"
+
+export default function Index(props: any){
+    console.log("habits = " + props.habits);
+    const allHabits = props.habits.map((habit: any) => {
+        return <HabitItem key={habit.id} id={habit.id}habit_text={habit.text} onChange={props.onChange}/>
+    })
+    const display = <div id="classDisplay">
+                        <ul>{allHabits}</ul>
+                    </div>
+
+    return(display);
+}
+

src/view/Components/Habitsview/react-tabs.css

@@ -0,0 +1,56 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}

src/view/Components/Habitsview/tabs.ts

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

src/view/Components/Taskview/index.tsx

@@ -1,30 +1,36 @@
 import * as React from "react";
 import TodoItem from "./TodoItem"
+import Taskview from "../Taskview"
+import Dailiesview from "../Dailiesview"
+import Habitsview from "../Habitsview"
+import Todoview from "../Todoview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 
 export default function Index(props: any){
-    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}/>
-    })
-    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}/>
-    })
     const display = <div id="classDisplay">
-                        <Tabs>
+                    <Tabs>
-                        <TabList>
+                    <TabList>
-                            <Tab>Active Todos</Tab>
+                        <Tab>
-                            <Tab>Completed Todos</Tab>
+                            <span className="material-icons md-24">task_alt</span>
-                        </TabList>
+                        </Tab>
-                        <TabPanel>
+                        <Tab>
-                            <ul>{incompleteTodos}</ul>
+                            <span className="material-icons">today</span>
-                        </TabPanel>
+                        </Tab>
-                        <TabPanel>
+                        <Tab>
-                            <ul>{completedTodos}</ul>
+                            <span className="material-icons">add_circle_outline</span>
-                        </TabPanel>
+                        </Tab>
-                        </Tabs>
+                    </TabList>
-                    </div>
+                    <TabPanel>
-
+                        <Habitsview habits={props.state.habits} onChange={props.handleChange} />
+                    </TabPanel>
+                    <TabPanel>
+                        <Dailiesview dailys={props.state.dailys} onChange={props.handleChange} />
+                    </TabPanel>
+                    <TabPanel>
+                    <Todoview todos={props.state.todos} onChange={props.handleChange} />
+                    </TabPanel>
+                    </Tabs>
+                </div>
     return(display);
 }                
+

src/view/Components/Taskview/react-tabs.css

@@ -37,6 +37,8 @@
   outline: none;
 }
 
+.re
+
 .react-tabs__tab:focus:after {
   content: "";
   position: absolute;

src/view/Components/Todoview/TodoItem.tsx

@@ -0,0 +1,12 @@
+ 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/Todoview/index.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import TodoItem from "./TodoItem"
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+
+export default function Index(props: any){
+    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}/>
+    })
+    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}/>
+    })
+    const display = <div id="classDisplay">
+                        <Tabs>
+                        <TabList>
+                            <Tab>Active</Tab>
+                            <Tab>Completed</Tab>
+                        </TabList>
+                        <TabPanel>
+                            <ul>{incompleteTodos}</ul>
+                        </TabPanel>
+                        <TabPanel>
+                            <ul>{completedTodos}</ul>
+                        </TabPanel>
+                        </Tabs>
+                    </div>
+                    
+
+    return(display);
+}

src/view/Components/Todoview/react-tabs.css

@@ -0,0 +1,58 @@
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+.react-tabs__tab--selected {
+  background: #fff;
+  border-color: #aaa;
+  color: black;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.re
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}

src/view/Components/Todoview/tabs.ts

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

styles.css

@@ -1,3 +1,4 @@
+
 #profile-name {
   font-size: x-large;
   font-weight: bold;
@@ -6,6 +7,12 @@
 .stats {
   padding-bottom: 6px;
 }
+
+.material-icons.md-18 { font-size: 18px; }
+.material-icons.md-24 { font-size: 24px; }
+.material-icons.md-36 { font-size: 36px; }
+.material-icons.md-48 { font-size: 48px; }
+
 .todo-item {
   display: flex;
   justify-content: flex-start;
@@ -18,6 +25,40 @@
   font-size: 16px;
 }
 
+.habit-plus {
+  /* background-color: #fff; */
+  border-radius: 50%;
+  border: none;
+  color: white;
+  padding: 6px 10px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.habit-minus {
+  /* background-color: #fff; */
+  border-radius: 50%;
+  border: none;
+  color: white;
+  padding: 7px 10px;
+  text-align: center;
+  text-decoration: none;
+  font-size: 16px;
+}
+
+.habit-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px 0px 0;
+  width: 80%;
+  border-bottom: 1px solid #cecece;
+  font-family: Roboto, sans-serif;
+  font-weight: normal;
+  font-size: 16px;
+}
+
 input[type=checkbox] {
   margin-right: 10px;
 }