isa44.74/mandalorian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #11 from rasoirnoir/planets

Browse Source 
Planets
This commit is contained in:
William Noris 2021-10-19 19:27:38 +02:00 committed by GitHub
commit 1c9f4c76dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
scripts/planets.js
View File

@ -1,11 +1,10 @@
import { api_call, API_URL, getPage } from "./util"; import { api_call, API_URL, createPagination } from "./util";
const planetes = document.getElementById("resultats"); const planetes = document.getElementById("resultats");
console.log('planet.js loaded');
function remplissage(results) {
function remplissage(results){
planetes.innerHTML = ""; planetes.innerHTML = "";
@ -13,7 +12,7 @@ function remplissage(results){
const nextUrl = results.next; const nextUrl = results.next;
const tabResults = results.results; const tabResults = results.results;
for(resultPlanet of tabResults){ for (resultPlanet of tabResults) {
const nom = resultPlanet.name; const nom = resultPlanet.name;
const diametre = resultPlanet.diameter; const diametre = resultPlanet.diameter;
const climate = resultPlanet.climate; const climate = resultPlanet.climate;
@ -33,8 +32,8 @@ function remplissage(results){
const tabFilms = resultPlanet.films; const tabFilms = resultPlanet.films;
planetes.innerHTML += planetes.innerHTML +=
`<section class="resultat"> `<section class="resultat">
<h1 class="titreAccordeon">${nom}</h1> <h1 class="titreAccordeon">${nom}</h1>
<div class="accordeon"> <div class="accordeon">
<div class="1"> <div class="1">
@ -49,35 +48,10 @@ function remplissage(results){
} }
//Pagination //Pagination
console.log("Url précédente : " + previousUrl); createPagination(previousUrl, nextUrl, planetes, remplissage);
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 = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
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); api_call(API_URL + "/planets", remplissage);
console.log('planet.js loaded');

48
scripts/util.js
View File

@ -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) * @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 * @returns Le numéro de la page de l'url
*/ */
export const getPage = (url) => { const getPage = (url) => {
tabUrl = url.split('/'); tabUrl = url.split('/');
pageEgal = tabUrl[tabUrl.length - 1]; pageEgal = tabUrl[tabUrl.length - 1];
tabPageEgal = pageEgal.split('='); tabPageEgal = pageEgal.split('=');
@ -34,3 +34,49 @@ export const getPage = (url) => {
return numeroPage; 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 = `<button id="prevButton">Page précédente</button>`;
let currentButton = `${currentPage}`;
let nextButton = `<button id="nextButton">Page suivante</button>`;
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);
});
}