Remove tags / Add Categories

ruty/todo.php

@@ -3,9 +3,9 @@
     <title>Ruty - ToDo List</title>
     <link rel="stylesheet" href="styles/styletodo.css">
     <link rel="icon" href="img/logo.png">   
-    
+
     <style>
-        /* Style pour le bouton "+" */
+        /* Styles pour le bouton "+" et les menus */
         #add-task-button {
             position: fixed;
             bottom: 20px;
@@ -21,8 +21,8 @@
             cursor: pointer;
         }
 
-        /* Menu latéral d'ajout de tâche */
-        #task-menu {
+        /* Menu pour ajouter et modifier des tâches */
+        #task-menu, #task-edit-menu {
             position: fixed;
             top: 0;
             right: -400px;
@@ -35,37 +35,11 @@
             z-index: 10;
         }
 
-        #task-menu.open {
+        #task-menu.open, #task-edit-menu.open {
             right: 0;
         }
 
-        #close-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 {
+        #close-menu, #close-edit-menu {
             position: absolute;
             top: 10px;
             right: 10px;
@@ -85,11 +59,10 @@
         <h1 class="welcome">Ruty</h1>
     </header>
     <?php include 'menunav.php'; ?>
-    
-    <!-- Ajouter une nouvelle tâche -->
+
     <div id="add-task-button">+</div>
 
-    <!-- Menu latéral pour ajouter une tâche -->
+    <!-- Menu d'ajout de tâche -->
     <div id="task-menu">
         <span id="close-menu">&times;</span>
         <h2>Ajouter une tâche</h2>
@@ -100,21 +73,34 @@
             <label for="description">Description :</label><br>
             <textarea id="description" name="description"></textarea><br><br>
 
-            <label for="tags">Tags (séparés par des virgules) :</label><br>
-            <input type="text" id="tags" name="tags[]" placeholder="ex : urgent, maison"><br><br>
+            <label for="category">Catégorie :</label><br>
+            <input type="text" id="category" name="category" required placeholder="ex: Devoirs, Maison"><br><br>
 
             <input type="submit" value="Ajouter la tâche">
         </form>
     </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>
     <ul>
         <?php
         include 'todo_db.php';
 
-        // Sélectionner les tâches
-        $sql = "SELECT id, task_name, completed FROM tasks";
+        // Sélectionner les tâches avec leurs catégories
+        $sql = "SELECT id, task_name, completed, category FROM tasks";
         $result = $conn->query($sql);
 
         if ($result->num_rows > 0) {
@@ -122,10 +108,11 @@
                 $taskId = $row["id"];
                 $taskName = $row["task_name"];
                 $completed = $row["completed"] ? "checked" : "";
+                $category = $row["category"];
 
                 echo "<li onclick='openTaskMenu($taskId)'>";
                 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>";
             }
         } else {
@@ -136,7 +123,7 @@
         ?>
     </ul>
 
-    <!-- Menu latéral pour modifier une tâche -->
+    <!-- Menu de modification de tâche -->
     <div id="task-edit-menu">
         <span id="close-edit-menu">&times;</span>
         <h2>Modifier la tâche</h2>
@@ -149,41 +136,24 @@
             <label for="edit-description">Description :</label><br>
             <textarea id="edit-description" name="description"></textarea><br><br>
 
-            <label for="edit-tags">Tags (séparés par des virgules) :</label><br>
-            <input type="text" id="edit-tags" name="tags[]" placeholder="ex : urgent, maison"><br><br>
+            <label for="edit-category">Catégorie :</label><br>
+            <input type="text" id="edit-category" name="category" required><br><br>
 
             <input type="button" value="Modifier la tâche" onclick="updateTaskDetails()">
         </form>
     </div>
 
-    <!-- JavaScript pour gérer les menus -->
     <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) {
             const xhr = new XMLHttpRequest();
             xhr.open('GET', `get_task.php?task_id=${taskId}`, true);
             xhr.onload = function() {
                 if (this.status === 200) {
                     const task = JSON.parse(this.responseText);
-
                     document.getElementById('edit-task-id').value = task.id;
                     document.getElementById('edit-task-name').value = task.task_name;
                     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');
                 }
             };
@@ -194,42 +164,22 @@
             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() {
             const taskId = document.getElementById('edit-task-id').value;
             const taskName = document.getElementById('edit-task-name').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();
             xhr.open('POST', 'update_task_details.php', true);
             xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
             xhr.onload = function() {
                 if (this.status === 200) {
                     alert('Tâche mise à jour avec succès.');
-                    document.getElementById('task-edit-menu').classList.remove('open');
                     location.reload();
                 }
             };
-
-            const data = `task_id=${taskId}&task_name=${encodeURIComponent(taskName)}&description=${encodeURIComponent(description)}&tags=${encodeURIComponent(tags.join(','))}`;
-            xhr.send(data);
+            xhr.send(`task_id=${taskId}&task_name=${taskName}&description=${description}&category=${category}`);
         }
     </script>
 </body>