ALL TASKS DONE

auth_required.js

@@ -1,3 +1,6 @@
-/***
- * @todo Redirect the user to login page if token is not present.
- */
+if (localStorage.getItem('token') == undefined) {
+    window.location.href = '/login';
+}
+//else{
+  //console.log(localStorage.getItem('token'));
+//}

index.html

@@ -55,12 +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="add_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="mainlist">
+          <span class="badge badge-primary badge-pill todo-available-tasks-text">
+        Available Tasks
+          </span>
+        </ul>
+        <!--<ul class="list-group todo-available-tasks">
             <span class="badge badge-primary badge-pill todo-available-tasks-text">
                 Available Tasks
             </span>
@@ -112,9 +117,9 @@
             </li>
 
 
-        </ul>
+        </ul>-->
     </center>
     <script src="init.js"></script>
 </body>
 
-</html>
+</html>

init.js

@@ -1,9 +1,45 @@
+function tasktmplt(id,tasktle){
+
+return `<li class="list-group-item d-flex justify-content-between align-items-center" id="item-${id}">
+        <input id="input-button-${id}" type="text" class="form-control todo-edit-task-input hideme" placeholder="Edit The Task" value="${tasktle}">
+        <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">${tasktle}</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>`;
+  }
 function getTasks() {
-    /***
-     * @todo Fetch the tasks created by the user and display them in the dom.
-     */
-}
+    let ul = document.getElementById('mainlist');
+    const authhead = {Authorization: 'Token '+localStorage.getItem('token')} ;
+    $.ajax({
+        headers: authhead,
+        url: API_BASE_URL + 'todo/',
+        method: 'GET',
+        success: function(data,xhr,status){
+            tasks=data;
+            for (const a in tasks){
+                if(document.getElementById('item-'+tasks[a].id)==null){
+                  ul.innerHTML+= tasktmplt(tasks[a].id,tasks[a].title);
+              }
+            }
+          },
+        error: function(xhr,status,err){
+            displayErrorToast("Some Error Occured while Fetching tasks");
+        }
+    })
 
+}
 $.ajax({
     headers: {
         Authorization: 'Token ' + localStorage.getItem('token'),

login/index.html

@@ -55,4 +55,4 @@
   </div>
 </body>
 
-</html>
+</html>

main.js

@@ -71,19 +71,56 @@ 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.
-     */
+    const user = document.getElementById('inputUsername').value.trim();
+    const pass = document.getElementById('inputPassword').value;
+    displayInfoToast("Logging In");
+    if(user==""){
+      displayErrorToast("Username is Required");
+    }
+    if(pass==""){
+      displayErrorToast("Password is Required");
+    }
+    var reqdata={username:user,password:pass};
+    $.ajax({
+      url:API_BASE_URL+'auth/login/',
+      method:'POST',
+      data:reqdata,
+      success: function(data){
+        localStorage.setItem('token',data.token);
+        window.location.href = '/';
+      },
+      error:function(xhr, status, err){
+        if (status==400) displayErrorToast('Invalid credentials');
+        else displayErrorToast('An Error Ocurred while Loading ! ');
+      }
+    })
+
 }
 
 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.
-     */
+
+    const toAdd = document.getElementById('add_task').value.trim();
+    if(toAdd==""){
+      displayErrorToast("No Task to Add");
+      return;
+    }
+    const reqdata = {title:toAdd}
+    displayInfoToast('Task being added.');
+    $.ajax({
+      headers: {Authorization: 'Token '+localStorage.getItem('token')},
+      url: API_BASE_URL + 'todo/create/',
+      method: 'POST',
+      data: reqdata,
+      success: function (data){
+        displaySuccessToast('Added Task Successfully');
+        getTasks();
+        document.getElementById('add_task').value="";
+      },
+      error: function(xhr,status,err){
+        displayErrorToast('Unable to Add the task');
+        console.log(xhr.status);
+      }
+    })
 }
 
 function editTask(id) {
@@ -92,19 +129,61 @@ function editTask(id) {
     document.getElementById('input-button-' + id).classList.remove('hideme');
     document.getElementById('done-button-' + id).classList.remove('hideme');
 }
-
+function doneEdit(id) {
+    document.getElementById('task-' + id).classList.remove('hideme');
+    document.getElementById('task-actions-' + id).classList.remove('hideme');
+    document.getElementById('input-button-' + id).classList.add('hideme');
+    document.getElementById('done-button-' + id).classList.add('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.
-     */
+    displayInfoToast('Task being deleted');
+    const reqdata =  { id: id }
+    const authhead= { Authorization: 'Token '+localStorage.getItem('token') }
+    $.ajax({
+      headers: authhead,
+      url: API_BASE_URL + 'todo/'+id+'/' ,
+      method: 'DELETE',
+      success: function(data){
+          displaySuccessToast('Deleted Task Successfully');
+          document.getElementById('item-'+id).remove();
+      },
+      error: function(xhr,status,err){
+        displayErrorToast('Unable to Delete the task');
+      }
+    })
+
+
 }
 
 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.
-     */
+    const toUp = document.getElementById('input-button-'+id ).value.trim();
+    if(toUp=="")
+    {
+      displayErrorToast('The Text is empty , Delete it instead');
+      return;
+    }
+    const authhead= {
+      Authorization: 'Token '+localStorage.getItem('token')
+     }
+     const reqdata={
+       title:toUp
+     }
+     $.ajax({
+       url: API_BASE_URL+'todo/'+id+'/',
+       method: "PATCH",
+       headers: authhead,
+       data: reqdata,
+       success: function(data){
+         doneEdit(id);
+         document.getElementById('task-'+id) = toUp;
+         displaySuccessToast('Updated Task Successfully');
+
+         //doneEdit(id);
+       },
+       error: function(xhr,status,err){
+         displayErrorToast('Unable to Update the task');
+       }
+     })
+
+
 }

no_auth_required.js

@@ -1,3 +1,3 @@
-/***
- * @todo Redirect the user to main page if token is present.
- */
+if(localStorage.getItem('token')!=undefined||localStorage.getItem('token')!=null){
+  window.location.href= '/';
+}