diff --git a/src/Router.js b/src/Router.js index 03a6af29a7f39e804f764b7338de35ce6cc8368f..98d928d22168a0fc312941a61c453c6c52d10c26 100644 --- a/src/Router.js +++ b/src/Router.js @@ -8,18 +8,17 @@ export default class Router { if (route) { this.titleElement.innerHTML = `<h1>${route.title}</h1>`; this.contentElement.innerHTML = route.page.render(); + route.page.mount?.(this.contentElement); } } static #menuElement; static set menuElement(element) { this.#menuElement = element; function redirect(event) { - event.currentTarget.navigate(menuElement.getAttribute('href')); - console.log(event.currentTarget.getAttribute('href')) - } - var liens = menuElement.getAttribute('a'); - for(var i=0;i<liens.length; i++) { - liens[i].addEventListener('click',redirect); + this.navigate(event.currentTarget.getAttribute('href')); + console.log(event.currentTarget.getAttribute('href')); } + this.#menuElement.addEventListener('click',redirect); } + } diff --git a/src/main.js b/src/main.js index 4ec3f2e6899a4a9e634257bfe6e6694512b9a640..5807d0b302efb8a902315499c164563d25d822e8 100644 --- a/src/main.js +++ b/src/main.js @@ -19,9 +19,9 @@ function fermer(event) { const close = document.querySelector('.closeButton'); close.addEventListener('click', fermer); -pizzaList = new PizzaList([]), - aboutPage = new Component('section', null, 'Ce site est génial'), - pizzaForm = new Component('section', null, 'Ici vous pourrez ajouter une pizza'); +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' }, diff --git a/src/pages/Page.js b/src/pages/Page.js new file mode 100644 index 0000000000000000000000000000000000000000..8ccf3ed8dc481d6f0e94cc52d421f76a533a0ae1 --- /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 0000000000000000000000000000000000000000..3c55ca47735c461e599da1a6b0b2c3ed586abbf2 --- /dev/null +++ b/src/pages/PizzaForm.js @@ -0,0 +1,23 @@ +import Page from './Page.js'; + +export default class AddPizzaPage 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); + document.querySelector('button').addEventListener('click',submit()); + } + + submit(event) { + console.log(document.querySelector('input').getAttribute('name')); + } +} diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index fcaedaf6bc1e55e9595774b5bd9ba88be2346d94..fe637606536e2f01023d33bf9bfe19638bf4d4d1 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -1,11 +1,11 @@ -import Component from '../components/Component.js'; import PizzaThumbnail from '../components/PizzaThumbnail.js'; +import Page from './Page'; -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; }