Whykioh/main-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove tags / Add Categories

Browse Source
This commit is contained in:
WhyKorp
2024-09-22 16:55:49 +02:00
committed by GitHub
parent 4e465087f3
commit 6aea41d765
1 changed files with 34 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ruty/todo.php
+34 -84
View File
@@ -3,9 +3,9 @@
<title>Ruty - ToDo List</title> <title>Ruty - ToDo List</title>
<link rel="stylesheet" href="styles/styletodo.css"> <link rel="stylesheet" href="styles/styletodo.css">
<link rel="icon" href="img/logo.png"> <link rel="icon" href="img/logo.png">
<style> <style>
/* Style pour le bouton "+" */ /* Styles pour le bouton "+" et les menus */
#add-task-button { #add-task-button {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
@@ -21,8 +21,8 @@
cursor: pointer; cursor: pointer;
} }
/* Menu latéral d'ajout de tâche */ /* Menu pour ajouter et modifier des tâches */
#task-menu { #task-menu, #task-edit-menu {
position: fixed; position: fixed;
top: 0; top: 0;
right: -400px; right: -400px;
@@ -35,37 +35,11 @@
z-index: 10; z-index: 10;
} }
#task-menu.open { #task-menu.open, #task-edit-menu.open {
right: 0; right: 0;
} }
#close-menu { #close-menu, #close-edit-menu {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
/* Menu latéral de modification de tâche */
#task-edit-menu {
position: fixed;
top: 0;
right: -400px;
width: 300px;
height: 100%;
background-color: #f4f4f4;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
padding: 20px;
transition: right 0.3s ease-in-out;
z-index: 20;
}
#task-edit-menu.open {
right: 0;
}
#close-edit-menu {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@@ -85,11 +59,10 @@
<h1 class="welcome">Ruty</h1> <h1 class="welcome">Ruty</h1>
</header> </header>
<?php include 'menunav.php'; ?> <?php include 'menunav.php'; ?>
<!-- Ajouter une nouvelle tâche -->
<div id="add-task-button">+</div> <div id="add-task-button">+</div>
<!-- Menu latéral pour ajouter une tâche --> <!-- Menu d'ajout de tâche -->
<div id="task-menu"> <div id="task-menu">
<span id="close-menu">&times;</span> <span id="close-menu">&times;</span>
<h2>Ajouter une tâche</h2> <h2>Ajouter une tâche</h2>
@@ -100,21 +73,34 @@
<label for="description">Description :</label><br> <label for="description">Description :</label><br>
<textarea id="description" name="description"></textarea><br><br> <textarea id="description" name="description"></textarea><br><br>
<label for="tags">Tags (séparés par des virgules) :</label><br> <label for="category">Catégorie :</label><br>
<input type="text" id="tags" name="tags[]" placeholder="ex : urgent, maison"><br><br> <input type="text" id="category" name="category" required placeholder="ex: Devoirs, Maison"><br><br>
<input type="submit" value="Ajouter la tâche"> <input type="submit" value="Ajouter la tâche">
</form> </form>
</div> </div>
<!-- Liste des tâches --> <script>
const addButton = document.getElementById("add-task-button");
const taskMenu = document.getElementById("task-menu");
const closeMenuButton = document.getElementById("close-menu");
addButton.addEventListener("click", function() {
taskMenu.classList.add("open");
});
closeMenuButton.addEventListener("click", function() {
taskMenu.classList.remove("open");
});
</script>
<h2>Liste des tâches</h2> <h2>Liste des tâches</h2>
<ul> <ul>
<?php <?php
include 'todo_db.php'; include 'todo_db.php';
// Sélectionner les tâches // Sélectionner les tâches avec leurs catégories
$sql = "SELECT id, task_name, completed FROM tasks"; $sql = "SELECT id, task_name, completed, category FROM tasks";
$result = $conn->query($sql); $result = $conn->query($sql);
if ($result->num_rows > 0) { if ($result->num_rows > 0) {
@@ -122,10 +108,11 @@
$taskId = $row["id"]; $taskId = $row["id"];
$taskName = $row["task_name"]; $taskName = $row["task_name"];
$completed = $row["completed"] ? "checked" : ""; $completed = $row["completed"] ? "checked" : "";
$category = $row["category"];
echo "<li onclick='openTaskMenu($taskId)'>"; echo "<li onclick='openTaskMenu($taskId)'>";
echo "<input type='checkbox' class='task-checkbox' data-task-id='$taskId' $completed onchange='updateTask($taskId, this.checked)'> "; echo "<input type='checkbox' class='task-checkbox' data-task-id='$taskId' $completed onchange='updateTask($taskId, this.checked)'> ";
echo "<span class='" . ($completed ? "completed" : "") . "'>$taskName</span>"; echo "<span class='" . ($completed ? "completed" : "") . "'>$taskName (Catégorie: $category)</span>";
echo "</li>"; echo "</li>";
} }
} else { } else {
@@ -136,7 +123,7 @@
?> ?>
</ul> </ul>
<!-- Menu latéral pour modifier une tâche --> <!-- Menu de modification de tâche -->
<div id="task-edit-menu"> <div id="task-edit-menu">
<span id="close-edit-menu">&times;</span> <span id="close-edit-menu">&times;</span>
<h2>Modifier la tâche</h2> <h2>Modifier la tâche</h2>
@@ -149,41 +136,24 @@
<label for="edit-description">Description :</label><br> <label for="edit-description">Description :</label><br>
<textarea id="edit-description" name="description"></textarea><br><br> <textarea id="edit-description" name="description"></textarea><br><br>
<label for="edit-tags">Tags (séparés par des virgules) :</label><br> <label for="edit-category">Catégorie :</label><br>
<input type="text" id="edit-tags" name="tags[]" placeholder="ex : urgent, maison"><br><br> <input type="text" id="edit-category" name="category" required><br><br>
<input type="button" value="Modifier la tâche" onclick="updateTaskDetails()"> <input type="button" value="Modifier la tâche" onclick="updateTaskDetails()">
</form> </form>
</div> </div>
<!-- JavaScript pour gérer les menus -->
<script> <script>
// Gestion du menu d'ajout de tâche
const addButton = document.getElementById("add-task-button");
const taskMenu = document.getElementById("task-menu");
const closeMenuButton = document.getElementById("close-menu");
addButton.addEventListener("click", function() {
taskMenu.classList.add("open");
});
closeMenuButton.addEventListener("click", function() {
taskMenu.classList.remove("open");
});
// Gestion du menu de modification de tâche
function openTaskMenu(taskId) { function openTaskMenu(taskId) {
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('GET', `get_task.php?task_id=${taskId}`, true); xhr.open('GET', `get_task.php?task_id=${taskId}`, true);
xhr.onload = function() { xhr.onload = function() {
if (this.status === 200) { if (this.status === 200) {
const task = JSON.parse(this.responseText); const task = JSON.parse(this.responseText);
document.getElementById('edit-task-id').value = task.id; document.getElementById('edit-task-id').value = task.id;
document.getElementById('edit-task-name').value = task.task_name; document.getElementById('edit-task-name').value = task.task_name;
document.getElementById('edit-description').value = task.description; document.getElementById('edit-description').value = task.description;
document.getElementById('edit-tags').value = task.tags.join(', '); document.getElementById('edit-category').value = task.category;
document.getElementById('task-edit-menu').classList.add('open'); document.getElementById('task-edit-menu').classList.add('open');
} }
}; };
@@ -194,42 +164,22 @@
document.getElementById('task-edit-menu').classList.remove('open'); document.getElementById('task-edit-menu').classList.remove('open');
}); });
// Mettre à jour l'état de la tâche (complétée ou non)
function updateTask(taskId, completed) {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'update_task.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(`task_id=${taskId}&completed=${completed ? 1 : 0}`);
const taskText = document.querySelector(`input[data-task-id="${taskId}"]`).nextElementSibling;
if (completed) {
taskText.classList.add('completed');
} else {
taskText.classList.remove('completed');
}
}
// Mettre à jour les détails de la tâche
function updateTaskDetails() { function updateTaskDetails() {
const taskId = document.getElementById('edit-task-id').value; const taskId = document.getElementById('edit-task-id').value;
const taskName = document.getElementById('edit-task-name').value; const taskName = document.getElementById('edit-task-name').value;
const description = document.getElementById('edit-description').value; const description = document.getElementById('edit-description').value;
const tags = document.getElementById('edit-tags').value.split(',').map(tag => tag.trim()); const category = document.getElementById('edit-category').value;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open('POST', 'update_task_details.php', true); xhr.open('POST', 'update_task_details.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() { xhr.onload = function() {
if (this.status === 200) { if (this.status === 200) {
alert('Tâche mise à jour avec succès.'); alert('Tâche mise à jour avec succès.');
document.getElementById('task-edit-menu').classList.remove('open');
location.reload(); location.reload();
} }
}; };
xhr.send(`task_id=${taskId}&task_name=${taskName}&description=${description}&category=${category}`);
const data = `task_id=${taskId}&task_name=${encodeURIComponent(taskName)}&description=${encodeURIComponent(description)}&tags=${encodeURIComponent(tags.join(','))}`;
xhr.send(data);
} }
</script> </script>
</body> </body>