add task function

src/view/Components/Statsview/index.tsx

@@ -7,9 +7,9 @@ export default function Index(props: any) {
         <div className="stats">
             {/* <div id="profile-name">{props.user_data.profile.name}</div> */}
             {console.log(props)}
-            <div className = "substats" id="hp">{t('HP')}: {(props.user_data.stats.hp).toPrecision(3)}</div>
-            <div className = "substats" id="lvl">{t('LEVEL')}: {props.user_data.stats.lvl}</div>
-            <div className = "substats" id="gold">{t('GOLD')}: {(props.user_data.stats.gp).toPrecision(3)}</div>
+            <div className = "substats" id="hp"><i className="material-icons">favorite</i>{t('HP')}: {(props.user_data.stats.hp).toPrecision(2)}</div>
+            <div className = "substats" id="lvl"><i className="material-icons">star</i>{t('LEVEL')}: {props.user_data.stats.lvl}</div>
+            <div className = "substats" id="gold"><i className="material-icons">credit_card</i>{t('GOLD')}: {(props.user_data.stats.gp).toPrecision(2)}</div>
         </div>
     );
 }

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

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { useForm } from "react-hook-form";
-import { Trans,useTranslation } from 'react-i18next'
-
-export default function Index(props: any) {
-
-    const display = <div id="addDisplay">
-                        <form>
-                            <label><Trans>type</Trans>
-                                <select>
-                                <option value="Daily">Daily</option>
-                                <option value="Habit">Habit</option>
-                                <option value="Todo">Todo</option>
-                                <option value="Reward">Reward</option>
-                                </select>
-                            </label>               
-                            <label><Trans>title</Trans>
-                                <input type="text" />
-                            </label>
-                            <label><Trans>notes</Trans>
-                                <input type="text" />
-                            </label>
-                        </form>
-                    </div>
-
-    return (display);
-}

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

@@ -2,6 +2,12 @@ import * as React from "react";
 import DailyItem from "./DailyItem"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useTranslation, Trans, Translation } from 'react-i18next'
+import { useForm, SubmitHandler } from "react-hook-form";
+import { addDaily } from "src/view/habiticaAPI";
+
+type Inputs = {
+    title: string
+};
 
 export default function Index(props: any){
     if(props.dailys == undefined) {
@@ -16,17 +22,21 @@ export default function Index(props: 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}/>
         })
+        const { register, handleSubmit, watch, formState: { errors } } = useForm<Inputs>();
+        const onSubmit: SubmitHandler<Inputs> = data => {
+            addDaily(this.props.plugin.settings.userID,this.props.plugin.settings.apiToken,data.title)
+        }
+        
         const display = <div id="classDisplay">
                             <Tabs>
                             <TabList>
                                 <Tab><Trans>Active</Trans></Tab>
                                 <Tab><Trans>Completed</Trans></Tab>
                             </TabList>
-                            <div className="add-task-input">
-                                <input type="text">
-                                </input>
-                                <button className="submit-button"><Trans>submit</Trans></button>
-                            </div>
+                            <form className="add-task-input" onSubmit={handleSubmit(onSubmit)}>
+                                <input type="text" defaultValue="" {...register("title")}></input>
+                                <button className="submit-button" type="submit"><Trans>submit</Trans></button>
+                            </form>
                             <TabPanel>
                                 <ul>{incompleteDailies}</ul>
                             </TabPanel>

src/view/Components/Taskview/index.tsx

@@ -3,7 +3,6 @@ import Dailiesview from "./Dailiesview"
 import Habitsview from "./Habitsview"
 import Todoview from "./Todoview"
 import Rewardview from "./Rewardview"
-import Addview from "./Addview"
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useTranslation, Trans, Translation } from 'react-i18next'
 

src/view/habiticaAPI.ts

@@ -54,3 +54,19 @@ export async function costReward(username: string, credentials: string, taskID:
     })
     return(response)
 }
+
+
+export async function addDaily(username: string, credentials: string, title: string) {
+    const url = "https://habitica.com/api/v4/tasks/user".concat(title)
+    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,
+        },
+        body: JSON.stringify({type: "daliy", text: title})
+    })
+    return(response)
+}

styles.css

@@ -16,6 +16,14 @@
   justify-content: space-between;
 }
 
+.modify-todo {
+  align-self: center;
+}
+
+.delete-todo {
+  align-self: center;
+}
+
 .todo-item {
     display: grid;
     grid-template-columns: 1fr 30fr 1fr 1fr;
@@ -31,6 +39,7 @@
 
 p {
     margin: 0;
+    padding: 5px;
 }
 
 .reward-item {
@@ -105,6 +114,7 @@ input[type=checkbox] {
     padding: 5px 15px;
     font-size: 15px;
     border: 1px solid #aaa;
+    white-space: nowrap;
 }
 
 input[type=checkbox]:focus {
@@ -216,7 +226,9 @@ ul li:not(.task-list-item)::before {
 body > div.app-container.is-left-sidedock-collapsed.is-right-sidedock-collapsed > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div.workspace-tabs > div.workspace-leaf > div > div.view-content > div > div.cron > button {
   margin: auto;
   margin-bottom: 5px;
-  white-space: nowrap
+  white-space: nowrap;
+  padding: 5px 5px;
+  margin-right: 0;
 }
 .cron {
   display: inline-grid;