Skip to content

Commit

Permalink
probleme scrool and google sheet for pizza
Browse files Browse the repository at this point in the history
  • Loading branch information
@Valentin-Morette
Valentin-Morette committed Oct 7, 2023
1 parent 56881dd commit c2af5e4
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 158 deletions.
18 changes: 9 additions & 9 deletions frontend/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down
211 changes: 63 additions & 148 deletions frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="App">
<div className="title">
Expand All @@ -12,133 +58,14 @@ function App() {
<div className="primary">
<h3 className="primaryTitle">Pizzas</h3>
<div className="primaryPizza">
<div className="secondaryPizza">
<div>
<h4 className="withp">Margarita</h4>
<p>Sauce tomate, Mozzarella, Basilic</p>
</div>
<p>18.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Anchois</h4>
<p>Sauce tomate, Mozzarella, Anchois, Olive</p>
</div>
<p>18.50$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Toute garnie</h4>
<p>
Sauce tomate, Mozzarella, Champignon, Poivron vert, Peppéroni
</p>
</div>
<p>19.50$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Américaines</h4>
<p>
Sauce Tomate, Mozzarella, Oignon, Bacon, Jambon Blanc,
Peppéroni
</p>
</div>
<p>21.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">4 Fromages</h4>
<p>
Sauce Tomate, Mozzarella, Emmental, Parmesan, Chèvre, Bleu,
Olive
</p>
</div>
<p>23.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Reine</h4>
<p>
Sauce Tomate, Mozzarella, Champignon, Jambon Blanc, Parmesan,
Olive
</p>
</div>
<p>22.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Calzone</h4>
<p>
Sauce Tomate, Mozzarella, Champignon, Jambon Blanc, Parmesan,
Oeuf
</p>
</div>
<p>22.50$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Végétarienne</h4>
<p>
Sauce Tomate, Mozzarella, Oignon, Champignon, Poivron Vert,
Artichaut, Olive
</p>
</div>
<p>21.50$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Poulet</h4>
<p>
Sauce Tomate, Mozzarella, Oignon, Champignon, Poulet,
Parmesan, Olive
</p>
</div>
<p>22.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Chèvre Miel</h4>
<p>
Sauce Tomate, Mozzarella, Oignon, Chèvre, Noix, Parmesan,
Olive, Basilic
</p>
</div>
<p>24.00$</p>
</div>

<div className="secondaryPizza">
<div>
<h4 className="withp">Bambino</h4>
<p>
Petite pizza pour enfant ou petite faim ( Toute Garnie ou
Végétarienne )
</p>
</div>
<p>12.00$</p>
</div>

<div className="boisson">
<div>
<h4 className="nop">Extra</h4>
</div>
<p>2.50$</p>
</div>

<div className="boisson">
<div>
<h4 className="nop">Dessert</h4>
</div>
<p>7.50$</p>
</div>
{infoPizza.map((pizza) => (
<PizzaItem
key={pizza.nom}
name={pizza.nom}
ingredients={pizza.ingredients}
price={pizza.prix}
/>
))}
</div>
</div>
<div className="secondary">
Expand Down Expand Up @@ -180,26 +107,14 @@ function App() {
<div className="secondaryBloc">
<h3 className="secondaryTitle">Salades</h3>
<div className="blocSecond salade">
<div className="secondaryPizza">
<div>
<h4 className="withp">Salade Composée</h4>
<p>
Salade, Champignon, Poivron vert, Oignon, Artichaut, Olive,
Huile d'Olive, Vinaigre Balsamique
</p>
</div>
<p>13.00$</p>
</div>
<div className="secondaryPizza">
<div>
<h4 className="withp">Salade César</h4>
<p>
Salade, Poulet, Parmesan, Oignon cryspi, Croutons, Sauce
césar faite maison
</p>
</div>
<p>14.50$</p>
</div>
{infoSalade.map((salade) => (
<PizzaItem
key={salade.nom}
name={salade.nom}
ingredients={salade.ingredients}
price={salade.prix}
/>
))}
</div>
</div>
</div>
Expand All @@ -213,7 +128,7 @@ function App() {
height="375"
allowFullScreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
referrerPolicy="no-referrer-when-downgrade"
/>
</div>
<div>
Expand Down
Binary file added frontend/src/assets/img/background.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion frontend/src/assets/img/background.svg
View file

This file was deleted.

Empty file removed frontend/src/components/Counter.jsx
View file
Empty file.
15 changes: 15 additions & 0 deletions frontend/src/components/PizzaItem.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";

function PizzaItem({ name, ingredients, price }) {

Check failure on line 3 in frontend/src/components/PizzaItem.jsx

View workflow job for this annotation

GitHub Actions / Run linters 

'name' is missing in props validation

Check failure on line 3 in frontend/src/components/PizzaItem.jsx

View workflow job for this annotation

GitHub Actions / Run linters 

'ingredients' is missing in props validation

Check failure on line 3 in frontend/src/components/PizzaItem.jsx

View workflow job for this annotation

GitHub Actions / Run linters 

'price' is missing in props validation
return (
<div className="secondaryPizza">
<div>
<h4 className={ingredients === "" ? "nop" : "withp"}>{name}</h4>
<p>{ingredients}</p>
</div>
<p>{price}</p>
</div>
);
}

export default PizzaItem;
Loading

0 comments on commit c2af5e4

Please sign in to comment.