bckelley/todo-list
1
0
Fork 0
mirror of https://github.com/bckelley/todo-list.git synced 2026-08-24 01:14:11 -05:00
Code Issues Packages Projects Releases Wiki Activity

updated todo-list to use SimplePHPDB

Browse Source
This commit is contained in:
bckelley
2025-06-05 12:06:45 -05:00
parent 185655fb41
commit 42c54ec652
6 changed files with 211 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitmodules
+3
View File
@@ -0,0 +1,3 @@
[submodule "db"]
path = db
url = https://github.com/bckelley/SimplePHPDB.git
_config.yml
-1
View File
@@ -1 +0,0 @@
theme: jekyll-theme-minimal
db
Submodule
+1
Submodule db added at f3f6a5a7de
index.php
+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>
server.php
+33 -6
View File
@@ -1,7 +1,9 @@
<?PHP
require "./db/config.php";
session_start();
$db = mysqli_connect('localhost', 'root', 'admin', 'todo');
$db = new DB("localhost", "root", "", "accounts");
$task = "";
$id = 0;
@@ -10,23 +12,48 @@ $update = false;
if (isset($_POST['save'])) {
$task = $_POST['task'];
mysqli_query($db, "INSERT INTO tasks (task) VALUES ($tasks)");
$data = ['task' => $task];
$insertId = $db->insert("`todo-tasks`", $data);
if ($insertId) {
$_SESSION['message'] = "Task Added";
}
$_SESSION['message'] = "Task Added";
header('Location: index.php');
}
if ( isset($_POST['action']) && $_POST['action'] === 'update' ) {
$taskId = $_POST['taskId'];
$isCompleted = isset($_POST['isCompleted']) === 'true' ? 1 : 0;
$data = ['isCompleted' => $isCompleted];
$cond = ['id' => $taskId];
$updateRow = $db->update("`todo-tasks`", $data, $cond);
if ($updateRow) {
$_SESSION['message'] = "Task Status Updated!";
}
}
if (isset($_POST['update'])) {
$id = $_POST['id'];
$task = $_POST['task'];
mysqli_query($db, "UPDATE tasks SET task='$task' WHERE id='$id'");
$data = ['task' => $task];
$cond = ['id' => $id];
$updateRow = $db->update("`todo-tasks`", $data, $cond);
if ($updateRow) {
$_SESSION['message'] = "Task Updated!";
}
$_SESSION['message'] = "Task Updated!";
header('location: index.php');
exit();
}
if (isset($_GET['del'])) {
$id = $_GET['del'];
mysqli_query($db, "DELETE FROM tasks WHERE id='$id'");
// mysqli_query($db, "DELETE FROM tasks WHERE id='$id'");
$_SESSION['message'] = "Task Removed!";
header('Location: index.php');
}
style.css
+93 -16
View File
@@ -1,27 +1,69 @@
:root {
--text-color: black;
--background-color: white;
--border-color: #cbcbcb;
--hover-background: #F5F5F5;
--form-border-color: #bbbbbb;
--input-border-color: gray;
--btn-background: #5F9EA0;
--edit-btn-background: #5F9EA0;
--del-btn-background: #800000;
--msg-background: #dff0d8;
--msg-border-color: #3c763d;
--msg-text-color: #3c763d;
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: white;
--background-color: #393939;
--border-color: #4a4a4a;
--hover-background: #3a3a3a;
--form-border-color: #6b6b6b;
--input-border-color: #6b6b6b;
--btn-background: #5d7d59;
--edit-btn-background: #5d7d59;
--del-btn-background: #800000;
--msg-background: #3a3a3a;
--msg-border-color: #6b6b6b;
--msg-text-color: white;
}
}
body {
font-size: 19px;
font-family: 'Arial';
color: var(--text-color);
background-color: var(--background-color);
}
h2 {
width: 45%;
margin: 50px auto;
color: var(--text-color);
}
table{
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
color: var(--text-color);
}
tr {
border-bottom: 1px solid #cbcbcb;
border-bottom: 1px solid var(--border-color);
}
th, td{
th, td {
border: none;
height: 30px;
padding: 2px;
color: var(--text-color);
}
tr:hover {
background: #F5F5F5;
background: var(--hover-background);
}
form {
@@ -29,56 +71,91 @@ form {
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid #bbbbbb;
border: 1px solid var(--form-border-color);
border-radius: 5px;
background-color: var(--background-color);
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
color: var(--text-color);
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
border: 1px solid var(--input-border-color);
background-color: var(--background-color);
color: var(--text-color);
}
.task-list {
cursor:default ;
}
.strike {
text-decoration: line-through;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
background: var(--btn-background);
border: none;
border-radius: 5px;
}
.btn:hover {
filter: brightness(85%);
}
.btn-group { width: 25%; }
.edit_btn {
text-decoration: none;
padding: 2px 5px;
background: #2E8B57;
padding: 10px;
font-size: 16px;
background: var(--edit-btn-background);
color: white;
border-radius: 3px;
border-radius: 5px;
width: 50%;
}
.edit_btn:hover {
filter: brightness(85%);
}
.del_btn {
text-decoration: none;
padding: 2px 5px;
padding: 10px;
font-size: 16px;
color: white;
border-radius: 3px;
background: #800000;
border-radius: 5px;
background: var(--del-btn-background);
width: 50%;
}
.del_btn:hover {
filter: brightness(85%);
}
.msg {
margin: 30px auto;
padding: 10px;
border-radius: 5px;
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
color: var(--msg-text-color);
background: var(--msg-background);
border: 1px solid var(--msg-border-color);
width: 50%;
text-align: center;
}