pangloss/app/script.js

//-----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 = ["plum", "gold", "lightblue"];
        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);

        //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);
}