2024-12-02 11:04:54 +01:00

159 lines
4.9 KiB
JavaScript

// Fonction pour ajouter une tâche
function ajoutTache() {
// Récupérer la valeur de la tâche entrée
var tache = document.getElementById("tacheInput").value;
// Vérifier si la tâche n'est pas vide
if (tache === "") {
alert("Veuillez saisir une tâche.");
return;
}
console.log('Here')
// Envoyer la tâche au serveur
fetch('/todo', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
},
body: JSON.stringify({
task: tache
})
})
.then(response => response.json())
.then(todo => {
console.log(todo)
// Créer un élément <div> pour la nouvelle tâche
var tacheDiv = document.createElement("div");
tacheDiv.className = "task";
tacheDiv.dataset.id = todo.id;
// Créer une checkbox pour marquer la tâche comme terminée
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.onchange = function () {
toggleTaskCompletion(tacheDiv, checkbox);
};
tacheDiv.appendChild(checkbox);
// Créer un élément <span> pour afficher la tâche
var tacheSpan = document.createElement("span");
tacheSpan.textContent = todo.task;
tacheDiv.appendChild(tacheSpan);
// Ajouter un bouton "Supprimer"
var suppButton = document.createElement("button");
suppButton.textContent = "Supprimer";
suppButton.className = "supp";
suppButton.onclick = suppTache;
tacheDiv.appendChild(suppButton);
// Ajouter un bouton "Modifier"
var modifButton = document.createElement("button");
modifButton.textContent = "Modifier";
modifButton.className = "modif";
modifButton.onclick = function () {
modifTache(tacheDiv, tacheSpan);
};
tacheDiv.appendChild(modifButton);
// Ajouter la tâche au conteneur
document.getElementById("listeTache").appendChild(tacheDiv);
// Réinitialiser le champ de saisie
document.getElementById("tacheInput").value = "";
})
.catch(error => {
console.error('Erreur:', error);
alert("Une erreur est survenue lors de l'ajout de la tâche.");
});
}
// Fonction pour supprimer une tâche
function suppTache() {
var tacheDiv = this.parentElement;
var taskId = tacheDiv.dataset.id;
fetch('/todo/' + taskId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
}
})
.then(response => {
if (response.ok) {
tacheDiv.remove();
} else {
throw new Error('Erreur lors de la suppression');
}
})
.catch(error => {
console.error('Erreur:', error);
alert("Une erreur est survenue lors de la suppression de la tâche.");
});
}
// Fonction pour marquer une tâche comme terminée (avec la checkbox)
function toggleTaskCompletion(tacheDiv, checkbox) {
if (checkbox.checked) {
tacheDiv.classList.add("completed");
} else {
tacheDiv.classList.remove("completed");
}
}
// Fonction pour modifier une tâche
function modifTache(tacheDiv, tacheSpan) {
// Créer un champ de texte pour modifier la tâche
var modifInput = document.createElement("input");
modifInput.type = "text";
modifInput.value = tacheSpan.textContent;
// Créer un bouton "Enregistrer"
var saveButton = document.createElement("button");
saveButton.textContent = "Enregistrer";
saveButton.className = "save";
// Remplacer le texte et les boutons actuels par le champ de texte et le bouton "Enregistrer"
tacheDiv.innerHTML = ""; // Supprime tout le contenu de la tâche
tacheDiv.appendChild(modifInput);
tacheDiv.appendChild(saveButton);
// Fonction pour enregistrer la modification
saveButton.onclick = function () {
if (modifInput.value === "") {
alert("Veuillez saisir une tâche valide.");
return;
}
tacheSpan.textContent = modifInput.value; // Mettre à jour le texte de la tâche
tacheDiv.innerHTML = ""; // Vider l'élément <div> à nouveau
tacheDiv.appendChild(checkbox); // Restaurer la checkbox
tacheDiv.appendChild(tacheSpan); // Restaurer la tâche modifiée
tacheDiv.appendChild(suppButton); // Restaurer le bouton "Supprimer"
tacheDiv.appendChild(modifButton); // Restaurer le bouton "Modifier"
};
// Re-créer les boutons de suppression et de modification après la sauvegarde
var suppButton = document.createElement("button");
suppButton.textContent = "Supprimer";
suppButton.className = "supp";
suppButton.onclick = suppTache;
var modifButton = document.createElement("button");
modifButton.textContent = "Modifier";
modifButton.className = "modif";
modifButton.onclick = function () {
modifTache(tacheDiv, tacheSpan);
};
// Restaurer la checkbox après modification
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.onchange = function () {
toggleTaskCompletion(tacheDiv, checkbox);
};
}