//-----BACKEND----- //création du tableau qui contiendra toutes les tâches var tableau_taches = []; function tri_duree_descend(table) { //De base, la fonction sort() transforme les éléments en chaîne //de caractère pour les comparer //On force la comparaison sur des chiffres avec la syntaxe //"function comparaison" table.sort((b,a) => { return a.duree - b.duree }); return table; } //définition de l'objet tâche class Tache { //Identifiant de la tâche - integer identifiant = 0; //Nom de la tâche - chaîne de caractères nom = "default"; //Durée en heures - float duree = 0.0; //Date de fin - date datefin; //Tache à faire avant la tâche courante - instance de classe //TODO implémenter cette fonctionnalité est_bloque_par; //Priorité - integer entre 1 et 3 priorite = 3; //l'utilisateur définit le nom de la tâche et sa durée + //crée un identifiant unique aléatoire entre 0 et 9999 constructor(nom, duree, datefin, priorite) { this.nom = nom; this.duree = duree; this.datefin = datefin; this.priorite = priorite; this.identifiant = Math.floor(Math.random()*10000); } //fonction qui ajoute une date de début ou de fin en fonction des inputs disponibles ajoute_date(debut, fin, duree){ if (this.debut != None){ } } } //-----FRONTEND----- //ajoute le contenu du tableau dans des div correspondant chacune //à un postit function update_postit(table) { //identifie la div qui contient les tâches let element = document.getElementById("conteneur"); //supprime les post-it existants de la balise div id "conteneur" while (element.firstChild){ element.removeChild(element.firstChild); } //parcours le tableau de tâches et récupère les variables var longueur = table.length; for (let i = 0; i < longueur; i++ ) { let displayid = table[i].identifiant; let displayname = table[i].nom; let displayduration = table[i].duree; let displayenddate = table[i].datefin; let displaypriority = table[i].priorite; //crée une div qui contient les éléments de la tâche let balise = document.createElement("div"); //on change la couleur de la balise en fonction de la priorité de la tâche //1 = rouge, 2 = orange, 3 = jaune //TODO permettre la customisation de ces couleurs let couleurs = ["crimson", "gold", "mediumturquoise"]; balise.style.backgroundColor = couleurs[displaypriority - 1] balise.classList.add("tache"); //titre de la tâche (son nom) let titre = document.createElement("h3"); let textetitre = document.createTextNode(displayname); titre.appendChild(textetitre); titre.classList.add("titre_tache"); //on ajoute le titre à la page HTML dans la div conteneur balise.appendChild(titre); //puis on rajoute un séparateur let separator = document.createElement("hr"); balise.appendChild(separator); //corps de la tâche let duree = "durée " + displayduration + "h"; let datefin = "à faire avant le " + displayenddate; //liste qui contient les éléments à ajouter var liste = [duree, datefin]; //boucle de création des éléments à ajouter for (let p = 0; p < liste.length; p++){ //ajoute le texte courant let chunck = document.createTextNode(liste[p]); let paragraph = document.createElement("p"); paragraph.appendChild(chunck); paragraph.classList.add("corps_tache"); //ajoute l'élément au corps de texte de la tâche balise.appendChild(paragraph); } // en bas, on ajoute l'îcone de suppression de la tâche let poubelle = document.createElement("img"); poubelle.src="ico/poubelle.png"; poubelle.classList.add("poubelle"); poubelle.addEventListener('click',function(){ remove_task(displayid); }); balise.appendChild(poubelle); //ajout l'identifiant unique comme id à la div de la tâche balise.setAttribute('id', displayid); //si urgent, mettre le texte et le hr en blanc if (displaypriority == 1){ balise.style.color = "whitesmoke"; separator.style.color = "whitesmoke"; poubelle.style.filter = "invert(100%)"; poubelle.style.opacity = "90%"; } //ajoute la div de la tâche au conteneur element.appendChild(balise); } } //-----INTERACTIVITÉ------ function createtask(){ //on récupère l'input de l'utilisateur.ice let taskname = document.getElementById("nom").value; let taskduration = document.getElementById("duree").value; let taskdatefin = document.getElementById("datefin").value; let taskpriorite = document.querySelector('input[name="priorite"]:checked').value; //on instancie une tâche avec les valeurs de l'utilisateur.ice let tache = new Tache(taskname, taskduration, taskdatefin, taskpriorite); //on ajoute la nouvelle tâche à la fin au tableau de tâches tableau_taches.push(tache); //on calcule les dates de début et de fin de la tâche en fonction //des inputs envoyés //TODO à implémenter //tache.ajoute_date(taskdatefin, taskduration); //-----TRI PAR DÉFAUT //appel de la fonction qui trie les tâches dans le tableau // de la plus longue à la plus courte tri_duree_descend(tableau_taches); //update de l'affichage de la liste des tâches en HTML update_postit(tableau_taches); } // fonction de suppression de la tâche courante function remove_task(id) { //trouve l'index de la tâche du tableau grâce à son id let taskindex = tableau_taches.findIndex(item => item.identifiant === id); //retire la tâche du tableau des tâches tableau_taches.splice(taskindex, 1); //on update l'affichage du tableau des tâches update_postit(tableau_taches); }