supression fonctionnelle + priorités couleur

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

@@ -23,23 +23,21 @@ class Tache {
         nom = "default";
         //Durée en heures - float
         duree = 0.0;
-        //Date de début - date
-        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 + 
     //crée un identifiant unique aléatoire entre 0 et 9999
-    constructor(nom, duree, datedebut, datefin) {
+    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);
     }
 
@@ -58,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);
@@ -69,11 +68,16 @@ function update_postit(table) {
         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 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");
@@ -89,10 +93,9 @@ function update_postit(table) {
             
             //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
@@ -115,7 +118,7 @@ function update_postit(table) {
             balise.appendChild(poubelle);
             
         //ajout l'identifiant unique comme id à la div de la tâche
-        element.setAttribute('id', displayid);
+        balise.setAttribute('id', displayid);
 
         //ajoute la div de la tâche au conteneur
         element.appendChild(balise);
@@ -128,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
@@ -149,13 +152,13 @@ function createtask(){
     update_postit(tableau_taches);
     
 }
+
 // fonction de suppression de la tâche courante
-function remove_task(id) {
+function remove_task(id) {    
-    alert(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
+    //on update l'affichage du tableau des tâches
     update_postit(tableau_taches);
 }

app/style.css

@@ -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;
@@ -139,6 +143,7 @@ button:hover{
 .corps_tache{
     margin: 0;
     padding: 5px;
+    text-align: center;
 
 }
 
@@ -151,4 +156,29 @@ button:hover{
 
 .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;
 }