From a7b3887f673b8cf36e37dc3d25b6329f93facc1e Mon Sep 17 00:00:00 2001
From: Baptiste LANTOINE <baptiste.lantoine2.etu@univ-lille.fr>
Date: Thu, 11 Feb 2021 11:52:19 +0100
Subject: [PATCH] tp3 D3

---
 package.json           |  2 +-
 src/Router.js          | 18 ++++++++++++++++++
 src/main.js            | 25 ++++++++++++++++++++++---
 src/pages/Page.js      | 12 ++++++++++++
 src/pages/PizzaForm.js | 20 ++++++++++++++++++++
 src/pages/PizzaList.js |  5 +++--
 6 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/Page.js
 create mode 100644 src/pages/PizzaForm.js

diff --git a/package.json b/package.json
index c41a110..abdfa61 100644
--- a/package.json
+++ b/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",
diff --git a/src/Router.js b/src/Router.js
index 7aef071..043e86c 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -2,12 +2,30 @@ export default class Router {
 	static titleElement;
 	static contentElement;
 	static routes = [];
+	static #menuElement;
+	static set menuElement(element) {
+		this.#menuElement = element;
+		const value = element.querySelectorAll('a');
+		value.forEach(elem => {
+			console.log(elem.getAttribute('href'));
+			//console.log(elem);
+			elem.addEventListener('click', event => {
+				event.preventDefault();
+				Router.navigate(elem.getAttribute('href'));
+				console.log('event');
+			});
+		});
+		// au clic sur n'importe quel lien contenu dans "element"
+		// déclenchez un appel à Router.navigate(path)
+		// où "path" est la valeur de l'attribut `href=".."` du lien cliqué
+	}
 
 	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();
+			route.page.mount?.(this.contentElement);
 		}
 	}
 }
diff --git a/src/main.js b/src/main.js
index 6148d2b..2b69581 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,32 @@
 import Router from './Router';
 import data from './data';
 import PizzaList from './pages/PizzaList';
-
+import PizzaForm from './pages/PizzaForm';
+import Component from './components/Component';
 Router.titleElement = document.querySelector('.pageTitle');
 Router.contentElement = document.querySelector('.pageContent');
 
-const pizzaList = new PizzaList([]);
-Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+const pizzaList = new PizzaList([]),
+	aboutPage = new Component('p', null, 'ce site est génial'),
+	pizzaForm = new PizzaForm();
+
+Router.routes = [
+	{ path: '/', page: pizzaList, title: 'La carte' },
+	{ path: '/a-propos', page: aboutPage, title: 'À propos' },
+	{ 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
+
+const display = document.querySelector('.newsContainer');
+display.setAttribute('style', '');
+
+const displayBtn = document.querySelector('.closeButton');
+displayBtn.addEventListener('click', onclick);
+
+function onclick(event) {
+	display.setAttribute('style', 'display:none');
+}
+Router.menuElement = document.querySelector('.mainMenu');
diff --git a/src/pages/Page.js b/src/pages/Page.js
new file mode 100644
index 0000000..8ccf3ed
--- /dev/null
+++ b/src/pages/Page.js
@@ -0,0 +1,12 @@
+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;
+	}
+}
diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js
new file mode 100644
index 0000000..c97a2d0
--- /dev/null
+++ b/src/pages/PizzaForm.js
@@ -0,0 +1,20 @@
+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);
+	}
+
+	submit(event) {}
+}
diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js
index fcaedaf..a5fe4d4 100644
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
@@ -1,11 +1,12 @@
 import Component from '../components/Component.js';
 import PizzaThumbnail from '../components/PizzaThumbnail.js';
+import Page from './Page.js';
 
-export default class PizzaList extends Component {
+export default class PizzaList extends Page {
 	#pizzas;
 
 	constructor(pizzas) {
-		super('section', { name: 'class', value: 'pizzaList' });
+		super('pizzaList');
 		this.pizzas = pizzas;
 	}
 
-- 
GitLab