Skip to content
Snippets Groups Projects
Commit 1c5d2ce3 authored by Theo LANGE's avatar Theo LANGE
Browse files

fin tp4

parent 6f2c3a86
Branches
No related tags found
No related merge requests found
......@@ -32,10 +32,7 @@
</nav>
</header>
<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="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>
\ No newline at end of file
File added
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';
......@@ -17,10 +16,6 @@ Router.routes = [
{ path: '/ajouter-pizza', page: pizzaForm, title: 'Ajouter une pizza' },
];
// Router.navigate('/'); // affiche une page vide
pizzaList.pizzas = data;
// Router.navigate('/'); // affiche la liste des pizzas
// B.1. Sélectionner des éléments
// console.log(document.querySelector('.logo img'));
// console.log(document.querySelector('.pizzaFormLink'));
......@@ -40,15 +35,8 @@ 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 = '';
const newsContainer = document.querySelector('.newsContainer');
// 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 +45,16 @@ 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();
function displayNews(html) {
newsContainer.innerHTML = html;
newsContainer.style.display = '';
const closeButton = newsContainer.querySelector('.closeButton');
closeButton.addEventListener('click', event => {
event.preventDefault();
newsContainer.style.display = 'none';
});
}
fetch('./news.html')
.then(response => response.text())
.then(displayNews);
import Router from '../Router.js';
import Page from './Page.js';
export default class AddPizzaPage extends Page {
......@@ -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>`;
}
......@@ -25,11 +39,43 @@ 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 price_smallInput = this.element.querySelector(
'input[name="price_small"]'
),
price_small = price_smallInput.value;
const price_largeInput = this.element.querySelector(
'input[name="price_large"]'
),
price_large = price_largeInput.value;
if (name === '') {
alert('Erreur : le champ "Nom" est obligatoire');
return;
}
let pizza = {
name: name,
image: image,
price_small: price_small,
price_large: price_large,
};
fetch('http://localhost:8080/api/v1/pizzas', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(pizza),
});
alert(`La pizza ${name} a été ajoutée !`);
nameInput.value = '';
imageInput.value = '';
price_smallInput.value = '';
price_largeInput.value = '';
Router.navigate('/');
}
}
......@@ -13,4 +13,14 @@ 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(data => {
this.pizzas = data;
})
.then(() => (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