diff --git a/package-lock.json b/package-lock.json index b9d30b67200c9556d638559e7bdbe995f734e791..f6c42496935065de5d85ae6fbd33d3e6901408df 100644 --- a/package-lock.json +++ b/package-lock.json @@ -474,9 +474,9 @@ } }, "@babel/parser": { - "version": "7.12.13", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.13.tgz", - "integrity": "sha512-z7n7ybOUzaRc3wwqLpAX8UFIXsrVXUJhtNGBwAnLz6d1KUapqyq7ad2La8gZ6CXhHmGAIL32cop8Tst4/PNWLw==", + "version": "7.12.14", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.14.tgz", + "integrity": "sha512-xcfxDq3OrBnDsA/Z8eK5/2iPcLD8qbOaSSfOw4RA6jp4i7e6dEQ7+wTwxItEwzcXPQcsry5nZk96gmVPKletjQ==", "dev": true }, "@babel/template": { @@ -4116,9 +4116,9 @@ } }, "webpack": { - "version": "5.20.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.20.0.tgz", - "integrity": "sha512-k7X/+gisrvirr4bzv8JVLzy2RhWiVzd3gA9qzS5je3lwqYrMc5F549vLOk34BoNkkUp4SIpt1rQp48pTxBMXvA==", + "version": "5.20.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.20.1.tgz", + "integrity": "sha512-cStILc8W14WZXsgfeJmNIQlmQU06F7THfCJ6id3pIB/EXuR6nquolJ2ZJoaLNb6zdec6O2jOAzVKtBYc7vGDjg==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index 21c7fbce15799897ec204f4f0099ea9891fd09b0..2cbea66e327fbcff6ff0794e541259e67b5214c2 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "@babel/preset-env": "^7.12.11", "babel-loader": "^8.2.2", "prettier": "^2.2.1", - "webpack": "^5.20.0", + "webpack": "^5.20.1", "webpack-cli": "^4.5.0" } } diff --git a/src/Router.js b/src/Router.js index 25fe3853f173c99172b82d3134d82d642f6b7013..10243bcd044136d3feff968e879f32f023a181e1 100644 --- a/src/Router.js +++ b/src/Router.js @@ -3,19 +3,20 @@ import Img from "./components/Img.js"; import PizzaThumbnail from "./components/PizzaThumbnail.js"; import PizzaList from "./pages/PizzaList.js"; import data from "./data.js"; + export default class Router { static titleElement; static contentElement; static routes; - navigate(path) { - titleElement.innerHTML = ; + static navigate(path) { + this.titleElement.innerHTML = this.routes.title.render(); + this.contentElement.innerHTML = this.routes.page.render(); } } /* - const title = new Component("h1", null, ["La", " ", "carte"]); document.querySelector(".pageTitle").innerHTML = title.render(); @@ -23,5 +24,6 @@ const pizzaList = new PizzaList(data); document.querySelector(".pageContent").innerHTML = pizzaList.render(); console.log("pizzalist = " + pizzaList.render()); +Router.routes = [{ path: "/", page: pizzaList, title: "La carte" }]; -*/ +*/ \ No newline at end of file diff --git a/src/components/Component.js b/src/components/Component.js index eef21105c6a76311e627bc7a77beb34d4e649e74..a1eda3bb20e3253d371a144503e25b64041953d1 100644 --- a/src/components/Component.js +++ b/src/components/Component.js @@ -12,7 +12,7 @@ export default class Component { else return `<${this.tagname} ${this.renderAttribute()}"/>`; } renderAttribute() { - if (this.attribute != null) + if (this.attribute) return `${this.attribute.name}="${this.attribute.value}"`; } renderChildren() { @@ -28,4 +28,4 @@ export default class Component { if (element instanceof Component) return element.render(); else return element; } -} +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index b720408aed1ad07ebd5b635443534246e58f3d3c..b559c1c288df574a59d87b2eb0dcc7b07a308d5f 100644 --- a/src/main.js +++ b/src/main.js @@ -12,13 +12,21 @@ const c = new Component("article", { name: "class", value: "pizzaThumbnail" }, [ "Regina", ]); -const title = new Component("h1", null, ["La", " ", "carte"]); -document.querySelector(".pageTitle").innerHTML = title.render(); +// const title = new Component("h1", null, ["La", " ", "carte"]); +// document.querySelector(".pageTitle").innerHTML = title.render(); -const pizzaList = new PizzaList(data); -document.querySelector(".pageContent").innerHTML = pizzaList.render(); -console.log("pizzalist = " + pizzaList.render()); +// document.querySelector(".pageContent").innerHTML = pizzaList.render(); +// console.log("pizzalist = " + pizzaList.render()); +const pizzaList = new PizzaList(data); Router.titleElement = document.querySelector(".pageTitle"); Router.contentElement = document.querySelector(".pageContent"); -Router.routes = [{ path: "/", page: pizzaList, title: "La carte" }]; +Router.routes = { path: "/", page: pizzaList, title: new Component("h1", null, ["La", " ", "carte"]) }; +Router.navigate("/"); + + +// const pizzaList = new PizzaList([]); +// Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }]; +// Router.navigate('/'); // affiche une page vide +// pizzaList.pizzas = data; +// Router.navigate('/'); // affiche la liste des pizzas \ No newline at end of file diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index 7babb468add1670082709beb61a9bfcf29e193ce..ef8f36f5ec5738f750bb2824f39478e66e5f7fc3 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -1,9 +1,17 @@ import Component from "../components/Component.js"; +import Router from "../Router.js"; import PizzaThumbnail from "./../components/PizzaThumbnail.js"; export default class PizzaList extends Component { + #pizzas; constructor(data) { super("section", { name: "class", value: "pizzaList" }, data); } + set pizzas(value){ + this.#pizzas = value; + Router.routes.page = this; + Router.titleElement = document.querySelector(".pageTitle"); + Router.contentElement = document.querySelector(".pageContent"); + } renderChildren() { let html = ""; this.children.forEach((element) => {