C1

index.html

@@ -32,10 +32,6 @@
 		</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/data.js

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

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';
@@ -17,18 +16,6 @@ Router.routes = [
 	{ path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
 ];
 
-// Router.navigate('/'); // affiche une page vide
-pizzaList.pizzas = data;
-// Router.navigate('/'); // affiche la liste des pizzas
-
-// B.1. Sélectionner des éléments
-// console.log(document.querySelector('.logo img'));
-// console.log(document.querySelector('.pizzaFormLink'));
-// console.log(document.querySelector('.pizzaThumbnail h4'));
-
-// console.log(document.querySelectorAll('.mainMenu a'));
-// console.log(document.querySelectorAll('.pizzaThumbnail li'));
-
 // B.2
 document.querySelector(
 	'.logo'
@@ -39,21 +26,30 @@ document.querySelector(
 // 	pizzaListLink.getAttribute('class') + ' active'
 // );
 
-// C.2. Navigation en JS : afficher/masquer un élément
+// E.3. Deeplinking
+// détection des boutons précédent/suivant du navigateur :
+// on lit l'url courante dans la barre d'adresse et on l'envoie au Router
+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;
+
 	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 :
-// on lit l'url courante dans la barre d'adresse et on l'envoie au Router
-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(displayNews);
+console.log(2);

src/pages/PizzaForm.js

@@ -29,6 +29,12 @@ export default class AddPizzaPage extends Page {
 			alert('Erreur : le champ "Nom" est obligatoire');
 			return;
 		}
+		fetch('http://localhost:8080/api/v1/pizzas', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(name),
+		});
+
 		alert(`La pizza ${name} a été ajoutée !`);
 		nameInput.value = '';
 	}

src/pages/PizzaList.js

@@ -13,4 +13,17 @@ export default class PizzaList extends Page {
 		this.#pizzas = value;
 		this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
 	}
+
+	update(data) {
+		this.pizzas = data;
+		this.element.innerHTML = this.render();
+	}
+
+	mount(element) {
+		super.mount(element);
+		const data = this.element.querySelector('.pizzaList');
+		fetch('http://localhost:8080/api/v1/pizzas')
+			.then(response => response.json())
+			.then(data => this.update(data));
+	}
 }