TODO.md

@@ -0,0 +1,10 @@
+Durée : faire une option pour une déterminer une durée min et max + moyenne
+
+Mettre une date butoir et une date critique
+
+Mettre les dates au format humain : le vendredi 11 septembre
+(enlever l'année +  mettre au fromat français)
+
+Mettre option rayer les tâches faites (done)
+
+Mettre des indicateurs de ressenti (content, pas content) quand done

app/index.html

@@ -18,12 +18,30 @@
             <label for="duree">Durée de la tâche (en h)</label>
             <input type="number" id="duree" name ="duree"/>
 
-            <label for="datedebut">Date de début</label>
-            <input type="date" id="datedebut" name ="datedebut"/>
-
             <label for="datefin">Date de fin</label>
             <input type="date" id="datefin" name ="datefin"/>
 
+            <label>Priorité</label>
+
+            <div class="radio-conteneur">
+              
+              <!-- TODO synchroniser la customisation de couleurs
+              par l'utilisateur en js -->
+              <span class="radio_line">
+                <label for="priorite" style="color:darkviolet;">Urgent</label>
+                <input type="radio" name ="priorite" class="radio" value="1"/>
+              </span>
+              <span class="radio_line">
+                <label for="priorite" style="color:darkgoldenrod;">Normal</label>
+                <input type="radio" name ="priorite" class="radio" value="2"/>
+              </span>
+              <span class="radio_line">
+                <label for="priorite" style="color:darkblue;">Peut attendre</label>
+                <input type="radio" name ="priorite" class="radio" value="3"/>
+              </span>
+            
+            </div>
+
             <div class="separateur"></div>
 
 

app/script.js

@@ -17,28 +17,28 @@ function tri_duree_descend(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 début - date
-        //par défaut, c'est la date du jour
-        datedebut;
         //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
+        //Priorité - integer entre 1 et 3
-        priorite = 0;
+        priorite = 3;
 
-    //l'utilisateur définit le nom de la tâche et sa durée
+    //l'utilisateur définit le nom de la tâche et sa durée + 
-    constructor(nom, duree, datedebut, datefin) {
+    //crée un identifiant unique aléatoire entre 0 et 9999
+    constructor(nom, duree, datefin, priorite) {
         this.nom = nom;
         this.duree = duree;
-        this.datedebut = datedebut;
         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
@@ -56,7 +56,8 @@ class Tache {
 function update_postit(table) {
 
     //identifie la div qui contient les tâches
-    var element = document.getElementById("conteneur");
+    let element = document.getElementById("conteneur");
+
     //supprime les post-it existants de la balise div id "conteneur"
     while (element.firstChild){
         element.removeChild(element.firstChild);
@@ -64,13 +65,19 @@ function update_postit(table) {
     //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 displaystartdate = table[i].datedebut;    
         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");
@@ -79,16 +86,16 @@ function update_postit(table) {
             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 datedebut = "du " + displaystartdate;
+            let datefin = "à faire avant le " + displayenddate;
-            let datefin = "au " + displayenddate;
             //liste qui contient les éléments à ajouter
-            var liste = [duree, datedebut, datefin];
+            var liste = [duree, datefin];
             //boucle de création des éléments à ajouter
             for (let p = 0; p < liste.length; p++){
                 //ajoute le texte courant
@@ -96,11 +103,23 @@ function update_postit(table) {
                 let paragraph = document.createElement("p");
 
                 paragraph.appendChild(chunck);
-                paragraph.classList.add("corps_tache")
+                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);
     }
@@ -112,17 +131,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 taskdatedebut = document.getElementById("datedebut").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, taskdatedebut, taskdatefin);
+    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(taskdatedebut, taskdatefin, taskduration);
+    //tache.ajoute_date(taskdatefin, taskduration);
 
     //-----TRI PAR DÉFAUT
     //appel de la fonction qui trie les tâches dans le tableau
@@ -133,3 +152,13 @@ function createtask(){
     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);
+}

app/style.css

@@ -6,7 +6,7 @@
 
 body{
     font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    background-image: url(https://t3.ftcdn.net/jpg/09/18/51/88/360_F_918518811_e0Wh732g7nIS9hsyi7ox9wWhguruEEgx.jpg);
+    background-image: url('img/liege.jpg');
     background-size: 500px;
     font-weight: 400;
     display: flex;
@@ -43,7 +43,7 @@ nav{
     min-height: 100vh;
     text-align: center;
     padding:15px;
-    background-image: url('https://img.freepik.com/free-photo/yellow-sponge-rubber-texture-background_1373-524.jpg?semt=ais_hybrid');
+    background-image: url('img/nav.avif');
     background-size: 300px;
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 
@@ -93,13 +93,16 @@ button:hover{
 }
 
 #conteneur{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
     flex: 7;
     padding: 10px;
 }
 
 #commandes{
     background-color: rgba(255, 255, 255, 0.171);
-
 }
 
 .tache{
@@ -110,6 +113,7 @@ button:hover{
     flex-direction: column;
     align-items: center;
     width: 200px;
+    height: fit-content;
     background-color: gold;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
     padding: 15px;
@@ -118,6 +122,15 @@ button:hover{
     -o-transform: rotate(2deg);
     -ms-transform: rotate(2deg);
     transform: rotate(2deg);
+    transition: all 300ms;
+}
+
+.tache:hover{
+    rotate:(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
 }
 
 .titre_tache{
@@ -130,5 +143,42 @@ button:hover{
 .corps_tache{
     margin: 0;
     padding: 5px;
+    text-align: center;
 
 }
+
+.poubelle{
+    width: 20px;
+    opacity: 50%;
+    transition: all 500ms;
+    margin-top: 5px;
+}
+
+.poubelle:hover{
+    opacity: 90%;
+}
+
+.radio-conteneur{
+    margin-top: 5px;
+    padding: 10px;
+    background-color: lightyellow;
+    border-radius: 10px;
+    width: 80%;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.radio_line{
+    display: flex;
+    width: 80%;
+    justify-content: right;
+}
+
+.radio{
+    width: 15px;
+    margin-left: 1vw;
+    position: relative;
+    top: 4px;
+}