From a5298d978cba162b53d5e6a1a77977352972e696 Mon Sep 17 00:00:00 2001
From: Clotaire DUFRESNE <clotaire.dufresne.etu@univ-lille.fr>
Date: Wed, 10 Feb 2021 12:26:42 +0100
Subject: [PATCH] =?UTF-8?q?d=20avanc=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/Router.js | 1 +
src/main.js | 9 +++------
src/pages/Page.js | 12 ++++++++++++
src/pages/PizzaForm.js | 20 ++++++++++++++++++++
src/pages/PizzaList.js | 5 +++--
5 files changed, 39 insertions(+), 8 deletions(-)
create mode 100644 src/pages/Page.js
create mode 100644 src/pages/PizzaForm.js
diff --git a/src/Router.js b/src/Router.js
index 81e3782..64b8bfd 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -9,6 +9,7 @@ export default class Router {
if (route) {
this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
this.contentElement.innerHTML = route.page.render();
+ route.page.mount?.(this.contentElement);
}
}
diff --git a/src/main.js b/src/main.js
index d5b527b..0cedb90 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';
Router.titleElement = document.querySelector('.pageTitle');
Router.contentElement = document.querySelector('.pageContent');
const pizzaList = new PizzaList([]),
- 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' },
{ path: '/a-propos', page: aboutPage, title: 'À propos' },
diff --git a/src/pages/Page.js b/src/pages/Page.js
new file mode 100644
index 0000000..ff66805
--- /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;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js
new file mode 100644
index 0000000..20438f7
--- /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) {}
+}
\ No newline at end of file
diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js
index fcaedaf..fc69533 100644
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
@@ -1,11 +1,12 @@
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;
constructor(pizzas) {
- super('section', { name: 'class', value: 'pizzaList' });
+ super('pizzaList');// on pase juste la classe CSS souhaitée
this.pizzas = pizzas;
}
--
GitLab