Add features
This commit is contained in:
WhyKorp
@@ -140,3 +140,17 @@ li.nav2:hover {
|
|||||||
stroke-dashoffset: 0;
|
stroke-dashoffset: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Styles CSS pour le menu contextuel */
|
||||||
|
.task-menu {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
min-width: 150px;
|
||||||
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||||
|
padding: 12px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.task-menu-item {
|
||||||
|
padding: 8px 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
+68
-44
@@ -1,31 +1,5 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<?php
|
|
||||||
// Connexion à la base de données
|
|
||||||
$conn = mysqli_connect("localhost", "user1", "admin123", "ruty");
|
|
||||||
|
|
||||||
// Vérifier la connexion
|
|
||||||
if ($conn->connect_error) {
|
|
||||||
die("Erreur de connexion à la base de données : " . $conn->connect_error);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sélectionner les tâches depuis la base de données
|
|
||||||
$sql = "SELECT id, task_name, completed FROM tasks";
|
|
||||||
$result = $conn->query($sql);
|
|
||||||
|
|
||||||
if ($result->num_rows > 0) {
|
|
||||||
while($row = $result->fetch_assoc()) {
|
|
||||||
$taskId = $row["id"];
|
|
||||||
$taskName = $row["task_name"];
|
|
||||||
$completed = $row["completed"] ? "checked" : "";
|
|
||||||
|
|
||||||
echo "<li><input type='checkbox' $completed onchange='updateTask($taskId, this.checked)'> $taskName</li>";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
echo "Aucune tâche trouvée.";
|
|
||||||
}
|
|
||||||
$conn->close();
|
|
||||||
?>
|
|
||||||
<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">
|
||||||
@@ -46,25 +20,75 @@
|
|||||||
|
|
||||||
<!-- Liste de tâches -->
|
<!-- Liste de tâches -->
|
||||||
<h2>Tâches en cours</h2>
|
<h2>Tâches en cours</h2>
|
||||||
<!-- <script>
|
<ul id="todo-list">
|
||||||
for(i = 0; i < <?php echo $row ?>; i++){
|
<?php
|
||||||
container.innerHTML(
|
// Connexion à la base de données
|
||||||
<div class="checkbox-wrapper">
|
$conn = mysqli_connect("localhost", "user1", "admin123", "ruty");
|
||||||
<input id="terms-checkbox-37" name="checkbox" type="checkbox">
|
|
||||||
<label class="terms-label" for="terms-checkbox-37">
|
// Vérifier la connexion
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
|
if ($conn->connect_error) {
|
||||||
<mask fill="white" id="path-1-inside-1_476_5-37">
|
die("Erreur de connexion à la base de données : " . $conn->connect_error);
|
||||||
<rect height="200" width="200"></rect>
|
|
||||||
</mask>
|
|
||||||
<rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect>
|
|
||||||
<path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="label-text">Checkbox</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
</script>-->
|
|
||||||
|
// Sélectionner les tâches depuis la base de données
|
||||||
|
$sql = "SELECT id, task_name, completed FROM tasks";
|
||||||
|
$result = $conn->query($sql);
|
||||||
|
|
||||||
|
if ($result->num_rows > 0) {
|
||||||
|
while($row = $result->fetch_assoc()) {
|
||||||
|
$taskId = $row["id"];
|
||||||
|
$taskName = $row["task_name"];
|
||||||
|
$completed = $row["completed"] ? "checked" : "";
|
||||||
|
|
||||||
|
echo "<li><input type='checkbox' $completed onchange='updateTask($taskId, this.checked)'> $taskName</li>";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
echo "Aucune tâche trouvée.";
|
||||||
|
}
|
||||||
|
$conn->close();
|
||||||
|
?>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Menu contextuel pour la tâche -->
|
||||||
|
<div id="task-menu" class="task-menu">
|
||||||
|
<div id="task-name"></div>
|
||||||
|
<div id="task-status"></div>
|
||||||
|
<div id="task-description"></div>
|
||||||
|
<div id="task-tags"></div>
|
||||||
|
<button id="edit-task">Modifier</button>
|
||||||
|
<button id="delete-task">Supprimer</button>
|
||||||
|
<button id="close-menu">Fermer</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
const todoList = document.getElementById("todo-list");
|
||||||
|
const taskMenu = document.getElementById("task-menu");
|
||||||
|
|
||||||
|
// Afficher le menu contextuel lorsqu'une tâche est cliquée
|
||||||
|
todoList.addEventListener("click", function(event) {
|
||||||
|
const targetTask = event.target.closest(".task");
|
||||||
|
if (targetTask) {
|
||||||
|
const taskId = targetTask.getAttribute("data-task-id");
|
||||||
|
const taskName = targetTask.textContent;
|
||||||
|
const taskMenuItems = taskMenu.querySelectorAll(".task-menu-item");
|
||||||
|
document.getElementById("task-name").textContent = "Nom de la tâche: " + taskName;
|
||||||
|
document.getElementById("task-status").textContent = "État de la tâche: Complétée/Incomplète";
|
||||||
|
document.getElementById("task-description").textContent = "Description de la tâche: Description de la tâche ici.";
|
||||||
|
document.getElementById("task-tags").textContent = "Tags associés à la tâche: Tag1, Tag2";
|
||||||
|
taskMenuItems.forEach(item => item.style.display = "block"); // Afficher les éléments du menu
|
||||||
|
taskMenu.style.display = "block"; // Afficher le menu
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Fermer le menu contextuel lorsque le bouton "Fermer" est cliqué
|
||||||
|
document.getElementById("close-menu").addEventListener("click", function() {
|
||||||
|
taskMenu.style.display = "none";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</script>
|
||||||
<!-- Script pour mettre à jour l'état d'une tâche -->
|
<!-- Script pour mettre à jour l'état d'une tâche -->
|
||||||
<script>
|
<script>
|
||||||
function updateTask(taskId, completed) {
|
function updateTask(taskId, completed) {
|
||||||
|
|||||||
Reference in New Issue
Block a user