From 18a1958b9785d5c29630220a0dc9ac4dee326662 Mon Sep 17 00:00:00 2001 From: Katleen SORHAINDO Date: Fri, 19 May 2023 20:16:22 +0200 Subject: [PATCH] correction eventlistener --- Backend/db.sqlite | Bin 0 -> 28672 bytes FrontEnd/ApiDataProvider.js | 25 ++++++++ FrontEnd/CardBuilder.js | 34 +++++++++++ FrontEnd/EventListener.js | 46 ++++++++++++++ FrontEnd/index.js | 117 ++++++++++++++++++++++++++++++++++++ FrontEnd/main.js | 15 +++++ 6 files changed, 237 insertions(+) create mode 100644 Backend/db.sqlite create mode 100644 FrontEnd/ApiDataProvider.js create mode 100644 FrontEnd/CardBuilder.js create mode 100644 FrontEnd/EventListener.js create mode 100644 FrontEnd/index.js create mode 100644 FrontEnd/main.js diff --git a/Backend/db.sqlite b/Backend/db.sqlite new file mode 100644 index 0000000000000000000000000000000000000000..f6bd01cd1353e45d5d60ac257246a63b4e9a9b50 GIT binary patch literal 28672 zcmeI*ZEw>?902fh+{QI+W26ZgB&J;@n25khoWyxxnns!$$QF{4rrj!#8Yej#gBu6i zX@OUm?MqDBUT-h9S7@IC_5r3%nuPYCeSo38-1(A_!kRENq^aU><-t#P|GVE^q+G6c z*RGaLkKh}&vtxKTg^nVQLl-bc2+8y*(C293>B`J#gT8b7)+epXD0VHmDE)=P3qK$! zCVe0IDRMIM72SXZ1V8`;KmY_l00ck)1V8`;UYEdw3t>T)W$v>r&uCg?&vtIP>_sTn z^g><7^}=#l#|^fxfzLF|b_16xb^VfF!>hH@l|pS3f242X!g{@0s?bDN^h*64Zg{3= zkp|u<)QXo2wKGXgi{eVPjw|csGCgeW7~5psu_m9$KEs`XExUYkhSks7SG}RxGUOG`(Je`vSXN&y3Ejkwr|gHgFa0A&4Ily8V!Zz_vJ}Ste{&edke<$bHPV#kv=); zYeXNgfB*=900@8p2!H?xfB*=900@8p2>j0i8{90)`m?Ux>zE|gwED!l;1So0c~<*W zvUy5PoT}bkZ|=I~E0=rm?SA6cYOQzc!+0#KW$(pSmPux}EN>+_a0? zvPzE7dU4Y4h(2He0T2KI5C8!X009sH0T2KI5C8!XINSoq`K);0ZwJBrKQH}=q^Htv z^bHme009sH0T2KI5C8!X009sH0T2Lz!zCc{yv(u7TNWcBeu*1j8NttSyezT{0S4p$ zM@afp`bBzlxGD&x1pyEM0T2KI5C8!X009sH0T2LzH&8(4d8A#oJz}}|UF^_{1B||7 zbUjxJ@#u7+*E1ZC>=3#`G8Jstf`k00JNY0w4ea zAOHd&00JNY0*6fCIInRBjsN+h{Aq6g_&+4_C&a<{KbZfYpMQv?Z>4JF=g4m4t;O#a z%L{)je7dkS|8QQI-~S%~4w(lO7X&~61V8`;KmY_l00brrd~?iyn-hb3YIQuXcRn7s z?3Q75Y}Y%lWwN+TJtde>Q@UhNX%nkssu@kqWpn9dUQ6a;z3z5! zlkJVyk!v!SOCBf(IEtes)CBvigu1+dF8S|pV(r;EN=O}p>ly3sMa)BCJ3I92i3se?Q-xpXS8vA*;-YGMMB literal 0 HcmV?d00001 diff --git a/FrontEnd/ApiDataProvider.js b/FrontEnd/ApiDataProvider.js new file mode 100644 index 000000000..f939106e2 --- /dev/null +++ b/FrontEnd/ApiDataProvider.js @@ -0,0 +1,25 @@ +export default class ApiDataProvider { + getProjects = fetch("http://localhost:5678/api/works") + .then((res) => res.json()) + .then((projects) => { + return projects; + }); + + getProjectsByCategory = (category) => { + fetch("http://localhost:5678/api/works") + .then((res) => res.json()) + .then((projects) => { + return projects; + }); + }; + + getCategories = fetch("http://localhost:5678/api/categories") + .then((res) => res.json()) + .then((categories) => { + let categoriesSet = new Set(); + categories.map((category) => { + categoriesSet.add(category); + }); + return categoriesSet; + }); +} diff --git a/FrontEnd/CardBuilder.js b/FrontEnd/CardBuilder.js new file mode 100644 index 000000000..4d1a5230f --- /dev/null +++ b/FrontEnd/CardBuilder.js @@ -0,0 +1,34 @@ +export default class CardBuilder { + // methode pour afficher les projets + async displayProjects(projects) { + projects.map((project) => { + const gallery = document.querySelector(".gallery"); + const figureEl = document.createElement("figure"); + const imageEl = document.createElement("img"); + const figcaptionEl = document.createElement("figcaption"); + imageEl.src = project.imageUrl; + imageEl.alt = project.title; + figcaptionEl.innerText = project.title; + figureEl.dataset.type = project.category.name; + gallery.appendChild(figureEl); + figureEl.appendChild(imageEl); + figureEl.appendChild(figcaptionEl); + }); + } + // fonction pour afficher les boutons du filtre + async displayCategories(categories) { + const buttonFilter = document.querySelector(".button-filter"); + const btnTous = document.createElement("button"); + btnTous.innerText = "Tous"; + btnTous.className = "categorie-button"; + btnTous.dataset.type = "Tous"; + buttonFilter.appendChild(btnTous); + for (let category of categories) { + const btn = document.createElement("button"); + btn.innerText = category.name; + btn.className = "categorie-button"; + btn.dataset.type = category.name; + buttonFilter.appendChild(btn); + } + } +} diff --git a/FrontEnd/EventListener.js b/FrontEnd/EventListener.js new file mode 100644 index 000000000..a657abe9e --- /dev/null +++ b/FrontEnd/EventListener.js @@ -0,0 +1,46 @@ +import Projects from "./ApiDataProvider.js"; + +// // Missions : + +// // Pouvoir cliquer sur les boutons du Filtre +// // Au clic ajouter du style au bouton +// // Au clic faire un filtre pour faire disparaitre ou apparaitre des projets +// // Attention par défault c'est le bouton Tous qui est cliqué +// // Attention, quand on clic sur un autre bouton, les autres eventListener se réinitialise sur les autres boutons +// // Attention, la page ne doit pas se recharger (e.preventdefault) + +export default class EvenListener { + dispatch() { + this.listenClickOnButtonFilter(); + } + listenClickOnButtonFilter() { + document + .querySelector(".button-filter") + .addEventListener("click", (event) => { + const isButtonFilter = + event.target.classList.contains("categorie-button"); + console.log(isButtonFilter); + }); + } +} + +// export async function EventListener() { +// const resultCategories = new Projects(); +// const resultButton = await resultCategories.getCategories; +// const buttons = document.querySelectorAll(".categorie-button"); +// // console.log(buttons); +// buttons.forEach((button) => { +// button.addEventListener("click", (e) => { +// // console.log("test"); +// const typeSelect = e.target.dataset["type"]; +// // console.log(typeSelect); +// if (typeSelect === "Tous") { +// document.querySelector("figure").style.display = "block"; +// } else { +// } +// document.querySelector( +// "figure[data-type = " + typeSelect + "]" +// ).style.display = "none"; +// }); +// }); +// } diff --git a/FrontEnd/index.js b/FrontEnd/index.js new file mode 100644 index 000000000..6708b2fbe --- /dev/null +++ b/FrontEnd/index.js @@ -0,0 +1,117 @@ +// // Etape 1 - Récupération des travaux depuis le back-end avec fetch + +async function fetchProjects() { + await fetch("http://localhost:5678/api/works") + .then((res) => res.json()) + .then((data) => { + projectsDisplay(data); + }); +} + +// // afficher les éléments + +function projectsDisplay(projectsData) { + for (let i = 0; i < projectsData.length; i++) { + const projects = projectsData[i]; + // Récupération de l'élément du DOM qui accueillera les projets + const sectionProjets = document.querySelector(".gallery"); + + //création d'une balise dédié à un projet + const figureElement = document.createElement("figure"); + // on crée l'élément image + const imageElement = document.createElement("img"); + // on accède à l'indice i de la liste des projets pour configurer la source et l'alternative + imageElement.src = projects.imageUrl; + imageElement.alt = projects.title; + // on crée le figcaption + const figcaptionElement = document.createElement("figcaption"); + figcaptionElement.innerText = projects.title; + + // on rattache notre figure à notre section + sectionProjets.appendChild(figureElement); + // on rattache notre image à notre figure + figureElement.appendChild(imageElement); + // on rattache notre figcaption à notre figure + figureElement.appendChild(figcaptionElement); + } +} + +window.addEventListener("load", fetchProjects); + +// Etape 1.2 Réalisation du filtre + +// les 3 catégories se trouvent dans l'API donc nouveau fetch + +// async function getCategories() { +// await fetch("http://localhost:5678/api/categories") +// .then((data) => data.json()) +// .then((categories) => { +// let categoriesSet = new Set(); +// categories.map((category) => { +// categoriesSet.add(category); +// }); +// // console.log(categoriesSet); +// return categoriesSet; +// }); +// } + +// // afficher les boutons pour le filtre + +// function buttonDisplay(categoriesData) { +// for (let i = 0; i < categoriesData.length; i++) { +// const category = categoriesData[i]; +// // Récupération de l'élément du DOM qui accueillera les projets +// const button = document.getElementById("button"); +// console.log(button); +// } +// } + +// getCategories(); + +// Créer les 4 boutons avec createElement + +//récupération de l'élément du Dom +const button = document.querySelector(".button"); +//création du button Tous +const tous = document.createElement("button"); +tous.className = "categorie-button"; +tous.id = "buttonTous"; +tous.innerText = "Tous"; +//création du button Objets +const objects = document.createElement("button"); +objects.className = "categorie-button"; +objects.id = "buttonObjects"; +objects.innerText = "Objects"; +//création du button Appartements +const appartements = document.createElement("button"); +appartements.className = "categorie-button"; +appartements.id = "buttonAppartements"; +appartements.innerText = "Appartements"; +//création du button Hôtels et restaurants +const hotelsRestaurants = document.createElement("button"); +hotelsRestaurants.className = "categorie-button"; +hotelsRestaurants.id = "buttonHotelsRestaurants"; +hotelsRestaurants.innerText = "Hôtel & restaurants"; + +//on rattache notre élément +button.appendChild(tous); +button.appendChild(objects); +button.appendChild(appartements); +button.appendChild(hotelsRestaurants); + +//créée un evenement au clic pour trier avec display +// On retrouve la catégorie avec l'API "projectDisplay" : category.id + +// test1 + +const buttons = document.querySelectorAll(".categorie-button"); + +buttons.forEach((button) => { + button.addEventListener("click", () => {}); +}); + +//test 2 +// buttonTous.addEventListener("click", () => { +// buttonTous.style.background = "#1D6154"; +// buttonTous.style.color = "white"; +// }); diff --git a/FrontEnd/main.js b/FrontEnd/main.js new file mode 100644 index 000000000..93a8bfc86 --- /dev/null +++ b/FrontEnd/main.js @@ -0,0 +1,15 @@ +import ApiDataProvider from "./ApiDataProvider.js"; +import CardBuilder from "./CardBuilder.js"; +import EventListener from "./EventListener.js"; + +const cardBuilder = new CardBuilder(); +const dataProvider = new ApiDataProvider(); +const event = new EventListener(); +event.dispatch(); + +dataProvider.getCategories.then((categories) => { + cardBuilder.displayCategories(categories); +}); +dataProvider.getProjects.then((projects) => { + cardBuilder.displayProjects(projects); +});