From 1226be4ba8167ec51ac00c5f0c8f9ff5b19bf8ba Mon Sep 17 00:00:00 2001
From: Lucas Hottin <lucas.hottin.etu@univ-lille.fr>
Date: Wed, 10 Feb 2021 12:00:16 +0100
Subject: [PATCH] tp3 fini
---
package.json | 2 +-
src/Router.js | 22 ++++++++++++++++++++++
src/main.js | 37 ++++++++++++++++++++++++++++++++-----
src/pages/Page.js | 12 ++++++++++++
src/pages/PizzaForm.js | 29 +++++++++++++++++++++++++++++
src/pages/PizzaList.js | 9 ++++-----
6 files changed, 100 insertions(+), 11 deletions(-)
create mode 100644 src/pages/Page.js
create mode 100644 src/pages/PizzaForm.js
diff --git a/package.json b/package.json
index c41a110..abdfa61 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
- "watch": "webpack --mode=development --watch"
+ "watch": "webpack --mode=development --watch"
},
"author": "Thomas Fritsch <thomas.fritsch@univ-lille.fr> (https://gitlab.univ-lille.fr/thomas.fritsch)",
"homepage": "https://gitlab.univ-lille.fr/js",
diff --git a/src/Router.js b/src/Router.js
index 7aef071..ac51107 100644
--- a/src/Router.js
+++ b/src/Router.js
@@ -2,12 +2,34 @@ export default class Router {
static titleElement;
static contentElement;
static routes = [];
+ static #menuElement;
+
+ static set menuElement(element) {
+ this.#menuElement = element;
+ console.log(this.#menuElement);
+ this.#menuElement.addEventListener('click', this.handleClick);
+ }
+
+ static handleClick(event) {
+ event.preventDefault();
+ console.log(event);
+ Router.navigate(event.target.getAttribute('href'));
+ event.target.classList.add('active');
+ }
static navigate(path) {
const route = this.routes.find(route => route.path === path);
if (route) {
this.titleElement.innerHTML = `<h1>${route.title}</h1>`;
this.contentElement.innerHTML = route.page.render();
+ console.log(route);
+ route.page.mount?.(this.contentElement);
+ window.history.pushState({}, '', path);
+ const d = document.querySelectorAll('.mainMenu a');
+ d.forEach(element => {
+ if (element.textContent == route.title) element.classList.add('active');
+ else element.classList.remove('active');
+ });
}
}
}
diff --git a/src/main.js b/src/main.js
index 6148d2b..94d0029 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,13 +1,40 @@
import Router from './Router';
import data from './data';
import PizzaList from './pages/PizzaList';
+import Component from './components/Component';
+import PizzaForm from './pages/PizzaForm';
+import { doc } from 'prettier';
+
+const pizzaList = new PizzaList([]),
+ aboutPage = new Component('p', null, 'ce site est génial'),
+ pizzaForm = new PizzaForm();
Router.titleElement = document.querySelector('.pageTitle');
Router.contentElement = document.querySelector('.pageContent');
+Router.routes = [
+ { path: '/', page: pizzaList, title: 'La carte' },
+ { path: '/a-propos', page: aboutPage, title: 'À propos' },
+ { path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
+];
+pizzaList.pizzas = data;
+Router.navigate(document.location.pathname); // affiche la liste des pizzas
+Router.menuElement = document.querySelector('.mainMenu');
-const pizzaList = new PizzaList([]);
-Router.routes = [{ path: '/', page: pizzaList, title: 'La carte' }];
+document.querySelector('.logo').innerHTML +=
+ "<small> Les pizzas c'est la vie</small>";
-Router.navigate('/'); // affiche une page vide
-pizzaList.pizzas = data;
-Router.navigate('/'); // affiche la liste des pizzas
+document.querySelector('li a').classList.add('active');
+
+const news = document.querySelector('.newsContainer');
+news.setAttribute('style', "display:''");
+const close = document.querySelector('.newsContainer button');
+function handleClick(event) {
+ event.preventDefault();
+ news.setAttribute('style', 'display:none');
+}
+close.addEventListener('click', handleClick);
+
+window.onpopstate = e => {
+ console.log(document.location);
+ Router.navigate(document.location.pathname);
+};
diff --git a/src/pages/Page.js b/src/pages/Page.js
new file mode 100644
index 0000000..8ccf3ed
--- /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 0000000..7badb29
--- /dev/null
+++ b/src/pages/PizzaForm.js
@@ -0,0 +1,29 @@
+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);
+ const button = element.querySelector('button');
+ button.addEventListener('click', this.submit);
+ }
+
+ submit(event) {
+ event.preventDefault();
+ const form = document.querySelector('form'),
+ input = form.querySelector('input[name=name]');
+ if (!input.value == '') {
+ alert(`La pizza ${input.value} a été créer`);
+ } else alert('Veuillez entrer un nom de pizza');
+ }
+}
diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js
index fcaedaf..cd593ac 100644
--- a/src/pages/PizzaList.js
+++ b/src/pages/PizzaList.js
@@ -1,11 +1,10 @@
-import Component from '../components/Component.js';
-import PizzaThumbnail from '../components/PizzaThumbnail.js';
-
-export default class PizzaList extends Component {
+import Page from './Page';
+import PizzaThumbnail from '../components/PizzaThumbnail';
+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