tp3 fini

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --mode=production",
-	"watch": "webpack --mode=development --watch"
+    "watch": "webpack --mode=development --watch"
   },
   "author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
   "homepage": "https://gitlab.univ-lille.fr/js",

src/Router.js

@@ -2,12 +2,34 @@ export default class Router {
 	static titleElement;
 	static contentElement;
 	static routes = [];
+	static #menuElement;
+
+	static set menuElement(element) {
+		this.#menuElement = element;
+		console.log(this.#menuElement);
+		this.#menuElement.addEventListener('click', this.handleClick);
+	}
+
+	static handleClick(event) {
+		event.preventDefault();
+		console.log(event);
+		Router.navigate(event.target.getAttribute('href'));
+		event.target.classList.add('active');
+	}
 
 	static navigate(path) {
 		const route = this.routes.find(route => route.path === path);
 		if (route) {
 			this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
 			this.contentElement.innerHTML = route.page.render();
+			console.log(route);
+			route.page.mount?.(this.contentElement);
+			window.history.pushState({}, '', path);
+			const d = document.querySelectorAll('.mainMenu a');
+			d.forEach(element => {
+				if (element.textContent == route.title) element.classList.add('active');
+				else element.classList.remove('active');
+			});
 		}
 	}
 }

src/main.js

 import Router from './Router';
 import data from './data';
 import PizzaList from './pages/PizzaList';
+import Component from './components/Component';
+import PizzaForm from './pages/PizzaForm';
+import { doc } from 'prettier';
+
+const pizzaList = new PizzaList([]),
+	aboutPage = new Component('p', null, 'ce site est génial'),
+	pizzaForm = new PizzaForm();
 
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
+Router.routes = [
+	{ path: '/', page: pizzaList, title: 'La carte' },
+	{ path: '/a-propos', page: aboutPage, title: 'À propos' },
+	{ path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
+];
+pizzaList.pizzas = data;
+Router.navigate(document.location.pathname); // affiche la liste des pizzas
+Router.menuElement = document.querySelector('.mainMenu');
 
-const pizzaList = new PizzaList([]);
-Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+document.querySelector('.logo').innerHTML +=
+	"<small> Les pizzas c'est la vie</small>";
 
-Router.navigate('/'); // affiche une page vide
-pizzaList.pizzas = data;
-Router.navigate('/'); // affiche la liste des pizzas
+document.querySelector('li a').classList.add('active');
+
+const news = document.querySelector('.newsContainer');
+news.setAttribute('style', "display:''");
+const close = document.querySelector('.newsContainer button');
+function handleClick(event) {
+	event.preventDefault();
+	news.setAttribute('style', 'display:none');
+}
+close.addEventListener('click', handleClick);
+
+window.onpopstate = e => {
+	console.log(document.location);
+	Router.navigate(document.location.pathname);
+};

src/pages/Page.js

+import Component from '../components/Component';
+
+export default class Page extends Component {
+	element;
+
+	constructor(className, children) {
+		super('section', { name: 'class', value: className }, children);
+	}
+	mount(element) {
+		this.element = element;
+	}
+}

src/pages/PizzaForm.js

+import Page from './Page.js';
+
+export default class PizzaForm extends Page {
+	render() {
+		return /*html*/ `
+			<form class="pizzaForm">
+				<label>
+					Nom :
+					<input type="text" name="name">
+				</label>
+				<button type="submit">Ajouter</button>
+			</form>`;
+	}
+
+	mount(element) {
+		super.mount(element);
+		const button = element.querySelector('button');
+		button.addEventListener('click', this.submit);
+	}
+
+	submit(event) {
+		event.preventDefault();
+		const form = document.querySelector('form'),
+			input = form.querySelector('input[name=name]');
+		if (!input.value == '') {
+			alert(`La pizza ${input.value} a été créer`);
+		} else alert('Veuillez entrer un nom de pizza');
+	}
+}

src/pages/PizzaList.js

-import Component from '../components/Component.js';
-import PizzaThumbnail from '../components/PizzaThumbnail.js';
-
-export default class PizzaList extends Component {
+import Page from './Page';
+import PizzaThumbnail from '../components/PizzaThumbnail';
+export default class PizzaList extends Page {
 	#pizzas;
 
 	constructor(pizzas) {
-		super('section', { name: 'class', value: 'pizzaList' });
+		super('pizzaList'); // on pase juste la classe CSS souhaitée
 		this.pizzas = pizzas;
 	}