From be28fdfb215dcdc05d9e176ef46976c82f40d90c Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 11:52:12 +0200 Subject: [PATCH 1/4] =?UTF-8?q?Chargement=20des=20donn=C3=A9es=20de=20l'ap?= =?UTF-8?q?i?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/planets.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index 88ed73e..8a6227c 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -4,9 +4,6 @@ const planetes = document.getElementById("resultats"); console.log('planet.js loaded'); -api_call(API_URL + "/planets", console.log); - - function remplissage(results){ const previousUrl = results.previous; @@ -20,9 +17,17 @@ function remplissage(results){ const terrain = resultPlanet.terrain; const population = resultPlanet.population; - // const tabResidents = resultPLanet.residents; - // const tabResidents = call_api(`people/`); - const tabFilms = resultPLanet.films; + const tabResidents = resultPLanet.residents; + //Problème de requêtes asyncrones + // let tabResidents = []; + // for(index in resultPlanet.residents){ + // api_call(resultPlanet.residents[index], (jsonresp)=>{ + // console.log(jsonresp.name); + // }); + // } + // console.log(`${nom} - résidents : ${resultPlanet.residents}`); + // console.log(`nom des résidents : ${tabResidents}`); + const tabFilms = resultPlanet.films; } @@ -38,4 +43,4 @@ function remplissage(results){ `; } -// api_call(API_URL + "/planets", remplissage); \ No newline at end of file +api_call(API_URL + "/planets", remplissage); \ No newline at end of file From 06d9575d85318f38073be0b752e85462181a9f78 Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 12:18:53 +0200 Subject: [PATCH 2/4] =?UTF-8?q?r=C3=A9cup=C3=A9ration=20des=20infos=20et?= =?UTF-8?q?=20affichage=20moche?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/planets.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index 8a6227c..40463ca 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -6,6 +6,8 @@ console.log('planet.js loaded'); function remplissage(results){ + planetes.innerHTML = ""; + const previousUrl = results.previous; const nextUrl = results.next; const tabResults = results.results; @@ -17,7 +19,7 @@ function remplissage(results){ const terrain = resultPlanet.terrain; const population = resultPlanet.population; - const tabResidents = resultPLanet.residents; + const tabResidents = resultPlanet.residents; //Problème de requêtes asyncrones // let tabResidents = []; // for(index in resultPlanet.residents){ @@ -29,18 +31,24 @@ function remplissage(results){ // console.log(`nom des résidents : ${tabResidents}`); const tabFilms = resultPlanet.films; + + planetes.innerHTML += + `
+

${nom}

+
+
+

${terrain}

+

${climate}

+

${diametre}Km

+
+
${tabResidents}
+
${tabFilms}
+
+
`; } + //Pagination - planetes.innerHTML = - `
-

-
-
Prout 1
-
Prout 2
-
Prout 3
-
-
`; } api_call(API_URL + "/planets", remplissage); \ No newline at end of file From 3c9d972b48690c1d5f379398831f98a0c3c11430 Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 12:37:14 +0200 Subject: [PATCH 3/4] =?UTF-8?q?Ajout=20de=20getPage=20dans=20util.js=20et?= =?UTF-8?q?=20r=C3=A9cup=C3=A9ration=20de=20la=20page=20cournate=20dans=20?= =?UTF-8?q?planets.js?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/planets.js | 5 ++++- scripts/util.js | 13 +++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/scripts/planets.js b/scripts/planets.js index 40463ca..af1ccbf 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -1,4 +1,4 @@ -import { api_call, API_URL } from "./util"; +import { api_call, API_URL, getPage } from "./util"; const planetes = document.getElementById("resultats"); @@ -48,7 +48,10 @@ function remplissage(results){ } //Pagination + const currentPage = previousUrl == null ? getPage(nextUrl) - 1 : getPage(previousUrl) + 1; + } + api_call(API_URL + "/planets", remplissage); \ No newline at end of file diff --git a/scripts/util.js b/scripts/util.js index e5c8ae1..9397675 100644 --- a/scripts/util.js +++ b/scripts/util.js @@ -21,3 +21,16 @@ export const api_call = (url, callback) => { }); } +/** + * Récupère le numéro de la page courante + * @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) => { + tabUrl = url.split('/'); + pageEgal = tabUrl[tabUrl.length - 1]; + tabPageEgal = pageEgal.split('='); + numeroPage = tabPageEgal[tabPageEgal.length - 1]; + + return numeroPage; +} From 8b0c617c995e4f40d5c602e01d094513d3e7ca02 Mon Sep 17 00:00:00 2001 From: William Noris Date: Tue, 19 Oct 2021 15:23:08 +0200 Subject: [PATCH 4/4] Boutons pagination en cours --- scripts/planets.js | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index af1ccbf..03436ff 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -4,6 +4,7 @@ const planetes = document.getElementById("resultats"); console.log('planet.js loaded'); + function remplissage(results){ planetes.innerHTML = ""; @@ -48,10 +49,35 @@ function remplissage(results){ } //Pagination - const currentPage = previousUrl == null ? getPage(nextUrl) - 1 : getPage(previousUrl) + 1; - + 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 = ``; + 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); + }); + }; + + + } - -api_call(API_URL + "/planets", remplissage); \ No newline at end of file +api_call(API_URL + "/planets", remplissage);