Skip to content
Snippets Groups Projects
Commit 0ef39bd3 authored by Quentin Gillot's avatar Quentin Gillot
Browse files

fini

parent 6f2c3a86
Branches
No related tags found
No related merge requests found
......@@ -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>
......
<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>
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;
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
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 = '';
}
}
......@@ -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()));
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment