diff --git a/spa/index.html b/spa/index.html index aed1e76..b8e07a3 100644 --- a/spa/index.html +++ b/spa/index.html @@ -1,25 +1,80 @@ + - - - - Document + + + + Document + + + + + + - - +
+
+ +
+
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + +
+
+
+
+
+ +
    -
+ +
+
+
+ - - + - \ No newline at end of file + + diff --git a/spa/index.js b/spa/index.js index 59fddb7..1653cb1 100644 --- a/spa/index.js +++ b/spa/index.js @@ -1,50 +1,96 @@ -const todos = [ - { - id: 1, - name: "Teach Class at Nagarro", - done: true - }, - { - id: 2, - name: "Get Coffee", - done: false - } +let todos = [ + { + id: 1, + name: "Teach Class at Nagarro", + done: true, + deadline: new Date(2019, 11, 24) + }, + { + id: 2, + name: "Get Coffee", + done: false, + deadline: new Date(2019, 10, 11) + } ]; function render(state) { - return state - .map(todo => { - const classString = todo.done ? `class = "striked"` : '' - return `
  • ${todo.name}
    • `; - }) - .join(""); + return state + .map(todo => { + const classString = todo.done ? `list-group-item striked` : `list-group-item` + return `
  • ${todo.name} ${todo.deadline.getDate()}/${todo.deadline.getMonth()}/${todo.deadline.getFullYear()}
    • `; + }) + .join(""); } function paint() { - $("ul").html(render(todos)); + $("ul").html(render(todos)); } + function addTodo() { - // document.getElementById('newTodo') != $('#newTodo') - const inputBox = $('#newTodo') - todos.push({ - id: todos.length + 1, - name: inputBox.val(), - done: false - }) + // document.getElementById('newTodo') != $('#newTodo') + const inputBox = $('#newTodo') + const deadlinedate = $('#newTododate') + todos.push({ + id: todos.length + 1, + name: inputBox.val(), + done: false, + deadline: new Date(deadlinedate.val()) + }) - inputBox.val('') + inputBox.val('') + deadlinedate.val('') - paint() + 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; + paint(); + } +}); + +function reset() { + todos = todos.filter(todo => !todo) + paint() +} + $('ul').on("click", function (e) { - const idToFind = e.target.dataset.todo - const todo = todos.find(todo => todo.id == idToFind) - todo.done = !todo.done + const idToFind = e.target.dataset.todo + $('ul').on("click", function (e) { + paint() + }) + + $('#newTodo, #newTododate').on("keypress", function (e) { + if (e.which == 13) { + addTodo() + } + }) - paint() + paint(); }) -paint();