CSOC Week 2

index.html

@@ -45,7 +45,7 @@
                             data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             <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>
@@ -54,61 +54,24 @@
     </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="new-task">            
             <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">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-warning" id="searchTaskBtn">Search</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>
-
+
+            <span class="badge badge-primary badge-pill todo-available-tasks-text">Available Tasks</span>
+            <div id="tasksList"></div>
 
-            <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>

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="loginBtn" type="submit">Log In</button>
   </div>
 </body>
 

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>
 

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/';
+} 

src/init.js

@@ -1,19 +1,65 @@
 import axios from 'axios';
+import { updateTask, deleteTask, editTask } from './main';
 const API_BASE_URL = 'https://todo-app-csoc.herokuapp.com/';
+window.deleteTask = deleteTask;
+window.updateTask = updateTask;
+window.editTask = editTask;
+const taskList = document.getElementById("taskList");
 
-function getTasks() {
+export function getTasks() {
     /***
      * @todo Fetch the tasks created by the user and display them in the dom.
      */
+     const headersForApiRequest = {
+        Authorization: 'Token ' + localStorage.getItem('token')
 }
 
+
+axios({
+    headers: {
+        Authorization: 'Token ' + localStorage.getItem('token'),
+    },
+    url: API_BASE_URL + 'todo/',
+    method: 'get',
+})
+.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(function (err) {
+        displayErrorToast("Oops! Something's wrong!");
+      });
+}
 axios({
     headers: {
         Authorization: 'Token ' + localStorage.getItem('token'),
     },
     url: API_BASE_URL + 'auth/profile/',
     method: 'get',
-}).then(function({data, status}) {
+})
+.then(function({data, status}) {
   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();

src/main.js

@@ -1,11 +1,42 @@
 import axios from 'axios';
+import { getTasks } from './init';
+window.deleteTask = deleteTask;
+window.updateTask = updateTask;
+window.editTask = editTask;
+const loginBtn = document.getElementById('loginBtn');
+const logoutBtn = document.getElementById('logoutButton');
+const registerBtn = document.getElementById('register');
+const addtaskBtn = document.getElementById('addTaskButton');
+const searchBtn = document.getElementById('searchTaskBtn');
+// const cancelBtn = document.getElementById('cancel-btn');
+window.onload = ()=>{
+
+    if(loginBtn)
+        loginBtn.onclick = login
+
+    if(logoutBtn)
+        logoutBtn.onclick = logout
+
+    if(registerBtn)
+        registerBtn.onclick = register
+
+    if(addtaskBtn)
+        addtaskBtn.onclick = addTask;
+
+    if(searchBtn)
+        searchBtn.onclick = search;
+
+    // if(cancelBtn)
+    //     cancelBtn.onclick = cancel;
+    }
 function displaySuccessToast(message) {
     iziToast.success({
         title: 'Success',
         message: message
     });
 }
 
+
 function displayErrorToast(message) {
     iziToast.error({
         title: 'Error',
@@ -75,6 +106,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,27 +139,124 @@ function addTask() {
      * @todo 1. Send the request to add the task to the backend server.
      * @todo 2. Add the task in the dom.
      */
+     const title = document.getElementById('new-task').value.trim();
+
+     if (title == '') {
+         displayErrorToast("Field cannot be empty.");
+         return;
+     }
+
+     const dataForApiRequest = {
+         title: title
+     }
+
+
+     axios({
+         headers: {
+             Authorization: "Token " + localStorage.getItem("token"),
+         },
+         url: API_BASE_URL + 'todo/create/',
+         method: 'post',
+         data: dataForApiRequest,
+     }).then(function ({ data, status }) {
+         displaySuccessToast("Task added.");
+         getTasks();
+         document.getElementById('new-task').value ="";
+     }).catch(function (err) {
+         displayErrorToast("Something went wrong.");
+     })
 }
 
-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');
     document.getElementById('done-button-' + id).classList.remove('hideme');
 }
 
-function deleteTask(id) {
+
+export 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("Loading...");
+
+     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("Unable to delete task. Please try again...");
+     })
+}
+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")
+    })
 }
 
-function updateTask(id) {
+export 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 taskname =document.getElementById("input-button-" + id).value.trim();
+
+     if (taskname == ""){
+         displayErrorToast("Task name cannot be empty .");
+         return;
+     }
+
+     const dataForApiRequest = {
+         title: taskname
+     }
+
+    axios({
+        headers: {
+            Authorization: "Token " + localStorage.getItem("token"),
+        },
+        url: API_BASE_URL + 'todo/' + id + '/',
+        method: 'put',
+        data: dataForApiRequest,
+     }).then(function ({ data, status }) {
+        displaySuccessToast("Task updated successfully .");
+        getTasks();
+     }).catch(function (err) {
+        displayErrorToast("Oops ! Something went wrong . ");
+     })
 }

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 = '/';
+}

style.css

@@ -35,3 +35,6 @@
 .todo-task {
     max-width:260px;
 }
+.todo-search-task {
+    max-width:400px;
+}