From b32e65c82bcd13bd7dae3d994fca5b0eec53e884 Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 16:04:18 +0200 Subject: [PATCH 1/3] Pagination fonctionnelle dans planets --- scripts/planets.js | 52 ++++++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 22 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index 03436ff..75441ed 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -5,7 +5,7 @@ const planetes = document.getElementById("resultats"); console.log('planet.js loaded'); -function remplissage(results){ +function remplissage(results) { planetes.innerHTML = ""; @@ -13,7 +13,7 @@ function remplissage(results){ const nextUrl = results.next; const tabResults = results.results; - for(resultPlanet of tabResults){ + for (resultPlanet of tabResults) { const nom = resultPlanet.name; const diametre = resultPlanet.diameter; const climate = resultPlanet.climate; @@ -33,8 +33,8 @@ function remplissage(results){ const tabFilms = resultPlanet.films; - planetes.innerHTML += - `
+ planetes.innerHTML += + `

${nom}

@@ -56,28 +56,36 @@ function remplissage(results){ let firstPage = false; let lastPage = false; - if(previousUrl == null) firstPage = true; - if(nextUrl == null) lastPage = true; + if (previousUrl == null) firstPage = true; + if (nextUrl == null) lastPage = true; let previousButton = ``; let currentButton = `${currentPage}`; let nextButton = ``; - if(!firstPage) { - planetes.innerHTML += previousButton; - console.log(document.getElementById("prevButton")); - document.getElementById("prevButton").addEventListener("click", () => { - api_call(previousUrl, remplissage); - }); - } - planetes.innerHTML += currentButton; - if(!lastPage) { - planetes.innerHTML += nextButton; - document.getElementById("nextButton").addEventListener("click", () => { - api_call(nextUrl, remplissage); - }); - }; - - + planetes.innerHTML += previousButton; + planetes.innerHTML += currentButton; + planetes.innerHTML += nextButton; + + if(firstPage){ + document.getElementById("prevButton").hidden = true; + } + else{ + document.getElementById("prevButton").hidden = false; + } + if(lastPage){ + document.getElementById("nextButton").hidden = true; + } + else{ + document.getElementById("nextButton").hidden = false; + } + + + document.getElementById("prevButton").addEventListener("click", () => { + api_call(previousUrl, remplissage); + }); + document.getElementById("nextButton").addEventListener("click", () => { + api_call(nextUrl, remplissage); + }); } api_call(API_URL + "/planets", remplissage); From 5ab2c33e27007ada3f2e503e0ca571795378437c Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 16:47:46 +0200 Subject: [PATCH 2/3] Externalisation des boutons de pagination --- scripts/planets.js | 40 ++------------------------------------ scripts/util.js | 48 +++++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 49 insertions(+), 39 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index 75441ed..e0fb475 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -1,4 +1,4 @@ -import { api_call, API_URL, getPage } from "./util"; +import { api_call, API_URL, createPagination } from "./util"; const planetes = document.getElementById("resultats"); @@ -49,43 +49,7 @@ function remplissage(results) { } //Pagination - console.log("Url précédente : " + previousUrl); - console.group("Url suivante : " + nextUrl); - const currentPage = (previousUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(previousUrl)) + 1); - console.log("Page courante : " + currentPage); - - let firstPage = false; - let lastPage = false; - if (previousUrl == null) firstPage = true; - if (nextUrl == null) lastPage = true; - let previousButton = ``; - let currentButton = `${currentPage}`; - let nextButton = ``; - - planetes.innerHTML += previousButton; - planetes.innerHTML += currentButton; - planetes.innerHTML += nextButton; - - if(firstPage){ - document.getElementById("prevButton").hidden = true; - } - else{ - document.getElementById("prevButton").hidden = false; - } - if(lastPage){ - document.getElementById("nextButton").hidden = true; - } - else{ - document.getElementById("nextButton").hidden = false; - } - - - document.getElementById("prevButton").addEventListener("click", () => { - api_call(previousUrl, remplissage); - }); - document.getElementById("nextButton").addEventListener("click", () => { - api_call(nextUrl, remplissage); - }); + createPagination(previousUrl, nextUrl, planetes, remplissage); } api_call(API_URL + "/planets", remplissage); diff --git a/scripts/util.js b/scripts/util.js index 9397675..446b1ee 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -26,7 +26,7 @@ export const api_call = (url, callback) => { * @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple) * @returns Le numéro de la page de l'url */ -export const getPage = (url) => { + const getPage = (url) => { tabUrl = url.split('/'); pageEgal = tabUrl[tabUrl.length - 1]; tabPageEgal = pageEgal.split('='); @@ -34,3 +34,49 @@ export const getPage = (url) => { return numeroPage; } + +/** + * Ajoutes des boutons de pagination à un élément + * @param {string} prevUrl l'url de la page précédente + * @param {string} nextUrl l'url de la page suivante + * @param {object} elementParent L'objet parent dans lequel ajouter les boutons + */ +export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => { + console.log("Url précédente : " + prevUrl); + console.group("Url suivante : " + nextUrl); + const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1); + console.log("Page courante : " + currentPage); + + let firstPage = false; + let lastPage = false; + if (prevUrl == null) firstPage = true; + if (nextUrl == null) lastPage = true; + let previousButton = ``; + let currentButton = `${currentPage}`; + let nextButton = ``; + + elementParent.innerHTML += previousButton; + elementParent.innerHTML += currentButton; + elementParent.innerHTML += nextButton; + + if(firstPage){ + document.getElementById("prevButton").hidden = true; + } + else{ + document.getElementById("prevButton").hidden = false; + } + if(lastPage){ + document.getElementById("nextButton").hidden = true; + } + else{ + document.getElementById("nextButton").hidden = false; + } + + + document.getElementById("prevButton").addEventListener("click", () => { + api_call(prevUrl, remplissage); + }); + document.getElementById("nextButton").addEventListener("click", () => { + api_call(nextUrl, remplissage); + }); +} From 3d963a43da88bebbc5427285e185d92340a0c6dd Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 17:35:05 +0200 Subject: [PATCH 3/3] =?UTF-8?q?fin=20de=20journ=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/planets.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index e0fb475..c2d23bc 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -1,8 +1,7 @@ import { api_call, API_URL, createPagination } from "./util"; -const planetes = document.getElementById("resultats"); -console.log('planet.js loaded'); +const planetes = document.getElementById("resultats"); function remplissage(results) { @@ -53,3 +52,6 @@ function remplissage(results) { } api_call(API_URL + "/planets", remplissage); + + +console.log('planet.js loaded');