From 3237ac537b3f8523c62a54b87b4617eb5b5d6d5e Mon Sep 17 00:00:00 2001 From: Alexandre Faure Date: Mon, 19 Jun 2023 17:20:30 +0200 Subject: [PATCH 1/6] partie filtre --- .vscode/settings.json | 3 + FrontEnd/assets/style.css | 5 ++ FrontEnd/index.html | 152 +++++++++++++++----------------------- FrontEnd/index.js | 73 ++++++++++++++++++ package-lock.json | 6 ++ 5 files changed, 146 insertions(+), 93 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 FrontEnd/index.js create mode 100644 package-lock.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 7bca0ed1a..cdcc44008 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -125,6 +125,11 @@ li:hover { text-align: center; margin-bottom: 1em; } + +.button_category { + +} + .gallery { width: 100%; display: grid; diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 3f4a16298..858055f1f 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -1,109 +1,75 @@ + Sophie Bluel - Architecte d'intérieur - + + -
-

Sophie Bluel Architecte d'inteérieur

- -
-
-
-
- -
-
-

Designer d'espace

-

Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison finale du chantier.

-

Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du chantier sera assuré dans le souci du détail, le respect du planning et du budget.

-

En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, décorateur(trice)

-
-
-
-

Mes Projets

-
-
- Abajour Tahina -
Abajour Tahina
-
-
- Appartement Paris V -
Appartement Paris V
-
-
- Restaurant Sushisen - Londres -
Restaurant Sushisen - Londres
-
-
- Villa “La Balisiere” - Port Louis -
Villa “La Balisiere” - Port Louis
-
-
- Structures Thermopolis -
Structures Thermopolis
-
+
+

Sophie Bluel Architecte d'inteérieur

+ +
+
+
- Appartement Paris X -
Appartement Paris X
+
-
- Pavillon “Le coteau” - Cassis -
Pavillon “Le coteau” - Cassis
-
-
- Villa Ferneze - Isola d’Elba -
Villa Ferneze - Isola d’Elba
-
-
- Appartement Paris XVIII -
Appartement Paris XVIII
-
-
- Bar “Lullaby” - Paris -
Bar “Lullaby” - Paris
-
-
- Hotel First Arte - New Delhi -
Hotel First Arte - New Delhi
-
-
-
-
-

Contact

-

Vous avez un projet ? Discutons-en !

-
- - - - - - - -
-
-
+
+

Designer d'espace

+

Je raconte votre histoire, je valorise vos idées. Je vous accompagne de la conception à la livraison + finale du chantier.

+

Chaque projet sera étudié en commun, de façon à mettre en valeur les volumes, les matières et les + couleurs dans le respect de l’esprit des lieux et le choix adapté des matériaux. Le suivi du + chantier sera assuré dans le souci du détail, le respect du planning et du budget.

+

En cas de besoin, une équipe pluridisciplinaire peut-être constituée : architecte DPLG, + décorateur(trice)

+
+ + +
+

Mes Projets

+
+
+
+
+

Contact

+

Vous avez un projet ? Discutons-en !

+
+ + + + + + + +
+
+ - + + - + + \ No newline at end of file diff --git a/FrontEnd/index.js b/FrontEnd/index.js new file mode 100644 index 000000000..20769fd94 --- /dev/null +++ b/FrontEnd/index.js @@ -0,0 +1,73 @@ +const gallery = document.querySelector(".gallery"); +// console.log(gallery); + +function pictureGallery(data) { + for (let i = 0; i < data.length; i++) { + const fig = document.createElement("figure"); + const image = document.createElement("img"); + image.src = data[i].imageUrl; + const title = document.createElement("figcaption"); + title.innerHTML = data[i].title; + + gallery.appendChild(fig); + fig.appendChild(image); + fig.appendChild(title); + } +} + +fetch("http://localhost:5678/api/works") + .then((reponse) => reponse.json()) + .then((data) => { + console.log(data); + + pictureGallery(data); + }); + +function categoryFilter(dataFilter) { + const portFolio = document.getElementById("portfolio"); + + const divFilter = document.createElement("div"); + + const buttonT = document.createElement("button"); + buttonT.textContent = "Tous"; + + // const buttonO = document.createElement("button"); + // buttonO.innerHtml = dataFilter[0].name; + + // const buttonA = document.createElement("button"); + // buttonA.innerHTML = dataFilter[1].name; + // console.log(buttonA); + + // const buttonH = document.createElement("button"); + // buttonH.innerHTML = dataFilter[2].name; + + // portFolio.appendChild(divFilter); + // divFilter.appendChild(buttonT); + // divFilter.appendChild(buttonO); + // divFilter.appendChild(buttonA); + // divFilter.appendChild(buttonH); + + buttonT.classList.add(".button_category"); + divFilter.classList.add(".button_div"); + divFilter.appendChild(buttonT); + dataFilter.forEach((category) => { + const buttonCategory = document.createElement("button"); + buttonCategory.textContent = category.name; + buttonCategory.classList.add("button_category"); + divFilter.appendChild(buttonCategory); + buttonCategory.addEventListener("click", () => { + const categoryName = buttonCategory.textContent; + const filterWorks = data.filter((data) => { + return data.category.name === categoryName; + }); + }); + }); +} + +fetch("http://localhost:5678/api/categories") + .then((response) => response.json()) + .then((dataFilter) => { + console.log(dataFilter); + + categoryFilter(dataFilter); + }); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..5b279149c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "Portfolio-architecte-sophie-bluel", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From e93d1b7f7d1384ee026633bb58a44b83c44efe31 Mon Sep 17 00:00:00 2001 From: Alexandre Faure Date: Wed, 21 Jun 2023 16:52:32 +0200 Subject: [PATCH 2/6] page login html --- FrontEnd/CSS.css | 0 FrontEnd/assets/style.css | 81 +++++++++++++++++++++++++++++++++++++-- FrontEnd/index.js | 72 ++++++++++++++++++++-------------- FrontEnd/login.html | 53 +++++++++++++++++++++++++ 4 files changed, 173 insertions(+), 33 deletions(-) create mode 100644 FrontEnd/CSS.css create mode 100644 FrontEnd/login.html diff --git a/FrontEnd/CSS.css b/FrontEnd/CSS.css new file mode 100644 index 000000000..e69de29bb diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index cdcc44008..441bdd1a7 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -126,10 +126,6 @@ li:hover { margin-bottom: 1em; } -.button_category { - -} - .gallery { width: 100%; display: grid; @@ -191,3 +187,80 @@ footer nav ul { margin: 2em } +/****** Code css page login *********/ + +#login { + text-align: center; +} + +.title { + padding-bottom: 30px; +} + +.email { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 40px; +} + +.email1 { + display: flex; + position: relative; + right: 16%; + padding-bottom: 7px; +} + +input { + width: 379px; + background: #ffffff; + border: 1px solid #ffffff; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); + height: 51px; +} + +.password { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 37px; +} + +.pass1 { + display: flex; + position: relative; + right: 14%; + padding-bottom: 6px; +} + +.buttonLog { + display: flex; + flex-direction: column; + align-items: center; +} + +.bt1 { + border-radius: 60px; + width: 179px; + height: 36px; + background: #1D6154; + color: white; + margin-bottom: 37px; +} + +.mdp { + text-decoration: none; + text-decoration-line: underline; + color: #3D3D3D; + padding-bottom: 55%; +} + +.footer { + position: relative; + left: 85%; +} + +.footer1 { +text-decoration: none; +color: #000000; +} \ No newline at end of file diff --git a/FrontEnd/index.js b/FrontEnd/index.js index 20769fd94..0a404bf92 100644 --- a/FrontEnd/index.js +++ b/FrontEnd/index.js @@ -24,44 +24,27 @@ fetch("http://localhost:5678/api/works") }); function categoryFilter(dataFilter) { - const portFolio = document.getElementById("portfolio"); - - const divFilter = document.createElement("div"); - const buttonT = document.createElement("button"); buttonT.textContent = "Tous"; - // const buttonO = document.createElement("button"); - // buttonO.innerHtml = dataFilter[0].name; - - // const buttonA = document.createElement("button"); - // buttonA.innerHTML = dataFilter[1].name; - // console.log(buttonA); + const divFilter = document.createElement("div"); - // const buttonH = document.createElement("button"); - // buttonH.innerHTML = dataFilter[2].name; + for (let i = 0; i < dataFilter.length; i++) { + const portFolio = document.getElementById("portfolio"); - // portFolio.appendChild(divFilter); - // divFilter.appendChild(buttonT); - // divFilter.appendChild(buttonO); - // divFilter.appendChild(buttonA); - // divFilter.appendChild(buttonH); + portFolio.appendChild(divFilter); + divFilter.appendChild(buttonT); - buttonT.classList.add(".button_category"); - divFilter.classList.add(".button_div"); - divFilter.appendChild(buttonT); - dataFilter.forEach((category) => { const buttonCategory = document.createElement("button"); - buttonCategory.textContent = category.name; - buttonCategory.classList.add("button_category"); + buttonCategory.textContent = dataFilter[i].name; divFilter.appendChild(buttonCategory); - buttonCategory.addEventListener("click", () => { - const categoryName = buttonCategory.textContent; - const filterWorks = data.filter((data) => { - return data.category.name === categoryName; - }); + // console.log(buttonCategory); + buttonT.addEventListener("click", () => { + const buttonAll = buttonT.textContent; + buttonAll === data.length; + console.log(buttonT); }); - }); + } } fetch("http://localhost:5678/api/categories") @@ -71,3 +54,34 @@ fetch("http://localhost:5678/api/categories") categoryFilter(dataFilter); }); + +// function categoryFilter(data) { +// const portFolio = document.getElementById("portfolio"); +// portFolio.appendChild(divFilter); +// const divFilter = document.createElement("div"); + +// const buttonT = document.createElement("button"); +// buttonT.textContent = "Tous"; +// buttonT.addEventListener("click", () => { +// pictureGallery(data); +// }); +// buttonT.classList.add(".button_category"); +// divFilter.classList.add("button_div"); +// divFilter.appendChild(buttonT); +// dataFilter.forEach((category) => { +// const buttonCategory = document.createElement("button"); +// buttonCategory.textContent = category.name; +// buttonCategory.classList.add(".button_category"); +// divFilter.appendChild(buttonCategory); +// buttonCategory.addEventListener("click", () => { +// const categoryName = buttonCategory.textContent; +// const filterWorks = data.filter((work) => { +// return work.category.name === categoryName; +// }); +// console.log(filterWorks); +// pictureGallery(filterWorks); +// }); +// }); +// const secondChild = portFolio.children[1]; +// portFolio.insertBefore(divFilter, secondChild); +// } diff --git a/FrontEnd/login.html b/FrontEnd/login.html new file mode 100644 index 000000000..703998bce --- /dev/null +++ b/FrontEnd/login.html @@ -0,0 +1,53 @@ + + + + + + Sophie Bluel - Architecte d'intérieur + + + + + + + + + +
+

Sophie Bluel Architecte d'inteérieur

+ +
+
+
+

Log In

+ +
+ + +
+
+ + Mot de passe oublié +
+
+
+ + + + + + + \ No newline at end of file From 3a31fc34738484655a44bf6ed6246a99b4cd3bf0 Mon Sep 17 00:00:00 2001 From: Alexandre Faure Date: Thu, 22 Jun 2023 09:44:14 +0200 Subject: [PATCH 3/6] modif bouttons --- FrontEnd/assets/style.css | 25 +++++++- FrontEnd/index.html | 3 +- FrontEnd/index.js | 128 ++++++++++++++++++-------------------- api.js | 10 +++ 4 files changed, 95 insertions(+), 71 deletions(-) create mode 100644 api.js diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 441bdd1a7..80885766c 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -126,6 +126,27 @@ li:hover { margin-bottom: 1em; } +.filters { + text-align: center; + margin-bottom: 40px; +} + +.filter-button { + width: 165px; + border-radius: 50px; + margin-right: 12px; + height: 40px; + border: 1px solid #1D6154; + background: #ffffff; + color: #1D6154; + font-size: 16px; +} + +.filter-button.active { + background: #1D6154; + color: #ffffff; +} + .gallery { width: 100%; display: grid; @@ -207,7 +228,7 @@ footer nav ul { .email1 { display: flex; position: relative; - right: 16%; + right: 15%; padding-bottom: 7px; } @@ -229,7 +250,7 @@ input { .pass1 { display: flex; position: relative; - right: 14%; + right: 13%; padding-bottom: 6px; } diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 858055f1f..245368441 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -44,6 +44,7 @@

Designer d'espace

Mes Projets

+
@@ -69,7 +70,7 @@

Contact

- + \ No newline at end of file diff --git a/FrontEnd/index.js b/FrontEnd/index.js index 0a404bf92..53f1d54e1 100644 --- a/FrontEnd/index.js +++ b/FrontEnd/index.js @@ -1,87 +1,79 @@ -const gallery = document.querySelector(".gallery"); -// console.log(gallery); +import { + getWorks as getWorksAPI, + getCategories as getCategoriesAPI, +} from "../api.js"; -function pictureGallery(data) { - for (let i = 0; i < data.length; i++) { +const galleryElement = document.querySelector(".gallery"); +const filtersElement = document.querySelector(".filters"); + +function getWorksByCategoryId(works, categoryId) { + console.log(categoryId); + if (categoryId === "all" || !categoryId) { + return works; + } + return works.filter((work) => work.categoryId == categoryId); +} + +function customEventListener(data, element) { + element.addEventListener("click", function (e) { + handleFilterClick(data, e.target.dataset.categoryId); + // const active = allCategoryButton === active; + // console.log(active); + }); +} + +function displayGalleryWorks(works) { + return works.map((work) => { const fig = document.createElement("figure"); const image = document.createElement("img"); - image.src = data[i].imageUrl; + image.src = work.imageUrl; const title = document.createElement("figcaption"); - title.innerHTML = data[i].title; + title.innerHTML = work.title; + fig.dataset.categoryId = work.categoryId; - gallery.appendChild(fig); fig.appendChild(image); fig.appendChild(title); - } + galleryElement.appendChild(fig); + }); } -fetch("http://localhost:5678/api/works") - .then((reponse) => reponse.json()) - .then((data) => { - console.log(data); +function displayGalleryCategories(categories) { + const allCategoryButton = document.createElement("button"); + allCategoryButton.textContent = "Tous"; + allCategoryButton.setAttribute("class", "filter-button"); + allCategoryButton.dataset.categoryId = "all"; + filtersElement.appendChild(allCategoryButton); - pictureGallery(data); + categories.map((category) => { + const categoryButton = document.createElement("button"); + categoryButton.textContent = category.name; + categoryButton.setAttribute("class", "filter-button"); + categoryButton.dataset.categoryId = category.id; + filtersElement.appendChild(categoryButton); }); +} -function categoryFilter(dataFilter) { - const buttonT = document.createElement("button"); - buttonT.textContent = "Tous"; - - const divFilter = document.createElement("div"); +function handleFilterClick(data, categoryId) { + galleryElement.innerHTML = ""; + const newWorks = getWorksByCategoryId(data, categoryId); + displayGalleryWorks(newWorks); +} - for (let i = 0; i < dataFilter.length; i++) { - const portFolio = document.getElementById("portfolio"); +async function main() { + const works = await getWorksAPI(); + displayGalleryWorks(works); - portFolio.appendChild(divFilter); - divFilter.appendChild(buttonT); + const categories = await getCategoriesAPI(); + displayGalleryCategories(categories); - const buttonCategory = document.createElement("button"); - buttonCategory.textContent = dataFilter[i].name; - divFilter.appendChild(buttonCategory); - // console.log(buttonCategory); - buttonT.addEventListener("click", () => { - const buttonAll = buttonT.textContent; - buttonAll === data.length; - console.log(buttonT); - }); + const filterButtons = [...document.querySelectorAll(".filter-button")]; + if (!filterButtons) { + return; } -} - -fetch("http://localhost:5678/api/categories") - .then((response) => response.json()) - .then((dataFilter) => { - console.log(dataFilter); - categoryFilter(dataFilter); + return filterButtons.map((button) => { + customEventListener(works, button); }); +} -// function categoryFilter(data) { -// const portFolio = document.getElementById("portfolio"); -// portFolio.appendChild(divFilter); -// const divFilter = document.createElement("div"); - -// const buttonT = document.createElement("button"); -// buttonT.textContent = "Tous"; -// buttonT.addEventListener("click", () => { -// pictureGallery(data); -// }); -// buttonT.classList.add(".button_category"); -// divFilter.classList.add("button_div"); -// divFilter.appendChild(buttonT); -// dataFilter.forEach((category) => { -// const buttonCategory = document.createElement("button"); -// buttonCategory.textContent = category.name; -// buttonCategory.classList.add(".button_category"); -// divFilter.appendChild(buttonCategory); -// buttonCategory.addEventListener("click", () => { -// const categoryName = buttonCategory.textContent; -// const filterWorks = data.filter((work) => { -// return work.category.name === categoryName; -// }); -// console.log(filterWorks); -// pictureGallery(filterWorks); -// }); -// }); -// const secondChild = portFolio.children[1]; -// portFolio.insertBefore(divFilter, secondChild); -// } +main(); diff --git a/api.js b/api.js new file mode 100644 index 000000000..634483d08 --- /dev/null +++ b/api.js @@ -0,0 +1,10 @@ +// module api.js +export const getWorks = async () => { + const response = await fetch("http://localhost:5678/api/works"); + return await response.json(); +}; + +export const getCategories = async () => { + const response = await fetch("http://localhost:5678/api/categories"); + return await response.json(); +}; From 8065554c9f1fa0269719a361037bf9d5934a0b10 Mon Sep 17 00:00:00 2001 From: Alexandre Faure Date: Thu, 29 Jun 2023 15:54:23 +0200 Subject: [PATCH 4/6] etape 2.2 --- FrontEnd/assets/style.css | 7 ++++++- FrontEnd/index.html | 2 +- FrontEnd/index.js | 10 ++++++++-- FrontEnd/login.html | 6 ++---- api.js | 15 +++++++++++++++ 5 files changed, 32 insertions(+), 8 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 80885766c..4d3e8ed6e 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -142,7 +142,7 @@ li:hover { font-size: 16px; } -.filter-button.active { +.filter-button:hover { background: #1D6154; color: #ffffff; } @@ -210,10 +210,15 @@ footer nav ul { /****** Code css page login *********/ + #login { text-align: center; } +.log { + cursor: pointer; +} + .title { padding-bottom: 30px; } diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 245368441..7c5b94384 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -20,7 +20,7 @@

Sophie Bluel Architecte d'inteérieur

  • projets
  • contact
    • -
  • login
    • +
  • login
  • Instagram
diff --git a/FrontEnd/index.js b/FrontEnd/index.js index 53f1d54e1..f039e4198 100644 --- a/FrontEnd/index.js +++ b/FrontEnd/index.js @@ -17,8 +17,6 @@ function getWorksByCategoryId(works, categoryId) { function customEventListener(data, element) { element.addEventListener("click", function (e) { handleFilterClick(data, e.target.dataset.categoryId); - // const active = allCategoryButton === active; - // console.log(active); }); } @@ -77,3 +75,11 @@ async function main() { } main(); + +const loginButton = document.querySelector(".log"); +// console.log(loginButton); + +loginButton.addEventListener("click", () => { + // console.log(loginButton); + window.location.href = "./login.html"; +}); diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 703998bce..914935f9e 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -13,7 +13,7 @@ - +

Sophie Bluel Architecte d'inteérieur

- + \ No newline at end of file diff --git a/FrontEnd/index.js b/FrontEnd/index.js deleted file mode 100644 index 9e952f7d2..000000000 --- a/FrontEnd/index.js +++ /dev/null @@ -1,110 +0,0 @@ -import { - getWorks as getWorksAPI, - getCategories as getCategoriesAPI, -} from "../api.js"; - -const galleryElement = document.querySelector(".gallery"); -const filtersElement = document.querySelector(".filters"); - -function getWorksByCategoryId(works, categoryId) { - console.log(categoryId); - if (categoryId === "all" || !categoryId) { - return works; - } - return works.filter((work) => work.categoryId == categoryId); -} - -function customEventListener(data, element) { - element.addEventListener("click", function (e) { - handleFilterClick(data, e.target.dataset.categoryId); - }); -} - -function displayGalleryWorks(works) { - return works.map((work) => { - const fig = document.createElement("figure"); - const image = document.createElement("img"); - image.src = work.imageUrl; - const title = document.createElement("figcaption"); - title.innerHTML = work.title; - fig.dataset.categoryId = work.categoryId; - - fig.appendChild(image); - fig.appendChild(title); - galleryElement.appendChild(fig); - }); -} - -function displayGalleryCategories(categories) { - const allCategoryButton = document.createElement("button"); - allCategoryButton.textContent = "Tous"; - allCategoryButton.setAttribute("class", "filter-button active"); - allCategoryButton.dataset.categoryId = "all"; - filtersElement.appendChild(allCategoryButton); - - let choix = true; - allCategoryButton.addEventListener("click", () => { - if (choix == true) { - allCategoryButton.style.backgroundColor = "#1D6154"; - allCategoryButton.style.color = "white"; - choix = false; - } else { - allCategoryButton.style.backgroundColor = "white"; - allCategoryButton.style.color = "#1D6154"; - choix = true; - } - }); - - categories.map((category) => { - const categoryButton = document.createElement("button"); - categoryButton.textContent = category.name; - categoryButton.setAttribute("class", "filter-button active"); - categoryButton.dataset.categoryId = category.id; - filtersElement.appendChild(categoryButton); - - categoryButton.addEventListener("click", () => { - if (choix == true) { - categoryButton.style.backgroundColor = "#1D6154"; - categoryButton.style.color = "white"; - choix = false; - } else { - categoryButton.style.backgroundColor = "white"; - categoryButton.style.color = "#1D6154"; - choix = true; - } - }); - }); -} - -function handleFilterClick(data, categoryId) { - galleryElement.innerHTML = ""; - const newWorks = getWorksByCategoryId(data, categoryId); - displayGalleryWorks(newWorks); -} - -async function main() { - const works = await getWorksAPI(); - displayGalleryWorks(works); - - const categories = await getCategoriesAPI(); - displayGalleryCategories(categories); - - const filterButtons = [...document.querySelectorAll(".filter-button")]; - if (!filterButtons) { - return; - } - - return filterButtons.map((button) => { - customEventListener(works, button); - }); -} - -main(); - -const loginButton = document.querySelector(".log"); -// console.log(loginButton); - -loginButton.addEventListener("click", () => { - // console.log(loginButton); - window.location.href = "./login.html"; -}); diff --git a/FrontEnd/js/api.js b/FrontEnd/js/api.js new file mode 100644 index 000000000..43c229897 --- /dev/null +++ b/FrontEnd/js/api.js @@ -0,0 +1,31 @@ +// module api.js +export const getWorks = async () => { + const response = await fetch("http://localhost:5678/api/works"); + return await response.json(); +}; + +export const getCategories = async () => { + const response = await fetch("http://localhost:5678/api/categories"); + return await response.json(); +}; + +async function fetchUsers() { + let user = { + email: "sophie.bluel@test.tld", + password: "S0phie", + }; + + let response = await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(user), + }); + if (response.ok === true) { + return response.json(); + } else { + alert("Impossible de se connecter"); + } +} +fetchUsers().then((user) => console.log(user)); diff --git a/FrontEnd/js/index.js b/FrontEnd/js/index.js new file mode 100644 index 000000000..d365a8554 --- /dev/null +++ b/FrontEnd/js/index.js @@ -0,0 +1,86 @@ +// index.js +import { + getWorks as getWorksAPI, + getCategories as getCategoriesAPI, +} from "./api.js"; + +const galleryElement = document.querySelector(".gallery"); +const filtersElement = document.querySelector(".filters"); + + +function filterButtons() { + const buttons = [...document.querySelectorAll(".filter-button")] + if (!buttons) return []; + return buttons; +} + +function getWorksByCategoryId(works, categoryId) { + if (categoryId === "all" || !categoryId) { + return works; + } + return works.filter((work) => work.categoryId == categoryId); +} + +function createFilterButton(id, name) { + const button = document.createElement("button"); + button.textContent = name; + button.dataset.categoryId = id; + button.setAttribute("class", "filter-button"); + filtersElement.appendChild(button); +} + +function displayGalleryWorks(works) { + return works.map((work) => { + const fig = document.createElement("figure"); + const image = document.createElement("img"); + image.src = work.imageUrl; + const title = document.createElement("figcaption"); + title.innerHTML = work.title; + fig.dataset.categoryId = work.categoryId; + + fig.appendChild(image); + fig.appendChild(title); + galleryElement.appendChild(fig); + }); +} + +function displayGalleryCategories(categories) { + filtersElement.innerHTML = ""; + createFilterButton('all', 'Tous'); + + categories.map((category) => { + createFilterButton(category.id, category.name); + }); +} + +function handleFilterClick(data, e) { + galleryElement.innerHTML = ""; + const newWorks = getWorksByCategoryId(data, e.target.dataset.categoryId); + displayGalleryWorks(newWorks); + updateFilterButtons(e.target.dataset.categoryId); +} + +function updateFilterButtons(categoryId) { + filterButtons().map((filter) => { + if (filter.dataset.categoryId === categoryId) { + filter.classList.add('active'); + } else { + filter.classList.remove('active'); + } + }); +} + +async function main() { + const works = await getWorksAPI(); + displayGalleryWorks(works); + + const categories = await getCategoriesAPI(); + displayGalleryCategories(categories); + + + return filterButtons().map((filterButton) => { + filterButton.addEventListener("click", (e) => handleFilterClick(works, e)); + }); +} + +main(); diff --git a/FrontEnd/js/login.js b/FrontEnd/js/login.js new file mode 100644 index 000000000..cfa7e32a8 --- /dev/null +++ b/FrontEnd/js/login.js @@ -0,0 +1 @@ +// login.js \ No newline at end of file diff --git a/FrontEnd/login.html b/FrontEnd/login.html index fa5147c32..ba293c525 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -45,7 +45,7 @@

Log In

- + \ No newline at end of file