tp ajax

index.html

@@ -32,10 +32,7 @@
 		</nav>
 	</header>
 	<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="pageContainer">
 		<header class="pageTitle"></header>

news.html

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

src/main.js

 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
@@ -57,3 +56,21 @@ 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();
+
+function displayNews(html) {
+	document.querySelector('.newsContainer').innerHTML = html;
+	newsContainer.style.display = '';
+}
+function closeNews() {
+	(newsContainer = document.querySelector('.newsContainer')),
+		(closeButton = newsContainer.querySelector('.closeButton'));
+	closeButton.addEventListener('click', event => {
+		event.preventDefault();
+		newsContainer.style.display = 'none';
+	});
+}
+
+fetch('./news.html')
+	.then(response => response.text())
+	.then(displayNews)
+	.then(closeNews);

src/pages/PizzaForm.js

@@ -25,10 +25,43 @@ 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[image="image"]'),
+			image = nameInput.value;
+		const smallInput = this.element.querySelector(
+				'input[priceSmall="priceSmall"]'
+			),
+			priceSmall = nameInput.value;
+		const LargeInput = this.element.querySelector(
+				'input[priceLarge="priceLarge"]'
+			),
+			priceLarge = nameInput.value;
 		if (name === '') {
 			alert('Erreur : le champ "Nom" est obligatoire');
 			return;
 		}
+		if (image === '') {
+			alert('Erreur : le champ "Image" est obligatoire');
+			return;
+		}
+		if (priceSmall === '') {
+			alert('Erreur : le champ "priceSmall" est obligatoire');
+			return;
+		}
+		if (priceLarge === '') {
+			alert('Erreur : le champ "priceLarge" est obligatoire');
+			return;
+		}
+		const pizza = {
+			name,
+			image,
+			priceSmall,
+			priceLarge,
+		};
+		fetch('http://localhost:8080/api/v1/pizzas', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(pizza),
+		});
 		alert(`La pizza ${name} a été ajoutée !`);
 		nameInput.value = '';
 	}

src/pages/PizzaList.js

@@ -13,4 +13,13 @@ 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(responseJSON => {
+				this.pizzas = responseJSON;
+				this.element.innerHTML = this.render();
+			});
+	}
 }