<link href="./dist/rpgui.css" rel="stylesheet" type="text/css" >
<script src="./dist/rpgui.js"></script>
<style>
- #new-task-popup-window {
+ #new-task-popup-window,
+ #edit-task-popup-window {
width: 350px;
- position: absolute;
+ position: fixed;
z-index: 999;
top: 50%;
left: 50%;
</style>
</head>
<body class="rpgui-content" style="display: flex; justify-content: center;">
- <div class="rpgui-container framed" style="margin: 32px; width: 100%; height: fit-content; max-width: 600px;">
+ <div class="rpgui-container framed" style="margin: 36px 0; width: 90%; height: fit-content; max-width: 600px;">
<div style="text-align: right;">
<form action="../includes/logout.php" method="POST" class="title-bar-controls">
- <button class="rpgui-button" type="submit">Exit</button>
+ <button class="rpgui-button" type="submit">Log Out</button>
</form>
</div>
<button class="rpgui-button" type="button" id="new-task-popup-open">Add task</button>
</div>
<div>
- <button class="rpgui-button" type="button" id="edit-task" disabled>Edit</button>
+ <button class="rpgui-button" type="button" id="edit-task-popup-open" disabled>Edit</button>
<button class="rpgui-button" type="button" id="delete-task" disabled>Delete</button>
</div>
</div>
<h2 style="text-align: center;">Tasks</h2>
<hr>
<div style="overflow-y: auto; height: 400px;">
- <div id="task-body" style="width: 80%; margin: auto; word-break: break-all;">
+ <div id="task-body" style="width: 90%; margin: auto; word-break: break-all;">
<!-- ajax will insert the fetched task data here... -->
</div>
</div>
</div>
- <!-- popup -->
- <div class="rpgui-container framed golden rpgui-draggable" id="new-task-popup-window">
+ <!-- popup for add task -->
+ <div class="rpgui-container framed golden" id="new-task-popup-window">
<h3>New Task</h3>
<p>Add the task you need to do.</p>
<form id="add-task-form">
- <input type="text" id='task-name' name="task-name" placeholder="New task...">
+ <input type="text" id="task-name" name="task-name" placeholder="New task...">
<div style="display: flex; justify-content: center; align-items: center;">
<button class="rpgui-button" type="button" id="new-task-popup-close">Close</button>
<button class="rpgui-button" type="submit">Add</button>
</div>
</form>
</div>
+
+ <!-- popup for edit task -->
+ <div class="rpgui-container framed golden" id="edit-task-popup-window">
+ <h3>Edit Task</h3>
+ <p>Apply a new value.</p>
+ <form id="edit-task-form">
+ <input type="text" id="edit-input-task-name" name="edit-input-task-name" placeholder="Add new value...">
+ <div style="display: flex; justify-content: center; align-items: center;">
+ <button class="rpgui-button" type="button" id="edit-task-popup-close">Close</button>
+ <button class="rpgui-button" type="submit">Edit</button>
+ </div>
+ </form>
+ </div>
</main>
</div>
const addTaskForm = document.getElementById('add-task-form');
+const editTaskForm = document.getElementById('edit-task-form');
+let isCheckedArray = [];
//===== LOAD TASKS =====//
function loadTasks(){
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');
setTimeout(function(){
loadTasks();
}, 500);
- setDisabledAttributes();
+ setDisabledAttributesOnDeleteBtn();
+ setDisabledAttributesOnEditBtn();
popupNewTaskClose();
})
.catch(function(error){
//===== 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' },
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');
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(){
});
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();
repos / QuestLog.git / commitdiff