HumanBooster/tp-javascript-gestionnaire-taches
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit with existing project files

Browse Source
This commit is contained in:
Vincent Guillet
2025-07-12 11:20:23 +02:00
commit d90d85d002
7 changed files with 316 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
GestionnaireTaches.js Normal file
View File

@@ -0,0 +1,41 @@
export class GestionnaireTaches {
constructor() {
this.taches = [];
}
ajouterTache(tache) {
this.taches.push(tache);
}
supprimerTache(tache) {
const index = this.taches.indexOf(tache);
if (index !== -1) {
this.taches.splice(index, 1);
} else {
console.error("Tâche non trouvée");
}
}
filtrerParMots(chaine) {
if (!chaine) return this.taches;
return this.taches.filter(tache =>
tache.contientMot(chaine));
}
filtrerParDate(dateDebut, dateFin) {
return this.taches.filter(tache =>
tache.estEntreDates(dateDebut, dateFin));
}
afficherToutes() {
this.taches.forEach(tache =>
tache.afficher()
);
}
compterTaches(taches) {
return taches.length;
}
}

1
README.md Normal file
View File

@@ -0,0 +1 @@
# tp-javascript-gestionnaire-taches

52
Tache.js Normal file
View File

@@ -0,0 +1,52 @@
export class Tache {
constructor(titre, texte, date) {
this._titre = titre;
this._texte = texte;
this._date = date;
}
afficher() {
console.log(
`Titre: ${this._titre}
Texte: ${this._texte}
Date: ${this._date}`);
}
contientMot(mot) {
const regex = new RegExp(mot, 'gi');
return regex.test(this._titre) || regex.test(this._texte);
}
estEntreDates(dateDebut, dateFin) {
const dateTache = new Date(this._date);
const debut = new Date(dateDebut);
const fin = new Date(dateFin);
return dateTache >= debut && dateTache <= fin;
}
toLi() {
const li = document.createElement("li");
li.textContent = this.toString();
li.style.margin = "10px 0";
const deleteBtn = this.createDeleteButton();
li.appendChild(deleteBtn);
return li;
}
createDeleteButton() {
console.log("test");
const btn = document.createElement("button");
btn.className = "btn btn-danger";
btn.innerHTML = "<i class=\"bi bi-trash\"></i>";
btn.style.marginLeft = "10px";
return btn;
}
toString() {
return `Titre: ${this._titre}, Texte: ${this._texte}, Date: ${this._date}`;
}
}

17
TachePersonnelle.js Normal file
View File

@@ -0,0 +1,17 @@
import { Tache } from './Tache.js';
export class TachePersonnelle extends Tache {
constructor(titre, texte, date, lieu) {
super(titre, texte, date);
this._lieu = lieu;
}
afficher() {
super.afficher();
console.log(`Lieu: ${this._lieu}`);
}
toString() {
return `${super.toString()}, Lieu: ${this._lieu}`;
}
}

17
TacheProfessionnelle.js Normal file
View File

@@ -0,0 +1,17 @@
import { Tache } from './Tache.js';
export class TacheProfessionnelle extends Tache {
constructor(titre, texte, date, projet) {
super(titre, texte, date);
this._projet = projet;
}
afficher() {
super.afficher();
console.log(`Projet: ${this._projet}`);
}
toString() {
return `${super.toString()}, Projet: ${this._projet}`;
}
}

67
index.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestionnaire de Tâches</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<script type="module" src="main.js" defer></script>
</head>
<body class="bg-light">
<div class="container py-5">
<h1 class="mb-4" style="text-align: center">Gestionnaire de Tâches</h1>
<!-- Formulaire ajout tâche -->
<form id="form-ajout" class="row g-3 mb-4">
<div class="col-md-4">
<input type="text" id="titreTache" class="form-control" placeholder="Titre" name="titre" required>
</div>
<div class="col-md-4">
<input type="text" id="texteTache" class="form-control" placeholder="Texte" name="texte" required>
</div>
<div class="col-md-2">
<input type="date" id="dateTache" class="form-control" name="date" required>
</div>
<div class="col-md-2">
<select class="form-select" name="type">
<option value="1">Personnelle</option>
<option value="2">Professionnelle</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="custom-input" class="form-control">
</div>
<div class="col-md-4">
<button type="submit" id="ajouterTache" class="btn btn-primary w-100">Ajouter</button>
</div>
</form>
<hr>
<!-- Filtres -->
<div class="row g-3 mb-4">
<div class="col-md-4">
<input type="text" id="filtreMot" class="form-control" placeholder="Filtrer par mot-clé">
</div>
<div class="col-md-3">
<input type="date" id="dateDebut" class="form-control">
</div>
<div class="col-md-3">
<input type="date" id="dateFin" class="form-control">
</div>
<div class="col-md-2">
<button class="btn btn-secondary w-100" id="btnFiltrer">Filtrer</button>
</div>
</div>
<!-- Résultats -->
<div class="mb-3">
<h5>Toutes les tâches (<span id="compteur">0</span>)</h5>
<ul class="list-group" id="listeTaches"></ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

121
main.js Normal file
View File

@@ -0,0 +1,121 @@
import { TachePersonnelle } from "./TachePersonnelle.js";
import { TacheProfessionnelle } from "./TacheProfessionnelle.js";
import { GestionnaireTaches } from "./GestionnaireTaches.js";
const gestionnaire = new GestionnaireTaches();
const titre = document.getElementById("titreTache");
const texte = document.getElementById("texteTache");
const date = document.getElementById("dateTache");
//const addBtn = document.getElementById("ajouterTache");
const formAjout = document.getElementById("form-ajout");
const formSelect = document.querySelector(".form-select");
const customInput = document.getElementById("custom-input");
const compteur = document.getElementById("compteur");
let listeTaches = document.getElementById("listeTaches");
const btnFiltrer = document.getElementById("btnFiltrer");
gestionnaire.afficherToutes();
addEventListener("DOMContentLoaded", () => {
updatePlaceholderAndName();
});
formSelect.addEventListener("change", () => {
updatePlaceholderAndName();
});
formAjout.addEventListener("submit", (e) => {
e.preventDefault();
if (getSelectedOption() === "Personnelle") {
const tachePersonnelle = new TachePersonnelle(
titre.value,
texte.value,
date.value,
customInput.value
);
gestionnaire.ajouterTache(tachePersonnelle);
console.log(tachePersonnelle);
}
if (getSelectedOption() === "Professionnelle") {
const tacheProfessionnelle = new TacheProfessionnelle(
titre.value,
texte.value,
date.value,
customInput.value
);
gestionnaire.ajouterTache(tacheProfessionnelle);
console.log(tacheProfessionnelle);
}
const form = document.getElementById("form-ajout");
form.reset();
updatePlaceholderAndName();
compteur.innerText = gestionnaire.compterTaches(gestionnaire.taches);
afficherTaches();
});
btnFiltrer.addEventListener("click", (e) => {
e.preventDefault();
const motCle = document.getElementById("filtreMot").value;
const dateDebut = document.getElementById("dateDebut").value;
const dateFin = document.getElementById("dateFin").value;
if (motCle) {
listeTaches.innerHTML = "";
gestionnaire.filtrerParMots(motCle).forEach(tache => {
listeTaches.appendChild(tache.toLi());
});
} else if (dateDebut && dateFin) {
listeTaches.innerHTML = "";
gestionnaire.filtrerParDate(dateDebut, dateFin).forEach(tache => {
listeTaches.appendChild(tache.toLi());
});
} else {
afficherTaches();
}
});
function getSelectedOption() {
return formSelect.options[formSelect.selectedIndex].text;
}
function updatePlaceholderAndName() {
const selectedOption = getSelectedOption();
if (selectedOption === "Personnelle") {
customInput.setAttribute("placeholder", "Lieu");
customInput.setAttribute("name", "lieu");
}
if (selectedOption === "Professionnelle") {
customInput.setAttribute("placeholder", "Projet");
customInput.setAttribute("name", "projet");
}
}
function afficherTaches() {
listeTaches.innerHTML = "";
gestionnaire.taches.forEach(tache => {
listeTaches.appendChild(tache.toLi());
const deleteBtn = listeTaches.querySelector("li:last-child button");
deleteBtn.addEventListener("click", (e) => {
e.preventDefault();
gestionnaire.supprimerTache(tache);
compteur.innerText = gestionnaire.compterTaches(gestionnaire.taches);
afficherTaches();
});
});
}