diff --git a/src/main.js b/src/main.js index 083fc6760456e58f6b1636312246162759bec0d9..29c4c3df4194b768b88c1bbe55c96cd870b15720 100644 --- a/src/main.js +++ b/src/main.js @@ -78,4 +78,4 @@ window.onpopstate = () => Router.navigate(document.location.pathname, false); window.onpopstate(); fetch('./news.html') .then(response => response.text()) - .then(responseText => console.log(responseText)); + .then(response => console.log(responseText)); diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js index 60c977fe4e5e95518549251c61e8021b0d06360f..2d6acd1afb0e7bcfee51e7350a9b69b51748c6f8 100644 --- a/src/pages/PizzaForm.js +++ b/src/pages/PizzaForm.js @@ -1,4 +1,5 @@ import Page from './Page.js'; +import Router from '../Router'; export default class AddPizzaPage extends Page { render() { @@ -8,6 +9,19 @@ 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>`; } @@ -24,12 +38,29 @@ export default class AddPizzaPage extends Page { submit() { // D.4. La validation de la saisie const nameInput = this.element.querySelector('input[name="name"]'), - name = nameInput.value; + imgInput = this.element.querySelector('input[name="image"]'), + smallInput = this.element.querySelector('input[name="price_small"]'), + bigInput = this.element.querySelector('input[name="price_large"]'), + name = nameInput.value, + img = imgInput.value, + small = smallInput.value, + big = bigInput.value; if (name === '') { alert('Erreur : le champ "Nom" est obligatoire'); return; } + const pizza = { + name: name, + image: img, + price_small: Number(small), + price_large: Number(big), + }; 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(() => Router.navigate('/')); } } diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index 84fd028186df28804d6297743fc78431b6dbf472..d015454b66df57af1c5ea7314033e569049702c5 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -17,8 +17,8 @@ export default class PizzaList extends Page { super.mount(element); fetch('http://localhost:8080/api/v1/pizzas') .then(response => response.json()) - .then(responseText => { - this.pizzas = responseText; + .then(responseArrayPizza => { + this.pizzas = responseArrayPizza; element.innerHTML = this.render(); }); }