Adding edit functionality to the ToDos

index.html

@@ -89,12 +89,16 @@ <h5 class="modal-title" id="editTodoLabel">Edit your note!</h5>
             </div>
             <div class="form-group">
               <label for="recipient-name" class="col-form-label">Deadline:</label>
-              <input id="inputdate" width="312" id="edit_deadline_todo">
+              <input width="312" id="edit_deadline_todo" required>
+            </div>
+            <div class="form-group">
+              <label for="recipient-name" class="col-form-label">Progress bar</label>
+              <input type="number" class="form-control" id="edit_progress_todo" min="0" max="100" required> 
             </div>
           </form>
         </div>
         <div class="modal-footer">
-          <button type="button" class="btn btn-primary" onclick="create_new_todo()" id="btn-todo">Create</button>
+          <button type="button" class="btn btn-primary" onclick="editActualTodo()" id="btn-todo">Edit</button>
         </div>
       </div>
     </div>

notes.js

@@ -9,33 +9,57 @@ $('#create').on('show.bs.modal', function (event) {
 
 })
 
+$('#editTodo').on('show.bs.modal', function (event) {
+  var button = $(event.relatedTarget) // Button that triggered the modal
+  var recipient = button.data('whatever') // Extract info from data-* attributes
+  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
+  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
+  var modal = $(this)
+  modal.find('.modal-title').text('Edit note!')
+
+})
+
 $('#create').on('hide.bs.modal', function (event) {
   $(this).find('form').trigger('reset');
 })
 
 
+$('#editTodo').on('hide.bs.modal', function (event) {
+  $(this).find('form').trigger('reset');
+})
+
+let date_picker_edit = $('#edit_deadline_todo').datetimepicker({ footer: true, modal: true });
+
 let date_picker = $('#inputdate').datetimepicker({ footer: true, modal: true });
 
+
+
+
 let COUNTER_TODOS = 0
 
+let ACTUALID = undefined
+
+
 class ToDo {
 
-  constructor(id, title, description, deadline) {
+  constructor(id, title, description, deadline,progress) {
     this.titleTodo = title;
     this.idTodo = id;
     this.descriptionTodo = description;
     this.deadlineTodo = deadline;
+    this.progressTodo = progress
   }
 
 
+
   to_html() {
 
     return `
     <div class="col-lg-4 col-md-6" id="todo_${this.id}" >
         <div class="wrapper">
         <div class="card" >
           <div class="buttons" id="overlay">
-              <a href="#" class="btn btn-primary" id="btn-edit"><i class="fas fa-edit"></i></a>
+              <a href="#" class="btn btn-primary" onclick="setActualChange(${this.id})" data-toggle="modal" data-target="#editTodo" id="btn-edit"><i class="fas fa-edit"></i></a>
               <a href="#" class="btn btn-primary" onclick="deleteTodo(${this.id})" id="btn-delete"><i class="fas fa-trash-alt"></i></i></a>
           </div>
           <div class="card-body">
@@ -47,7 +71,7 @@ class ToDo {
       </div>
        <hr> </hr>
            <div class="progress">
-              <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">0%</div>
+              <div class="progress-bar" role="progressbar" style="width: ${this.progress}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">${this.progress}%</div>
             </div>
            
           </div>
@@ -77,6 +101,10 @@ class ToDo {
     return this.idTodo;
   }
 
+  get progress(){
+    return this.progressTodo;
+  }
+
 }
 
 
@@ -99,7 +127,7 @@ function create_new_todo() {
   const list_of_todos = document.getElementById("list_of_todos");
 
   //We create a new TodoObject
-  let new_todo = new ToDo(COUNTER_TODOS, title_value, description_value, deadline_value);
+  let new_todo = new ToDo(COUNTER_TODOS, title_value, description_value, deadline_value,0);
 
   //We create an artificially and temporal div to insert the HTML of our ToDO as a child and then we retrieve it 
   const artificial_div = document.createElement("div");
@@ -117,5 +145,50 @@ function create_new_todo() {
 function deleteTodo(id) {
   const list_of_todos = document.getElementById("list_of_todos");
   let element = document.getElementById("todo_" + id).remove();
-  COUNTER_TODOS--;
+}
+
+
+function setActualChange(id){
+  ACTUALID = id
+}
+
+function editActualTodo(){
+  const title = document.getElementById("edit_title_todo")
+  const description = document.getElementById("edit_description_todo")
+  const progress = document.getElementById("edit_progress_todo");
+
+  console.log("Here 1")
+
+  //We check if the fields are pre fill 
+  if(!title.checkValidity() || !description.checkValidity() || (date_picker_edit.value() == "" || date_picker_edit.value() == undefined))
+      return;
+
+
+      console.log("Here 2")
+
+
+  //We recolect the data of the fields
+  const title_value = title.value;
+  const description_value = description.value;
+  const deadline_value = date_picker_edit.value();
+  const progress_value = progress.value;
+
+  let new_todo = new ToDo(ACTUALID,title_value, description_value, deadline_value,progress_value);
+
+  let new_html_todo = new_todo.to_html();
+
+  let old_todo_ref = document.getElementById("todo_" + ACTUALID);
+
+  //We create an artificially and temporal div to insert the HTML of our ToDO as a child and then we retrieve it 
+  const artificial_div = document.createElement("div");
+  artificial_div.innerHTML = new_html_todo;
+  const todo_to_inject = artificial_div.firstElementChild;
+
+  old_todo_ref.replaceWith(todo_to_inject);
+
+  ACTUALID = undefined;
+
+  $("#editTodo").modal("toggle")
+
+
 }