From 6d844b3bfb3c4a905724afdd392dab04924136e8 Mon Sep 17 00:00:00 2001 From: bochard Date: Tue, 10 Jun 2025 19:12:39 +0800 Subject: [PATCH] added how btn react accordingly based on ticked checkboxes --- Classes/Tasks.php | 7 +++ includes/dashboard.php | 32 +++++++--- includes/edit_task.php | 34 ++++++++++ js/tasks.js | 138 ++++++++++++++++++++++++++++++++--------- login.php | 2 +- signup.php | 2 +- 6 files changed, 174 insertions(+), 41 deletions(-) diff --git a/Classes/Tasks.php b/Classes/Tasks.php index 5280b5a..236d7bf 100644 --- a/Classes/Tasks.php +++ b/Classes/Tasks.php @@ -34,6 +34,13 @@ class Tasks extends DbConn { $stmt->execute(); } + public function editTask($pdo, $taskId, $newInput){ + $query = 'UPDATE tasks SET task = WHERE task_id = ;taskId;'; + $stmt = $pdo->prepare($query); + $stmt->bindParam(':taskId', $taskId); + $stmt->execute(); + } + public function deleteTask($pdo, $taskId){ $query = 'DELETE FROM tasks WHERE task_id = :taskId;'; $stmt = $pdo->prepare($query); diff --git a/includes/dashboard.php b/includes/dashboard.php index 20ba694..453db94 100644 --- a/includes/dashboard.php +++ b/includes/dashboard.php @@ -21,9 +21,10 @@ -
+
- +
@@ -63,7 +64,7 @@
- +
@@ -73,24 +74,37 @@

Tasks

-
+
- -
+ +

New Task

Add the task you need to do.

- +
+ + +
+

Edit Task

+

Apply a new value.

+
+ +
+ + +
+
+
diff --git a/includes/edit_task.php b/includes/edit_task.php index e69de29..0c8001e 100644 --- a/includes/edit_task.php +++ b/includes/edit_task.php @@ -0,0 +1,34 @@ +getPdo(); + + $userId = $_SESSION['user_data']['user_id']; + $tasks = new Tasks($pdo, $userId); + $error = $tasks->error; + + foreach($taskIds as $taskId){ + $tasks->isInputEmpty($taskId); + if(empty($error)){ + $tasks->editTask($pdo, $taskId, $newInput); + } + } + + } catch(PDOException $e){ + die("Query failed: {$e}"); + } +} \ No newline at end of file diff --git a/js/tasks.js b/js/tasks.js index 03a6a8a..893fa8d 100644 --- a/js/tasks.js +++ b/js/tasks.js @@ -1,4 +1,6 @@ const addTaskForm = document.getElementById('add-task-form'); +const editTaskForm = document.getElementById('edit-task-form'); +let isCheckedArray = []; //===== LOAD TASKS =====// function loadTasks(){ @@ -38,30 +40,49 @@ function addCheckboxListeners(){ const checkboxes = document.querySelectorAll('#task-body input[type="checkbox"]'); checkboxes.forEach(function(checkbox){ - checkbox.addEventListener('change', function(){ - const isAnyChecked = Array.from(checkboxes).some(function(checkbox){ - return checkbox.checked; - }); + checkbox.addEventListener('change', evaluateCheckedCheckboxes); + }); + + function evaluateCheckedCheckboxes(){ + const checked = Array.from(checkboxes).filter(function(cb){ + return cb.checked; + }); - if(isAnyChecked){ - removeDisabledAttributes(); - } else{ - setDisabledAttributes(); - } + isCheckedArray = checked.map(function(cb){ + return cb.id; }); - }); -} -function removeDisabledAttributes(){ - document.getElementById('edit-task').removeAttribute('disabled'); + if (checked.length === 1) { + console.log('only one ticked'); + removeDisabledAttributesOnDeleteBtn(); + removeDisabledAttributesOnEditBtn(); + } else if (checked.length > 1) { + console.log('multiple ticked'); + removeDisabledAttributesOnDeleteBtn(); + setDisabledAttributesOnEditBtn(); + } else { + setDisabledAttributesOnDeleteBtn(); + setDisabledAttributesOnEditBtn(); + } + } +}; + +function removeDisabledAttributesOnDeleteBtn(){ document.getElementById('delete-task').removeAttribute('disabled'); }; -function setDisabledAttributes(){ - document.getElementById('edit-task').setAttribute('disabled', true); +function setDisabledAttributesOnDeleteBtn(){ document.getElementById('delete-task').setAttribute('disabled', true); }; +function removeDisabledAttributesOnEditBtn(){ + document.getElementById('edit-task-popup-open').removeAttribute('disabled'); +}; + +function setDisabledAttributesOnEditBtn(){ + document.getElementById('edit-task-popup-open').setAttribute('disabled', true); +}; + //===== ADD TASK =====// function addTask(){ const taskInput = document.getElementById('task-name'); @@ -89,7 +110,8 @@ function addTask(){ setTimeout(function(){ loadTasks(); }, 500); - setDisabledAttributes(); + setDisabledAttributesOnDeleteBtn(); + setDisabledAttributesOnEditBtn(); popupNewTaskClose(); }) .catch(function(error){ @@ -99,21 +121,41 @@ function addTask(){ //===== EDIT TASK =====// function editTask(){ - + const taskInput = document.getElementById('edit-input-task-name'); + const formData = new FormData(editTaskForm); + const taskName = formData.get('edit-input-task-name').trim(); + + // replace placeholder text when no input + if(!taskName){ + taskInput.placeholder = 'Please fill this input...'; + return; + } + + fetch('./includes/edit_task.php', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(isCheckedArray) + }) + .then(function(response){ + console.log(response); + return response.json(); + }) + .then(function(data){ + console.log(data); + setTimeout(function(){ + loadTasks(); + }, 500); + // setDisabledAttributesOnEditBtn(); + }) + .catch(function(error){ + console.error(error); + }); } //===== DELETE TASK =====// function deleteTask(){ - const checkboxes = document.querySelectorAll('#task-body input[type="checkbox"]'); - let isCheckedArray = []; - - for(let checkbox of checkboxes){ - if(checkbox.checked){ - isCheckedArray.push(checkbox.id); - } - } + console.log(isCheckedArray); - // after iterating and finding the id of a checkbox that is checked... fetch('./includes/delete_task.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -129,19 +171,25 @@ function deleteTask(){ setTimeout(function(){ loadTasks(); }, 500); - setDisabledAttributes(); + setDisabledAttributesOnDeleteBtn(); }) .catch(function(error){ console.error(error); }); } -function resetTaskInputPlaceholder(){ +function resetTaskInputPlaceholderForAddBtn(){ const taskInput = document.getElementById('task-name'); setTimeout(function(){ taskInput.placeholder = 'New task...'; }, 200); } +function resetTaskInputPlaceholderForEditBtn(){ + const taskInput = document.getElementById('edit-input-task-name'); + setTimeout(function(){ + taskInput.placeholder = 'New task...'; + }, 200); +} function popupNewTaskOpen(){ popupWindow = document.getElementById('new-task-popup-window'); @@ -157,6 +205,20 @@ function popupNewTaskClose(){ popupWindow.style.visibility = 'hidden'; } +function popupEditTaskOpen(){ + popupWindow = document.getElementById('edit-task-popup-window'); + popupWindow.style.visibility = 'visible'; + popupWindow.style.opacity = 1; +} + +function popupEditTaskClose(){ + popupWindow = document.getElementById('edit-task-popup-window'); + setTimeout(function(){ + editTaskForm.reset(); + }, 200); + popupWindow.style.visibility = 'hidden'; +} + // event listeners document.getElementById('new-task-popup-open').addEventListener('click', function(){ @@ -164,17 +226,33 @@ document.getElementById('new-task-popup-open').addEventListener('click', functio }); document.getElementById('new-task-popup-close').addEventListener('click', function(){ - resetTaskInputPlaceholder(); + resetTaskInputPlaceholderForAddBtn(); popupNewTaskClose(); }); -document.getElementById('task-name').addEventListener('input', resetTaskInputPlaceholder); +document.getElementById('edit-task-popup-open').addEventListener('click', function(){ + popupEditTaskOpen(); +}); + +document.getElementById('edit-task-popup-close').addEventListener('click', function(){ + resetTaskInputPlaceholderForEditBtn(); + popupEditTaskClose(); +}); + +document.getElementById('task-name').addEventListener('input', resetTaskInputPlaceholderForAddBtn); + +document.getElementById('edit-input-task-name').addEventListener('input', resetTaskInputPlaceholderForEditBtn); document.getElementById('add-task-form').addEventListener('submit', function(e){ e.preventDefault(); addTask(); }); +document.getElementById('edit-task-form').addEventListener('submit', function(e){ + e.preventDefault(); + editTask(); +}); + document.getElementById('delete-task').addEventListener('click', function(e){ e.preventDefault(); deleteTask(); diff --git a/login.php b/login.php index 4a43e7b..5099f21 100644 --- a/login.php +++ b/login.php @@ -53,7 +53,7 @@ -
+

Log in

diff --git a/signup.php b/signup.php index fd46f19..7466c7b 100644 --- a/signup.php +++ b/signup.php @@ -47,7 +47,7 @@ -
+

Sign up

-- 2.39.5