Skip to content
Snippets Groups Projects
Commit 1f30a344 authored by Matthieu Vannin's avatar Matthieu Vannin
Browse files

tp terminé

parent be5f5e9f
No related branches found
No related tags found
No related merge requests found
import Router from '../Router.js';
import Page from './Page.js'; import Page from './Page.js';
export default class AddPizzaPage extends Page { export default class AddPizzaPage extends Page {
...@@ -8,6 +9,19 @@ export default class AddPizzaPage extends Page { ...@@ -8,6 +9,19 @@ export default class AddPizzaPage extends Page {
Nom : Nom :
<input type="text" name="name"> <input type="text" name="name">
</label> </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> <button type="submit">Ajouter</button>
</form>`; </form>`;
} }
...@@ -20,16 +34,43 @@ export default class AddPizzaPage extends Page { ...@@ -20,16 +34,43 @@ export default class AddPizzaPage extends Page {
this.submit(); this.submit();
}); });
} }
selector(inputName) {
const theInput = this.element.querySelector(`input[name="${inputName}"]`);
if (theInput === '') {
alert(`Erreur : le champ ${inputName} est obligatoire`);
return false;
}
return theInput.value;
}
submit() { submit() {
// D.4. La validation de la saisie // D.4. La validation de la saisie
const nameInput = this.element.querySelector('input[name="name"]'), const name = this.selector('name');
name = nameInput.value; const image = this.selector('image');
if (name === '') { const price_small = this.selector('price_small');
alert('Erreur : le champ "Nom" est obligatoire'); const price_large = this.selector('price_large');
return; if (name && image && price_large && price_small) {
} const pizza = {
name,
image,
price_small,
price_large,
};
fetch('http://localhost:8080/api/v1/pizzas', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(pizza),
})
.then(response => {
if (response.ok) {
alert(`La pizza ${name} a été ajoutée !`); alert(`La pizza ${name} a été ajoutée !`);
nameInput.value = ''; this.element.querySelector('input[name="name"]').value = '';
Router.navigate('/', true);
} else {
throw new Error();
}
})
.catch(err => alert('Erreur'));
}
} }
} }
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment