implemented additional todo functionality

js/todo.js

@@ -15,10 +15,72 @@
 
 document.addEventListener('DOMContentLoaded', function() {
   var todos = document.getElementsByClassName('todo_item');
-  //var todos = document.querySelectorAll('todo_item');
+  var action_items = (document.getElementById('todo_actions')).querySelectorAll('button');
+
+  // General Modal handling
+  function handle_modal(modal) {
+      console.log('handling modal');
+      let modal_close = modal.querySelector('.modal_close');
+      let submit_button = modal.querySelector('input[type="submit"]');
+      modal.style.display = 'block';
+
+      modal_close.addEventListener('click', function() {
+        modal.style.display = "none";
+      });
+
+      submit_button.addEventListener('click', function(e) {
+        e.preventDefault();
+        let todo = {
+          'title': modal.querySelector('#title').value,
+          'description': modal.querySelector('#description'),
+          'priority': modal.querySelector('#priority'),
+          'due_date': modal.querySelector('#due_date'),
+        };
+
+        fetch('director.php', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: 'ajax_id=todo&action_id=create_update_todo&todo_id=' + this.todo_id + '&todo=' + encodeURIComponent(JSON.stringify(todo)),
+        })
+          .then(response => {
+            if (!response.ok) {
+              throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json(); // Or handle other response formats
+          })
+          .then(responseData => {
+            console.log('Response received:', responseData);
+            // Handle the server's response
+          });
+      });
+  }
+
+  for (let i = 0; i < action_items.length; i++) {
+    let action = action_items[i];
+
+    action.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      switch (action.value) {
+        case 'new':
+          let new_todo_item = document.querySelector('#new_todo_item');
+          handle_modal(new_todo_item);
+          break;
+      }
+    });
+  }
 
   for (let i = 0; i < todos.length; i++) {
-    var item = todos[i];
+    let item = todos[i];
+
+    // Detailed todo item view via a modal
+    let modal_button = item.querySelector('.modal_activation_area');
+    let modal = item.querySelector('.modal');
+    modal_button.addEventListener('click', () => handle_modal(modal));
+
+    // Checkboxes & AJAX for updating the DB
     var checkbox = item.querySelector('input[type="checkbox"]');
     checkbox.todo_id = item.querySelector('input[name="todo_id"]').value;
     checkbox.is_checked = checkbox.checked;