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

Add features

Browse Source
This commit is contained in:
WhyKorp
2024-03-11 20:07:36 +01:00
committed by GitHub
parent 406e4f1c1b
commit a8e49cf47f
2 changed files with 83 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ruty/styles/styletodo.css
+14
View File
@@ -140,3 +140,17 @@ li.nav2:hover {
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;
}
ruty/todo.php
+68 -44
View File
@@ -1,31 +1,5 @@
<html>
<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>
<link rel="stylesheet" href="styles/styletodo.css">
<link rel="icon" href="img/logo.png">
@@ -46,25 +20,75 @@
<!-- Liste de tâches -->
<h2>Tâches en cours</h2>
<!-- <script>
for(i = 0; i < <?php echo $row ?>; i++){
container.innerHTML(
<div class="checkbox-wrapper">
<input id="terms-checkbox-37" name="checkbox" type="checkbox">
<label class="terms-label" for="terms-checkbox-37">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg">
<mask fill="white" id="path-1-inside-1_476_5-37">
<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>
);
<ul id="todo-list">
<?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);
}
</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>
function updateTask(taskId, completed) {