tp3 fini

src/Router.js

@@ -4,12 +4,19 @@ export default class Router {
 	static routes = [];
 	static #menuElement;
 
-	static navigate(path) {
+	static navigate(path, noPush) {
 		const route = this.routes.find(route => route.path === path);
 		if (route) {
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
 			route.page.mount?.(this.contentElement);
+			const d = document.querySelectorAll('.mainMenu a');
+			d.forEach(element => {
+				if (element.textContent == route.title) element.classList.add('active');
+				else element.classList.remove('active');
+			});
+			if(!noPush)
+				window.history.pushState(null, null, route.path);
 		}
 	}
 

src/main.js

@@ -18,8 +18,11 @@ Router.routes = [
 
 Router.menuElement = document.querySelector('.mainMenu');
 
-Router.navigate('/'); // affiche une page vide
 pizzaList.pizzas = data;
-Router.navigate('/'); // affiche la liste des pizzas
+Router.navigate(document.location.pathname); // affiche la liste des pizzas
 
 document.querySelector('.newsContainer').setAttribute('style', '');
+
+window.onpopstate = () => {
+	Router.navigate(document.location.pathname, true);
+};
\ No newline at end of file

src/pages/PizzaForm.js

@@ -14,7 +14,19 @@ export default class PizzaForm extends Page {
 
 	mount(element) {
 		super.mount(element);
+		const form = document.querySelector('form');
+		form.addEventListener('submit', event => this.submit(event));
 	}
 
-	submit(event) {}
-}
\ No newline at end of file
+	submit(event) {
+		event.preventDefault();
+		const target = event.target, input = target.querySelector('input[name=name]').value;
+		if(input === "") {
+			window.alert("Nom vide !");
+		}
+		else {
+			window.alert(`La pizza ${input} a été ajoutée`);
+			target.reset();
+		}
+	}
+}

src/pages/PizzaList.js

@@ -6,7 +6,7 @@ export default class PizzaList extends Page {
 	#pizzas;
 
 	constructor(pizzas) {
-		super('pizzaList');// on pase juste la classe CSS souhaitée
+		super('pizzaList');// on passe juste la classe CSS souhaitée
 		this.pizzas = pizzas;
 	}