COPS-IITBHU · dasari810 · Apr 28, 2020 · May 17, 2020
diff --git a/auth_required.js b/auth_required.js
@@ -1,3 +1,4 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+if(localStorage.getItem('token')==null)
+{
+	window.location.href='/login/';
+}
diff --git a/index.html b/index.html
@@ -40,7 +40,7 @@
                 </li>
             </ul>
             <form class="form-inline my-2 my-lg-0">
-                <ul class="navbar-nav mr-auto">
+                <ul claNamess="navbar-nav mr-auto">
                     <li class="nav-item dropdown active">
                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -55,66 +55,17 @@
     </nav>
     <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="takeinput">
             <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">
-            <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>
+        <ul class="list-group todo-available-tasks" id="inserthere">  
 
 
         </ul>
     </center>
     <script src="init.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/init.js b/init.js
@@ -1,7 +1,19 @@
 function getTasks() {
-    /***
-     * @todo Fetch the tasks created by the user and display them in the dom.
-     */
+    $.ajax({
+    headers:{Authorization:"Token "+localStorage.getItem('token'),},
+    url: API_BASE_URL + 'todo/',
+    method : 'GET',
+    success : function(data,status,xhr){
+         document.querySelector('#inserthere').innerHTML='<span class="badge badge-primary badge-pill todo-available-tasks-text">Available Tasks</span>';
+        let x ='<li class="list-group-item d-flex justify-content-between align-items-center"><input id="input-button-%id%" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task"><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">%title%</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>';
+        data.forEach(element => {
+                let y =x.replace(/%id%/g,element.id);
+                 y = y.replace('%title%',element.title);
+        document.querySelector('#inserthere').insertAdjacentHTML('beforeend',y);        
+      });
+    }
+ })
+
 }
 
 $.ajax({
@@ -13,6 +25,7 @@ $.ajax({
     success: function(data, status, xhr) {
         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;
+        displayInfoToast("welcome back "+data.name+"!");
         getTasks();
     }
 })
diff --git a/main.js b/main.js
@@ -61,6 +61,8 @@ function register() {
             data: dataForApiRequest,
             success: function(data, status, xhr) {
                 localStorage.setItem('token', data.token);
+                console.log(data.token);
+                displayInfoToast("Please wait...");
                 window.location.href = '/';
             },
             error: function(xhr, status, err) {
@@ -71,40 +73,125 @@ function register() {
 }
 
 function login() {
-    /***
-     * @todo Complete this function.
-     * @todo 1. Write code for form validation.
-     * @todo 2. Fetch the auth token from backend and login the user.
-     */
+
+    displayInfoToast("login with your registered username and password ");
+    displayInfoToast("New User? then Register yourself to start  !");
+
+    const username = document.getElementById("inputUsername").value.trim();
+    const password = document.getElementById("inputPassword").value;
+
+    if(username == "" || password ==""){
+        displayErrorToast("invalid username/password!");
+        return;
+    }
+
+     const dataForApiRequest={
+        username : username,
+        password : password
+     }
+
+     $.ajax({
+        url : API_BASE_URL + 'auth/login/',
+        method : 'POST',
+        data : dataForApiRequest,
+        success : function(data, status, xhr) {
+            localStorage.setItem('token',data.token);
+            console.log(data.token);
+            displayInfoToast("Please wait...");
+            window.location.href = '/';
+        },
+         error: function(xhr,status,err){
+                displayErrorToast("Please Enter a Valid username/password");
+                displayInfoToast("New User? then Register yourself to start  !");
+        }
+     })
 }
 
 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.
-     */
+
+   text=document.getElementById("takeinput").value.trim();
+   if(text==""){
+    displayInfoToast("Opps ! You Haven't Entered the Task ! ");
+    return ;
+   }
+   console.log(text)
+
+   const dataForApiRequest={
+    title : text,
+   }
+   $.ajax({
+    headers:{Authorization:"Token "+localStorage.token,},
+     url: API_BASE_URL + 'todo/create/',
+     method: 'POST',
+     data: dataForApiRequest,
+     success : function(data,status,xhr){
+        displaySuccessToast("Task Added Succesfully!");
+        getTasks();
+     },
+     error: function(xhr,status,err){
+         if(xhr.status==0)
+            displayErrorToast("Internet Connection Lost");
+        else if(xhr.status==500)
+            displayErrorToast("Problem from server end! Please try later");
+     }
+
+   })
+   document.getElementById("takeinput").value = '';
 }
 
 function editTask(id) {
+    document.getElementById("input-button-"+id).value = document.getElementById('task-' + id).innerText;
     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.
-     */
+   $.ajax({
+    headers:{Authorization:"Token "+localStorage.getItem('token'),},
+    url : API_BASE_URL+'todo/' + id + '/',
+    method : 'DELETE',
+    success : function(data,status,xhr){
+        displaySuccessToast("Task deleted!");
+        getTasks();
+     },
+     error: function(xhr,status,err){
+         if(xhr.status==0)
+            displayErrorToast("Inter Connection Lost");
+        else if(xhr.status==500)
+            displayErrorToast("Problem from server end! Please try later");
+     },
+
+   })
 }
 
 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 x = document.getElementById("input-button-"+id).value;
+    if(x==""){
+     displayInfoToast("Opps ! You Haven't Entered the Task ! ");
+     return ;
+ }
+      const dataForApiRequest={
+        id : id,
+        title: x,
+   }
+   $.ajax({
+    headers:{Authorization:"Token "+localStorage.getItem('token'),},
+    url: API_BASE_URL+'todo/' + id + '/',
+    method : 'PATCH',
+    data : dataForApiRequest,
+    success : function(data,status,xhr){
+        displaySuccessToast("Task Updated!");
+        getTasks();
+     },
+     error: function(xhr,status,err){
+         if(xhr.status==0)
+            displayErrorToast("Inter Connection Lost");
+        else if(xhr.status==500)
+            displayErrorToast("Problem from server end! Please try later");
+     },
+
+   })
 }
diff --git a/no_auth_required.js b/no_auth_required.js
@@ -1,3 +1,4 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
+if(localStorage.getItem('token')!=null)
+{
+	window.location.href="/";
+}