diff --git a/frontend/src/App.css b/frontend/src/App.css index 984c6ab..335a6eb 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -15,7 +15,7 @@ body { font-family: "Roboto", sans-serif; - background-image: url("./assets/img/background.svg"); + background-image: url("./assets/img/background.png"); background-repeat: no-repeat; background-position: center; background-size: cover; @@ -90,8 +90,8 @@ h4 { .primaryPizza { display: grid; - grid-template-columns: 1fr 1fr; /* Crée deux colonnes de largeur égale */ - gap: 2rem; /* Espacement entre les colonnes et les lignes */ + grid-template-columns: 1fr 1fr; + gap: 2rem; padding-bottom: 4rem; border-bottom: #fff solid 3px; } @@ -108,23 +108,23 @@ h4 { .secondaryPizza, .boisson { display: flex; - justify-content: space-between; /* Ceci va pousser les éléments aux extrémités opposées de l'espace disponible */ - align-items: center; /* Ceci aligne le haut des éléments */ - width: 100%; /* Ceci s'assure que le `.secondaryPizza` prend toute la largeur disponible */ + justify-content: space-between; + align-items: center; + width: 100%; } .secondaryPizza > div, .boisson > div { - width: 92%; /* 100% divisé par 2, moins 2% pour un peu d'espacement entre les deux */ + width: 92%; padding: 0 1rem 0 2rem; border-right: #fff solid 3px; } .secondaryPizza > p, .boisson > p { - width: 6%; /* 100% divisé par 2, moins 2% pour un peu d'espacement entre les deux */ + width: 6%; margin: 0 2rem; - text-align: right; /* Pour aligner les prix à droite */ + text-align: right; } .secondaryBloc { diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index d257ae8..efe46a9 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,7 +1,53 @@ import "./App.css"; +import { useState, useEffect } from "react"; +// eslint-disable-next-line import/no-extraneous-dependencies +import papa from "papaparse"; import logo from "./assets/img/logo.png"; +import PizzaItem from "./components/PizzaItem"; function App() { + const [infoPizza, setInfoPizza] = useState([]); + const [infoSalade, setInfoSalade] = useState([]); + + const prepareData = (data, type) => { + const headers = data[0]; + const rows = data.slice(1); + const json = rows.map((row) => { + const obj = {}; + // eslint-disable-next-line no-return-assign + headers.forEach((key, j) => (obj[key] = row[j])); + return obj; + }); + if (type === "pizza") setInfoPizza(json); + else setInfoSalade(json); + }; + + useEffect(() => { + const csvUrlPizza = + "https://docs.google.com/spreadsheets/d/e/2PACX-1vRBSEKMC4hHRxoorMUzDwtrIYycwh-iFWJwonyjHO2K3fNenXpGsjQuegaxGNJl_9IstKvnRM-YVKSf/pub?gid=0&single=true&output=csv"; + fetch(csvUrlPizza) + .then((response) => { + if (!response.ok) + throw new Error(`Network response was not ok ${response.statusText}`); + return response.text(); + }) + .then((text) => papa.parse(text, { header: false })) + .then((data) => prepareData(data.data, "pizza")) + .catch((error) => console.error("Error:", error)); + + const csvUrlSalade = + "https://docs.google.com/spreadsheets/d/e/2PACX-1vRBSEKMC4hHRxoorMUzDwtrIYycwh-iFWJwonyjHO2K3fNenXpGsjQuegaxGNJl_9IstKvnRM-YVKSf/pub?gid=842071051&single=true&output=csv"; + fetch(csvUrlSalade) + .then((response) => { + if (!response.ok) + throw new Error(`Network response was not ok ${response.statusText}`); + return response.text(); + }) + .then((text) => papa.parse(text, { header: false })) + .then((data) => prepareData(data.data, "salade")) + .catch((error) => console.error("Error:", error)); + }, []); + return (
@@ -12,133 +58,14 @@ function App() {

Pizzas

-
-
-

Margarita

-

Sauce tomate, Mozzarella, Basilic

-
-

18.00$

-
- -
-
-

Anchois

-

Sauce tomate, Mozzarella, Anchois, Olive

-
-

18.50$

-
- -
-
-

Toute garnie

-

- Sauce tomate, Mozzarella, Champignon, Poivron vert, Peppéroni -

-
-

19.50$

-
- -
-
-

Américaines

-

- Sauce Tomate, Mozzarella, Oignon, Bacon, Jambon Blanc, - Peppéroni -

-
-

21.00$

-
- -
-
-

4 Fromages

-

- Sauce Tomate, Mozzarella, Emmental, Parmesan, Chèvre, Bleu, - Olive -

-
-

23.00$

-
- -
-
-

Reine

-

- Sauce Tomate, Mozzarella, Champignon, Jambon Blanc, Parmesan, - Olive -

-
-

22.00$

-
- -
-
-

Calzone

-

- Sauce Tomate, Mozzarella, Champignon, Jambon Blanc, Parmesan, - Oeuf -

-
-

22.50$

-
- -
-
-

Végétarienne

-

- Sauce Tomate, Mozzarella, Oignon, Champignon, Poivron Vert, - Artichaut, Olive -

-
-

21.50$

-
- -
-
-

Poulet

-

- Sauce Tomate, Mozzarella, Oignon, Champignon, Poulet, - Parmesan, Olive -

-
-

22.00$

-
- -
-
-

Chèvre Miel

-

- Sauce Tomate, Mozzarella, Oignon, Chèvre, Noix, Parmesan, - Olive, Basilic -

-
-

24.00$

-
- -
-
-

Bambino

-

- Petite pizza pour enfant ou petite faim ( Toute Garnie ou - Végétarienne ) -

-
-

12.00$

-
- -
-
-

Extra

-
-

2.50$

-
- -
-
-

Dessert

-
-

7.50$

-
+ {infoPizza.map((pizza) => ( + + ))}
@@ -180,26 +107,14 @@ function App() {

Salades

-
-
-

Salade Composée

-

- Salade, Champignon, Poivron vert, Oignon, Artichaut, Olive, - Huile d'Olive, Vinaigre Balsamique -

-
-

13.00$

-
-
-
-

Salade César

-

- Salade, Poulet, Parmesan, Oignon cryspi, Croutons, Sauce - césar faite maison -

-
-

14.50$

-
+ {infoSalade.map((salade) => ( + + ))}
@@ -213,7 +128,7 @@ function App() { height="375" allowFullScreen="" loading="lazy" - referrerpolicy="no-referrer-when-downgrade" + referrerPolicy="no-referrer-when-downgrade" />
diff --git a/frontend/src/assets/img/background.png b/frontend/src/assets/img/background.png new file mode 100644 index 0000000..88fe377 Binary files /dev/null and b/frontend/src/assets/img/background.png differ diff --git a/frontend/src/assets/img/background.svg b/frontend/src/assets/img/background.svg deleted file mode 100644 index 39c4d2f..0000000 --- a/frontend/src/assets/img/background.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/Counter.jsx b/frontend/src/components/Counter.jsx deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/PizzaItem.jsx b/frontend/src/components/PizzaItem.jsx new file mode 100644 index 0000000..75dbde1 --- /dev/null +++ b/frontend/src/components/PizzaItem.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +function PizzaItem({ name, ingredients, price }) { + return ( +
+
+

{name}

+

{ingredients}

+
+

{price}

+
+ ); +} + +export default PizzaItem; diff --git a/package-lock.json b/package-lock.json index 4c5cfad..8674b02 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "template-fullstack", "version": "1.0.0", "license": "ISC", + "dependencies": { + "papaparse": "^5.4.1" + }, "devDependencies": { "concurrently": "^7.0.0", "husky": "^7.0.0" @@ -192,6 +195,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/papaparse": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", + "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==" + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -456,6 +464,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "papaparse": { + "version": "5.4.1", + "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.4.1.tgz", + "integrity": "sha512-HipMsgJkZu8br23pW15uvo6sib6wne/4woLZPlFf3rpDyMe9ywEXUsuD7+6K9PRkJlVT51j/sCOYDKGGS3ZJrw==" + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", diff --git a/package.json b/package.json index 08aba41..135d3fb 100644 --- a/package.json +++ b/package.json @@ -17,5 +17,8 @@ "devDependencies": { "concurrently": "^7.0.0", "husky": "^7.0.0" + }, + "dependencies": { + "papaparse": "^5.4.1" } }