diff --git a/index.html b/index.html index ffda4cf..aa5d63d 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,7 @@ display: none !important; } + @@ -45,7 +46,7 @@ data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Loading ...
- Logout + Logout
@@ -56,7 +57,14 @@
- + +
+ +
+
+ +
+
diff --git a/login/index.html b/login/index.html index 305d461..f002899 100644 --- a/login/index.html +++ b/login/index.html @@ -50,7 +50,7 @@ - + diff --git a/package-lock.json b/package-lock.json index 3a9cab7..8ec03fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,7 +1,7 @@ { "name": "csoc-task-2-web", "version": "1.0.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, "dependencies": { "axios": { @@ -55,9 +55,9 @@ } }, "nanoid": { - "version": "3.1.23", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz", - "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==" + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "path-parse": { "version": "1.0.7", diff --git a/register/index.html b/register/index.html index 3a1f03d..04f7dd0 100644 --- a/register/index.html +++ b/register/index.html @@ -64,7 +64,11 @@ - +
+ + +
+ diff --git a/src/auth_required.js b/src/auth_required.js index 7f5e7bc..f6a3b7b 100644 --- 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.getItem('Token')==null) + window.location.href="/login/"; \ No newline at end of file diff --git a/src/init.js b/src/init.js index 3a88d74..968be64 100644 --- a/src/init.js +++ b/src/init.js @@ -1,15 +1,33 @@ import axios from 'axios'; +import {editTask, updateTask, deleteTask, TodoDisplayer} from './main'; + 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. */ + axios({ + headers : { + Authorization : "Token " + localStorage.getItem("Token") + }, + url: API_BASE_URL + "todo/", + method : "get" + }).then(function (res){ + const {data,status} = res; + + for(let i=0 ; i{ + axios({ + headers : { + Authorization: "Token " + localStorage.getItem("Token") + }, + url: API_BASE_URL + "todo/", + method: "get" + }).then(({data,status})=>{ + const newTaskid = data[data.length-1].id; + TodoDisplayer(newTaskid,task_title); + + }).catch((error)=>{ + console.log(error); + displayErrorToast("OOPS!!!Something Weird Happend"); + }) + }) + +} + +function TodoDisplayer(newTaskid,task_title){ + const element = document.createElement("li"); + element.classList.add("list-group-item","d-flex","justify-content-between","align-items-center"); + element.id = `todo-${newTaskid}`; + element.innerHTML = ` +
+ +
+
+ ${task_title} +
+ + + + `; + const oldRecord = document.querySelector(".todo-available-tasks"); + oldRecord.appendChild(element); + document.getElementById(`input-button-${newTaskid}`).value = task_title; + document.getElementById(`updateTask-${newTaskid}`).addEventListener('click',()=>{updateTask(newTaskid)}); + document.getElementById(`deleteTask-${newTaskid}`).addEventListener('click',()=>{deleteTask(newTaskid)}); + document.getElementById(`editTask-${newTaskid}`).addEventListener('click',()=>{editTask(newTaskid)}); + document.querySelector(".todo-add-task input").value=""; + } function editTask(id) { @@ -98,6 +216,15 @@ function deleteTask(id) { * @todo 1. Send the request to delete the task to the backend server. * @todo 2. Remove the task from the dom. */ + axios({ + headers : {Authorization : "Token " + localStorage.getItem("Token")}, + url: API_BASE_URL + `todo/${id}/`, + method: "delete" + }).then(({data,status})=>{ + document.getElementById(`todo-${id}`).remove(); + }).catch((err)=>{ + displayErrorToast("Sorry for the trouble!!!"); + }) } function updateTask(id) { @@ -106,4 +233,46 @@ function updateTask(id) { * @todo 1. Send the request to update the task to the backend server. * @todo 2. Update the task in the dom. */ + const updTask = document.getElementById(`input-button-${id}`).value; + if(updTask){ + axios({ + headers: {Authorization: "Token " + localStorage.getItem("Token")}, + url: API_BASE_URL + `todo/${id}/`, + method: "patch", + data: {title: updTask} + }).then(({data,status})=>{ + 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'); + document.getElementById('task-'+id).innerHTML = updTask; + }).catch((err)=>{ + displayErrorToast("Opps!!!Try Again") + }) + } +} + +function searchTask(){ + const searchString = document.querySelector(".todo-search-task input").value.trim(); + axios({ + headers: {Authorization: "Token " + localStorage.getItem("Token")}, + url: API_BASE_URL + `todo/`, + method: "get" + }).then(({data,status})=>{ + document.querySelector(".todo-search-task input").value=""; + for(let i=0 ; i{ + displayErrorToast(":( Not found"); + }) + } diff --git a/style.css b/style.css index 2817a0d..ef36602 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ padding: 5px; } -.todo-add-task { +.todo-add-task, .todo-search-task{ margin-top:90px; max-width:400px; }