From 47c219e2d82aa61a56b7dabcbcbf0c8eb5b6ebf8 Mon Sep 17 00:00:00 2001 From: electro positron Date: Sat, 9 Nov 2024 04:23:46 +0100 Subject: [PATCH 1/2] ajout date js (non fonctionnel) --- app/index.html | 11 +++++++++++ app/script.js | 20 ++++++++++++++++---- app/style.css | 2 +- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/app/index.html b/app/index.html index e6fa52b..2f95b67 100644 --- a/app/index.html +++ b/app/index.html @@ -14,8 +14,19 @@
+ + + + + + + + +
+ +
diff --git a/app/script.js b/app/script.js index ef2b337..e161fba 100644 --- a/app/script.js +++ b/app/script.js @@ -24,9 +24,9 @@ class Tache { duree = 0.0; //Date de début - date //par défaut, c'est la date du jour - date_debut; + datedebut; //Date de fin - date - date_fin; + datefin; //Tache à faire avant la tâche courante - instance de classe //TODO implémenter cette fonctionnalité est_bloque_par; @@ -34,9 +34,16 @@ class Tache { priorite = 0; //l'utilisateur définit le nom de la tâche et sa durée - constructor(nom, duree) { + constructor(nom, duree, datedebut, datefin) { this.nom = nom; this.duree = duree; + this.datedebut = datedebut; + this.duree = datefin; + } + + //fonction qui ajoute une date de début ou de fin en fonction des inputs disponibles + ajoute_date(){ + } } @@ -80,19 +87,24 @@ function update_postit(table) { } } -//-----INTERRACTIVITÉ------ +//-----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 tasdatedebut = document.getElementById("datedebut").value; + let taskdatefin = document.getElementById("datefin").value; //on instancie une tâche avec les valeurs de l'utilisateur.ice let tache = new Tache(taskname, taskduration); //on ajoute la nouvelle tâche à la fin au tableau de tâches tableau_taches.push(tache); + + //-----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); diff --git a/app/style.css b/app/style.css index b6c5002..625bc77 100644 --- a/app/style.css +++ b/app/style.css @@ -58,7 +58,7 @@ input{ background-color: lightyellow; border: none; margin-top: 5px; - margin-bottom: 25px; + margin-bottom: 5px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; } -- 2.39.5 From 2658aa8d0884619cdbe73e1b36a3802e4ed02d42 Mon Sep 17 00:00:00 2001 From: electro positron Date: Sat, 9 Nov 2024 05:09:13 +0100 Subject: [PATCH 2/2] affichage date fonctionnel --- app/script.js | 47 +++++++++++++++++++++++++++++++++++------------ app/style.css | 3 ++- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/app/script.js b/app/script.js index e161fba..41625af 100644 --- a/app/script.js +++ b/app/script.js @@ -38,12 +38,14 @@ class Tache { this.nom = nom; this.duree = duree; this.datedebut = datedebut; - this.duree = datefin; + this.datefin = datefin; } //fonction qui ajoute une date de début ou de fin en fonction des inputs disponibles - ajoute_date(){ + ajoute_date(debut, fin, duree){ + if (this.debut != None){ + } } } @@ -63,7 +65,10 @@ function update_postit(table) { var longueur = table.length; for (let i = 0; i < longueur; i++ ) { let displayname = table[i].nom; - let displayduration = table[i].duree; + let displayduration = table[i].duree; + let displaystartdate = table[i].datedebut; + let displayenddate = table[i].datefin; + //crée une div qui contient les éléments de la tâche let balise = document.createElement("div"); balise.classList.add("tache"); @@ -72,16 +77,30 @@ function update_postit(table) { 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 corps = document.createElement("p"); - let textecorps = document.createTextNode("durée " + displayduration + "h"); - corps.appendChild(textecorps); - corps.classList.add("corps_tache") + let duree = "durée " + displayduration + "h"; + let datedebut = "du " + displaystartdate; + let datefin = "au " + displayenddate; + //liste qui contient les éléments à ajouter + var liste = [duree, datedebut, datefin]; + //boucle de création des élémets à 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); + } - //on ajoute le contenu au div de la tâche - balise.appendChild(titre); - balise.appendChild(corps); //ajoute la div de la tâche au conteneur element.appendChild(balise); } @@ -93,13 +112,17 @@ 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 tasdatedebut = document.getElementById("datedebut").value; + let taskdatedebut = document.getElementById("datedebut").value; let taskdatefin = document.getElementById("datefin").value; //on instancie une tâche avec les valeurs de l'utilisateur.ice - let tache = new Tache(taskname, taskduration); + let tache = new Tache(taskname, taskduration, taskdatedebut, taskdatefin); //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 + //tache.ajoute_date(taskdatedebut, 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 diff --git a/app/style.css b/app/style.css index 625bc77..5238b6f 100644 --- a/app/style.css +++ b/app/style.css @@ -127,7 +127,8 @@ button:hover{ } -.corps.tache{ +.corps_tache{ margin: 0; + padding: 5px; } \ No newline at end of file -- 2.39.5