COPS-CSOC-2022 · Nandinisaagar · Jun 22, 2022
diff --git a/index.html b/index.html
@@ -20,6 +20,7 @@
             display: none !important;
         }
     </style>
+    <style> .hideme { display: none !important; } </style>
 </head>
 
 <body>
@@ -46,6 +47,7 @@
                             <img src="#" class="rounded-circle" id="avatar-image"><span class="todo-profile-name" id="profile-name">Loading ...</span></a>
                         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                             <a class="dropdown-item" href="#" onclick="logout()">Logout</a>
+                            <a class="dropdown-item" href="#" id="logoutButton">Logout</a>
                         </div>
                     </li>
                 </ul>
@@ -55,8 +57,16 @@
     <center>
         <div class="input-group mb-3 todo-add-task">
             <input type="text" class="form-control" placeholder="Enter Task">
+            <input type="text" class="form-control" placeholder="Enter Task" id="inputTask">
             <div class="input-group-append">
                 <button type="button" class="btn btn-outline-success" onclick="addTask()">Add Task</button>
+                <button type="button" class="btn btn-outline-success" id="addTaskButton" style="width:115px">Add Task</button>
+            </div>
+        </div>
+        <div class="input-group mb-3 todo-search-task">
+            <input type="text" class="form-control" placeholder="Search Task" id="searchTask">
+            <div class="input-group-append">
+                <button type="button" class="btn btn-outline-success" id="searchTaskButton" style="width:115px">Search Task</button>
             </div>
         </div>
         <ul class="list-group todo-available-tasks">
@@ -110,6 +120,8 @@
                     </span>
             </li>
 
+            <span class="badge badge-primary badge-pill todo-available-tasks-text">Available Tasks</span>
+            <div id="tasksList"></div>
 
         </ul>
     </center>

diff --git a/login/index.html b/login/index.html
@@ -50,7 +50,7 @@
       <label>Password</label>
       <input type="Password" class="form-control" id="inputPassword">
     </div>
-    <button class="btn btn-outline-success my-2 my-sm-0" onclick="login()" type="submit">Log In</button>
+    <button class="btn btn-outline-success my-2 my-sm-0" id="loginButton" type="submit">Log In</button>
   </div>
 </body>
 

diff --git a/register/index.html b/register/index.html
@@ -64,7 +64,7 @@
       <label for="inputAddress2">Password</label>
       <input type="Password" class="form-control" id="inputPassword">
     </div>
-    <button class="btn btn-outline-success my-2 my-sm-0" onclick="register()" type="submit">Register</button>
+  <button class="btn btn-outline-success my-2 my-sm-0" id="register" type="submit">Register</button>
   </div>
 </body>
 

diff --git a/src/auth_required.js b/src/auth_required.js
@@ -1,3 +1,6 @@
 /***
  * @todo Redirect the user to login page if token is not present.
  */
+ if(localStorage.token == undefined) {
+    window.location.href = '/login/';
+} 
diff --git a/src/init.js b/src/init.js
@@ -1,10 +1,53 @@
 import axios from 'axios';
+import {updateTask, deleteTask, editTask} from './main';
+window.deleteTask = deleteTask;
+window.updateTask = updateTask;
+window.editTask = editTask;
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
 
 function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+     export function getTasks() {
+
+        const headersForApiRequest = {
+           Authorization: 'Token ' + localStorage.getItem('token')
+       }
+
+       axios({
+           headers: headersForApiRequest,
+           url: API_BASE_URL + "todo/",
+         })
+           .then(function({data, status}) {
+           document.getElementById('tasksList').innerHTML = "";
+           for(let i=0; i<data.length; i++) {
+
+               let content = `
+               <li class="list-group-item d-flex justify-content-between align-items-center" class="taskElement" id="taskElement-${data[i].id}">
+               <input id="input-button-${data[i].id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task">
+               <div id="done-button-${data[i].id}"  class="input-group-append hideme">
+               <button class="btn btn-outline-secondary todo-update-task" type="button" id="updateTaskButton${data[i].id}" onclick="updateTask(${data[i].id})">Done</button>
+               </div>
+               <div id="task-${data[i].id}" class="todo-task">
+               ${data[i].title}
+               </div>
+               <span id="task-actions-${data[i].id}">
+               <button style="margin-right:5px;" type="button" id="editTaskButton${data[i].id}" class="btn btn-outline-warning" onclick="editTask(${data[i].id})">
+                   <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" id="deleteTaskButton${data[i].id}" onclick="deleteTask(${data[i].id})">
+                <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg" width="18px" height="22px">
+            </button>
+            </span>
+            </li>
+            `
+            document.getElementById('tasksList').innerHTML += content;
+        }
+        })
+        .catch((err) => {
+            displayErrorToast("Error!")
+        });
 }
 
 axios({

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,19 @@
 import axios from 'axios';
+import { getTasks } from './init';
+const logoutBtn = document.getElementById("logout")
+const registerBtn = document.getElementById("register")
+const loginBtn = document.getElementById("login")
+const addTaskBtn = document.getElementById("addTaskButton");
+const searchTaskBtn = document.getElementById("searchTaskBtn");
+
+
+window.onload = ()=>{
+    if (logoutBtn) logoutBtn.onclick = logout
+    if (loginBtn) loginBtn.onclick = login
+    if (registerBtn) registerBtn.onclick = register
+    if (addTaskBtn) addTaskButton.onclick = addTask;
+    if (searchTaskBtn) searchTaskBtn.onclick = searchTask;
+}
 function displaySuccessToast(message) {
     iziToast.success({
         title: 'Success',
@@ -75,6 +90,31 @@ function login() {
      * @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 required fields.");
+         return;
+     }
+     displayInfoToast("Loading");
+     const dataForApiRequest = {
+         username: username,
+         password: password
+     }
+     axios({
+         url: API_BASE_URL + 'auth/login/',
+         method: 'POST',
+         data: dataForApiRequest,
+     }).then(function ({ data, status }) {
+         displaySuccessToast("Logged in successfully");
+         localStorage.setItem('token', data.token);
+         window.location.href = '/';
+     }).catch(function (err) {
+         displayErrorToast("Invalid credentials");
+         document.getElementById('inputUsername').value = '';
+         document.getElementById('inputPassword').value = '';
+     })
 }
 
 function addTask() {
@@ -83,9 +123,36 @@ function addTask() {
      * @todo 1. Send the request to add the task to the backend server.
      * @todo 2. Add the task in the dom.
      */
+     const enteredTask = document.getElementById('inputTask').value.trim();
+
+     if (enteredTask == '') {
+         displayErrorToast("Invalid Task Title : Empty");
+         return;
+     }
+
+     displayInfoToast("Adding Task");
+
+     const headersForApiRequest = {
+         Authorization: 'Token ' + localStorage.getItem('token')
+     }
+
+     axios({
+         headers: headersForApiRequest,
+         url: API_BASE_URL + 'todo/create/',
+         method: 'POST',
+         data: {
+         title: enteredTask,
+         },
+     }).then(({ data, status }) => {
+         displaySuccessToast("Task added successfully");
+         document.getElementById('inputTask').value = '';
+         getTasks();
+     }).catch((err) => {
+         displayErrorToast("Failed to add task");
+     })
 }
 
-function editTask(id) {
+export 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');
@@ -98,6 +165,23 @@ function deleteTask(id) {
      * @todo 1. Send the request to delete the task to the backend server.
      * @todo 2. Remove the task from the dom.
      */
+     export function deleteTask(id) {
+        displayInfoToast("Deleting Task");
+
+          const headersForApiRequest = {
+              Authorization: 'Token ' + localStorage.getItem('token')
+          }
+
+          axios({
+              headers: headersForApiRequest,
+              url: API_BASE_URL + 'todo/' + id + '/',
+              method: 'DELETE',
+          }).then(function ({ data, status }) {
+              displaySuccessToast("Task deleted successfully");
+              getTasks();
+          }).catch(function (err) {
+              displayErrorToast("Failed to delete task.Try again later");
+          })
 }
 
 function updateTask(id) {
@@ -106,4 +190,64 @@ function updateTask(id) {
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
-}
+     export function updateTask(id) {
+        const newTask = document.getElementById("input-button-" + id).value.trim();
+        const task = document.getElementById("task-" + id);
+
+        if (newTask==""){
+            displayErrorToast("Invalid Task Title : Empty");
+            return;
+        }
+
+        const dataForApiRequest = {
+            title: newTask
+        }
+        const headersForApiRequest = {
+            Authorization: 'Token ' + localStorage.getItem('token')
+        }
+
+        axios({
+            headers: headersForApiRequest,
+            url: API_BASE_URL + 'todo/' + id + '/',
+            method: 'PUT',
+            data: dataForApiRequest,
+        }).then(function ({ data, status }) {
+            task.textContent=data.title;
+            editTask(data.id);
+            displaySuccessToast("Task updated successfully");
+            getTasks();
+        }).catch(function (err) {
+            displayErrorToast("Failed to update task. Try again later");
+        })
+    }
+
+    function searchTask(){
+        const taskforSearch = document.getElementById('searchTask').value.trim();
+
+        if (taskforSearch == '') {
+            displayErrorToast("Invalid Task Title : Empty");
+            return;
+        }
+
+        displayInfoToast("Searching");
+
+        const headersForApiRequest = {
+            Authorization: 'Token ' + localStorage.getItem('token')
+        }
+
+        axios({
+            headers: headersForApiRequest,
+            url: API_BASE_URL + 'todo/',
+            method: 'GET',
+        }).then(function ({ data, status }) {
+            console.log(data);
+            for (var j = 0; j < data.length; j++) if (data[j].title == taskforSearch){
+                displaySuccessToast("Task found");
+
+
+
+                return;
+            }
+            displayErrorToast("Specified task does not exist")
+        })
+    }
diff --git a/src/no_auth_required.js b/src/no_auth_required.js
@@ -1,3 +1,6 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
+ */
+ if (localStorage.token) {
+    window.location.href = '/';
+}
diff --git a/style.css b/style.css
@@ -6,7 +6,9 @@
     margin-top:90px;
     max-width:400px;
 }
-
+.todo-search-task {
+    max-width:400px;
+}
 .todo-available-tasks {
     margin-bottom:30px;
     max-width:400px;