From 0ef39bd31a33ff1da34900a1580d3b6522bc2ecd Mon Sep 17 00:00:00 2001 From: Quentin Gillot <quentin.gillot.etu@univ-lille.fr> Date: Thu, 18 Feb 2021 11:23:06 +0100 Subject: [PATCH] fini --- index.html | 5 ++++- news.html | 10 ++++++++++ src/data.js | 27 --------------------------- src/main.js | 38 +++++++++++++++++++++++++++----------- src/pages/PizzaForm.js | 42 +++++++++++++++++++++++++++++++++++++++--- src/pages/PizzaList.js | 8 ++++++++ 6 files changed, 88 insertions(+), 42 deletions(-) create mode 100644 news.html delete mode 100644 src/data.js diff --git a/index.html b/index.html index deabf71..da2db67 100644 --- a/index.html +++ b/index.html @@ -31,11 +31,14 @@ </ul> </nav> </header> - <section class="newsContainer" style="display:none"> + <!-- <section class="newsContainer" style="display:none"> <article> <button class="closeButton"></button> <h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1> </article> + </section> --> + <section class="newsContainer"> + </section> <section class="pageContainer"> <header class="pageTitle"></header> diff --git a/news.html b/news.html new file mode 100644 index 0000000..642df87 --- /dev/null +++ b/news.html @@ -0,0 +1,10 @@ +<article> + <button class="closeButton"></button> + <h1>Bienvenue chez <strong>Pizza<em>Land</em></strong> !</h1> + <p> + Découvrez notre nouvelle pizza + <strong class="spicy">Spicy</strong> + <br/> + aux délicieuses saveurs épicées ! + </p> +</article> diff --git a/src/data.js b/src/data.js deleted file mode 100644 index 5d735aa..0000000 --- a/src/data.js +++ /dev/null @@ -1,27 +0,0 @@ -const data = [ - { - name: 'Regina', - base: 'tomate', - price_small: 6.5, - price_large: 9.95, - image: - 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300', - }, - { - name: 'Napolitaine', - base: 'tomate', - price_small: 6.5, - price_large: 8.95, - image: - 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300', - }, - { - name: 'Spicy', - base: 'crème', - price_small: 5.5, - price_large: 8, - image: - 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300', - }, -]; -export default data; diff --git a/src/main.js b/src/main.js index 22c3e46..9d0d7a6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,4 @@ import Router from './Router'; -import data from './data'; import PizzaList from './pages/PizzaList'; import PizzaForm from './pages/PizzaForm'; import Component from './components/Component'; @@ -18,7 +17,7 @@ Router.routes = [ ]; // Router.navigate('/'); // affiche une page vide -pizzaList.pizzas = data; + // Router.navigate('/'); // affiche la liste des pizzas // B.1. Sélectionner des éléments @@ -40,15 +39,6 @@ document.querySelector( // ); // C.2. Navigation en JS : afficher/masquer un élément -const newsContainer = document.querySelector('.newsContainer'), - closeButton = newsContainer.querySelector('.closeButton'); -// affichage du bandeau de news -newsContainer.style.display = ''; -// gestion du bouton fermer -closeButton.addEventListener('click', event => { - event.preventDefault(); - newsContainer.style.display = 'none'; -}); // E.3. Deeplinking // détection des boutons précédent/suivant du navigateur : @@ -57,3 +47,29 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false); // affichage de la page initiale : // même traitement que lors de l'appui sur les boutons précédent/suivant window.onpopstate(); +// console.log(1); +// fetch('./news.html') +// .then(response => response.text()) +// .then(responseText => console.log(responseText)); +// console.log(2); + +function displayNews(html) { + // 1. injectez le contenu du fichier dans la section .newsContainer + document.querySelector('.newsContainer').innerHTML += html; + // 2. affichez la balise .newsContainer + //console.log(document.querySelector('.newsContainer')); + const closeButton = newsContainer.querySelector('.closeButton'); + closeButton.addEventListener('click', event => { + event.preventDefault(); + newsContainer.style.display = 'none'; + }); +} +fetch('./news.html') + .then(response => response.text()) + .then(displayNews); + +const newsContainer = document.querySelector('.newsContainer'); + +// affichage du bandeau de news +newsContainer.style.display = ''; +// gestion du bouton fermer diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js index 60c977f..1d860a8 100644 --- a/src/pages/PizzaForm.js +++ b/src/pages/PizzaForm.js @@ -1,5 +1,5 @@ import Page from './Page.js'; - +import Router from '../Router.js'; export default class AddPizzaPage extends Page { render() { return /*html*/ ` @@ -8,6 +8,20 @@ export default class AddPizzaPage extends Page { Nom : <input type="text" name="name"> </label> + <label> + Image :<br/> + <input type="text" name="image" placeholder="https://source.unsplash.com/xxxxxxx/600x600"> + <small>Vous pouvez trouver des images de pizza sur <a href="https://unsplash.com/">https://unsplash.com/</a> puis utiliser l'URL <code>https://source.unsplash.com/xxxxxxx/600x600</code> où <code>xxxxxxx</code> est l'id de la photo choisie (celui dans la barre d'adresse)</small> +</label> +<label> + Prix petit format : + <input type="number" name="price_small" step="0.05"> +</label> +<label> + Prix grand format : + <input type="number" name="price_large" step="0.05"> +</label> + <button type="submit">Ajouter</button> </form>`; } @@ -25,11 +39,33 @@ export default class AddPizzaPage extends Page { // D.4. La validation de la saisie const nameInput = this.element.querySelector('input[name="name"]'), name = nameInput.value; + const imageInput = this.element.querySelector('input[name="image"]'), + image = imageInput.value; + const smallPriceInput = this.element.querySelector( + 'input[name="price_small"]' + ), + price_small = smallPriceInput.value; + const largePriceInput = this.element.querySelector( + 'input[name="price_large"]' + ), + price_large = largePriceInput.value; + const pizza = { + name: name, + image: image, + price_small: price_small, + price_large: price_large, + }; if (name === '') { alert('Erreur : le champ "Nom" est obligatoire'); return; } - alert(`La pizza ${name} a été ajoutée !`); - nameInput.value = ''; + + fetch('http://localhost:8080/api/v1/pizzas', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(pizza), + }).then(tmp => Router.navigate('/')); + // alert(`La pizza ${name} a été ajoutée !`); + // nameInput.value = ''; } } diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index de0d07f..688f034 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -13,4 +13,12 @@ export default class PizzaList extends Page { this.#pizzas = value; this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza)); } + + mount(element) { + super.mount(element); + fetch('http://localhost:8080/api/v1/pizzas') + .then(response => response.json()) + .then(json => (this.pizzas = json)) + .then(affiche => (this.element.innerHTML = this.render())); + } } -- GitLab