diff --git a/src/Router.js b/src/Router.js index 64b8bfdae36c26faf57f62e5ac8b95c40af60011..4785ab158a791c41dbab00de8baa59ed244ef0b8 100644 --- a/src/Router.js +++ b/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); } } diff --git a/src/main.js b/src/main.js index 0cedb90df6eaf87a0aebceeaaaf4377833a7ea45..18c8e037392a8753a2b0f0b52386a87f7b1a3e6a 100644 --- a/src/main.js +++ b/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 diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js index 20438f790a0df777de55c9fb1e8dc869ed63195c..fdbdf43f5a2619aded0ddf23c99b1c4fee4e2b36 100644 --- a/src/pages/PizzaForm.js +++ b/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(); + } + } +} diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index fc695330d0185dec7966f06532237b6402682323..64a39b90d9e09023f1a2563ffe913c910b372200 100644 --- a/src/pages/PizzaList.js +++ b/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; }