diff --git a/B-ajax.md b/B-ajax.md index 57ca97c6c9de0c349b63fe1c032cbe72fd0b8301..e3b852bd40714f2aa0f994b6b1a794e6c2f17c9b 100644 --- a/B-ajax.md +++ b/B-ajax.md @@ -122,7 +122,7 @@ Pour rappel, le support navigateur de l'API fetch est plutôt bon : ## B.3. Appeler une API REST/JSON en GET **Maintenant que l'on est capables de récupérer une ressource externe en JS et d'en afficher le contenu, connectons notre application au serveur REST développé en cours de programmation répartie !!!** -1. **Téléchargez le serveur REST/JSON** sur https://filesender.renater.fr/?s=download&token=247b86f8-cc86-4ff0-a223-8ecd0882f170 +1. **Téléchargez le serveur REST/JSON** sur https://filesender.renater.fr/?s=download&token=002059e4-f26f-4cf8-ad48-a8da6384d3d4 2. **Lancez le serveur dans un terminal** : ```bash java -jar pizzaland-jar-with-dependencies.jar @@ -131,8 +131,6 @@ Pour rappel, le support navigateur de l'API fetch est plutôt bon : <img src="images/readme/pizzaland-server-get-pizzas.png" > - > _**NB :** en cas d'erreur de chargement, essayez de recharger la page dans votre navigateur (<kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd>) une deuxième fois, apparemment sur certains postes ça débloque l'API..._ ¯\\\_(ツ)\_/¯ - 1. **Supprimez toute trace de nos données en "dur" :** - supprimez le fichier `data.js` et son import dans le `main.js` - supprimez la ligne `pizzaList.pizzas = data;` du `main.js` diff --git a/index.html b/index.html index b4c5419dffe72fb2c24f8e5805d42fdb26be22f8..0682958323966bb3211b0d8358e5e094094d589d 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,14 @@ </nav> </header> <section class="newsContainer" style="display:none"> + function displayNews(html) { + // 1. injectez le contenu du fichier dans la section .newsContainer + // 2. affichez la balise .newsContainer + } + fetch('./news.html') + .then( response => response.text() ) + .then( displayNews ); + </section> <section class="pageContainer"> <header class="pageTitle"></header> diff --git a/news.html b/news.html index b799e09bfa00926508dcb828fd33a6d113cfa3d2..824e4a323b2772859a7a3eccb537b7ad31340e4c 100644 --- a/news.html +++ b/news.html @@ -7,4 +7,4 @@ <br/> aux délicieuses saveurs épicées ! </p> -</article> \ No newline at end of file +</article diff --git a/pizzaland-jar-with-dependencies.jar b/pizzaland-jar-with-dependencies.jar new file mode 100644 index 0000000000000000000000000000000000000000..4b41ca0cf2dd515961223dac0da64dfa2c85fa58 Binary files /dev/null and b/pizzaland-jar-with-dependencies.jar differ diff --git a/src/Router.js b/src/Router.js index ebc6d759b4824800229a4470a63e6ba17720d623..0fbb2019b01c8dfae7b6bcc9287fc4a6dc6fc0d9 100644 --- a/src/Router.js +++ b/src/Router.js @@ -4,34 +4,26 @@ export default class Router { static #menuElement; static routes = []; + // static currentRoute; - /** - * Indique au Router la balise HTML contenant le menu de navigation - * Écoute le clic sur chaque lien et déclenche la méthode navigate - * @param element Élément HTML de la page qui contient le menu principal - */ static set menuElement(element) { this.#menuElement = element; const links = element.querySelectorAll('a'); - links.forEach(link => - link.addEventListener('click', event => { - event.preventDefault(); - this.navigate(event.target.getAttribute('href')); - }) - ); + links.forEach(link => link.addEventListener('click', this.handleMenuClick)); } - /** - * Navigue dans l'application - * Affiche la page correspondant à `path` dans le tableau `routes` - * @param {String} path URL de la page courante - * @param {Boolean} pushState active/désactive le pushState (ajout d'une entrée dans l'historique de navigation) - */ + static handleMenuClick = event => { + event.preventDefault(); + this.navigate(event.target.getAttribute('href')); + }; + static navigate(path, pushState = true) { const route = this.routes.find(route => route.path === path); if (route) { + // this.currentRoute?.page.unMount(); this.titleElement.innerHTML = `<h1>${route.title}</h1>`; this.contentElement.innerHTML = route.page.render(); route.page.mount?.(this.contentElement); + // this.currentRoute = route; // gestion menu (classe "active") const menuLink = this.#menuElement.querySelector( `a[href="${route.path}"]` diff --git a/src/components/PizzaThumbnail.js b/src/components/PizzaThumbnail.js index b681ef20dbd96775889a43f994a2ad3d60276694..2eafac1005235f6d0e731a8bd01806bfeb46eda1 100644 --- a/src/components/PizzaThumbnail.js +++ b/src/components/PizzaThumbnail.js @@ -24,4 +24,11 @@ export default class PizzaThumbnail extends Component { ]), ]); } + mount(element) { + super.mount(element); + console.log('non'); + fetch('http://localhost:8080/api/v1/pizzas') + .then(response => response.text()) + .then(console.log('oui')); + } } diff --git a/src/main.js b/src/main.js index dd2817c2d31b34303c607d80ae1910472377846c..1ad4a41cc216f3afb71158fc7b67b4c314effb6a 100644 --- a/src/main.js +++ b/src/main.js @@ -17,6 +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 @@ -37,30 +38,36 @@ document.querySelector( // pizzaListLink.getAttribute('class') + ' active' // ); +// C.2. Navigation en JS : afficher/masquer un élément +const newsContainer = document.querySelector('.newsContainer'); +const closeButton = newsContainer.querySelector('.closeButton'); +// affichage du bandeau de news +// newsContainer.style.display = ''; +// gestion du bouton fermer + // E.3. Deeplinking // détection des boutons précédent/suivant du navigateur : // on lit l'url courante dans la barre d'adresse et on l'envoie au Router 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 - const newsContainer = document.querySelector('.newsContainer'); - newsContainer.innerHTML += html; - // 2. affichez la balise .newsContainer - newsContainer.style.display = ''; - - // Gestion de la fermeture du bandeau + document.querySelector('.newsContainer').innerHTML = html; const closeButton = newsContainer.querySelector('.closeButton'); + newsContainer.style.display = ''; closeButton.addEventListener('click', event => { event.preventDefault(); newsContainer.style.display = 'none'; }); } -fetch('./news.html') +-fetch('./news.html') .then(response => response.text()) .then(displayNews); diff --git a/src/pages/PizzaForm.js b/src/pages/PizzaForm.js index 60c977fe4e5e95518549251c61e8021b0d06360f..99fe37728b231c6632056dd5981a79a0675c0cfd 100644 --- a/src/pages/PizzaForm.js +++ b/src/pages/PizzaForm.js @@ -8,8 +8,22 @@ 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>`; + </form> + `; } mount(element) { @@ -23,13 +37,31 @@ 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; + const name = this.element.querySelector('input[name="name"]').value; + const image = this.element.querySelector('input[name="image"]').value; + const small = this.element.querySelector('input[name="price_small"]').value; + const big = this.element.querySelector('input[name="price_large"]').value; + let pizza = new Object(); if (name === '') { alert('Erreur : le champ "Nom" est obligatoire'); return; } + pizza = { + name, + image, + small, + big, + }; + 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 = ''; + + name.value = ''; + image.value = ''; + small.value = ''; + big.value = ''; } } diff --git a/src/pages/PizzaList.js b/src/pages/PizzaList.js index a706efa99b05e9017d6836d03572d491031acb2e..b820091e6f75cae7402c52d6b2811eddb6c6c4a3 100644 --- a/src/pages/PizzaList.js +++ b/src/pages/PizzaList.js @@ -9,18 +9,17 @@ export default class PizzaList extends Page { this.pizzas = pizzas; } + set pizzas(value) { + 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.text()) - .then(function (text) { - PizzaList.pizzas = text; - console.log(PizzaList.pizzas); + .then(response => response.json()) + .then(responseJSON => { + this.pizzas = responseJSON; + this.element.innerHTML = this.render(); }); } - - set pizzas(value) { - this.#pizzas = value; - this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza)); - } }