first commit with existing project files
This commit is contained in:
Vincent Guillet
41
GestionnaireTaches.js
Normal file
41
GestionnaireTaches.js
Normal 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;
|
||||
}
|
||||
}
|
||||
52
Tache.js
Normal file
52
Tache.js
Normal 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
17
TachePersonnelle.js
Normal 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
17
TacheProfessionnelle.js
Normal 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
67
index.html
Normal 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
121
main.js
Normal 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();
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user