diff --git a/spa/index.html b/spa/index.html index 36f06aa..4f61ba4 100644 --- a/spa/index.html +++ b/spa/index.html @@ -1,50 +1,59 @@ + - - - - Document - + + + + Document + + + + + + + + -
-
-
- - Add a new todo -
-
-
- - - +
+
+
+ + Add a new todo

+
+
+
+ + + + +
+
-
-
- -
-
-
    - -
-
- -
- -
+
+
+
    +
+
- - +
+ + +
+ + - \ No newline at end of file + + diff --git a/spa/index.js b/spa/index.js index 062d888..5c01aa5 100644 --- a/spa/index.js +++ b/spa/index.js @@ -1,55 +1,91 @@ let todos = [ { - id: 1, - name: "Teach Class at Nagarro", - done: true + id: 1, + name: 'Teach class at Nagarro', + done: true, + deadline: "2019-09-20" }, { - id: 2, - name: "Get Coffee", - done: false + id: 2, + name: 'Get Coffee', + done: false, + deadline: "2019-09-10" } + ]; function render(state) { return state - .map(todo => { - // const li = document.createElement('li') - // li.classList.add("striked") - // document.body.append(li) - const classString = todo.done ? `class = "list-group-item striked"` : `class = "list-group-item"` - return `
  • ${todo.name}
    • `; - }) - .join(""); + .map(todo => { + const classString = todo.done ? `list-group-item striked` : `list-group-item` + return `
  • ${todo.name} ${todo.deadline}
    • `; + + }) + + .join(""); } + function paint() { $("ul").html(render(todos)); } + function addTodo() { - // document.getElementById('newTodo') != $('#newTodo') const inputBox = $('#newTodo') + const inputDate = $('#newDate') todos.push({ - id: todos.length + 1, - name: inputBox.val(), - done: false + id: todos.length + 1, + name: inputBox.val(), + done: false, + deadline: inputDate.val() }) inputBox.val('') + inputDate.val('') paint() } - - function removeTodos() { todos = todos.filter(todo => !todo.done) + paint(); +} + + + +function sortTodos() { + + todos.sort(function (a, b) { + return (new Date(a.deadline)) - (new Date(b.deadline)) + }); paint() } + +$("#sortable").sortable({ + update: function (event, ui) { + let temp = []; + var idsInOrder = $("#sortable").sortable().toArray(); + + children = idsInOrder[0].children; + for (var i = 0; i < children.length; i++) { + temp[i] = todos.find(todo => todo.id == children[i].attributes['0'].value) + } + todos = temp; + } +}); + + +function resetBox() { + const inputBox = $('#newTodo') + const inputDate = $('#newDate') + inputBox.val('') + inputDate.val('') +} + $('ul').on("click", function (e) { const idToFind = e.target.dataset.todo const todo = todos.find(todo => todo.id == idToFind) @@ -58,10 +94,12 @@ $('ul').on("click", function (e) { paint() }) + $('#newTodo').on("keypress", function (e) { if (e.which == 13) { - addTodo() + addTodo(); } }) + paint();