diff --git a/TODO.md b/TODO.md
new file mode 100644
index 0000000..a5a37a0
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 2f95b67..914eae9 100644
--- a/app/index.html
+++ b/app/index.html
@@ -18,12 +18,30 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/script.js b/app/script.js
index 1dd95e6..adbe920 100644
--- a/app/script.js
+++ b/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
- priorite = 0;
+ //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, 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 = "au " + displayenddate;
+ let datefin = "à faire avant le " + 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) {
- alert(id);
+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
+ //on update l'affichage du tableau des tâches
update_postit(tableau_taches);
}
\ No newline at end of file
diff --git a/app/style.css b/app/style.css
index b425ea8..28270e8 100644
--- a/app/style.css
+++ b/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;
}
\ No newline at end of file