diff --git a/src/Router.js b/src/Router.js index 493ba4aa817e6df6cd977a2c7f3c2cb48a4b3592..d5df3679fcabcb2dac8be4a1f686e6dbf13a183b 100644 --- a/src/Router.js +++ b/src/Router.js @@ -18,6 +18,7 @@ export default class Router { this.titleElement.innerHTML = `<h1>${route.title}</h1>`; // affichage de la page elle même this.contentElement.innerHTML = route.page.render(); + route.page.mount?.(this.contentElement); } } diff --git a/src/main.js b/src/main.js index 4b3adc04cf3440e335b3de6c8ca63523f0c89be7..88d19a457d8b171cefc49b4bf9d81bd390771ce6 100644 --- a/src/main.js +++ b/src/main.js @@ -2,17 +2,14 @@ import Router from './Router'; import data from './data'; import PizzaList from './pages/PizzaList'; import Component from './components/Component'; +import PizzaForm from './pages/pizzaForm.js'; Router.titleElement = document.querySelector('.pageTitle'); Router.contentElement = document.querySelector('.pageContent'); const pizzaList = new PizzaList(data), - aboutPage = new Component('section', null, 'Ce site est génial'), - pizzaForm = new Component( - 'section', - null, - 'Ici vous pourrez ajouter une pizza' - ); + 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/PizzaList.js b/src/pages/PizzaList.js index c76b6e6ac49921fc421332ecb913c852be9e2834..8a07d289a3bbeaaf9a468a6d9e1ec777e4abac3a 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -1,7 +1,8 @@ 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; // propriété privée constructor(pizzas) { diff --git a/src/pages/pizzaForm.js b/src/pages/pizzaForm.js new file mode 100644 index 0000000000000000000000000000000000000000..c97a2d0d08bcb448a7b5eb2f4a0f7758342c9315 --- /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) {} +}