updated todo-list to use SimplePHPDB

This commit is contained in:
2025-06-05 12:06:45 -05:00
parent 185655fb41
commit 42c54ec652
6 changed files with 211 additions and 39 deletions
+81 -16
View File
@@ -2,10 +2,12 @@
if (isset($_GET['edit'])) {
$id = $_GET['edit'];
$update = true;
$record = mysqli_query($db, "SELECT * FROM tasks WHERE id=".$id);
if ( $record ) {
$n = mysqli_fetch_array($record);
$task = $n['task'];
$row = $db->getRows("`todo-tasks`", ['where' => ['id' => $id]]);
if ( $row ) {
foreach ( $row as $r ) {
$task = $r['task'];
}
}
}
?>
@@ -17,6 +19,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
<h2>ToDo List</h2>
@@ -43,7 +47,7 @@
</div>
</form>
<?PHP $results = mysqli_query($db, "SELECT * FROM tasks"); ?>
<?PHP $row = $db->getRows("`todo-tasks`"); ?>
<table>
<thead>
<tr>
@@ -52,20 +56,81 @@
<th colspan="2">Action</th>
</tr>
</thead>
<?PHP while($row = mysqli_fetch_array($results)) { ?>
<?PHP if ($row) { ?>
<tbody>
<tr>
<td><?PHP echo $row['id']; ?></td>
<td><?PHP echo $row['task']; ?></td>
<td>
<a href="index.php?edit=<?PHP echo $row['id']; ?>" class="edit_btn">Edit</a>
</td>
<td>
<a href="server.php?del=<?PHP echo $row['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?PHP foreach ($row as $r) { ?>
<tr>
<td><?PHP echo $r['id']; ?></td>
<td>
<span class="task-list" data-id="<?PHP echo $r['id']; ?>" data-complete="<?PHP echo $r['isCompleted']? 'true': 'false' ?>">
<?PHP echo $r['task']; ?>
</span>
</td>
<td class="btn-group">
<a href="index.php?edit=<?PHP echo $r['id']; ?>" class="edit_btn">Edit</a>
<a href="server.php?del=<?PHP echo $r['id']; ?>" class="del_btn">Delete</a>
</td>
</tr>
<?PHP } ?>
<?PHP } else { ?>
<tr><td colspan='4'>No tasks available.</td>
<?PHP } ?>
</tbody>
</table>
</body>
<script>
$(document).ready(() => {
var element = $('.task-list');
element.each(function() {
if ($(this).attr('data-complete') === 'true') {
$(this).addClass('strike');
}
});
$('.task-list').click((e) => {
// $(e.target).toggleClass('strike');
const element = $(e.target);
const taskId = element.data('id');
const isComplete = element.data('complete');
console.info(`Task ID: ${taskId}, Is Complete: ${isComplete}`);
// Toggle the strike class on the task list item.
element.toggleClass('strike');
const isCompleted = isComplete ? false : true;
// const isCompleted = element.hasClass('strike') ? false : true;
// Update the data attribute
element.data('complete', isCompleted);
// element.attr('data-complete', isCompleted);
// Send a request to update the database.
$.ajax({
url: 'server.php',
method: 'POST',
data: {
action: 'update',
taskId: taskId,
isCompleted: isCompleted
},
success: (res) => {
console.info('Updated task', res);
},
error: (error) => {
console.error("Error updating task", error);
}
})
console.info(`Task ID: ${taskId}, Is Completed: ${isCompleted}`);
});
});
</script>
</html>