diff --git a/spa/index.html b/spa/index.html index 36f06aa..03e1649 100644 --- a/spa/index.html +++ b/spa/index.html @@ -1,50 +1,71 @@ + Document - + + + + + +
-
- - Add a new todo +
+
+
+ +
+
+ +
+
+
-
-
- - +
+
+ + +
- +
-
    - -
+
    + +
- +
-
- - + - \ No newline at end of file + + diff --git a/spa/index.js b/spa/index.js index 062d888..0946da6 100644 --- a/spa/index.js +++ b/spa/index.js @@ -2,23 +2,22 @@ let todos = [ { id: 1, name: "Teach Class at Nagarro", - done: true + done: true, + deadline: new Date(2019, 11, 24) }, { id: 2, name: "Get Coffee", - done: false + done: false, + deadline: new Date(2019, 10, 11) } ]; 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}
    • `; + const classString = todo.done ? `list-group-item striked` : `list-group-item` + return `
  • ${todo.name} ${todo.deadline.getDate()}/${todo.deadline.getMonth()}/${todo.deadline.getFullYear()}
    • `; }) .join(""); } @@ -30,25 +29,54 @@ function paint() { function addTodo() { // document.getElementById('newTodo') != $('#newTodo') const inputBox = $('#newTodo') + const deadlinedate = $('#newTododate') todos.push({ id: todos.length + 1, name: inputBox.val(), - done: false + done: false, + deadline: new Date(deadlinedate.val()) }) inputBox.val('') + deadlinedate.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; + paint(); + } +}); + +function reset() { + // $("#newTodo").val(''); + // $("#newTododate").val(''); + todos=todos.filter(todo=>!todo) + paint() +} $('ul').on("click", function (e) { const idToFind = e.target.dataset.todo @@ -58,7 +86,7 @@ $('ul').on("click", function (e) { paint() }) -$('#newTodo').on("keypress", function (e) { +$('#newTodo, #newTododate').on("keypress", function (e) { if (e.which == 13) { addTodo() }