COPS-CSOC-2022 · shivansh12032004 · Jun 21, 2022
diff --git a/index.html b/index.html
@@ -25,19 +25,22 @@
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <a class="navbar-brand" href="#">Todo</a>
+        <input type="text" id="search-box" placeholder="Search..." autocomplete="off">
+
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
         </button>
-
+        
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav mr-auto">
                 <li class="nav-item active">
-                    <a class="nav-link" href="/">Tasks
+                    <!-- <a class="nav-link" href="/">Tasks
                         <span class="sr-only">(current)</span>
-                    </a>
+                    </a> -->
                 </li>
             </ul>
+
             <form class="form-inline my-2 my-lg-0">
                 <ul class="navbar-nav mr-auto">
                     <li class="nav-item dropdown active">
@@ -52,7 +55,10 @@
             </form>
         </div>
     </nav>
+
     <center>
+
+
         <div class="input-group mb-3 todo-add-task">
             <input type="text" class="form-control" placeholder="Enter Task">
             <div class="input-group-append">
@@ -65,15 +71,14 @@
             </span>
 
 
-            <li class="list-group-item d-flex justify-content-between align-items-center">
+            <!-- <li class="list-group-item d-flex justify-content-between align-items-center">
                     <input id="input-button-1" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
                     <div id="done-button-1"  class="input-group-append hideme">
                         <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(1)">Done</button>
                     </div>
                     <div id="task-1" class="todo-task">
                         Sample Task 1
                     </div>
-
                     <span id="task-actions-1">
                         <button style="margin-right:5px;" type="button" onclick="editTask(1)"
                             class="btn btn-outline-warning">
@@ -86,14 +91,11 @@
                         </button>
                     </span>
             </li>
-
-
             <li class="list-group-item d-flex justify-content-between align-items-center">
                     <input id="input-button-2" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
                     <div id="done-button-2" class="input-group-append hideme">
                         <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(2)">Done</button>
                     </div>
-
                     <div id="task-2" class="todo-task">
                         Sample Task 2
                     </div>
@@ -108,12 +110,12 @@
                                 width="18px" height="22px">
                         </button>
                     </span>
-            </li>
+            </li> -->
 
 
         </ul>
     </center>
     <script type="module" src="./src/init.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/login/index.html b/login/index.html
@@ -54,4 +54,4 @@
   </div>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/register/index.html b/register/index.html
@@ -68,4 +68,4 @@
   </div>
 </body>
 
-</html>
+</html>
diff --git a/src/auth_required.js b/src/auth_required.js
@@ -1,3 +1,5 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+ if(!window.localStorage.getItem('token'))
+ window.location.href = '/login/'
diff --git a/src/init.js b/src/init.js
@@ -1,10 +1,52 @@
 import axios from 'axios';
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
 
+let searchbox=document.querySelector("#search-box");
+
 function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+    const header={
+        'Authorization': `Token ${window.localStorage.getItem('token')}`,
+        'Content-Type': "application/json"
+    }
+
+    axios({
+        url: API_BASE_URL + 'todo/',
+        method: 'get',
+        headers: header
+    }).then(function({data, status}) {
+
+        let todo =document.querySelector(".todo-available-tasks")
+        todo.innerHTML=`<span class="badge badge-primary badge-pill todo-available-tasks-text"> Available Tasks </span>`
+        for (let element of data){
+        todo.innerHTML+=
+        `   
+            <li class="list-group-item d-flex justify-content-between align-items-center">
+                    <input id="input-button-${element.id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task" value=${element.title}>
+                    <div id="done-button-${element.id}"  class="input-group-append hideme">
+                        <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(${element.id})">Done</button>
+                    </div>
+                    <div id="task-${element.id}" class="todo-task">
+                        ${element.title}
+                    </div>
+                    <span id="task-actions-${element.id}">
+                        <button style="margin-right:5px;" type="button" onclick="editTask(${element.id})"
+                            class="btn btn-outline-warning">
+                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486663/CSOC/edit.png"
+                                width="18px" height="20px">
+                        </button>
+                        <button type="button" class="btn btn-outline-danger" onclick="deleteTask(${element.id})">
+                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
+                                width="18px" height="22px">
+                        </button>
+                    </span>
+            </li>
+        `
+        }
+        searchbox.addEventListener('keyup',search)
+    })
 }
 
 axios({
@@ -17,4 +59,28 @@ axios({
   document.getElementById('avatar-image').src = 'https://ui-avatars.com/api/?name=' + data.name + '&background=fff&size=33&color=007bff';
   document.getElementById('profile-name').innerHTML = data.name;
   getTasks();
+
 })
+
+window.getTasks=getTasks
+
+
+function search(){
+    let search=document.querySelectorAll(".list-group-item")
+    let input=searchbox.value
+    if(input)
+    {
+        Array.from(search).forEach((e)=>{
+            let test=e.querySelector(".todo-task").textContent.trim()
+            if(test.search(input) == -1)
+            e.classList.add("hideme")
+            else
+            e.classList.remove("hideme")
+        })
+    }
+    else{
+        Array.from(search).forEach((e)=>{
+            e.classList.remove("hideme")
+        })
+    }
+}
diff --git a/src/main.js b/src/main.js
@@ -27,6 +27,7 @@ function logout() {
     window.location.href = '/login/';
 }
 
+
 function registerFieldsAreValid(firstName, lastName, email, username, password) {
     if (firstName === '' || lastName === '' || email === '' || username === '' || password === '') {
         displayErrorToast("Please fill all the fields correctly.");
@@ -62,48 +63,152 @@ function register() {
             data: dataForApiRequest,
         }).then(function({data, status}) {
           localStorage.setItem('token', data.token);
+          console.log(data.token);
           window.location.href = '/';
         }).catch(function(err) {
           displayErrorToast('An account using same email or username is already created');
         })
     }
 }
 
+
 function login() {
     /***
      * @todo Complete this function.
      * @todo 1. Write code for form validation.
      * @todo 2. Fetch the auth token from backend, login and direct user to home page.
-     */
+     *     */
+     const username = document.getElementById('inputUsername').value.trim();
+     const password = document.getElementById('inputPassword').value;
+
+    if (username === '' || password === '') {
+        displayErrorToast("Please fill all the fields correctly.");
+        return;
+    }
+    // displayInfoToast("Please wait...");
+     const dataForApiRequest = {
+        username: username,
+        password: password
+    }
+    axios({
+        url: API_BASE_URL + 'auth/login/',
+        method: 'post',
+        data: dataForApiRequest,
+    }).then(function({data, status}) {
+      window.localStorage.setItem("token",data.token);
+      console.log(data.token);
+      console.log(window.localStorage.getItem("token"));
+      window.location.href = '/';
+    }).catch(function(err) {
+      displayErrorToast('Invalid  Login Credentials!!');
+    })
 }
 
+
+
 function addTask() {
     /**
      * @todo Complete this function.
      * @todo 1. Send the request to add the task to the backend server.
      * @todo 2. Add the task in the dom.
      */
+    let task = document.querySelector(".form-control").value;
+    const dataForApiRequest = {
+     title: task
+    }
+    const header={
+        'Authorization': `Token ${window.localStorage.getItem('token')}`,
+        'Content-Type': "application/json"
+    }
+
+    axios({
+        url: API_BASE_URL + 'todo/create/',
+        method: 'post',
+        data: dataForApiRequest,
+        headers: header
+    }).then(function({data, status}) {
+
+        getTasks();
+        document.querySelector(".form-control").value="";
+        document.querySelector(".form-control").placeholder="Enter Task";
+        displaySuccessToast("Task Successfully Added!!")
+    })
+
 }
 
+
 function editTask(id) {
     document.getElementById('task-' + id).classList.add('hideme');
     document.getElementById('task-actions-' + id).classList.add('hideme');
     document.getElementById('input-button-' + id).classList.remove('hideme');
     document.getElementById('done-button-' + id).classList.remove('hideme');
 }
 
+
 function deleteTask(id) {
     /**
      * @todo Complete this function.
      * @todo 1. Send the request to delete the task to the backend server.
      * @todo 2. Remove the task from the dom.
      */
+    if(confirm("This task will be deleted"))
+    {
+        const header={
+            'Authorization': `Token ${window.localStorage.getItem('token')}`,
+            'Content-Type': "application/json"
+        }
+
+        axios({
+            url: API_BASE_URL + `todo/${id}/`,
+            method: 'delete',
+            headers: header
+        }).then(function({data, status}) {
+            displaySuccessToast("Task Deleted")
+            getTasks();
+        })
+    }
 }
 
+
 function updateTask(id) {
     /**
      * @todo Complete this function.
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
+    let update=document.querySelector(".todo-edit-task-input").value;
+    if(update)
+    {
+        const dataForApiRequest = {
+            title: update
+        }
+           const header={
+               'Authorization': `Token ${window.localStorage.getItem('token')}`,
+               'Content-Type': "application/json"
+           }
+
+           axios({
+               url: API_BASE_URL + `todo/${id}/`,
+               method: 'patch',
+               data: dataForApiRequest,
+               headers: header
+           }).then(function({data, status}) {
+
+               getTasks();
+               document.querySelector(".form-control").value="";
+               document.querySelector(".form-control").placeholder="Enter Task";
+               displaySuccessToast("Task Updated")
+           })
+    }
+    else
+    displayErrorToast('Task cannot be empty')
 }
+
+
+window.logout=logout
+window.updateTask=updateTask
+window.deleteTask=deleteTask
+window.editTask=editTask
+window.addTask=addTask;
+window.login=login;
+window.register=register;
diff --git a/src/no_auth_required.js b/src/no_auth_required.js
@@ -1,3 +1,5 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
+ */
+ if(window.localStorage.getItem('token'))
+ window.location.href = '/'
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,4 +54,4 @@ @@
       </div>
     </body>
-    </html>
+    </html>