From 0ef39bd31a33ff1da34900a1580d3b6522bc2ecd Mon Sep 17 00:00:00 2001
From: Quentin Gillot <quentin.gillot.etu@univ-lille.fr>
Date: Thu, 18 Feb 2021 11:23:06 +0100
Subject: [PATCH] fini

---
 index.html             |  5 ++++-
 news.html              | 10 ++++++++++
 src/data.js            | 27 ---------------------------
 src/main.js            | 38 +++++++++++++++++++++++++++-----------
 src/pages/PizzaForm.js | 42 +++++++++++++++++++++++++++++++++++++++---
 src/pages/PizzaList.js |  8 ++++++++
 6 files changed, 88 insertions(+), 42 deletions(-)
 create mode 100644 news.html
 delete mode 100644 src/data.js

diff --git a/index.html b/index.html
index deabf71..da2db67 100644
--- a/index.html
+++ b/index.html
@@ -31,11 +31,14 @@
 			</ul>
 		</nav>
 	</header>
-	<section class="newsContainer" style="display:none">
+	<!-- <section class="newsContainer" style="display:none">
 		<article>
 			<button class="closeButton"></button>
 			<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
 		</article>
+	</section> -->
+	<section class="newsContainer">
+		
 	</section>
 	<section class="pageContainer">
 		<header class="pageTitle"></header>
diff --git a/news.html b/news.html
new file mode 100644
index 0000000..642df87
--- /dev/null
+++ b/news.html
@@ -0,0 +1,10 @@
+<article>
+	<button class="closeButton"></button>
+	<h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1>
+	<p>
+		Découvrez notre nouvelle pizza
+		<strong class="spicy">Spicy</strong>
+		<br/>
+		aux délicieuses saveurs épicées !
+	</p>
+</article>
diff --git a/src/data.js b/src/data.js
deleted file mode 100644
index 5d735aa..0000000
--- a/src/data.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const data = [
-	{
-		name: 'Regina',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 9.95,
-		image:
-			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
-	},
-	{
-		name: 'Napolitaine',
-		base: 'tomate',
-		price_small: 6.5,
-		price_large: 8.95,
-		image:
-			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
-	},
-	{
-		name: 'Spicy',
-		base: 'crème',
-		price_small: 5.5,
-		price_large: 8,
-		image:
-			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
-	},
-];
-export default data;
diff --git a/src/main.js b/src/main.js
index 22c3e46..9d0d7a6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,4 @@
 import Router from './Router';
-import data from './data';
 import PizzaList from './pages/PizzaList';
 import PizzaForm from './pages/PizzaForm';
 import Component from './components/Component';
@@ -18,7 +17,7 @@ Router.routes = [
 ];
 
 // Router.navigate('/'); // affiche une page vide
-pizzaList.pizzas = data;
+
 // Router.navigate('/'); // affiche la liste des pizzas
 
 // B.1. Sélectionner des éléments
@@ -40,15 +39,6 @@ document.querySelector(
 // );
 
 // C.2. Navigation en JS : afficher/masquer un élément
-const newsContainer = document.querySelector('.newsContainer'),
-	closeButton = newsContainer.querySelector('.closeButton');
-// affichage du bandeau de news
-newsContainer.style.display = '';
-// gestion du bouton fermer
-closeButton.addEventListener('click', event => {
-	event.preventDefault();
-	newsContainer.style.display = 'none';
-});
 
 // E.3. Deeplinking
 // détection des boutons précédent/suivant du navigateur :
@@ -57,3 +47,29 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false);
 // affichage de la page initiale :
 // même traitement que lors de l'appui sur les boutons précédent/suivant
 window.onpopstate();
+// console.log(1);
+// fetch('./news.html')
+// 	.then(response => response.text())
+// 	.then(responseText => console.log(responseText));
+// console.log(2);
+
+function displayNews(html) {
+	// 1. injectez le contenu du fichier dans la section .newsContainer
+	document.querySelector('.newsContainer').innerHTML += html;
+	// 2. affichez la balise .newsContainer
+	//console.log(document.querySelector('.newsContainer'));
+	const closeButton = newsContainer.querySelector('.closeButton');
+	closeButton.addEventListener('click', event => {
+		event.preventDefault();
+		newsContainer.style.display = 'none';
+	});
+}
+fetch('./news.html')
+	.then(response => response.text())
+	.then(displayNews);
+
+const newsContainer = document.querySelector('.newsContainer');
+
+// affichage du bandeau de news
+newsContainer.style.display = '';
+// gestion du bouton fermer
diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js
index 60c977f..1d860a8 100644
--- a/src/pages/PizzaForm.js
+++ b/src/pages/PizzaForm.js
@@ -1,5 +1,5 @@
 import Page from './Page.js';
-
+import Router from '../Router.js';
 export default class AddPizzaPage extends Page {
 	render() {
 		return /*html*/ `
@@ -8,6 +8,20 @@ export default class AddPizzaPage extends Page {
 					Nom :
 					<input type="text" name="name">
 				</label>
+				<label>
+	Image :<br/>
+	<input type="text" name="image" placeholder="https://source.unsplash.com/xxxxxxx/600x600">
+	<small>Vous pouvez trouver des images de pizza sur <a href="https://unsplash.com/">https://unsplash.com/</a> puis utiliser l'URL <code>https://source.unsplash.com/xxxxxxx/600x600</code> où <code>xxxxxxx</code> est l'id de la photo choisie (celui dans la barre d'adresse)</small>
+</label>
+<label>
+	Prix petit format :
+	<input type="number" name="price_small" step="0.05">
+</label>
+<label>
+	Prix grand format :
+	<input type="number" name="price_large" step="0.05">
+</label>
+
 				<button type="submit">Ajouter</button>
 			</form>`;
 	}
@@ -25,11 +39,33 @@ export default class AddPizzaPage extends Page {
 		// D.4. La validation de la saisie
 		const nameInput = this.element.querySelector('input[name="name"]'),
 			name = nameInput.value;
+		const imageInput = this.element.querySelector('input[name="image"]'),
+			image = imageInput.value;
+		const smallPriceInput = this.element.querySelector(
+				'input[name="price_small"]'
+			),
+			price_small = smallPriceInput.value;
+		const largePriceInput = this.element.querySelector(
+				'input[name="price_large"]'
+			),
+			price_large = largePriceInput.value;
+		const pizza = {
+			name: name,
+			image: image,
+			price_small: price_small,
+			price_large: price_large,
+		};
 		if (name === '') {
 			alert('Erreur : le champ "Nom" est obligatoire');
 			return;
 		}
-		alert(`La pizza ${name} a été ajoutée !`);
-		nameInput.value = '';
+
+		fetch('http://localhost:8080/api/v1/pizzas', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(pizza),
+		}).then(tmp => Router.navigate('/'));
+		// alert(`La pizza ${name} a été ajoutée !`);
+		// nameInput.value = '';
 	}
 }
diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js
index de0d07f..688f034 100644
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
@@ -13,4 +13,12 @@ export default class PizzaList extends Page {
 		this.#pizzas = value;
 		this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
 	}
+
+	mount(element) {
+		super.mount(element);
+		fetch('http://localhost:8080/api/v1/pizzas')
+			.then(response => response.json())
+			.then(json => (this.pizzas = json))
+			.then(affiche => (this.element.innerHTML = this.render()));
+	}
 }
-- 
GitLab