From eabdbb297e833d62162b03d86f718da100f6a72f Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Tue, 8 Aug 2023 09:35:20 +0200 Subject: [PATCH 01/49] Installation des paquets --- package-lock.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 package-lock.json 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 d01cee594b387ec180eb5455cb7a57dc44a5dfe2 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Thu, 10 Aug 2023 19:39:07 +0200 Subject: [PATCH 02/49] Premier essai avec Fetch, reponse OK --- FrontEnd/travaux.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 FrontEnd/travaux.js diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js new file mode 100644 index 000000000..c5258207a --- /dev/null +++ b/FrontEnd/travaux.js @@ -0,0 +1,15 @@ +fetch('http://localhost:5678/api/works') + .then(response => { + // Vérifiez si la requête a été réussie + if (!response.ok) { + throw new Error('Problème avec la requête'); + } + return response.json(); // retourne les données en format JSON + }) + .then(data => { + console.log(data); // Affiche les données dans la console + }) + .catch(error => { + console.error('Erreur:', error); // Gère les erreurs éventuelles + }); + \ No newline at end of file From 2ca4d88819b56c2c809b3689a172f4fb9a7e17f9 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sat, 12 Aug 2023 14:32:44 +0200 Subject: [PATCH 03/49] suite --- FrontEnd/index.html | 2 ++ FrontEnd/main.js | 0 FrontEnd/travaux.js | 37 +++++++++++++++++++++++-------------- 3 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 FrontEnd/main.js diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 3f4a16298..ceb58c9ce 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -9,6 +9,8 @@ + +
diff --git a/FrontEnd/main.js b/FrontEnd/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index c5258207a..e47bd1f67 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,15 +1,24 @@ -fetch('http://localhost:5678/api/works') - .then(response => { - // Vérifiez si la requête a été réussie - if (!response.ok) { - throw new Error('Problème avec la requête'); - } - return response.json(); // retourne les données en format JSON - }) - .then(data => { - console.log(data); // Affiche les données dans la console - }) - .catch(error => { - console.error('Erreur:', error); // Gère les erreurs éventuelles - }); +// let projet = fetch('http://localhost:5678/api/works') +// .then(response => { +// // Vérifiez si la requête a été réussie +// if (!response.ok) { +// throw new Error('Problème avec la requête'); +// } +// return response.json(); // retourne les données en format JSON +// }) +// .then(data => { +// alert(data); // Affiche les données dans la console +// }) + +// .catch(error => { +// console.error('Erreur:', error); // Gère les erreurs éventuelles +// }); + + + + + + + + \ No newline at end of file From 062bdc2667a987fa72b78fb6033915b737927444 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 14 Aug 2023 22:37:26 +0200 Subject: [PATCH 04/49] Works: Data ok, create element ok, append chil ok --- FrontEnd/assets/style.css | 318 +++++++++++++++++++++++++------------- FrontEnd/index.html | 259 ++++++++++++++++++------------- FrontEnd/travaux.js | 52 ++++--- 3 files changed, 392 insertions(+), 237 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 7bca0ed1a..7d05124e2 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -3,186 +3,282 @@ License: none (public domain) */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; } body { - line-height: 1; + line-height: 1; } -ol, ul { - list-style: none; +ol, +ul { + list-style: none; } -blockquote, q { - quotes: none; +blockquote, +q { + quotes: none; } -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; } table { - border-collapse: collapse; - border-spacing: 0; + border-collapse: collapse; + border-spacing: 0; } /** end reset css**/ body { - max-width: 1140px; - margin:auto; - font-family: 'Work Sans' ; - font-size: 14px; + max-width: 1140px; + margin: auto; + font-family: "Work Sans"; + font-size: 14px; } header { - display: flex; - justify-content: space-between; - margin: 50px 0 + display: flex; + justify-content: space-between; + margin: 50px 0; } section { - margin: 50px 0 + margin: 50px 0; } -h1{ - display: flex; - flex-direction: column; - font-family: 'Syne'; - font-size: 22px; - font-weight: 800; - color: #B1663C +h1 { + display: flex; + flex-direction: column; + font-family: "Syne"; + font-size: 22px; + font-weight: 800; + color: #b1663c; } h1 > span { - font-family: 'Work Sans'; - font-size:10px; - letter-spacing: 0.1em; -; + font-family: "Work Sans"; + font-size: 10px; + letter-spacing: 0.1em; } -h2{ - font-family: 'Syne'; - font-weight: 700; - font-size: 30px; - color: #1D6154 +h2 { + font-family: "Syne"; + font-weight: 700; + font-size: 30px; + color: #1d6154; } nav ul { - display: flex; - align-items: center; - list-style-type: none; - + display: flex; + align-items: center; + list-style-type: none; } nav li { - padding: 0 10px; - font-size: 1.2em; + padding: 0 10px; + font-size: 1.2em; } li:hover { - color: #B1663C; + color: #b1663c; } #introduction { - display: flex; - align-items: center; + display: flex; + align-items: center; } #introduction figure { - flex: 1 + flex: 1; } #introduction img { - display: block; - margin: auto; - width: 80%; + display: block; + margin: auto; + width: 80%; } #introduction article { - flex: 1 + flex: 1; } #introduction h2 { - margin-bottom: 1em; + margin-bottom: 1em; } #introduction p { - margin-bottom: 0.5em; + margin-bottom: 0.5em; } #portfolio h2 { - text-align: center; - margin-bottom: 1em; + text-align: center; + margin-bottom: 1em; } .gallery { - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-column-gap: 20px; - grid-row-gap: 20px; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 20px; + grid-row-gap: 20px; } .gallery img { - width: 100%; - + width: 100%; } #contact { - width: 50%; -margin: auto; + width: 50%; + margin: auto; } #contact > * { - text-align: center; - + text-align: center; } -#contact h2{ - margin-bottom: 20px; +#contact h2 { + margin-bottom: 20px; } #contact form { - text-align: left; - margin-top:30px; - display: flex; - flex-direction: column; + text-align: left; + margin-top: 30px; + display: flex; + flex-direction: column; } #contact input { - height: 50px; - font-size: 1.2em; - border: none; - box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); + height: 50px; + font-size: 1.2em; + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); } #contact label { - margin: 2em 0 1em 0; + margin: 2em 0 1em 0; } #contact textarea { - border: none; - box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); } -input[type="submit"]{ - font-family: 'Syne'; - font-weight: 700; - color: white; - background-color: #1D6154; - margin : 2em auto ; - width: 180px; - text-align: center; - border-radius: 60px ; +input[type="submit"] { + font-family: "Syne"; + font-weight: 700; + color: white; + background-color: #1d6154; + margin: 2em auto; + width: 180px; + text-align: center; + border-radius: 60px; } footer nav ul { - display: flex; - justify-content: flex-end; - margin: 2em + display: flex; + justify-content: flex-end; + margin: 2em; +} + +/******* JAVASCRIPT *********/ + +.projets { + display: flex; + justify-content: center; + flex-wrap: wrap; } +.projets { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 20px; + grid-row-gap: 20px; +} + +.projets img { + width: 100%; +} diff --git a/FrontEnd/index.html b/FrontEnd/index.html index ceb58c9ce..b76a970b0 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -1,111 +1,156 @@ - - - Sophie Bluel - Architecte d'intérieur - - - - - - - + + + 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
+
+
+ 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 !

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

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
-
-
- 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 !

-
- - - - - - - -
-
-
- -
- -
- +
+ +
+ diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index e47bd1f67..c091bea8a 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,24 +1,38 @@ -// let projet = fetch('http://localhost:5678/api/works') -// .then(response => { -// // Vérifiez si la requête a été réussie -// if (!response.ok) { -// throw new Error('Problème avec la requête'); -// } -// return response.json(); // retourne les données en format JSON -// }) -// .then(data => { -// alert(data); // Affiche les données dans la console -// }) - -// .catch(error => { -// console.error('Erreur:', error); // Gère les erreurs éventuelles -// }); +async function fetchWorks() { + try { + let response = await fetch("http://localhost:5678/api/works"); + if (response.ok === true) { + return response.json(); + } + throw new Error("Problème avec la requête"); + } catch (error) { + console.log(error); + } +} +// let worksData = fetchWorks().then((wor) => console.log(wor)); - +let worksData = fetchWorks().then((data) => { + worksData = data; + // Ici, vous pouvez utiliser worksData comme vous le souhaitez + for (let i = 0; i < worksData.length; i++) { + // Variable projet qui contient le tableau d'objets du projet + let projet = worksData[i]; + console.log(projet); + // Création de la div qui contiendra le projet + const sectionProjet = document.querySelector(".projets"); + // Création des balises enfants de la div + const projetDivChild = document.createElement("figure"); + const projetDivChildImg = document.createElement("img"); + projetDivChildImg.src = projet.imageUrl; + const projetDivChildFigcaption = document.createElement("figcaption"); + projetDivChildFigcaption.innerText = projet.title; + sectionProjet.appendChild(projetDivChild); + projetDivChild.appendChild(projetDivChildImg); + projetDivChild.appendChild(projetDivChildFigcaption); + } - - - \ No newline at end of file + // alert(`bonjour ${worksData[0].title}`); +}); From 84b46d32ddefc5e4ee981b1ddb3db61b836411ba Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Tue, 15 Aug 2023 08:50:34 +0200 Subject: [PATCH 05/49] Alternative test with foreach loop --- FrontEnd/test.js | 31 ++++++++++++++++ FrontEnd/travaux.js | 88 ++++++++++++++++++++++++++++++--------------- 2 files changed, 90 insertions(+), 29 deletions(-) create mode 100644 FrontEnd/test.js diff --git a/FrontEnd/test.js b/FrontEnd/test.js new file mode 100644 index 000000000..eac0743e7 --- /dev/null +++ b/FrontEnd/test.js @@ -0,0 +1,31 @@ +async function fetchWorks() { + try { + const response = await fetch("http://localhost:5678/api/works"); + if (!response.ok) throw new Error("Problème avec la requête"); + return await response.json(); + } catch (error) { + console.log(error); + } +} + +fetchWorks().then((works) => { + const sectionProjet = document.querySelector(".projets"); + + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); + + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + + console.log(projet); + }); + + // alert(`bonjour ${works[0].title}`); +}); diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index c091bea8a..66c1207c4 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,38 +1,68 @@ +// async function fetchWorks() { +// try { +// const response = await fetch("http://localhost:5678/api/works"); +// if (response.ok === true) { +// return await response.json(); +// } +// throw new Error("Problème avec la requête"); +// } catch (error) { +// console.log(error); +// } +// } + +// // let worksData = fetchWorks().then((wor) => console.log(wor)); + +// let worksData = fetchWorks().then((works) => { +// worksData = works; +// // Ici, vous pouvez utiliser worksData comme vous le souhaitez +// for (let i = 0; i < worksData.length; i++) { +// // Variable projet qui contient le tableau d'objets du projet +// let projet = worksData[i]; +// console.log(projet); +// // Création de la div qui contiendra le projet +// const sectionProjet = document.querySelector(".projets"); +// // Création des balises enfants de la div +// const projetDivChild = document.createElement("figure"); + +// const projetDivChildImg = document.createElement("img"); +// projetDivChildImg.src = projet.imageUrl; +// const projetDivChildFigcaption = document.createElement("figcaption"); +// projetDivChildFigcaption.innerText = projet.title; + +// sectionProjet.appendChild(projetDivChild); +// projetDivChild.appendChild(projetDivChildImg); +// projetDivChild.appendChild(projetDivChildFigcaption); +// } +// }); + +alert("test"); + async function fetchWorks() { try { - let response = await fetch("http://localhost:5678/api/works"); - if (response.ok === true) { - return response.json(); - } - throw new Error("Problème avec la requête"); + const response = await fetch("http://localhost:5678/api/works"); + if (!response.ok) throw new Error("Problème avec la requête"); + return await response.json(); } catch (error) { console.log(error); } } -// let worksData = fetchWorks().then((wor) => console.log(wor)); - -let worksData = fetchWorks().then((data) => { - worksData = data; - // Ici, vous pouvez utiliser worksData comme vous le souhaitez - for (let i = 0; i < worksData.length; i++) { - // Variable projet qui contient le tableau d'objets du projet - let projet = worksData[i]; - console.log(projet); - // Création de la div qui contiendra le projet - const sectionProjet = document.querySelector(".projets"); - // Création des balises enfants de la div - const projetDivChild = document.createElement("figure"); - - const projetDivChildImg = document.createElement("img"); - projetDivChildImg.src = projet.imageUrl; - const projetDivChildFigcaption = document.createElement("figcaption"); - projetDivChildFigcaption.innerText = projet.title; - - sectionProjet.appendChild(projetDivChild); - projetDivChild.appendChild(projetDivChildImg); - projetDivChild.appendChild(projetDivChildFigcaption); - } +fetchWorks().then((works) => { + const sectionProjet = document.querySelector(".projets"); + + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); + + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); - // alert(`bonjour ${worksData[0].title}`); + console.log(works); + }); }); From 3b361729de82f5b33aff58210d8379eb84c7e5bd Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Tue, 15 Aug 2023 11:09:59 +0200 Subject: [PATCH 06/49] =?UTF-8?q?Cr=C3=A9ation=20d'un=20fichier=20filter.j?= =?UTF-8?q?s=20pour=20la=20gestion=20des=20filtres,=20et=20modification=20?= =?UTF-8?q?des=20fichiers=20index.html,=20travaux.js=20et=20style.css=20po?= =?UTF-8?q?ur=20l'ajout=20de=20la=20fonctionnalit=C3=A9=20de=20filtre.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 28 +++++++------ FrontEnd/filter.js | 0 FrontEnd/index.html | 86 ++++----------------------------------- FrontEnd/travaux.js | 6 +-- 4 files changed, 27 insertions(+), 93 deletions(-) create mode 100644 FrontEnd/filter.js diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 7d05124e2..1debfb6d3 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -200,21 +200,20 @@ li:hover { #introduction p { margin-bottom: 0.5em; } -#portfolio h2 { - text-align: center; - margin-bottom: 1em; -} -.gallery { - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-column-gap: 20px; - grid-row-gap: 20px; + +.filtres { + display: flex; + justify-content: center; } -.gallery img { - width: 100%; +.filtres button { + border-radius: 60px; + border: 1px solid #1d6154; + background-color: transparent; + font-size: 1rem; + padding: 0.5em 1em; } + #contact { width: 50%; margin: auto; @@ -264,7 +263,10 @@ footer nav ul { } /******* JAVASCRIPT *********/ - +.projets-section h2 { + text-align: center; + margin-bottom: 1em; +} .projets { display: flex; justify-content: center; diff --git a/FrontEnd/filter.js b/FrontEnd/filter.js new file mode 100644 index 000000000..e69de29bb diff --git a/FrontEnd/index.html b/FrontEnd/index.html index b76a970b0..95501c29c 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -50,86 +50,18 @@

Designer d'espace

-
+ +

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
-
-
- 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 !

diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index 66c1207c4..76cda4f49 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,3 +1,5 @@ +// VERSION 1 + // async function fetchWorks() { // try { // const response = await fetch("http://localhost:5678/api/works"); @@ -35,7 +37,7 @@ // } // }); -alert("test"); +// VERSION 2 async function fetchWorks() { try { @@ -62,7 +64,5 @@ fetchWorks().then((works) => { projetFigure.appendChild(projetImg); projetFigure.appendChild(projetCaption); sectionProjet.appendChild(projetFigure); - - console.log(works); }); }); From 38da376a2b08e04cdf463a4c0462655fab8a8ea7 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Wed, 16 Aug 2023 12:03:59 +0200 Subject: [PATCH 07/49] =?UTF-8?q?Filters:=20cr=C3=A9ation=20des=20=C3=A9l?= =?UTF-8?q?=C3=A9ments=20de=20filtres,=20cr=C3=A9ation=20des=20fonctions?= =?UTF-8?q?=20de=20filtres,=20int=C3=A9gration=20au=20DOM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 14 ++++++++--- FrontEnd/index.html | 7 +----- FrontEnd/test.js | 50 +++++++++++++++++++-------------------- FrontEnd/travaux.js | 27 +++++++++++++++++++++ 4 files changed, 64 insertions(+), 34 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 1debfb6d3..eac0106ba 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -204,14 +204,21 @@ li:hover { .filtres { display: flex; justify-content: center; + margin: 4rem 0; } .filtres button { border-radius: 60px; border: 1px solid #1d6154; background-color: transparent; - font-size: 1rem; - padding: 0.5em 1em; + font-size: 1.2rem; + font-family: "Syne"; + padding: 0.5rem 1rem; + margin: 0rem 1rem; +} +.filtres button:hover { + background-color: #1d6154; + color: white; } #contact { @@ -265,7 +272,8 @@ footer nav ul { /******* JAVASCRIPT *********/ .projets-section h2 { text-align: center; - margin-bottom: 1em; + margin-bottom: 1rem; + margin-top: 8rem; } .projets { display: flex; diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 95501c29c..4eb92bd98 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -53,12 +53,7 @@

Designer d'espace

Mes Projets

-
- - - - -
+
diff --git a/FrontEnd/test.js b/FrontEnd/test.js index eac0743e7..6aaa84ed1 100644 --- a/FrontEnd/test.js +++ b/FrontEnd/test.js @@ -1,31 +1,31 @@ -async function fetchWorks() { - try { - const response = await fetch("http://localhost:5678/api/works"); - if (!response.ok) throw new Error("Problème avec la requête"); - return await response.json(); - } catch (error) { - console.log(error); - } -} +// async function fetchWorks() { +// try { +// const response = await fetch("http://localhost:5678/api/works"); +// if (!response.ok) throw new Error("Problème avec la requête"); +// return await response.json(); +// } catch (error) { +// console.log(error); +// } +// } -fetchWorks().then((works) => { - const sectionProjet = document.querySelector(".projets"); +// fetchWorks().then((works) => { +// const sectionProjet = document.querySelector(".projets"); - works.forEach((projet) => { - const projetFigure = document.createElement("figure"); +// works.forEach((projet) => { +// const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; +// const projetImg = document.createElement("img"); +// projetImg.src = projet.imageUrl; - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; +// const projetCaption = document.createElement("figcaption"); +// projetCaption.innerText = projet.title; - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); +// projetFigure.appendChild(projetImg); +// projetFigure.appendChild(projetCaption); +// sectionProjet.appendChild(projetFigure); - console.log(projet); - }); - - // alert(`bonjour ${works[0].title}`); -}); +// console.log(projet); +// }); +// // +// // alert(`bonjour ${works[0].title}`); +// }); diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index 76cda4f49..d983d9985 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -65,4 +65,31 @@ fetchWorks().then((works) => { projetFigure.appendChild(projetCaption); sectionProjet.appendChild(projetFigure); }); + // categorie unique + const category = works.map((item) => item.category.name); + console.log(category); + const uniqueCategory = [...new Set(category)]; + console.log(uniqueCategory); + + // buttons / filter + const filtresDiv = document.querySelector(".filtres"); + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); + // + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); + + btn.addEventListener("click", () => filterByCategory(categoryName)); + // ************ FILTER CATEGORY ************ + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + + console.log(filteredWorks); + } + }); }); From d8d11d71fd837c85c9e5513340270487f961999e Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Wed, 16 Aug 2023 12:34:31 +0200 Subject: [PATCH 08/49] =?UTF-8?q?Display=20des=20filtres=20=C3=A0=20contin?= =?UTF-8?q?uer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/travaux.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index d983d9985..82e019387 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -89,7 +89,33 @@ fetchWorks().then((works) => { (item) => item.category.name === categoryName ); + function displayWorks(worksToDisplay) { + // Supprimez les projets existants + while (sectionProjet.firstChild) { + sectionProjet.removeChild(sectionProjet.firstChild); + } + + const sectionProjet = document.querySelector(".projets"); + + filteredWorks.forEach((projet) => { + const projetFigure = document.createElement("figure"); + + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); + } + console.log(filteredWorks); } }); }); + +// displayWorks(works); +// displayWorks(filteredWorks); From e1be04ac6a9861e88d7112c030c78feb3886264d Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Thu, 17 Aug 2023 10:25:54 +0200 Subject: [PATCH 09/49] =?UTF-8?q?Function=20displayWorks,=20=C3=A9venement?= =?UTF-8?q?s=20sur=20les=20boutons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .DS_Store | Bin 0 -> 6148 bytes FrontEnd/travaux copie.js | 101 ++++++++++++++++++++++++++ FrontEnd/travaux.js | 144 +++++++++++++------------------------- 3 files changed, 148 insertions(+), 97 deletions(-) create mode 100644 .DS_Store create mode 100644 FrontEnd/travaux copie.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..969e15992d276b2bde9a7fbf495c42b1f47fb58f GIT binary patch literal 6148 zcmeH~O;6iE5Qb+%sAD0dR4Nh|q?Nb^nudM|adBO!#I;8B&{nC9BkJOMqu6N z^}dS#{=4{OQVx?`$Nxx%c~(~4?uBS9HJ2ZFp6{)AAEHlc5>;_EF2i{Aj$21c<;lDr zC&$@f(r-U{rHU%fior-HWa$7Q@84!cswSZt7ip<;BQxOpEx+GhpH6!(o^|BT&huGE zPIr6Vj(ob?o6Y>z+UDcEH~q8xOQFv7osz&)t!>rnT)v^Qz~O5&DsokvVvO@1($G?k z=@ewQC~2y=z!CVD3Gnwp z!dU~WwNd@)K%tKS&?dUIq0T>zoFlCUR%@defeDieHL1cLF@#A+zqE0I)!L{@Ct(jC z!d_X}6N=DR$NW- console.log(wor)); + +// let worksData = fetchWorks().then((works) => { +// worksData = works; +// // Ici, vous pouvez utiliser worksData comme vous le souhaitez +// for (let i = 0; i < worksData.length; i++) { +// // Variable projet qui contient le tableau d'objets du projet +// let projet = worksData[i]; +// console.log(projet); +// // Création de la div qui contiendra le projet +// const sectionProjet = document.querySelector(".projets"); +// // Création des balises enfants de la div +// const projetDivChild = document.createElement("figure"); + +// const projetDivChildImg = document.createElement("img"); +// projetDivChildImg.src = projet.imageUrl; +// const projetDivChildFigcaption = document.createElement("figcaption"); +// projetDivChildFigcaption.innerText = projet.title; + +// sectionProjet.appendChild(projetDivChild); +// projetDivChild.appendChild(projetDivChildImg); +// projetDivChild.appendChild(projetDivChildFigcaption); +// } +// }); + +// VERSION 2 +// function displayWorks(works) { + +async function fetchWorks() { + try { + const response = await fetch("http://localhost:5678/api/works"); + if (!response.ok) throw new Error("Problème avec la requête"); + return await response.json(); + } catch (error) { + console.log(error); + } +} + +fetchWorks().then((works) => { + const sectionProjet = document.querySelector(".projets"); + + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); + + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); + + // categorie unique + const category = works.map((item) => item.category.name); + // console.log(category); + const uniqueCategory = [...new Set(category)]; + // console.log(uniqueCategory); + + // buttons / filter + const filtresDiv = document.querySelector(".filtres"); + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); + // + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); + + btn.addEventListener("click", () => filterByCategory(categoryName)); + + // ************ FILTER CATEGORY ************ + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + + console.log(filteredWorks); + } + }); +}); + +// displayWorks(works); +// displayWorks(filteredWorks); diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index 82e019387..19f9afce8 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -1,44 +1,3 @@ -// VERSION 1 - -// async function fetchWorks() { -// try { -// const response = await fetch("http://localhost:5678/api/works"); -// if (response.ok === true) { -// return await response.json(); -// } -// throw new Error("Problème avec la requête"); -// } catch (error) { -// console.log(error); -// } -// } - -// // let worksData = fetchWorks().then((wor) => console.log(wor)); - -// let worksData = fetchWorks().then((works) => { -// worksData = works; -// // Ici, vous pouvez utiliser worksData comme vous le souhaitez -// for (let i = 0; i < worksData.length; i++) { -// // Variable projet qui contient le tableau d'objets du projet -// let projet = worksData[i]; -// console.log(projet); -// // Création de la div qui contiendra le projet -// const sectionProjet = document.querySelector(".projets"); -// // Création des balises enfants de la div -// const projetDivChild = document.createElement("figure"); - -// const projetDivChildImg = document.createElement("img"); -// projetDivChildImg.src = projet.imageUrl; -// const projetDivChildFigcaption = document.createElement("figcaption"); -// projetDivChildFigcaption.innerText = projet.title; - -// sectionProjet.appendChild(projetDivChild); -// projetDivChild.appendChild(projetDivChildImg); -// projetDivChild.appendChild(projetDivChildFigcaption); -// } -// }); - -// VERSION 2 - async function fetchWorks() { try { const response = await fetch("http://localhost:5678/api/works"); @@ -50,72 +9,63 @@ async function fetchWorks() { } fetchWorks().then((works) => { - const sectionProjet = document.querySelector(".projets"); + function displayWorks(works) { + const sectionProjet = document.querySelector(".projets"); + const filtresDiv = document.querySelector(".filtres"); + // Effacer tout le contenu actuel + sectionProjet.innerHTML = ""; + filtresDiv.innerHTML = ""; - works.forEach((projet) => { - const projetFigure = document.createElement("figure"); + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); - // categorie unique - const category = works.map((item) => item.category.name); - console.log(category); - const uniqueCategory = [...new Set(category)]; - console.log(uniqueCategory); + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); - // buttons / filter - const filtresDiv = document.querySelector(".filtres"); - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); - // - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); + // categorie unique - btn.addEventListener("click", () => filterByCategory(categoryName)); - // ************ FILTER CATEGORY ************ - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - - function displayWorks(worksToDisplay) { - // Supprimez les projets existants - while (sectionProjet.firstChild) { - sectionProjet.removeChild(sectionProjet.firstChild); - } + const category = works.map((item) => item.category.name); + // console.log(category); + const uniqueCategory = [...new Set(category)]; + // console.log(uniqueCategory); - const sectionProjet = document.querySelector(".projets"); + // buttons / filter - filteredWorks.forEach((projet) => { - const projetFigure = document.createElement("figure"); + //bouton tous + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; + //bouton par catégorie + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; + //Event listener + btnAll.addEventListener("click", () => displayWorks(works)); - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); + btn.addEventListener("click", () => + filterByCategory(categoryName, works) + ); + // ************ FILTER CATEGORY FUNCTION ************ + function filterByCategory(categoryName, works) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks); + + console.log(filteredWorks); } - - console.log(filteredWorks); - } - }); + }); + } + displayWorks(works); }); - -// displayWorks(works); -// displayWorks(filteredWorks); From 8c0d158c36fd32101a8b023a40b81192efc5f898 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Thu, 17 Aug 2023 10:38:01 +0200 Subject: [PATCH 10/49] =?UTF-8?q?Etape=201=20termin=C3=A9e=20,=20filtres?= =?UTF-8?q?=20fonctionnels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/travaux.js | 45 +++++++++++++++++---------------------------- 1 file changed, 17 insertions(+), 28 deletions(-) diff --git a/FrontEnd/travaux.js b/FrontEnd/travaux.js index 19f9afce8..a155c39b0 100644 --- a/FrontEnd/travaux.js +++ b/FrontEnd/travaux.js @@ -9,16 +9,12 @@ async function fetchWorks() { } fetchWorks().then((works) => { - function displayWorks(works) { + function displayWorks(worksToShow) { const sectionProjet = document.querySelector(".projets"); - const filtresDiv = document.querySelector(".filtres"); - // Effacer tout le contenu actuel - sectionProjet.innerHTML = ""; - filtresDiv.innerHTML = ""; + sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel - works.forEach((projet) => { + worksToShow.forEach((projet) => { const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); projetImg.src = projet.imageUrl; @@ -29,43 +25,36 @@ fetchWorks().then((works) => { projetFigure.appendChild(projetCaption); sectionProjet.appendChild(projetFigure); }); + } - // categorie unique - + function setupButtons() { const category = works.map((item) => item.category.name); - // console.log(category); const uniqueCategory = [...new Set(category)]; - // console.log(uniqueCategory); - // buttons / filter + const filtresDiv = document.querySelector(".filtres"); - //bouton tous const btnAll = document.createElement("button"); btnAll.innerText = "Tous"; filtresDiv.appendChild(btnAll); - //bouton par catégorie + btnAll.addEventListener("click", () => displayWorks(works)); + uniqueCategory.forEach((categoryName) => { const btn = document.createElement("button"); btn.innerText = categoryName; filtresDiv.appendChild(btn); - //Event listener - btnAll.addEventListener("click", () => displayWorks(works)); + btn.addEventListener("click", () => filterByCategory(categoryName)); + }); - btn.addEventListener("click", () => - filterByCategory(categoryName, works) + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName ); - // ************ FILTER CATEGORY FUNCTION ************ - function filterByCategory(categoryName, works) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - displayWorks(filteredWorks); - - console.log(filteredWorks); - } - }); + displayWorks(filteredWorks); + } } + displayWorks(works); + setupButtons(); // C'est ici que nous configurons les boutons une seule fois }); From 55e455ffce0b0e60be82289f7f7297fd8221024b Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Thu, 17 Aug 2023 16:31:26 +0200 Subject: [PATCH 11/49] Style "login" css et login.html. --- FrontEnd/assets/style.css | 52 ++++++++++++++- FrontEnd/index.html | 6 +- FrontEnd/login.html | 51 +++++++++++++++ FrontEnd/travaux copie.js | 101 ------------------------------ FrontEnd/{travaux.js => works.js} | 0 5 files changed, 104 insertions(+), 106 deletions(-) create mode 100644 FrontEnd/login.html delete mode 100644 FrontEnd/travaux copie.js rename FrontEnd/{travaux.js => works.js} (100%) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index eac0106ba..a5f531948 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -129,10 +129,11 @@ table { } /** end reset css**/ body { - max-width: 1140px; + max-width: 1440px; margin: auto; font-family: "Work Sans"; font-size: 14px; + background-color: #fffef8; } header { display: flex; @@ -164,6 +165,12 @@ h2 { font-size: 30px; color: #1d6154; } + +a { + text-decoration: none; + color: inherit; +} + nav ul { display: flex; align-items: center; @@ -269,7 +276,7 @@ footer nav ul { margin: 2em; } -/******* JAVASCRIPT *********/ +/******* JAVASCRIPT PROJETS *********/ .projets-section h2 { text-align: center; margin-bottom: 1rem; @@ -292,3 +299,44 @@ footer nav ul { .projets img { width: 100%; } + +/********** login.html **********/ + +#login { + height: 50vh; + width: 25%; + margin: auto; + margin: 12rem auto; + display: flex; + flex-direction: column; + justify-content: center; +} + +#login h2 { + text-align: center; + margin-bottom: 3rem; +} + +#login form { + display: flex; + flex-direction: column; + justify-content: center; + text-align: left; +} + +#login input { + height: 50px; + font-size: 1.2em; + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} + +#login label { + margin: 2em 0 1em 0; + text-align: left; +} + +#forgot-password { + text-align: center; + margin-top: 1rem; +} diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 4eb92bd98..8b34fa9ca 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -12,16 +12,16 @@ /> - +

Sophie Bluel Architecte d'inteérieur

diff --git a/FrontEnd/login.html b/FrontEnd/login.html new file mode 100644 index 000000000..aaafacca2 --- /dev/null +++ b/FrontEnd/login.html @@ -0,0 +1,51 @@ + + + + + Sophie Bluel - Architecte d'intérieur - login + + + + + + + + + +
+

Sophie Bluel Architecte d'inteérieur

+ +
+ +
+
+

Log In

+
+ + + + + +
+ Mot de passe oublié +
+
+
+ +
+ + diff --git a/FrontEnd/travaux copie.js b/FrontEnd/travaux copie.js deleted file mode 100644 index d33ac1417..000000000 --- a/FrontEnd/travaux copie.js +++ /dev/null @@ -1,101 +0,0 @@ -// VERSION 1 - -// async function fetchWorks() { -// try { -// const response = await fetch("http://localhost:5678/api/works"); -// if (response.ok === true) { -// return await response.json(); -// } -// throw new Error("Problème avec la requête"); -// } catch (error) { -// console.log(error); -// } -// } - -// // let worksData = fetchWorks().then((wor) => console.log(wor)); - -// let worksData = fetchWorks().then((works) => { -// worksData = works; -// // Ici, vous pouvez utiliser worksData comme vous le souhaitez -// for (let i = 0; i < worksData.length; i++) { -// // Variable projet qui contient le tableau d'objets du projet -// let projet = worksData[i]; -// console.log(projet); -// // Création de la div qui contiendra le projet -// const sectionProjet = document.querySelector(".projets"); -// // Création des balises enfants de la div -// const projetDivChild = document.createElement("figure"); - -// const projetDivChildImg = document.createElement("img"); -// projetDivChildImg.src = projet.imageUrl; -// const projetDivChildFigcaption = document.createElement("figcaption"); -// projetDivChildFigcaption.innerText = projet.title; - -// sectionProjet.appendChild(projetDivChild); -// projetDivChild.appendChild(projetDivChildImg); -// projetDivChild.appendChild(projetDivChildFigcaption); -// } -// }); - -// VERSION 2 -// function displayWorks(works) { - -async function fetchWorks() { - try { - const response = await fetch("http://localhost:5678/api/works"); - if (!response.ok) throw new Error("Problème avec la requête"); - return await response.json(); - } catch (error) { - console.log(error); - } -} - -fetchWorks().then((works) => { - const sectionProjet = document.querySelector(".projets"); - - works.forEach((projet) => { - const projetFigure = document.createElement("figure"); - - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; - - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; - - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); - - // categorie unique - const category = works.map((item) => item.category.name); - // console.log(category); - const uniqueCategory = [...new Set(category)]; - // console.log(uniqueCategory); - - // buttons / filter - const filtresDiv = document.querySelector(".filtres"); - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); - // - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); - - btn.addEventListener("click", () => filterByCategory(categoryName)); - - // ************ FILTER CATEGORY ************ - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - - console.log(filteredWorks); - } - }); -}); - -// displayWorks(works); -// displayWorks(filteredWorks); diff --git a/FrontEnd/travaux.js b/FrontEnd/works.js similarity index 100% rename from FrontEnd/travaux.js rename to FrontEnd/works.js From d19f9733efa21fb01e92134d62768fbe1c7ccd48 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sat, 19 Aug 2023 14:35:36 +0200 Subject: [PATCH 12/49] Login Page: fetch "post" username and password to server - if username and password are correct, redirect to works page - if username and password are incorrect, display error message --- FrontEnd/assets/style.css | 2 +- FrontEnd/filter.js | 0 FrontEnd/index.html | 5 +++-- FrontEnd/login.html | 4 +++- FrontEnd/login.js | 42 +++++++++++++++++++++++++++++++++++++++ FrontEnd/works.js | 2 +- 6 files changed, 50 insertions(+), 5 deletions(-) delete mode 100644 FrontEnd/filter.js create mode 100644 FrontEnd/login.js diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index a5f531948..b1595d7b5 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -129,7 +129,7 @@ table { } /** end reset css**/ body { - max-width: 1440px; + max-width: 1140px; margin: auto; font-family: "Work Sans"; font-size: 14px; diff --git a/FrontEnd/filter.js b/FrontEnd/filter.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 8b34fa9ca..93f5990d6 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -12,7 +12,6 @@ /> -
@@ -21,7 +20,7 @@

Sophie Bluel Architecte d'inteérieur

@@ -79,5 +78,7 @@

Contact

+ + diff --git a/FrontEnd/login.html b/FrontEnd/login.html index aaafacca2..54cb8be5d 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -21,7 +21,7 @@

Sophie Bluel Architecte d'inteérieur

@@ -47,5 +47,7 @@

Log In

+ + diff --git a/FrontEnd/login.js b/FrontEnd/login.js new file mode 100644 index 000000000..277f047c0 --- /dev/null +++ b/FrontEnd/login.js @@ -0,0 +1,42 @@ +document.addEventListener("DOMContentLoaded", function () { + const form = document.querySelector("#login form"); + // console.log(form); + form.addEventListener("submit", async function (event) { + event.preventDefault(); + + const email = document.querySelector("#login-email").value; + // console.log(email); + const password = document.querySelector("#login-password").value; + // console.log(password); + + try { + const response = await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + + const data = await response.json(); + + if (response.status === 200) { + // Store user data and/or token for future requests or to determine user state + localStorage.setItem("user", JSON.stringify(data.user)); + localStorage.setItem("token", data.token); + + // Redirect to the homepage or show additional options + location.href = "index.html"; + } else { + // Handle errors, e.g., show a message to the user + alert(data.message); + } + } catch (error) { + console.error("There was an error during the login process:", error); + } + }); + // Chargement logout +}); diff --git a/FrontEnd/works.js b/FrontEnd/works.js index a155c39b0..1e26c3177 100644 --- a/FrontEnd/works.js +++ b/FrontEnd/works.js @@ -56,5 +56,5 @@ fetchWorks().then((works) => { } displayWorks(works); - setupButtons(); // C'est ici que nous configurons les boutons une seule fois + setupButtons(); }); From 14893cf106bc605648ffea587f05c1ea04718e33 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 20 Aug 2023 10:15:38 +0200 Subject: [PATCH 13/49] Suite de la modification du fichier login.js --- FrontEnd/index.html | 1 - FrontEnd/login.html | 5 ++--- FrontEnd/login.js | 16 +++++++++------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 93f5990d6..6f132946b 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -79,6 +79,5 @@

Contact

- diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 54cb8be5d..8ca6f3543 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -12,7 +12,6 @@ /> -
@@ -31,9 +30,9 @@

Sophie Bluel Architecte d'inteérieur

Log In

- + - +
diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 277f047c0..216de4423 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -1,13 +1,14 @@ document.addEventListener("DOMContentLoaded", function () { - const form = document.querySelector("#login form"); - // console.log(form); + const form = document.querySelector("#login"); + // console.log(form); OK form.addEventListener("submit", async function (event) { event.preventDefault(); + console.log("submit"); const email = document.querySelector("#login-email").value; - // console.log(email); + console.log(email); const password = document.querySelector("#login-password").value; - // console.log(password); + console.log(password); try { const response = await fetch("http://localhost:5678/api/users/login", { @@ -22,20 +23,21 @@ document.addEventListener("DOMContentLoaded", function () { }); const data = await response.json(); + console.log(data); if (response.status === 200) { // Store user data and/or token for future requests or to determine user state - localStorage.setItem("user", JSON.stringify(data.user)); + localStorage.setItem("user", JSON.stringify(data.userId)); localStorage.setItem("token", data.token); // Redirect to the homepage or show additional options - location.href = "index.html"; + // location.href = "index.html"; } else { // Handle errors, e.g., show a message to the user alert(data.message); } } catch (error) { - console.error("There was an error during the login process:", error); + console.error("Une erreur est survenue", error); } }); // Chargement logout From 33ef5ccca3f93748bd5dfbdfc846de6bfe877ef4 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 20 Aug 2023 12:15:36 +0200 Subject: [PATCH 14/49] =?UTF-8?q?Function=20checkToken=20=C3=A0=20int?= =?UTF-8?q?=C3=A9grer=20dans=20TOUTES=20les=20pages=20qui=20ont=20besoin?= =?UTF-8?q?=20d'un=20token=20pour=20la=20suite?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/login.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 216de4423..ab8be024f 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -31,14 +31,32 @@ document.addEventListener("DOMContentLoaded", function () { localStorage.setItem("token", data.token); // Redirect to the homepage or show additional options - // location.href = "index.html"; + location.href = "index.html"; } else { // Handle errors, e.g., show a message to the user - alert(data.message); + const messageError = "Identifiant ou mot de passe incorrect"; + alert(messageError); + console.log(messageError); } } catch (error) { console.error("Une erreur est survenue", error); } }); - // Chargement logout + // Profil utilisateur connecté: liens du lien login --> logout + function checkToken() { + let tokenAuth = localStorage.getItem("token"); + // console.log(tokenAuth);ok + let loginLink = document.getElementById("login-link"); + // console.log(loginLink); ok + if (tokenAuth) { + // Si authToken existe, l'utilisateur est probablement connecté + loginLink.textContent = "Logout"; + loginLink.setAttribute("href", "logout.html"); + } else { + // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion + loginLink.textContent = "Login"; + loginLink.setAttribute("href", "login.html"); + } + } + checkToken(); }); From 589676b11317cedcc8d9537319ad4d578a516045 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 20 Aug 2023 13:54:18 +0200 Subject: [PATCH 15/49] =?UTF-8?q?Import=20/export=20modules=20=C3=A0=20app?= =?UTF-8?q?rendre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/login.js | 4 +-- FrontEnd/main.js | 1 + FrontEnd/works.js | 87 ++++++++++++++++++++++++----------------------- 3 files changed, 48 insertions(+), 44 deletions(-) diff --git a/FrontEnd/login.js b/FrontEnd/login.js index ab8be024f..59e386e39 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -43,7 +43,7 @@ document.addEventListener("DOMContentLoaded", function () { } }); // Profil utilisateur connecté: liens du lien login --> logout - function checkToken() { + function checkTokenLogin() { let tokenAuth = localStorage.getItem("token"); // console.log(tokenAuth);ok let loginLink = document.getElementById("login-link"); @@ -58,5 +58,5 @@ document.addEventListener("DOMContentLoaded", function () { loginLink.setAttribute("href", "login.html"); } } - checkToken(); + checkTokenLogin(); }); diff --git a/FrontEnd/main.js b/FrontEnd/main.js index e69de29bb..8b1378917 100644 --- a/FrontEnd/main.js +++ b/FrontEnd/main.js @@ -0,0 +1 @@ + diff --git a/FrontEnd/works.js b/FrontEnd/works.js index 1e26c3177..c19523557 100644 --- a/FrontEnd/works.js +++ b/FrontEnd/works.js @@ -7,54 +7,57 @@ async function fetchWorks() { console.log(error); } } +function displayAndFilterWorks() { + fetchWorks().then((works) => { + function displayWorks(worksToShow) { + const sectionProjet = document.querySelector(".projets"); + sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel + + worksToShow.forEach((projet) => { + const projetFigure = document.createElement("figure"); + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); + } -fetchWorks().then((works) => { - function displayWorks(worksToShow) { - const sectionProjet = document.querySelector(".projets"); - sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel - - worksToShow.forEach((projet) => { - const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; - - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; - - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); - } - - function setupButtons() { - const category = works.map((item) => item.category.name); - const uniqueCategory = [...new Set(category)]; + function setupButtons() { + const category = works.map((item) => item.category.name); + const uniqueCategory = [...new Set(category)]; - const filtresDiv = document.querySelector(".filtres"); + const filtresDiv = document.querySelector(".filtres"); - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); - btnAll.addEventListener("click", () => displayWorks(works)); + btnAll.addEventListener("click", () => displayWorks(works)); - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); - btn.addEventListener("click", () => filterByCategory(categoryName)); - }); + btn.addEventListener("click", () => filterByCategory(categoryName)); + }); - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - displayWorks(filteredWorks); + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks); + } } - } - displayWorks(works); - setupButtons(); -}); + displayWorks(works); + setupButtons(); + }); +} + +displayAndFilterWorks(); From a4bc296e1da62e7d043795c69880932a2e36dcc7 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 20 Aug 2023 19:02:16 +0200 Subject: [PATCH 16/49] TEST refactorisation des fonctions de login.js --- FrontEnd/login.js | 187 +++++++++++++++++++++++++++++++--------------- 1 file changed, 127 insertions(+), 60 deletions(-) diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 59e386e39..6ebb326b5 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -1,62 +1,129 @@ -document.addEventListener("DOMContentLoaded", function () { - const form = document.querySelector("#login"); - // console.log(form); OK - form.addEventListener("submit", async function (event) { - event.preventDefault(); - console.log("submit"); - - const email = document.querySelector("#login-email").value; - console.log(email); - const password = document.querySelector("#login-password").value; - console.log(password); - - try { - const response = await fetch("http://localhost:5678/api/users/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - }), - }); - - const data = await response.json(); - console.log(data); - - if (response.status === 200) { - // Store user data and/or token for future requests or to determine user state - localStorage.setItem("user", JSON.stringify(data.userId)); - localStorage.setItem("token", data.token); - - // Redirect to the homepage or show additional options - location.href = "index.html"; - } else { - // Handle errors, e.g., show a message to the user - const messageError = "Identifiant ou mot de passe incorrect"; - alert(messageError); - console.log(messageError); - } - } catch (error) { - console.error("Une erreur est survenue", error); - } +// --------------VERSION 1----------------- + +// document.addEventListener("DOMContentLoaded", function () { +// const form = document.querySelector("#login"); +// // console.log(form); OK +// form.addEventListener("submit", async function (event) { +// event.preventDefault(); +// console.log("submit"); + +// const email = document.querySelector("#login-email").value; +// console.log(email); +// const password = document.querySelector("#login-password").value; +// console.log(password); + +// try { +// const response = await fetch("http://localhost:5678/api/users/login", { +// method: "POST", +// headers: { +// "Content-Type": "application/json", +// }, +// body: JSON.stringify({ +// email: email, +// password: password, +// }), +// }); + +// const data = await response.json(); +// console.log(data); + +// if (response.status === 200) { +// // Store user data and/or token for future requests or to determine user state +// localStorage.setItem("user", JSON.stringify(data.userId)); +// localStorage.setItem("token", data.token); + +// // Redirect to the homepage or show additional options +// location.href = "index.html"; +// } else { +// // Handle errors, e.g., show a message to the user +// const messageError = "Identifiant ou mot de passe incorrect"; +// alert(messageError); +// console.log(messageError); +// } +// } catch (error) { +// console.error("Une erreur est survenue", error); +// } +// }); +// // Profil utilisateur connecté: liens du lien login --> logout +// function checkTokenLogin() { +// let tokenAuth = localStorage.getItem("token"); +// // console.log(tokenAuth);ok +// let loginLink = document.getElementById("login-link"); +// // console.log(loginLink); ok +// if (tokenAuth) { +// // Si authToken existe, l'utilisateur est probablement connecté +// loginLink.textContent = "Logout"; +// loginLink.setAttribute("href", "logout.html"); +// } else { +// // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion +// loginLink.textContent = "Login"; +// loginLink.setAttribute("href", "login.html"); +// } +// } +// checkTokenLogin(); +// }); + +// -------VERSION 2--------TEST REFACTORISATION + +function initializeFormListener() { + document.addEventListener("DOMContentLoaded", function () { + const form = document.querySelector("#login"); + form.addEventListener("submit", submitForm); + }); +} + +function submitForm(event) { + event.preventDefault(); + console.log("submit"); + + const { email, password } = getFormData(); + + handleLogin(email, password); +} + +function getFormData() { + const email = document.querySelector("#login-email").value; + const password = document.querySelector("#login-password").value; + + console.log(email); + console.log(password); + + return { email, password }; +} + +async function handleLogin(email, password) { + try { + const response = await loginRequest(email, password); + handleResponse(response); + } catch (error) { + console.error("Une erreur est survenue", error); + } +} + +async function loginRequest(email, password) { + return await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), }); - // Profil utilisateur connecté: liens du lien login --> logout - function checkTokenLogin() { - let tokenAuth = localStorage.getItem("token"); - // console.log(tokenAuth);ok - let loginLink = document.getElementById("login-link"); - // console.log(loginLink); ok - if (tokenAuth) { - // Si authToken existe, l'utilisateur est probablement connecté - loginLink.textContent = "Logout"; - loginLink.setAttribute("href", "logout.html"); - } else { - // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion - loginLink.textContent = "Login"; - loginLink.setAttribute("href", "login.html"); - } +} + +async function handleResponse(response) { + const data = await response.json(); + console.log(data); + + if (response.status === 200) { + localStorage.setItem("user", JSON.stringify(data.userId)); + localStorage.setItem("token", data.token); + location.href = "index.html"; + } else { + const messageError = "Identifiant ou mot de passe incorrect"; + alert(messageError); + console.log(messageError); } - checkTokenLogin(); -}); +} From a62261b4126ca16866d42dc264fc500f5c2413db Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 20 Aug 2023 19:51:55 +0200 Subject: [PATCH 17/49] Suite recherche erreur refactoring preventDefault --- FrontEnd/login.js | 242 ++++++++++++++++++++++++---------------------- 1 file changed, 124 insertions(+), 118 deletions(-) diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 6ebb326b5..02cc17298 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -1,129 +1,135 @@ // --------------VERSION 1----------------- -// document.addEventListener("DOMContentLoaded", function () { -// const form = document.querySelector("#login"); -// // console.log(form); OK -// form.addEventListener("submit", async function (event) { -// event.preventDefault(); -// console.log("submit"); - -// const email = document.querySelector("#login-email").value; -// console.log(email); -// const password = document.querySelector("#login-password").value; -// console.log(password); - -// try { -// const response = await fetch("http://localhost:5678/api/users/login", { -// method: "POST", -// headers: { -// "Content-Type": "application/json", -// }, -// body: JSON.stringify({ -// email: email, -// password: password, -// }), -// }); - -// const data = await response.json(); -// console.log(data); - -// if (response.status === 200) { -// // Store user data and/or token for future requests or to determine user state -// localStorage.setItem("user", JSON.stringify(data.userId)); -// localStorage.setItem("token", data.token); - -// // Redirect to the homepage or show additional options -// location.href = "index.html"; -// } else { -// // Handle errors, e.g., show a message to the user -// const messageError = "Identifiant ou mot de passe incorrect"; -// alert(messageError); -// console.log(messageError); -// } -// } catch (error) { -// console.error("Une erreur est survenue", error); -// } -// }); -// // Profil utilisateur connecté: liens du lien login --> logout -// function checkTokenLogin() { -// let tokenAuth = localStorage.getItem("token"); -// // console.log(tokenAuth);ok -// let loginLink = document.getElementById("login-link"); -// // console.log(loginLink); ok -// if (tokenAuth) { -// // Si authToken existe, l'utilisateur est probablement connecté -// loginLink.textContent = "Logout"; -// loginLink.setAttribute("href", "logout.html"); -// } else { -// // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion -// loginLink.textContent = "Login"; -// loginLink.setAttribute("href", "login.html"); -// } -// } -// checkTokenLogin(); -// }); +document.addEventListener("DOMContentLoaded", function () { + const form = document.querySelector("#login"); + // console.log(form); OK + form.addEventListener("submit", async function (event) { + event.preventDefault(); + console.log("submit"); + + const email = document.querySelector("#login-email").value; + console.log(email); + const password = document.querySelector("#login-password").value; + console.log(password); + + try { + const response = await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + email: email, + password: password, + }), + }); + + const data = await response.json(); + console.log(data); + + if (response.status === 200) { + // Store user data and/or token for future requests or to determine user state + localStorage.setItem("user", JSON.stringify(data.userId)); + localStorage.setItem("token", data.token); + + // Redirect to the homepage or show additional options + location.href = "index.html"; + } else { + // Handle errors, e.g., show a message to the user + const messageError = "Identifiant ou mot de passe incorrect"; + alert(messageError); + console.log(messageError); + } + } catch (error) { + console.error("Une erreur est survenue", error); + } + }); + // Profil utilisateur connecté: liens du lien login --> logout + function checkTokenLogin() { + let tokenAuth = localStorage.getItem("token"); + // console.log(tokenAuth);ok + let loginLink = document.getElementById("login-link"); + // console.log(loginLink); ok + if (tokenAuth) { + // Si authToken existe, l'utilisateur est probablement connecté + loginLink.textContent = "Logout"; + loginLink.setAttribute("href", "logout.html"); + } else { + // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion + loginLink.textContent = "Login"; + loginLink.setAttribute("href", "login.html"); + } + } + checkTokenLogin(); +}); -// -------VERSION 2--------TEST REFACTORISATION +// -------VERSION 2--------TEST REFACTORISATION--->ECHEC ( erreur ligne 76 event.preventDefault()) -function initializeFormListener() { - document.addEventListener("DOMContentLoaded", function () { - const form = document.querySelector("#login"); - form.addEventListener("submit", submitForm); - }); -} +// export function initializeFormListener() { +// document.addEventListener("DOMContentLoaded", function () { +// const form = document.querySelector("#login"); +// form.addEventListener("submit", submitForm); +// }); +// } -function submitForm(event) { - event.preventDefault(); - console.log("submit"); +// function submitForm(event) { +// event.preventDefault(); +// console.log("submit"); - const { email, password } = getFormData(); +// const { email, password } = getFormData(); - handleLogin(email, password); -} +// handleLogin(email, password); +// } -function getFormData() { - const email = document.querySelector("#login-email").value; - const password = document.querySelector("#login-password").value; +// function getFormData() { +// const email = document.querySelector("#login-email").value; +// const password = document.querySelector("#login-password").value; - console.log(email); - console.log(password); +// console.log(email); +// console.log(password); - return { email, password }; -} +// return { email, password }; +// } -async function handleLogin(email, password) { - try { - const response = await loginRequest(email, password); - handleResponse(response); - } catch (error) { - console.error("Une erreur est survenue", error); - } -} - -async function loginRequest(email, password) { - return await fetch("http://localhost:5678/api/users/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - }), - }); -} - -async function handleResponse(response) { - const data = await response.json(); - console.log(data); - - if (response.status === 200) { - localStorage.setItem("user", JSON.stringify(data.userId)); - localStorage.setItem("token", data.token); - location.href = "index.html"; - } else { - const messageError = "Identifiant ou mot de passe incorrect"; - alert(messageError); - console.log(messageError); - } -} +// async function handleLogin(email, password) { +// try { +// const response = await loginRequest(email, password); +// handleResponse(response); +// } catch (error) { +// console.error("Une erreur est survenue", error); +// } +// } + +// async function loginRequest(email, password) { +// return await fetch("http://localhost:5678/api/users/login", { +// method: "POST", +// headers: { +// "Content-Type": "application/json", +// }, +// body: JSON.stringify({ +// email: email, +// password: password, +// }), +// }); +// } + +// async function handleResponse(response) { +// const data = await response.json(); +// console.log(data); + +// if (response.status === 200) { +// localStorage.setItem("user", JSON.stringify(data.userId)); +// localStorage.setItem("token", data.token); +// location.href = "index.html"; +// } else { +// const messageError = "Identifiant ou mot de passe incorrect"; +// alert(messageError); +// console.log(messageError); +// } +// } +// submitForm(); +// initializeFormListener(); +// getFormData(); +// handleLogin(); +// loginRequest(); +// handleResponse(); From c52d6472c7e2b90161ab1ea3aedab6fab5d3c9a2 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 21 Aug 2023 09:43:26 +0200 Subject: [PATCH 18/49] "Refactoring" ok import/export des fonctions ok, message d'erreur sur works innerText ="" --- FrontEnd/index.html | 2 +- FrontEnd/login.html | 2 +- FrontEnd/login.js | 222 +++++++++++++++++++++----------------------- FrontEnd/main.js | 11 +++ FrontEnd/works.js | 4 +- 5 files changed, 119 insertions(+), 122 deletions(-) diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 6f132946b..e99082c39 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -78,6 +78,6 @@

Contact

- + diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 8ca6f3543..5dbae1926 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -47,6 +47,6 @@

Log In

- + diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 02cc17298..782c4ad02 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -1,135 +1,121 @@ // --------------VERSION 1----------------- -document.addEventListener("DOMContentLoaded", function () { - const form = document.querySelector("#login"); - // console.log(form); OK - form.addEventListener("submit", async function (event) { - event.preventDefault(); - console.log("submit"); - - const email = document.querySelector("#login-email").value; - console.log(email); - const password = document.querySelector("#login-password").value; - console.log(password); - - try { - const response = await fetch("http://localhost:5678/api/users/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - email: email, - password: password, - }), - }); - - const data = await response.json(); - console.log(data); - - if (response.status === 200) { - // Store user data and/or token for future requests or to determine user state - localStorage.setItem("user", JSON.stringify(data.userId)); - localStorage.setItem("token", data.token); - - // Redirect to the homepage or show additional options - location.href = "index.html"; - } else { - // Handle errors, e.g., show a message to the user - const messageError = "Identifiant ou mot de passe incorrect"; - alert(messageError); - console.log(messageError); - } - } catch (error) { - console.error("Une erreur est survenue", error); - } - }); - // Profil utilisateur connecté: liens du lien login --> logout - function checkTokenLogin() { - let tokenAuth = localStorage.getItem("token"); - // console.log(tokenAuth);ok - let loginLink = document.getElementById("login-link"); - // console.log(loginLink); ok - if (tokenAuth) { - // Si authToken existe, l'utilisateur est probablement connecté - loginLink.textContent = "Logout"; - loginLink.setAttribute("href", "logout.html"); - } else { - // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion - loginLink.textContent = "Login"; - loginLink.setAttribute("href", "login.html"); - } - } - checkTokenLogin(); -}); - -// -------VERSION 2--------TEST REFACTORISATION--->ECHEC ( erreur ligne 76 event.preventDefault()) - -// export function initializeFormListener() { -// document.addEventListener("DOMContentLoaded", function () { -// const form = document.querySelector("#login"); -// form.addEventListener("submit", submitForm); -// }); -// } - -// function submitForm(event) { +// const form = document.getElementById("login"); +// // console.log(form); OK +// form.addEventListener("submit", async (event) => { // event.preventDefault(); // console.log("submit"); -// const { email, password } = getFormData(); - -// handleLogin(email, password); -// } - -// function getFormData() { // const email = document.querySelector("#login-email").value; -// const password = document.querySelector("#login-password").value; - // console.log(email); +// const password = document.querySelector("#login-password").value; // console.log(password); -// return { email, password }; -// } - -// async function handleLogin(email, password) { // try { -// const response = await loginRequest(email, password); -// handleResponse(response); +// const response = await fetch("http://localhost:5678/api/users/login", { +// method: "POST", +// headers: { +// "Content-Type": "application/json", +// }, +// body: JSON.stringify({ +// email: email, +// password: password, +// }), +// }); + +// const data = await response.json(); +// console.log(data); + +// if (response.status === 200) { +// // Store user data and/or token for future requests or to determine user state +// localStorage.setItem("user", JSON.stringify(data.userId)); +// localStorage.setItem("token", data.token); + +// location.href = "index.html"; +// } else { +// const messageError = "Identifiant ou mot de passe incorrect"; +// alert(messageError); +// console.log(messageError); +// } // } catch (error) { // console.error("Une erreur est survenue", error); // } +// }); + +// // Profil utilisateur connecté: liens du lien login --> logout +// function checkTokenLogin() { +// let tokenAuth = localStorage.getItem("token"); +// // console.log(tokenAuth);ok +// let loginLink = document.getElementById("login-link"); +// // console.log(loginLink); ok +// if (tokenAuth) { +// // Si authToken existe, l'utilisateur est probablement connecté +// loginLink.textContent = "Logout"; +// loginLink.setAttribute("href", "logout.html"); +// } else { +// // Sinon, réinitialisez-le pour s'assurer qu'il indique "Login" et pointe vers la page de connexion +// loginLink.textContent = "Login"; +// loginLink.setAttribute("href", "login.html"); +// } // } +// checkTokenLogin(); -// async function loginRequest(email, password) { -// return await fetch("http://localhost:5678/api/users/login", { -// method: "POST", -// headers: { -// "Content-Type": "application/json", -// }, -// body: JSON.stringify({ -// email: email, -// password: password, -// }), -// }); -// } +// -------VERSION 2--------TEST REFACTORISATION--->ECHEC ( erreur ligne 76 event.preventDefault()) +// + +// --------------VERSION 3----------------- + +// Fonction pour gérer la soumission du formulaire de connexion +export async function handleFormSubmission(event) { + event.preventDefault(); + + // Récupération des valeurs des champs + const email = document.querySelector("#login-email").value; + const password = document.querySelector("#login-password").value; + + try { + const response = await fetch("http://localhost:5678/api/users/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email, password }), + }); + + const data = await response.json(); + + // Gestion de la réponse de l'API + if (response.status === 200) { + // Stockage des données utilisateur et du jeton dans le localStorage + localStorage.setItem("user", JSON.stringify(data.userId)); + localStorage.setItem("token", data.token); + // Redirection vers la page d'accueil + location.href = "index.html"; + } else { + alert("Identifiant ou mot de passe incorrect"); + } + } catch (error) { + console.error("Une erreur est survenue", error); + } +} + +// Fonction pour vérifier l'état de connexion de l'utilisateur +export function checkTokenLogin() { + const tokenAuth = localStorage.getItem("token"); + const loginLink = document.getElementById("login-link"); + + if (tokenAuth) { + loginLink.textContent = "Logout"; + loginLink.setAttribute("href", "logout.html"); + } else { + loginLink.textContent = "Login"; + loginLink.setAttribute("href", "login.html"); + } +} -// async function handleResponse(response) { -// const data = await response.json(); -// console.log(data); +// Ajout de l'écouteur d'événements pour la soumission du formulaire +const form = document.getElementById("login"); +form.addEventListener("submit", handleFormSubmission); -// if (response.status === 200) { -// localStorage.setItem("user", JSON.stringify(data.userId)); -// localStorage.setItem("token", data.token); -// location.href = "index.html"; -// } else { -// const messageError = "Identifiant ou mot de passe incorrect"; -// alert(messageError); -// console.log(messageError); -// } -// } -// submitForm(); -// initializeFormListener(); -// getFormData(); -// handleLogin(); -// loginRequest(); -// handleResponse(); +// Vérification de l'état de connexion à l'initialisation +checkTokenLogin(); diff --git a/FrontEnd/main.js b/FrontEnd/main.js index 8b1378917..197167744 100644 --- a/FrontEnd/main.js +++ b/FrontEnd/main.js @@ -1 +1,12 @@ +import { fetchWorks, displayAndFilterWorks } from "./works.js"; +import { handleFormSubmission, checkTokenLogin } from "./login.js"; +fetchWorks(); +displayAndFilterWorks(); + +// Ajout de l'écouteur d'événements pour la soumission du formulaire +const form = document.getElementById("login"); +form.addEventListener("submit", handleFormSubmission); + +// Vérification de l'état de connexion à l'initialisation +checkTokenLogin(); diff --git a/FrontEnd/works.js b/FrontEnd/works.js index c19523557..7b85125a1 100644 --- a/FrontEnd/works.js +++ b/FrontEnd/works.js @@ -1,4 +1,4 @@ -async function fetchWorks() { +export async function fetchWorks() { try { const response = await fetch("http://localhost:5678/api/works"); if (!response.ok) throw new Error("Problème avec la requête"); @@ -7,7 +7,7 @@ async function fetchWorks() { console.log(error); } } -function displayAndFilterWorks() { +export function displayAndFilterWorks() { fetchWorks().then((works) => { function displayWorks(worksToShow) { const sectionProjet = document.querySelector(".projets"); From e57077a499414e65d103f01c61c9a3c79ee23abc Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Wed, 23 Aug 2023 13:13:20 +0200 Subject: [PATCH 19/49] Suite refactoring --- FrontEnd/main.js | 7 ++- FrontEnd/test-pattern-works.js | 68 +++++++++++++++++++++ FrontEnd/test.js | 31 ---------- FrontEnd/works.js | 105 ++++++++++++++++----------------- 4 files changed, 125 insertions(+), 86 deletions(-) create mode 100644 FrontEnd/test-pattern-works.js delete mode 100644 FrontEnd/test.js diff --git a/FrontEnd/main.js b/FrontEnd/main.js index 197167744..061011d3a 100644 --- a/FrontEnd/main.js +++ b/FrontEnd/main.js @@ -1,8 +1,11 @@ -import { fetchWorks, displayAndFilterWorks } from "./works.js"; +// Récupération des projets sur l'API +import { fetchWorks, displayWorks } from "./works.js"; + +// Importation des fonctions de login import { handleFormSubmission, checkTokenLogin } from "./login.js"; fetchWorks(); -displayAndFilterWorks(); +displayWorks(); // Ajout de l'écouteur d'événements pour la soumission du formulaire const form = document.getElementById("login"); diff --git a/FrontEnd/test-pattern-works.js b/FrontEnd/test-pattern-works.js new file mode 100644 index 000000000..e842e1c8c --- /dev/null +++ b/FrontEnd/test-pattern-works.js @@ -0,0 +1,68 @@ +// Mentorat Marco +export async function fetchWorks() { + try { + const response = await fetch("http://localhost:5678/api/works"); + const data = await response.json(); + // if (!response.ok) throw new Error("Problème avec la requête"); + // return await response.json(); + return data; + } catch (error) { + console.log(error); + } +} + +export function displayWorks(worksToShow, sectionProjet) { + sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel + + worksToShow.forEach((projet) => { + const projetFigure = document.createElement("figure"); + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); + }); +} + +export async function displayAndFilterWorks() { + let works = await fetchWorks(); + + const sectionProjet = document.querySelector(".projets"); + //Affiche les works dans le index.html + displayWorks(works, sectionProjet); + + function setupButtons() { + const category = works.map((item) => item.category.name); + const uniqueCategory = [...new Set(category)]; + + const filtresDiv = document.querySelector(".filtres"); + + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); + + btnAll.addEventListener("click", () => displayWorks(works)); + + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); + + btn.addEventListener("click", () => filterByCategory(categoryName)); + }); + + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks); + } + } + + displayWorks(works); + setupButtons(); +} diff --git a/FrontEnd/test.js b/FrontEnd/test.js deleted file mode 100644 index 6aaa84ed1..000000000 --- a/FrontEnd/test.js +++ /dev/null @@ -1,31 +0,0 @@ -// async function fetchWorks() { -// try { -// const response = await fetch("http://localhost:5678/api/works"); -// if (!response.ok) throw new Error("Problème avec la requête"); -// return await response.json(); -// } catch (error) { -// console.log(error); -// } -// } - -// fetchWorks().then((works) => { -// const sectionProjet = document.querySelector(".projets"); - -// works.forEach((projet) => { -// const projetFigure = document.createElement("figure"); - -// const projetImg = document.createElement("img"); -// projetImg.src = projet.imageUrl; - -// const projetCaption = document.createElement("figcaption"); -// projetCaption.innerText = projet.title; - -// projetFigure.appendChild(projetImg); -// projetFigure.appendChild(projetCaption); -// sectionProjet.appendChild(projetFigure); - -// console.log(projet); -// }); -// // -// // alert(`bonjour ${works[0].title}`); -// }); diff --git a/FrontEnd/works.js b/FrontEnd/works.js index 7b85125a1..f0c33ab75 100644 --- a/FrontEnd/works.js +++ b/FrontEnd/works.js @@ -1,63 +1,62 @@ +// Requete pour récupérer les données de l'API export async function fetchWorks() { try { const response = await fetch("http://localhost:5678/api/works"); - if (!response.ok) throw new Error("Problème avec la requête"); - return await response.json(); + const data = await response.json(); + return data; } catch (error) { console.log(error); } } -export function displayAndFilterWorks() { - fetchWorks().then((works) => { - function displayWorks(worksToShow) { - const sectionProjet = document.querySelector(".projets"); - sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel - - worksToShow.forEach((projet) => { - const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; - - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; - - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); - } - - function setupButtons() { - const category = works.map((item) => item.category.name); - const uniqueCategory = [...new Set(category)]; - - const filtresDiv = document.querySelector(".filtres"); - - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); - - btnAll.addEventListener("click", () => displayWorks(works)); - - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); - - btn.addEventListener("click", () => filterByCategory(categoryName)); - }); - - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - displayWorks(filteredWorks); - } - } - - displayWorks(works); - setupButtons(); + +// Tableau des projets: +let works = await fetchWorks(); +console.log(works); + +// Affichage des projets +export function displayWorks(works) { + const sectionProjet = document.querySelector(".projets"); + sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel + + works.forEach((projet) => { + const projetFigure = document.createElement("figure"); + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + + projetFigure.appendChild(projetImg); + projetFigure.appendChild(projetCaption); + sectionProjet.appendChild(projetFigure); }); } -displayAndFilterWorks(); +function setupButtons() { + const category = works.map((item) => item.category.name); + const uniqueCategory = [...new Set(category)]; + const filtresDiv = document.querySelector(".filtres"); + const btnAll = document.createElement("button"); + btnAll.innerText = "Tous"; + filtresDiv.appendChild(btnAll); + + btnAll.addEventListener("click", () => displayWorks(works)); + + uniqueCategory.forEach((categoryName) => { + const btn = document.createElement("button"); + btn.innerText = categoryName; + filtresDiv.appendChild(btn); + + btn.addEventListener("click", () => filterByCategory(categoryName)); + }); + + function filterByCategory(categoryName) { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks); + } +} + +displayWorks(works); +setupButtons(); From a7646f4b0fb84916045183e76af7d795f6782ad4 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 28 Aug 2023 09:30:25 +0200 Subject: [PATCH 20/49] Test avec les fichiers main2.js et works2.js --- FrontEnd/index.html | 2 +- FrontEnd/login.html | 2 +- FrontEnd/main.js | 3 -- FrontEnd/main2.js | 11 +++++++ FrontEnd/works2.js | 74 +++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 87 insertions(+), 5 deletions(-) create mode 100644 FrontEnd/main2.js create mode 100644 FrontEnd/works2.js diff --git a/FrontEnd/index.html b/FrontEnd/index.html index e99082c39..e72f7323a 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -78,6 +78,6 @@

Contact

- + diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 5dbae1926..89fe97753 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -47,6 +47,6 @@

Log In

- + diff --git a/FrontEnd/main.js b/FrontEnd/main.js index 061011d3a..44199fd8f 100644 --- a/FrontEnd/main.js +++ b/FrontEnd/main.js @@ -1,6 +1,3 @@ -// Récupération des projets sur l'API -import { fetchWorks, displayWorks } from "./works.js"; - // Importation des fonctions de login import { handleFormSubmission, checkTokenLogin } from "./login.js"; diff --git a/FrontEnd/main2.js b/FrontEnd/main2.js new file mode 100644 index 000000000..a355d25ae --- /dev/null +++ b/FrontEnd/main2.js @@ -0,0 +1,11 @@ +import { initWorks } from "./works2.js"; + +// Lancer l'initialisation des travaux +initWorks(); + +// Ajout de l'écouteur d'événements pour la soumission du formulaire +const form = document.getElementById("login"); +form.addEventListener("submit", handleFormSubmission); + +// Vérification de l'état de connexion à l'initialisation +checkTokenLogin(); diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js new file mode 100644 index 000000000..db35d300c --- /dev/null +++ b/FrontEnd/works2.js @@ -0,0 +1,74 @@ +// Factory functions pour la création d'éléments DOM +function createFigure(projet) { + const projetFigure = document.createElement("figure"); + const projetImg = document.createElement("img"); + projetImg.src = projet.imageUrl; + projetFigure.appendChild(projetImg); + + const projetCaption = document.createElement("figcaption"); + projetCaption.innerText = projet.title; + projetFigure.appendChild(projetCaption); + + return projetFigure; +} + +function createFilterButton(categoryName, callback) { + const btn = document.createElement("button"); + btn.innerText = categoryName; + btn.addEventListener("click", callback); + return btn; +} + +// Requete pour récupérer les données de l'API +export async function fetchWorks() { + try { + const response = await fetch("http://localhost:5678/api/works"); + const data = await response.json(); + return data; + } catch (error) { + console.log(error); + } +} + +// Affichage des projets +export function displayWorks(works, container) { + container.innerHTML = ""; // Effacer tout le contenu actuel + works.forEach((projet) => { + const projetFigure = createFigure(projet); + container.appendChild(projetFigure); + }); +} + +// Setup des boutons de filtre +export function setupButtons(works, filterContainer, displayContainer) { + const categories = works.map((item) => item.category.name); + const uniqueCategories = [...new Set(categories)]; + + const btnAll = createFilterButton("Tous", () => + displayWorks(works, displayContainer) + ); + filterContainer.appendChild(btnAll); + + uniqueCategories.forEach((categoryName) => { + const btn = createFilterButton(categoryName, () => { + const filteredWorks = works.filter( + (item) => item.category.name === categoryName + ); + displayWorks(filteredWorks, displayContainer); + }); + filterContainer.appendChild(btn); + }); +} + +// Exécution + +export async function initWorks() { + const works = await fetchWorks(); + console.log(works); + + const sectionProjet = document.querySelector(".projets"); + displayWorks(works, sectionProjet); + + const filtresDiv = document.querySelector(".filtres"); + setupButtons(works, filtresDiv, sectionProjet); +} From 80623fd561e3b2ad2918497df5f74b06e14d5e5d Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 28 Aug 2023 16:19:29 +0200 Subject: [PATCH 21/49] Login2.JS Factory Functions, module mains.js --- FrontEnd/main2.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/FrontEnd/main2.js b/FrontEnd/main2.js index a355d25ae..70f5866a3 100644 --- a/FrontEnd/main2.js +++ b/FrontEnd/main2.js @@ -1,11 +1,10 @@ import { initWorks } from "./works2.js"; +import { initLoginForm, checkTokenLogin } from "./login2.js"; + +// Vérifier l'état de connexion de l'utilisateur +checkTokenLogin(); // Lancer l'initialisation des travaux initWorks(); -// Ajout de l'écouteur d'événements pour la soumission du formulaire -const form = document.getElementById("login"); -form.addEventListener("submit", handleFormSubmission); - -// Vérification de l'état de connexion à l'initialisation -checkTokenLogin(); +initLoginForm(); From b2ef5416c962bc77c2e41474df4b34e3085125d1 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 28 Aug 2023 16:19:33 +0200 Subject: [PATCH 22/49] FactoryFunction in login2.js OK, module export main.JS OK --- FrontEnd/FactoryFunction.js | 14 ++++ FrontEnd/login.js | 104 +++++++++++++++--------------- FrontEnd/login2.js | 68 ++++++++++++++++++++ FrontEnd/works.js | 124 ++++++++++++++++++------------------ 4 files changed, 195 insertions(+), 115 deletions(-) create mode 100644 FrontEnd/FactoryFunction.js create mode 100644 FrontEnd/login2.js diff --git a/FrontEnd/FactoryFunction.js b/FrontEnd/FactoryFunction.js new file mode 100644 index 000000000..d50392f6a --- /dev/null +++ b/FrontEnd/FactoryFunction.js @@ -0,0 +1,14 @@ +function createAObject(a, b, c, d) { + function d() { + console.log("ma fonction d"); + } + return { + a, + b, + c, + d, + }; +} +const myObject = createAObject(1, 2, 3, 4); +console.log(myObject); +myObject.d(); diff --git a/FrontEnd/login.js b/FrontEnd/login.js index 782c4ad02..3506c5b80 100644 --- a/FrontEnd/login.js +++ b/FrontEnd/login.js @@ -66,56 +66,54 @@ // --------------VERSION 3----------------- // Fonction pour gérer la soumission du formulaire de connexion -export async function handleFormSubmission(event) { - event.preventDefault(); - - // Récupération des valeurs des champs - const email = document.querySelector("#login-email").value; - const password = document.querySelector("#login-password").value; - - try { - const response = await fetch("http://localhost:5678/api/users/login", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ email, password }), - }); - - const data = await response.json(); - - // Gestion de la réponse de l'API - if (response.status === 200) { - // Stockage des données utilisateur et du jeton dans le localStorage - localStorage.setItem("user", JSON.stringify(data.userId)); - localStorage.setItem("token", data.token); - // Redirection vers la page d'accueil - location.href = "index.html"; - } else { - alert("Identifiant ou mot de passe incorrect"); - } - } catch (error) { - console.error("Une erreur est survenue", error); - } -} - -// Fonction pour vérifier l'état de connexion de l'utilisateur -export function checkTokenLogin() { - const tokenAuth = localStorage.getItem("token"); - const loginLink = document.getElementById("login-link"); - - if (tokenAuth) { - loginLink.textContent = "Logout"; - loginLink.setAttribute("href", "logout.html"); - } else { - loginLink.textContent = "Login"; - loginLink.setAttribute("href", "login.html"); - } -} - -// Ajout de l'écouteur d'événements pour la soumission du formulaire -const form = document.getElementById("login"); -form.addEventListener("submit", handleFormSubmission); - -// Vérification de l'état de connexion à l'initialisation -checkTokenLogin(); +// async function handleFormSubmission(event) { +// event.preventDefault(); + +// // Récupération des valeurs des champs +// const email = document.querySelector("#login-email").value; +// const password = document.querySelector("#login-password").value; + +// try { +// const response = await fetch("http://localhost:5678/api/users/login", { +// method: "POST", +// headers: { +// "Content-Type": "application/json", +// }, +// body: JSON.stringify({ email, password }), +// }); + +// const data = await response.json(); + +// // Gestion de la réponse de l'API +// if (response.status === 200) { +// // Stockage des données utilisateur et du jeton dans le localStorage +// localStorage.setItem("user", JSON.stringify(data.userId)); +// localStorage.setItem("token", data.token); +// // Redirection vers la page d'accueil +// location.href = "index.html"; +// } else { +// alert("Identifiant ou mot de passe incorrect"); +// } +// } catch (error) { +// console.error("Une erreur est survenue", error); +// } +// } + +// // Fonction pour vérifier l'état de connexion de l'utilisateur +// function checkTokenLogin() { +// const tokenAuth = localStorage.getItem("token"); +// const loginLink = document.getElementById("login-link"); + +// if (tokenAuth) { +// loginLink.textContent = "Logout"; +// } else { +// loginLink.textContent = "Login"; +// } +// } + +// // Ajout de l'écouteur d'événements pour la soumission du formulaire +// const form = document.getElementById("login"); +// form.addEventListener("submit", handleFormSubmission); + +// // Vérification de l'état de connexion à l'initialisation +// checkTokenLogin(); diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js new file mode 100644 index 000000000..f4933dd4e --- /dev/null +++ b/FrontEnd/login2.js @@ -0,0 +1,68 @@ +// Factory pour créer une fonction de récupération de valeur d'élément DOM +function createDOMValueGetter(selector) { + return function () { + const element = document.querySelector(selector); + return element ? element.value : null; + }; +} + +// Factory pour la requête HTTP +function createAPIPostRequest(url) { + return async function (body) { + try { + const response = await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(body), + }); + + const data = await response.json(); + return { data, status: response.status }; + } catch (error) { + console.error("Une erreur est survenue", error); + return null; + } + }; +} + +// Gestion de la soumission du formulaire +async function handleFormSubmission(event) { + event.preventDefault(); + + const getEmail = createDOMValueGetter("#login-email"); + const getPassword = createDOMValueGetter("#login-password"); + const loginUser = createAPIPostRequest( + "http://localhost:5678/api/users/login" + ); + + const email = getEmail(); + const password = getPassword(); + const response = await loginUser({ email, password }); + + if (response && response.status === 200) { + localStorage.setItem("user", JSON.stringify(response.data.userId)); + localStorage.setItem("token", response.data.token); + location.href = "index.html"; + } else { + alert("Identifiant ou mot de passe incorrect"); + } +} + +// Vérifier l'état de connexion de l'utilisateur +function checkTokenLogin() { + const tokenAuth = localStorage.getItem("token"); + const loginLink = document.getElementById("login-link"); + + loginLink.textContent = tokenAuth ? "logout" : "login"; +} + +// Ajout de l'écouteur d'événements pour la soumission du formulaire +function initLoginForm() { + const form = document.getElementById("login"); + form.addEventListener("submit", handleFormSubmission); +} + +// Vérification de l'état de connexion à l'initialisation +export { checkTokenLogin, initLoginForm }; diff --git a/FrontEnd/works.js b/FrontEnd/works.js index f0c33ab75..4eefcc033 100644 --- a/FrontEnd/works.js +++ b/FrontEnd/works.js @@ -1,62 +1,62 @@ -// Requete pour récupérer les données de l'API -export async function fetchWorks() { - try { - const response = await fetch("http://localhost:5678/api/works"); - const data = await response.json(); - return data; - } catch (error) { - console.log(error); - } -} - -// Tableau des projets: -let works = await fetchWorks(); -console.log(works); - -// Affichage des projets -export function displayWorks(works) { - const sectionProjet = document.querySelector(".projets"); - sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel - - works.forEach((projet) => { - const projetFigure = document.createElement("figure"); - const projetImg = document.createElement("img"); - projetImg.src = projet.imageUrl; - - const projetCaption = document.createElement("figcaption"); - projetCaption.innerText = projet.title; - - projetFigure.appendChild(projetImg); - projetFigure.appendChild(projetCaption); - sectionProjet.appendChild(projetFigure); - }); -} - -function setupButtons() { - const category = works.map((item) => item.category.name); - const uniqueCategory = [...new Set(category)]; - const filtresDiv = document.querySelector(".filtres"); - const btnAll = document.createElement("button"); - btnAll.innerText = "Tous"; - filtresDiv.appendChild(btnAll); - - btnAll.addEventListener("click", () => displayWorks(works)); - - uniqueCategory.forEach((categoryName) => { - const btn = document.createElement("button"); - btn.innerText = categoryName; - filtresDiv.appendChild(btn); - - btn.addEventListener("click", () => filterByCategory(categoryName)); - }); - - function filterByCategory(categoryName) { - const filteredWorks = works.filter( - (item) => item.category.name === categoryName - ); - displayWorks(filteredWorks); - } -} - -displayWorks(works); -setupButtons(); +// // Requete pour récupérer les données de l'API +// export async function fetchWorks() { +// try { +// const response = await fetch("http://localhost:5678/api/works"); +// const data = await response.json(); +// return data; +// } catch (error) { +// console.log(error); +// } +// } + +// // Tableau des projets: +// let works = await fetchWorks(); +// console.log(works); + +// // Affichage des projets +// export function displayWorks(works) { +// const sectionProjet = document.querySelector(".projets"); +// sectionProjet.innerHTML = ""; // Effacer tout le contenu actuel + +// works.forEach((projet) => { +// const projetFigure = document.createElement("figure"); +// const projetImg = document.createElement("img"); +// projetImg.src = projet.imageUrl; + +// const projetCaption = document.createElement("figcaption"); +// projetCaption.innerText = projet.title; + +// projetFigure.appendChild(projetImg); +// projetFigure.appendChild(projetCaption); +// sectionProjet.appendChild(projetFigure); +// }); +// } + +// function setupButtons() { +// const category = works.map((item) => item.category.name); +// const uniqueCategory = [...new Set(category)]; +// const filtresDiv = document.querySelector(".filtres"); +// const btnAll = document.createElement("button"); +// btnAll.innerText = "Tous"; +// filtresDiv.appendChild(btnAll); + +// btnAll.addEventListener("click", () => displayWorks(works)); + +// uniqueCategory.forEach((categoryName) => { +// const btn = document.createElement("button"); +// btn.innerText = categoryName; +// filtresDiv.appendChild(btn); + +// btn.addEventListener("click", () => filterByCategory(categoryName)); +// }); + +// function filterByCategory(categoryName) { +// const filteredWorks = works.filter( +// (item) => item.category.name === categoryName +// ); +// displayWorks(filteredWorks); +// } +// } + +// displayWorks(works); +// setupButtons(); From 2a758dd4370cda164fc2574096dd23198f13a47d Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 28 Aug 2023 16:46:27 +0200 Subject: [PATCH 23/49] error-message login page --- FrontEnd/assets/style.css | 6 ++++++ FrontEnd/login.html | 1 + FrontEnd/login2.js | 3 ++- 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index b1595d7b5..336c84ea8 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -340,3 +340,9 @@ footer nav ul { text-align: center; margin-top: 1rem; } + +.error-message { + color: red; + font-weight: bold; + margin-top: 10px; +} diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 89fe97753..8c741e5b5 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -35,6 +35,7 @@

Log In

+

Mot de passe oublié
diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js index f4933dd4e..b857e900a 100644 --- a/FrontEnd/login2.js +++ b/FrontEnd/login2.js @@ -46,7 +46,8 @@ async function handleFormSubmission(event) { localStorage.setItem("token", response.data.token); location.href = "index.html"; } else { - alert("Identifiant ou mot de passe incorrect"); + const errorMessageElement = document.getElementById("error-message"); + errorMessageElement.textContent = "Identifiant ou mot de passe incorrect"; } } From e23deae94208d60e658bfa6d82a8e043d60f6d5a Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 28 Aug 2023 18:07:23 +0200 Subject: [PATCH 24/49] issues with admin-bar and login OK now --- FrontEnd/FactoryFunction.js | 14 ------- FrontEnd/assets/style.css | 17 +++++++++ FrontEnd/index.html | 4 ++ FrontEnd/login2.js | 9 ++++- FrontEnd/main2.js | 2 +- FrontEnd/test-pattern-works.js | 68 ---------------------------------- 6 files changed, 30 insertions(+), 84 deletions(-) delete mode 100644 FrontEnd/FactoryFunction.js delete mode 100644 FrontEnd/test-pattern-works.js diff --git a/FrontEnd/FactoryFunction.js b/FrontEnd/FactoryFunction.js deleted file mode 100644 index d50392f6a..000000000 --- a/FrontEnd/FactoryFunction.js +++ /dev/null @@ -1,14 +0,0 @@ -function createAObject(a, b, c, d) { - function d() { - console.log("ma fonction d"); - } - return { - a, - b, - c, - d, - }; -} -const myObject = createAObject(1, 2, 3, 4); -console.log(myObject); -myObject.d(); diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 336c84ea8..3139261ca 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -171,6 +171,23 @@ a { color: inherit; } +/* Barre d'édition admin */ +.admin-bar { + background-color: #000000; + color: white; + padding: 10px; + + top: 0; + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.hidden { + display: none; +} + nav ul { display: flex; align-items: center; diff --git a/FrontEnd/index.html b/FrontEnd/index.html index e72f7323a..c5973e10a 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -14,6 +14,10 @@ +

Sophie Bluel Architecte d'inteérieur

-

Mes Projets

+

+ Mes Projets + +

From 502a8dfc941d68011e1cea5a7094c2829cf01236 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Wed, 30 Aug 2023 17:15:28 +0200 Subject: [PATCH 30/49] Corrections CSS --- FrontEnd/assets/style.css | 7 +++++++ FrontEnd/index.html | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index abc24a5f5..8512c08c2 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -317,12 +317,19 @@ footer nav ul { text-align: center; margin-bottom: 1rem; margin-top: 8rem; + display: flex; + justify-content: center; + align-items: center; + column-gap: 20px; } #add-project-btn { display: inline-block; background: transparent; border: none; + display: flex; + column-gap: 10px; + margin-top: 5px; } .projets { display: flex; diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 2dcfa2a4c..6d3e1e632 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -63,7 +63,7 @@

Designer d'espace

- Mes Projets + Mes projets @@ -95,6 +95,13 @@

Contact

+ diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js index 2594533f0..1e5717ad7 100644 --- a/FrontEnd/login2.js +++ b/FrontEnd/login2.js @@ -57,16 +57,17 @@ function checkTokenLogin() { const loginLink = document.getElementById("login-link"); const adminBar = document.getElementById("admin-bar"); const allFilterBtn = document.querySelector(".filtres"); - - console.log(allFilterBtn); + const modifierBtn = document.getElementById("add-project-btn"); if (tokenAuth) { loginLink.textContent = "logout"; adminBar.classList.remove("hidden"); + allFilterBtn.classList.remove("filtres"); } else { loginLink.textContent = "login"; adminBar.classList.add("hidden"); + modifierBtn.parentNode.removeChild(modifierBtn); } } diff --git a/FrontEnd/main2.js b/FrontEnd/main2.js index 15a88d08a..94c3309ea 100644 --- a/FrontEnd/main2.js +++ b/FrontEnd/main2.js @@ -1,5 +1,6 @@ import { initWorks } from "./works2.js"; import { initLoginForm, checkTokenLogin } from "./login2.js"; +import { showModal, hideModal } from "../modal.js"; // Vérifier l'état de connexion de l'utilisateur document.addEventListener("DOMContentLoaded", checkTokenLogin); @@ -9,6 +10,15 @@ initWorks(); initLoginForm(); +// Fen^etre modale +showModal(); +hideModal(); +// Ajout d'un écouteur d'événements pour le bouton "Édition" +document.getElementById("add-project-btn").addEventListener("click", showModal); + +// Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale +document.getElementById("close-modal").addEventListener("click", hideModal); + // Obtenez tous les liens 'a' dans une NodeList const links = document.querySelectorAll("a"); From 2e0b6ab41e282786bd9a2723eee18fb4c5f5ccb8 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Fri, 1 Sep 2023 13:37:05 +0200 Subject: [PATCH 33/49] =?UTF-8?q?Modale=20int=C3=A9gr=C3=A9e,=20importer?= =?UTF-8?q?=20les=20projets=20=C3=A0=20=C3=A9diter.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 41ab6c173..1d6225eb0 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -198,6 +198,7 @@ a { font-size: 16px; column-gap: 10px; display: flex; + cursor: pointer; } #publish-changes-btn { @@ -396,3 +397,29 @@ footer nav ul { font-weight: bold; margin-top: 10px; } + +/********** modale **********/ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 9999; +} + +.modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + width: 80%; + max-width: 500px; +} + +.hidden { + display: none; +} From f5d89bdbce4fdb1c93b37ba02a39940694f40963 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Fri, 1 Sep 2023 16:57:21 +0200 Subject: [PATCH 34/49] Modale style CSS OK --- FrontEnd/assets/style.css | 57 +++++++++++++++++++-- FrontEnd/index.html | 14 ++++-- FrontEnd/main2.js | 24 --------- FrontEnd/modal.js | 103 ++++++++++++++++++++++++++++++++++++++ FrontEnd/modalGA.js | 82 ++++++++++++++++++++++++++++++ FrontEnd/modalWEB.js | 11 ++++ modal.js | 12 ----- 7 files changed, 261 insertions(+), 42 deletions(-) create mode 100644 FrontEnd/modal.js create mode 100644 FrontEnd/modalGA.js create mode 100644 FrontEnd/modalWEB.js delete mode 100644 modal.js diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 1d6225eb0..bf587fa0c 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -415,11 +415,62 @@ footer nav ul { left: 50%; transform: translate(-50%, -50%); background-color: #fff; - padding: 20px; - width: 80%; - max-width: 500px; + padding: 50px 80px; + max-height: 730px; + max-width: 630px; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} + +.modal-content h3 { + color: #000; + + font-size: 1.625rem; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.modal-content button { + border: none; + background: transparent; + font-size: 1.5rem; + align-self: flex-end; + margin-right: -10%; +} + +#existing-projects { + width: 100%; + border-bottom: #b3b3b3 solid 1px; } +#existing-projects { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-column-gap: 10px; + grid-row-gap: 10px; + margin-top: 30px; + padding-bottom: 30px; +} + +#existing-projects img { + width: 100%; +} + +#add-photo { + font-family: "Syne"; + font-weight: 700; + font-size: 0.8rem; + color: white; + background-color: #1d6154; + margin: 30px auto; + padding: 10px 50px; + width: 240px; + text-align: center; + border-radius: 60px; +} .hidden { display: none; } diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 5892f4d89..ee0eac586 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -95,13 +95,21 @@

Contact

+ < + + diff --git a/FrontEnd/main2.js b/FrontEnd/main2.js index 94c3309ea..87e5448ae 100644 --- a/FrontEnd/main2.js +++ b/FrontEnd/main2.js @@ -1,6 +1,5 @@ import { initWorks } from "./works2.js"; import { initLoginForm, checkTokenLogin } from "./login2.js"; -import { showModal, hideModal } from "../modal.js"; // Vérifier l'état de connexion de l'utilisateur document.addEventListener("DOMContentLoaded", checkTokenLogin); @@ -9,26 +8,3 @@ document.addEventListener("DOMContentLoaded", checkTokenLogin); initWorks(); initLoginForm(); - -// Fen^etre modale -showModal(); -hideModal(); -// Ajout d'un écouteur d'événements pour le bouton "Édition" -document.getElementById("add-project-btn").addEventListener("click", showModal); - -// Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale -document.getElementById("close-modal").addEventListener("click", hideModal); - -// Obtenez tous les liens 'a' dans une NodeList -const links = document.querySelectorAll("a"); - -// Obtenez l'URL de la page en cours -const currentURL = window.location.href; - -// Parcourez tous les liens pour trouver celui qui correspond à l'URL en cours -links.forEach((link) => { - if (link.href === currentURL) { - // Mettez en gras le lien qui correspond - link.style.fontWeight = "bold"; - } -}); diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js new file mode 100644 index 000000000..40dbc81c5 --- /dev/null +++ b/FrontEnd/modal.js @@ -0,0 +1,103 @@ +// Fonction pour afficher la fenêtre modale +// function showModal() { +// const modal = document.getElementById("edit-modal"); +// modal.classList.remove("hidden"); +// } + +// // Fonction pour cacher la fenêtre modale +// function hideModal() { +// const modal = document.getElementById("edit-modal"); +// modal.classList.add("hidden"); +// } + +// // Ajout d'un écouteur d'événements pour le bouton "Édition" +// document.getElementById("edit-mode-btn").addEventListener("click", showModal); + +// // Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale +// document.getElementById("close-modal").addEventListener("click", hideModal); + +// // Fermer la fenêtre modale en cliquant en dehors de la zone de contenu +// document +// .getElementById("edit-modal") +// .addEventListener("click", function (event) { +// const modalContent = document.querySelector(".modal-content"); +// if (!modalContent.contains(event.target)) { +// hideModal(); +// } +// }); + +// ------------------------------------------ +// Fonction pour basculer la visibilité de la fenêtre modale +function toggleModal(isVisible) { + const modal = document.getElementById("edit-modal"); + modal.classList.toggle("hidden", !isVisible); +} + +// // --------------------- + +// // Ajout d'un écouteur d'événements pour le bouton "Édition" +// document +// .getElementById("edit-mode-btn") +// .addEventListener("click", () => toggleModal(true)); + +// // Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale +// document +// .getElementById("close-modal") +// .addEventListener("click", () => toggleModal(false)); + +// // Fermer la fenêtre modale en cliquant en dehors de la zone de contenu +// document +// .getElementById("edit-modal") +// .addEventListener("click", function (event) { +// const modalContent = document.querySelector(".modal-content"); +// if (!modalContent.contains(event.target)) { +// toggleModal(false); +// } +// }); + +// --------------------- + +// Fonction pour copier les projets existants dans la fenêtre modale +function populateModalWithExistingProjects() { + const existingProjects = document.querySelector(".projets").cloneNode(true); + const modalProjects = document.getElementById("existing-projects"); + modalProjects.innerHTML = ""; + const images = existingProjects.querySelectorAll("img"); + images.forEach((img) => { + const imgClone = img.cloneNode(true); + modalProjects.appendChild(imgClone); + }); +} + +// Fonction pour ajouter un nouveau projet (exemple) +// async function addNewProject(event) { +// event.preventDefault(); +// Récupérez les données du formulaire et ajoutez le nouveau projet +// Mettez à jour la base de données en utilisant AJAX +// } + +// Ajout d'un écouteur d'événements pour le formulaire d'ajout de projet +// document +// .getElementById("add-project-form") +// .addEventListener("submit", addNewProject); + +// Ajout d'un écouteur d'événements pour le bouton "Édition" +document.getElementById("edit-mode-btn").addEventListener("click", function () { + toggleModal(true); + populateModalWithExistingProjects(); +}); + +// Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale +document + .getElementById("close-modal") + .addEventListener("click", () => toggleModal(false)); + +// Fermer la fenêtre modale en cliquant en dehors de la zone de contenu +document + .getElementById("edit-modal") + .addEventListener("click", function (event) { + const modalContent = document.querySelector(".modal-content"); + if (!modalContent.contains(event.target)) { + toggleModal(false); + } + }); diff --git a/FrontEnd/modalGA.js b/FrontEnd/modalGA.js new file mode 100644 index 000000000..bbf409a81 --- /dev/null +++ b/FrontEnd/modalGA.js @@ -0,0 +1,82 @@ +// Test pour integration projet + +let modal = null; + +// ---------------------------------------------- + +const openModal = async function (e) { + e.preventDefault(); + const target = e.target.getAttribute("href"); + if (target.startsWith("#")) { + modal = document.querySelector(target); + } else { + modal = await loadModal(target); + } + + modal.style.display = null; + + modal.removeAttribute("aria-hidden"); + modal.setAttribute("aria-modal", "true"); + modal.addEventListener("click", closeModal); + modal.querySelector(".js-modal-close").addEventListener("click", closeModal); + modal + .querySelector(".js-modal-stop") + .addEventListener("click", stopPropagation); +}; + +// ---------------------------------------------- + +const closeModal = function (e) { + if (modal === null) return; + e.preventDefault(); + /* Animation-direction reversed + modal.style.display = "none" + modal.offsetWidth + modal.style.display = null + */ + modal.setAttribute("aria-hidden", "true"); + modal.removeAttribute("aria-modal"); + modal.removeEventListener("click", closeModal); + modal + .querySelector(".js-modal-close") + .removeEventListener("click", closeModal); + modal + .querySelector(".js-modal-stop") + .removeEventListener("click", stopPropagation); + const hideModal = function () { + modal.style.display = "none"; + modal.removeEventListener("animationend", hideModal); + modal = null; + }; + modal.addEventListener("animationend", hideModal); +}; + +const stopPropagation = function (e) { + e.stopPropagation(); +}; + +const loadModal = async function (url) { + // TODO : Afficher un loader + const target = "#" + url.split("#")[1]; + const exitingModal = document.querySelector(target); + if (exitingModal !== null) return exitingModal; + const html = await fetch(url).then((response) => response.text()); + const element = document + .createRange() + .createContextualFragment(html) + .querySelector(target); + if (element === null) + throw `L'élément ${target} n'a pas été trouvé dans la page ${url}`; + document.body.append(element); + return element; +}; + +document.querySelectorAll(".js-modal").forEach((a) => { + a.addEventListener("click", openModal); +}); + +window.addEventListener("keydown", function (e) { + if (e.key === "Escape" || e.key === "Esc") { + closeModal(e); + } +}); diff --git a/FrontEnd/modalWEB.js b/FrontEnd/modalWEB.js new file mode 100644 index 000000000..d55c73a62 --- /dev/null +++ b/FrontEnd/modalWEB.js @@ -0,0 +1,11 @@ +// A tester aussi +const modalContainer = document.querySelector(".modal-container"); +const modalTriggers = document.querySelectorAll(".modal-trigger"); + +modalTriggers.forEach((trigger) => + trigger.addEventListener("click", toggleModal) +); + +function toggleModal() { + modalContainer.classList.toggle("active"); +} diff --git a/modal.js b/modal.js deleted file mode 100644 index 1fcd20f39..000000000 --- a/modal.js +++ /dev/null @@ -1,12 +0,0 @@ -// Fonction pour afficher la fenêtre modale -function showModal() { - const modal = document.getElementById("edit-modal"); - modal.classList.remove("hidden"); -} - -// Fonction pour cacher la fenêtre modale -function hideModal() { - const modal = document.getElementById("edit-modal"); - modal.classList.add("hidden"); -} -export { showModal, hideModal }; From c120bfc93e45205dcdbee35ca1812c24f231b0bd Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Fri, 1 Sep 2023 17:58:30 +0200 Subject: [PATCH 35/49] =?UTF-8?q?Int=C3=A9rgration=20trash=20icon?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 7 ------- FrontEnd/index.html | 1 - FrontEnd/modal.js | 15 +++++++++++++-- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index bf587fa0c..e8030547c 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -201,13 +201,6 @@ a { cursor: pointer; } -#publish-changes-btn { - background: white; - border-radius: 60px; - padding: 10px 25px; - font-size: 1rem; -} - nav ul { display: flex; align-items: center; diff --git a/FrontEnd/index.html b/FrontEnd/index.html index ee0eac586..6dabf26e8 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -23,7 +23,6 @@

Mode édition

-

Sophie Bluel Architecte d'inteérieur

diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index 40dbc81c5..f7a4c666b 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -62,10 +62,21 @@ function populateModalWithExistingProjects() { const existingProjects = document.querySelector(".projets").cloneNode(true); const modalProjects = document.getElementById("existing-projects"); modalProjects.innerHTML = ""; + // Filter pour ne garder que les images const images = existingProjects.querySelectorAll("img"); - images.forEach((img) => { + images.forEach((img, index) => { + const imgContainer = document.createElement("div"); + imgContainer.classList.add("img-container"); const imgClone = img.cloneNode(true); - modalProjects.appendChild(imgClone); + imgContainer.appendChild(imgClone); + + const deleteIcon = document.createElement("button"); + deleteIcon.classList.add("delete-icon"); + deleteIcon.innerHTML = ''; + deleteIcon.dataset.index = index; // Pour identifier quel projet supprimer + imgContainer.appendChild(deleteIcon); + + modalProjects.appendChild(imgContainer); }); } From f3c156a9dbed6b51dcbdb659706ead139876fea0 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Fri, 1 Sep 2023 19:06:27 +0200 Subject: [PATCH 36/49] =?UTF-8?q?Tests=20suppression=20projets=20et=20supp?= =?UTF-8?q?ression=20des=20fichiers=20li=C3=A9s?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 21 +++++++ FrontEnd/modal.js | 114 ++++++++++++++++---------------------- FrontEnd/works2.js | 1 + 3 files changed, 71 insertions(+), 65 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index e8030547c..51f141f39 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -467,3 +467,24 @@ footer nav ul { .hidden { display: none; } + +.img-container { + position: relative; +} + +.delete-icon { + position: absolute; + top: 0; + right: 10px; + + cursor: pointer; +} + +.delete-icon i { + font-size: 1rem; + color: white; + padding: 0.25rem; + background-color: black; + border: 1px solid black; + border-radius: 3px; +} diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index f7a4c666b..c4d8380b9 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -1,62 +1,9 @@ -// Fonction pour afficher la fenêtre modale -// function showModal() { -// const modal = document.getElementById("edit-modal"); -// modal.classList.remove("hidden"); -// } - -// // Fonction pour cacher la fenêtre modale -// function hideModal() { -// const modal = document.getElementById("edit-modal"); -// modal.classList.add("hidden"); -// } - -// // Ajout d'un écouteur d'événements pour le bouton "Édition" -// document.getElementById("edit-mode-btn").addEventListener("click", showModal); - -// // Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale -// document.getElementById("close-modal").addEventListener("click", hideModal); - -// // Fermer la fenêtre modale en cliquant en dehors de la zone de contenu -// document -// .getElementById("edit-modal") -// .addEventListener("click", function (event) { -// const modalContent = document.querySelector(".modal-content"); -// if (!modalContent.contains(event.target)) { -// hideModal(); -// } -// }); - -// ------------------------------------------ // Fonction pour basculer la visibilité de la fenêtre modale function toggleModal(isVisible) { const modal = document.getElementById("edit-modal"); modal.classList.toggle("hidden", !isVisible); } -// // --------------------- - -// // Ajout d'un écouteur d'événements pour le bouton "Édition" -// document -// .getElementById("edit-mode-btn") -// .addEventListener("click", () => toggleModal(true)); - -// // Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale -// document -// .getElementById("close-modal") -// .addEventListener("click", () => toggleModal(false)); - -// // Fermer la fenêtre modale en cliquant en dehors de la zone de contenu -// document -// .getElementById("edit-modal") -// .addEventListener("click", function (event) { -// const modalContent = document.querySelector(".modal-content"); -// if (!modalContent.contains(event.target)) { -// toggleModal(false); -// } -// }); - -// --------------------- - // Fonction pour copier les projets existants dans la fenêtre modale function populateModalWithExistingProjects() { const existingProjects = document.querySelector(".projets").cloneNode(true); @@ -80,18 +27,6 @@ function populateModalWithExistingProjects() { }); } -// Fonction pour ajouter un nouveau projet (exemple) -// async function addNewProject(event) { -// event.preventDefault(); -// Récupérez les données du formulaire et ajoutez le nouveau projet -// Mettez à jour la base de données en utilisant AJAX -// } - -// Ajout d'un écouteur d'événements pour le formulaire d'ajout de projet -// document -// .getElementById("add-project-form") -// .addEventListener("submit", addNewProject); - // Ajout d'un écouteur d'événements pour le bouton "Édition" document.getElementById("edit-mode-btn").addEventListener("click", function () { toggleModal(true); @@ -112,3 +47,52 @@ document toggleModal(false); } }); +// ------------------------------------------------------------------------------------------------------------------ +// Ajouter un écouteur d'événements pour la suppression V1 + +// document.getElementById('existing-projects').addEventListener('click', async function(event) { +// if (event.target.closest('.delete-icon')) { +// const index = event.target.closest('.delete-icon').dataset.index; +// const projectId = /* Récupérez l'ID du projet à supprimer en fonction de l'index */; + +// // Supprimez le projet de la base de données via AJAX +// const response = await fetch(`http://localhost:5678/api/works/${projectId}`, { +// method: 'DELETE', +// }); + +// if (response.ok) { +// // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets +// document.querySelectorAll('.projets img')[index].closest('figure').remove(); +// document.querySelectorAll('#existing-projects img')[index].closest('.img-container').remove(); +// } +// } +// }); + +// ------------------------------------------------------------------------------------------------------------------V2 +// document +// .getElementById("existing-projects") +// .addEventListener("click", async function (event) { +// if (event.target.closest(".delete-icon")) { +// const projectId = event.target +// .closest(".img-container") +// .querySelector("figure").dataset.id; + +// // Supprimez le projet de la base de données via AJAX +// const response = await fetch( +// `http://localhost:5678/api/works/${projectId}`, +// { +// method: "DELETE", +// } +// ); + +// if (response.ok) { +// // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets +// document +// .querySelector(`.projets figure[data-id="${projectId}"]`) +// .remove(); +// document +// .querySelector(`#existing-projects figure[data-id="${projectId}"]`) +// .remove(); +// } +// } +// }); diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js index db35d300c..2170aeb51 100644 --- a/FrontEnd/works2.js +++ b/FrontEnd/works2.js @@ -1,6 +1,7 @@ // Factory functions pour la création d'éléments DOM function createFigure(projet) { const projetFigure = document.createElement("figure"); + projetFigure.dataset.id = projet.id; const projetImg = document.createElement("img"); projetImg.src = projet.imageUrl; projetFigure.appendChild(projetImg); From 0481aa72d0292be39c9d7cd3b3411627295dbeed Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sat, 2 Sep 2023 11:50:18 +0200 Subject: [PATCH 37/49] Debug Delete --- FrontEnd/works2.js | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js index 2170aeb51..25b880872 100644 --- a/FrontEnd/works2.js +++ b/FrontEnd/works2.js @@ -2,6 +2,7 @@ function createFigure(projet) { const projetFigure = document.createElement("figure"); projetFigure.dataset.id = projet.id; + // console.log(projet.id); const projetImg = document.createElement("img"); projetImg.src = projet.imageUrl; projetFigure.appendChild(projetImg); @@ -61,6 +62,38 @@ export function setupButtons(works, filterContainer, displayContainer) { }); } +// ---------------DELETE---------------- +const deleteExistingProjects = document.getElementById("existing-projects"); +// console.log(deleteExistingProjects);OK + +deleteExistingProjects.addEventListener("click", async function (event) { + // console.log("Event triggered", event.target);OK + const imgContainer = event.target.closest(".img-container"); + const deleteIcon = event.target.closest(".delete-icon"); + // console.log(deleteIcon); OK + // console.log(imgContainer);OK + if (deleteIcon && imgContainer) { + const projetId = imgContainer.dataset.id; + console.log(projetId); + + // Supprimez le projet de la base de données via AJAX + const response = await fetch( + `http://localhost:5678/api/works/${projetId}`, + { + method: "DELETE", + } + ); + + if (response.ok) { + // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets + document.querySelector(`.projets figure[data-id="${projetId}"]`).remove(); + document + .querySelector(`#existing-projects figure[data-id="${projetId}"]`) + .remove(); + } + } +}); + // Exécution export async function initWorks() { From 560c02f99dd788f532ae951180d1de6331de3e31 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sat, 2 Sep 2023 12:03:05 +0200 Subject: [PATCH 38/49] Delete fonctionnel --- Backend/database.sqlite | Bin 28672 -> 28672 bytes FrontEnd/index.html | 2 +- FrontEnd/main2.js | 1 - FrontEnd/modal.js | 56 +++++----------------------------------- FrontEnd/works2.js | 5 ++++ 5 files changed, 12 insertions(+), 52 deletions(-) diff --git a/Backend/database.sqlite b/Backend/database.sqlite index f6bd01cd1353e45d5d60ac257246a63b4e9a9b50..d231de09152b5af97304c19dafe052c8f1b55fee 100644 GIT binary patch delta 71 zcmZp8z}WDBae_3XContact - < + - + + diff --git a/FrontEnd/login.html b/FrontEnd/login.html index 8c741e5b5..8cc685614 100644 --- a/FrontEnd/login.html +++ b/FrontEnd/login.html @@ -48,6 +48,6 @@

Log In

- + diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js index 1e5717ad7..ba4981dc4 100644 --- a/FrontEnd/login2.js +++ b/FrontEnd/login2.js @@ -76,6 +76,6 @@ function initLoginForm() { const form = document.getElementById("login"); form.addEventListener("submit", handleFormSubmission); } - -// Vérification de l'état de connexion à l'initialisation -export { checkTokenLogin, initLoginForm }; +// ---------------------------- +document.addEventListener("DOMContentLoaded", checkTokenLogin); +initLoginForm(); diff --git a/FrontEnd/main2.js b/FrontEnd/main2.js index f8709cc48..0ad92ec1f 100644 --- a/FrontEnd/main2.js +++ b/FrontEnd/main2.js @@ -1,9 +1,10 @@ -import { initWorks } from "./works2.js"; -import { initLoginForm, checkTokenLogin } from "./login2.js"; +// import { initWorks } from "./works2.js"; +// import { initLoginForm, checkTokenLogin } from "./login2.js"; +// import { toggleModal, populateModalWithExistingProjects } from "./modal.js"; // Vérifier l'état de connexion de l'utilisateur -document.addEventListener("DOMContentLoaded", checkTokenLogin); -initWorks(); +// // ---------------DELETE---------------- +// deleteWorks(); -initLoginForm(); +// // ---------------LOGIN---------------- diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index 4f27382bc..c05719cbd 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -30,9 +30,10 @@ function populateModalWithExistingProjects() { modalProjects.appendChild(imgContainer); }); } - +// // ---------------MODAL---------------- // Ajout d'un écouteur d'événements pour le bouton "Édition" -document.getElementById("edit-mode-btn").addEventListener("click", function () { +const editingBtn = document.getElementById("edit-mode-btn"); +editingBtn.addEventListener("click", function () { toggleModal(true); populateModalWithExistingProjects(); }); diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js index fd2432dab..fa945e61c 100644 --- a/FrontEnd/works2.js +++ b/FrontEnd/works2.js @@ -22,7 +22,7 @@ function createFilterButton(categoryName, callback) { } // Requete pour récupérer les données de l'API -export async function fetchWorks() { +async function fetchWorks() { try { const response = await fetch("http://localhost:5678/api/works"); const data = await response.json(); @@ -33,7 +33,7 @@ export async function fetchWorks() { } // Affichage des projets -export function displayWorks(works, container) { +function displayWorks(works, container) { container.innerHTML = ""; // Effacer tout le contenu actuel works.forEach((projet) => { const projetFigure = createFigure(projet); @@ -42,7 +42,7 @@ export function displayWorks(works, container) { } // Setup des boutons de filtre -export function setupButtons(works, filterContainer, displayContainer) { +function setupButtons(works, filterContainer, displayContainer) { const categories = works.map((item) => item.category.name); const uniqueCategories = [...new Set(categories)]; @@ -63,47 +63,50 @@ export function setupButtons(works, filterContainer, displayContainer) { } // ---------------DELETE---------------- -const deleteExistingProjects = document.getElementById("existing-projects"); -// console.log(deleteExistingProjects);OK - -deleteExistingProjects.addEventListener("click", async function (event) { - // console.log("Event triggered", event.target);OK - const imgContainer = event.target.closest(".img-container"); - const deleteIcon = event.target.closest(".delete-icon"); - // console.log(deleteIcon); OK - // console.log(imgContainer);OK - if (deleteIcon && imgContainer) { - const projetId = imgContainer.dataset.id; - console.log(projetId); - - // Supprimez le projet de la base de données via AJAX - const response = await fetch( - `http://localhost:5678/api/works/${projetId}`, - { - method: "DELETE", - headers: { - Authorization: - "Bearer " + - "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsImlhdCI6MTY5MzY0MDU2NCwiZXhwIjoxNjkzNzI2OTY0fQ.meTPbG-YAJ-swKz4r28bQfRy603-DwfBiC2K268BUCU", // Remplacez YOUR_ACCESS_TOKEN par votre jeton d'accès - }, +function deleteWorks() { + const deleteExistingProjects = document.getElementById("existing-projects"); + + deleteExistingProjects.addEventListener("click", async function (event) { + event.preventDefault(); + event.stopPropagation(); + // console.log("Event triggered", event.target);OK + const imgContainer = event.target.closest(".img-container"); + const deleteIcon = event.target.closest(".delete-icon"); + // // console.log(deleteIcon); OK + // // console.log(imgContainer);OK + if (deleteIcon && imgContainer) { + const projetId = imgContainer.dataset.id; + const token = localStorage.getItem("token"); + + // Supprimez le projet de la base de données via AJAX + + const response = await fetch( + `http://localhost:5678/api/works/${projetId}`, + { + method: "DELETE", + headers: { + Authorization: `Bearer ${token}`, // Ajoutez le token d'authentification dans le header + }, + } + ); + + if (response.ok) { + // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets + document + .querySelector(`.projets figure[data-id="${projetId}"]`) + .remove(); + document + .querySelector(`#existing-projects figure[data-id="${projetId}"]`) + .remove(); } - ); - - if (response.ok) { - // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets - document.querySelector(`.projets figure[data-id="${projetId}"]`).remove(); - document - .querySelector(`#existing-projects figure[data-id="${projetId}"]`) - .remove(); } - } -}); + }); +} // Exécution -export async function initWorks() { +async function initWorks() { const works = await fetchWorks(); - console.log(works); const sectionProjet = document.querySelector(".projets"); displayWorks(works, sectionProjet); @@ -111,3 +114,5 @@ export async function initWorks() { const filtresDiv = document.querySelector(".filtres"); setupButtons(works, filtresDiv, sectionProjet); } + +initWorks(); From c17bc19b25931f6af95155612238b27de998a54c Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sat, 2 Sep 2023 19:54:21 +0200 Subject: [PATCH 40/49] =?UTF-8?q?Debugging,=20main=20=C3=A0=20reprendre?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/login2.js | 16 +++++++++++----- FrontEnd/modal.js | 10 ++++++---- FrontEnd/works2.js | 2 +- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js index ba4981dc4..9a7dfada4 100644 --- a/FrontEnd/login2.js +++ b/FrontEnd/login2.js @@ -61,20 +61,26 @@ function checkTokenLogin() { if (tokenAuth) { loginLink.textContent = "logout"; - adminBar.classList.remove("hidden"); + if (adminBar) { + adminBar.classList.remove("hidden"); - allFilterBtn.classList.remove("filtres"); + allFilterBtn.classList.add("hidden"); + } } else { loginLink.textContent = "login"; - adminBar.classList.add("hidden"); - modifierBtn.parentNode.removeChild(modifierBtn); + if (adminBar) { + adminBar.classList.add("hidden"); + modifierBtn.parentNode.removeChild(modifierBtn); + } } } // Ajout de l'écouteur d'événements pour la soumission du formulaire function initLoginForm() { const form = document.getElementById("login"); - form.addEventListener("submit", handleFormSubmission); + if (form) { + form.addEventListener("submit", handleFormSubmission); + } } // ---------------------------- document.addEventListener("DOMContentLoaded", checkTokenLogin); diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index c05719cbd..8e52cad94 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -33,10 +33,12 @@ function populateModalWithExistingProjects() { // // ---------------MODAL---------------- // Ajout d'un écouteur d'événements pour le bouton "Édition" const editingBtn = document.getElementById("edit-mode-btn"); -editingBtn.addEventListener("click", function () { - toggleModal(true); - populateModalWithExistingProjects(); -}); +if (editingBtn) { + editingBtn.addEventListener("click", function () { + toggleModal(true); + populateModalWithExistingProjects(); + }); +} // Ajout d'un écouteur d'événements pour le bouton de fermeture de la fenêtre modale document diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js index fa945e61c..8447858a6 100644 --- a/FrontEnd/works2.js +++ b/FrontEnd/works2.js @@ -49,6 +49,7 @@ function setupButtons(works, filterContainer, displayContainer) { const btnAll = createFilterButton("Tous", () => displayWorks(works, displayContainer) ); + filterContainer.appendChild(btnAll); uniqueCategories.forEach((categoryName) => { @@ -102,7 +103,6 @@ function deleteWorks() { } }); } - // Exécution async function initWorks() { From 7cd01f8de4af3f21dbbc5e81a3b184c20e083462 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 3 Sep 2023 17:59:19 +0200 Subject: [PATCH 41/49] Commit avant construction du formulaire d'upload --- FrontEnd/modal.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index 8e52cad94..60e4702ae 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -5,7 +5,7 @@ function toggleModal(isVisible) { } // Fonction pour copier les projets existants dans la fenêtre modale -function populateModalWithExistingProjects() { +function importModalWithExistingProjects() { const existingProjects = document.querySelector(".projets").cloneNode(true); const modalProjects = document.getElementById("existing-projects"); modalProjects.innerHTML = ""; @@ -36,7 +36,7 @@ const editingBtn = document.getElementById("edit-mode-btn"); if (editingBtn) { editingBtn.addEventListener("click", function () { toggleModal(true); - populateModalWithExistingProjects(); + importModalWithExistingProjects(); }); } @@ -54,4 +54,4 @@ document toggleModal(false); } }); -// ------------------------------------------------------------------------------------------------------------------ +// ------------------------------------------------------------------------------------------------- From d13740cc947c5fbb2227679c91a20917a4a28c34 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 3 Sep 2023 18:00:07 +0200 Subject: [PATCH 42/49] detail --- FrontEnd/works2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FrontEnd/works2.js b/FrontEnd/works2.js index 8447858a6..e464a03e8 100644 --- a/FrontEnd/works2.js +++ b/FrontEnd/works2.js @@ -92,7 +92,7 @@ function deleteWorks() { ); if (response.ok) { - // Supprimez le projet du DOM dans la fenêtre modale et dans la div .projets + // Supprimer le projet du DOM dans la fenêtre modale et dans la div .projets document .querySelector(`.projets figure[data-id="${projetId}"]`) .remove(); From 4e82958e732b6d068758e8d486a2581ed650e4ff Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Sun, 3 Sep 2023 20:21:39 +0200 Subject: [PATCH 43/49] =?UTF-8?q?Bug=20filtres=20en=20mode=20connect=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 74 +++++++++++++++++++++++++++++++++++++-- FrontEnd/index.html | 23 ++++++++++++ FrontEnd/modal.js | 57 +++++++++++++++++++++++++++++- 3 files changed, 150 insertions(+), 4 deletions(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index 51f141f39..f05629ac1 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -464,9 +464,6 @@ footer nav ul { text-align: center; border-radius: 60px; } -.hidden { - display: none; -} .img-container { position: relative; @@ -488,3 +485,74 @@ footer nav ul { border: 1px solid black; border-radius: 3px; } + +.modal-content-form { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 50px 80px; + max-height: 730px; + width: 630px; + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; +} + +/* #contact { + width: 50%; + margin: auto; +} */ +.modal-content-form > * { + text-align: center; +} +.modal-content-form h3 { + color: #000; + font-size: 1.625rem; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.modal-content-form form { + text-align: left; + margin-top: 30px; + display: flex; + flex-direction: column; +} + +image-upload { + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} +.modal-content-form input { + height: 50px; + font-size: 1.2em; + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} +.modal-content-form label { + margin: 2em 0 1em 0; +} +.modal-content-form text { + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} + +.modal-content-form button { + font-family: "Syne"; + font-weight: 700; + color: white; + background-color: #1d6154; + margin: 2em auto; + width: 180px; + text-align: center; + border-radius: 60px; +} + +select { + border: none; + box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.09); +} diff --git a/FrontEnd/index.html b/FrontEnd/index.html index f5b03057f..926295f0e 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -108,6 +108,29 @@

Galerie Photo

+ + diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index 60e4702ae..f6f537436 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -54,4 +54,59 @@ document toggleModal(false); } }); -// ------------------------------------------------------------------------------------------------- + +// ---------------------Formulaire envoi photo--------------------------------------------------- +const addPhotoBtn = document.getElementById("add-photo"); + +addPhotoBtn.addEventListener("click", function () { + // Cachez la galerie d'images et affichez le formulaire + + document.getElementById("edit-modal").classList.add("hidden"); + document + .getElementById("add-photo-form-container") + .classList.remove("hidden"); +}); + +const addPhotoForm = document.getElementById("add-photo-form"); +// console.log(addPhotoForm); + +if (addPhotoForm) + addPhotoForm.addEventListener("submit", async function (event) { + event.preventDefault(); + + const imageUpload = document.getElementById("image-upload").files[0]; + const projectTitle = document.getElementById("project-title").value; + const projectCategory = document.getElementById("project-category").value; + + // Validation + if (!imageUpload || !projectTitle || !projectCategory) { + document.getElementById("form-error-message").innerText = + "Veuillez remplir tous les champs."; + return; + } + + // Création de l'objet FormData pour envoyer le fichier et les autres données + const formData = new FormData(); + formData.append("image", imageUpload); + formData.append("title", projectTitle); + formData.append("categoryId", projectCategory); + + // Envoi à l'API + const token = localStorage.getItem("token"); + const response = await fetch("http://localhost:5678/api/works", { + method: "POST", + headers: { + Authorization: `Bearer ${token}`, + }, + body: formData, + }); + + if (response.ok) { + // Réponse de l'API si le formulaire est correctement envoyé + alert("Projet ajouté avec succès!"); + location.reload(); // Recharger la page pour voir le nouveau projet + } else { + // Message d'erreur + alert("Une erreur s'est produite. Veuillez réessayer."); + } + }); From 140cc2396281b9e895bb1afc6de1a123f84e6cbb Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 4 Sep 2023 06:16:53 +0200 Subject: [PATCH 44/49] =?UTF-8?q?Bug=20filtres=20CSS=20corrig=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FrontEnd/assets/style.css | 4 ++++ FrontEnd/login2.js | 1 - FrontEnd/modal.js | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index f05629ac1..f47904a99 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -465,6 +465,10 @@ footer nav ul { border-radius: 60px; } +.hidden { + display: none; +} + .img-container { position: relative; } diff --git a/FrontEnd/login2.js b/FrontEnd/login2.js index 9a7dfada4..d165a696d 100644 --- a/FrontEnd/login2.js +++ b/FrontEnd/login2.js @@ -63,7 +63,6 @@ function checkTokenLogin() { loginLink.textContent = "logout"; if (adminBar) { adminBar.classList.remove("hidden"); - allFilterBtn.classList.add("hidden"); } } else { diff --git a/FrontEnd/modal.js b/FrontEnd/modal.js index f6f537436..deb6f4a77 100644 --- a/FrontEnd/modal.js +++ b/FrontEnd/modal.js @@ -57,6 +57,7 @@ document // ---------------------Formulaire envoi photo--------------------------------------------------- const addPhotoBtn = document.getElementById("add-photo"); +console.log(addPhotoBtn); addPhotoBtn.addEventListener("click", function () { // Cachez la galerie d'images et affichez le formulaire From 2e91580beec1d63dad0da70ee6bf764a56758a21 Mon Sep 17 00:00:00 2001 From: rezozero59 Date: Mon, 4 Sep 2023 09:41:33 +0200 Subject: [PATCH 45/49] Debug affichage formulaire/gaelrie ok --- FrontEnd/assets/style.css | 4 +- FrontEnd/index.html | 8 +-- FrontEnd/login.js | 119 -------------------------------------- FrontEnd/modal.js | 16 ++--- FrontEnd/modalGA.js | 82 -------------------------- FrontEnd/modalWEB.js | 11 ---- FrontEnd/works.js | 62 -------------------- 7 files changed, 14 insertions(+), 288 deletions(-) delete mode 100644 FrontEnd/login.js delete mode 100644 FrontEnd/modalGA.js delete mode 100644 FrontEnd/modalWEB.js delete mode 100644 FrontEnd/works.js diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css index f47904a99..a90982af3 100644 --- a/FrontEnd/assets/style.css +++ b/FrontEnd/assets/style.css @@ -502,7 +502,9 @@ footer nav ul { display: flex; flex-direction: column; align-items: center; - overflow-y: auto; +} +.hidden { + display: none; } /* #contact { diff --git a/FrontEnd/index.html b/FrontEnd/index.html index 926295f0e..f2bd28fde 100644 --- a/FrontEnd/index.html +++ b/FrontEnd/index.html @@ -96,7 +96,7 @@

Contact