COPS-IITBHU · subodhk01 · Apr 26, 2020 · Apr 26, 2020 · Apr 29, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 # Todo Application - CSoC Dev Task 1
 
+[![Netlify Status](https://api.netlify.com/api/v1/badges/5e95359e-c76e-4d86-93a6-3b7ccb5f523a/deploy-status)](https://app.netlify.com/sites/condescending-varahamihira-7c50fd/deploys)
+
 ## Introduction
 In this task you will be working on a todo application made using basic HTML, CSS and JS. The main motive of this task is to make you familiar with:
 - Rest APIs

diff --git a/auth_required.js b/auth_required.js
@@ -1,3 +1,8 @@
 /***
  * @todo Redirect the user to login page if token is not present.
- */
+ */
+token = localStorage.token;
+console.log(token);
+if(token == undefined){
+    window.location.href = '/login';
+}
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
         rel="stylesheet">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/popper.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
     <meta charset=utf-8>
@@ -55,63 +55,21 @@
     </nav>
     <center>
         <div class="input-group mb-3 todo-add-task">
-            <input type="text" class="form-control" placeholder="Enter Task">
+            <input id="newTask" type="text" class="form-control" placeholder="Enter Task">
             <div class="input-group-append">
                 <button type="button" class="btn btn-outline-success" onclick="addTask()">Add Task</button>
             </div>
         </div>
-        <ul class="list-group todo-available-tasks">
+        <ul class="list-group todo-available-tasks" id="taskList">
             <span class="badge badge-primary badge-pill todo-available-tasks-text">
                 Available Tasks
             </span>
-
-
-            <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">
-                            <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(1)">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
-                                width="18px" height="22px">
-                        </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>
-                    <span id="task-actions-2">
-                        <button style="margin-right:5px;" type="button" onclick="editTask(2)"
-                            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(2)">
-                            <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
-                                width="18px" height="22px">
-                        </button>
-                    </span>
-            </li>
-
-
+            <div id="loadingButton">
+                <button class="btn btn-info" type="button" disabled>
+                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                    Loading...
+                </button>
+            </div>
         </ul>
     </center>
     <script src="init.js"></script>

diff --git a/init.js b/init.js
@@ -1,7 +1,57 @@
+function appendTask(id,name){
+    ul = $('#taskList');
+    template = `
+    <li class="list-group-item d-flex justify-content-between align-items-center" id="li-` + id + `">
+        <input id="input-button-`+id+ `" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task" value="` + name + `">
+        <div id="done-button-`+id+`"  class="input-group-append hideme">
+            <button class="btn btn-outline-secondary todo-update-task" type="button" onclick="updateTask(`+id+`)">Done</button>
+        </div>
+        <div id="task-`+id+`" class="todo-task">
+        `+name+`
+        </div>
+
+        <span id="task-actions-`+id+`">
+            <button style="margin-right:5px;" type="button" onclick="editTask(`+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(`+id+`)">
+                <img src="https://res.cloudinary.com/nishantwrp/image/upload/v1587486661/CSOC/delete.svg"
+                    width="18px" height="22px">
+            </button>
+        </span>
+    </li>
+    `
+    $(template).appendTo(ul).hide().fadeIn();
+}
+
 function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+    ul = $('#taskList');
+    $.ajax({
+        headers: {
+            Authorization: 'Token ' + localStorage.getItem('token'),
+        },
+        url: API_BASE_URL + 'todo/',
+        method: 'GET',
+        success: function(data, status, xhr) {
+            tasks = data;
+            $('#loadingButton').hide();
+            tasks.forEach((element,i) => {
+                setTimeout(
+                    function(){
+                        appendTask(element.id, element.title);
+                    }
+                , i * 300);
+            });
+        },
+        error: function(data){
+            displayErrorToast("Unable to fetch Tasks, please try again.");
+        }
+    })
 }
 
 $.ajax({

diff --git a/login/index.html b/login/index.html
@@ -49,7 +49,7 @@
     </div>
     <div class="form-group">
       <label>Password</label>
-      <input type="Password" class="form-control" id="inputPassword">
+      <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>
   </div>

diff --git a/main.js b/main.js
@@ -76,21 +76,83 @@ function login() {
      * @todo 1. Write code for form validation.
      * @todo 2. Fetch the auth token from backend and login the user.
      */
+    const username = document.getElementById('inputUsername').value.trim();
+    const password = document.getElementById('inputPassword').value;
+
+    if( username === "" || password === "" ){
+        displayErrorToast("Enter both username and password");
+        return;
+    } else {
+        displayInfoToast("Please wait...");
+        const dataForApiRequest = {
+            username: username,
+            password: password,
+        }
+        $.ajax({
+            url: API_BASE_URL + "auth/login/",
+            method: 'POST',
+            data: dataForApiRequest,
+            success: function(data){
+                localStorage.token = data['token'];
+                displaySuccessToast("Login Successfull")
+                setTimeout(function(){window.location.href = '/';} , 400)
+            },
+            error: function(data){
+                displayErrorToast("Login Failed, invalid 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.
-     */
+    task = document.getElementById('newTask').value;
+    if(task === ""){
+        displayErrorToast("No task to add.");
+        return;
+    } else {
+        const authHeader = {
+            Authorization: "Token " + localStorage.token
+        }
+        const dataForApiRequest = {
+            title:task
+        }
+        $.ajax({
+            url: API_BASE_URL + "todo/create/",
+            method: 'POST',
+            headers: authHeader,
+            data: dataForApiRequest,
+            success: function(data){
+                document.getElementById('newTask').value = "";
+                displaySuccessToast("Task succesfully added.");
+            },
+            error: function(data){
+                displayErrorToast("Unable to add task.");
+            }
+        })
+        $.ajax({
+            headers: {
+                Authorization: 'Token ' + localStorage.getItem('token'),
+            },
+            url: API_BASE_URL + 'todo/',
+            method: 'GET',
+            success: function(data, status, xhr) {
+                appendTask(data[data.length - 1].id, data[data.length - 1].title);
+            },
+            error: function(data){
+                setTimeout(function(){
+                    displayErrorToast("Unable to fetch data, reloading page....");
+                }, 300);
+                window.location.href = "/";
+            }
+        })
+    }
 }
 
 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');
+    document.getElementById('task-' + id).classList.toggle('hideme');
+    document.getElementById('task-actions-' + id).classList.toggle('hideme');
+    document.getElementById('input-button-' + id).classList.toggle('hideme');
+    document.getElementById('done-button-' + id).classList.toggle('hideme');
 }
 
 function deleteTask(id) {
@@ -99,6 +161,21 @@ function deleteTask(id) {
      * @todo 1. Send the request to delete the task to the backend server.
      * @todo 2. Remove the task from the dom.
      */
+    const authHeader = {
+        Authorization: "Token " + localStorage.token
+    }
+    $.ajax({
+        url: API_BASE_URL + "todo/" + id + "/",
+        method: "DELETE",
+        headers: authHeader,
+        success: function(data){
+            document.getElementById("li-"+id).remove();
+            displaySuccessToast("Task succesfully Deleted.");
+        },
+        error: function(data){
+            displayErrorToast("Unable to delete task, please try again.");
+        }
+    })
 }
 
 function updateTask(id) {
@@ -107,4 +184,25 @@ function updateTask(id) {
      * @todo 1. Send the request to update the task to the backend server.
      * @todo 2. Update the task in the dom.
      */
+    var new_title = document.getElementById("input-button-" + id).value;
+    const authHeader = {
+        Authorization: "Token " + localStorage.token
+    }
+    const dataForApiRequest = {
+        title:new_title
+    }
+    $.ajax({
+        url: API_BASE_URL + "todo/" + id + "/",
+        method: "PATCH",
+        headers: authHeader,
+        data: dataForApiRequest,
+        success: function(data){
+            displaySuccessToast("Task succesfully updated.");
+            document.getElementById('task-'+id).innerHTML = new_title;
+            editTask(id);
+        },
+        error: function(data){
+            displayErrorToast("Unable to update task, please try again.");
+        }
+    })
 }
diff --git a/no_auth_required.js b/no_auth_required.js
@@ -1,3 +1,8 @@
 /***
  * @todo Redirect the user to main page if token is present.
- */
+ */
+token = localStorage.token;
+console.log(token);
+if(token != undefined){
+    window.location.href = '/';
+}
diff --git a/style.css b/style.css
@@ -14,11 +14,10 @@
 
 .todo-available-tasks-text {
     margin-left:30%;
-    padding-bottom:5px;
-    padding-top:5px;
+    padding: 13px 0px;
     margin-bottom:20px;
     max-width:170px;
-    font-size:15px;
+    font-size:16px;
 }
 
 .todo-edit-task-input {