diff --git a/src/Router.js b/src/Router.js index 7aef0711884fbc5af076fc2d62abd4dc61ad0d00..fe89f10ddc4e37c16ee591538c6870011e5cfde6 100644 --- a/src/Router.js +++ b/src/Router.js @@ -1,12 +1,22 @@ export default class Router { static titleElement; static contentElement; + /** + * Tableau des routes/pages de l'application. + * @example `Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }]` + */ static routes = []; + /** + * Affiche la page correspondant à `path` dans le tableau `routes` + * @param {String} path URL de la page à afficher + */ static navigate(path) { const route = this.routes.find(route => route.path === path); if (route) { + // affichage du titre de la page this.titleElement.innerHTML = `<h1>${route.title}</h1>`; + // affichage de la page elle même this.contentElement.innerHTML = route.page.render(); } } diff --git a/src/main.js b/src/main.js index 6148d2ba698b9b4314ca2f4afde288b429439f04..97abcfd749a5b6e36eacb240b179a84e8aaf572e 100644 --- a/src/main.js +++ b/src/main.js @@ -9,5 +9,5 @@ const pizzaList = new PizzaList([]); Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }]; Router.navigate('/'); // affiche une page vide -pizzaList.pizzas = data; +pizzaList.pizzas = data; // appel du setter Router.navigate('/'); // affiche la liste des pizzas diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index fcaedaf6bc1e55e9595774b5bd9ba88be2346d94..c76b6e6ac49921fc421332ecb913c852be9e2834 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -2,13 +2,19 @@ import Component from '../components/Component.js'; import PizzaThumbnail from '../components/PizzaThumbnail.js'; export default class PizzaList extends Component { - #pizzas; + #pizzas; // propriété privée constructor(pizzas) { super('section', { name: 'class', value: 'pizzaList' }); this.pizzas = pizzas; } + /** + * setter de la liste des pizzas. + * Génère autant de composants `PizzaThumbnail` que de pizzas dans le tableau + * et les stocke dans `this.children` + * @param {Array} value Tableau d'objets pizza à afficher + */ set pizzas(value) { this.#pizzas = value; this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));