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

Merge pull request #16 from rasoirnoir/characters

Browse Source 
pagination ok
This commit is contained in:
William Noris 2021-10-20 10:39:12 +02:00 committed by GitHub
commit 326fccc770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
scripts/personnages.js
View File

@ -1,4 +1,4 @@
import { api_call,API_URL } from "./util"; import { api_call,API_URL, createPagination } from "./util";
const PERSONNAGES = document.getElementById("resultats"); const PERSONNAGES = document.getElementById("resultats");
@ -20,17 +20,17 @@ console.log('personnage.js loaded');
//api_call(API_URL+"/people", console.log); //api_call(API_URL+"/people", console.log);
fetch(API_URL+"/people") // fetch(API_URL+"/people")
.then(response => { // .then(response => {
return response.json(); // return response.json();
}) // })
.then(jsonResp => { // .then(jsonResp => {
remplissage(jsonResp); // remplissage(jsonResp);
}) // })
.catch(error => { // .catch(error => {
console.log(`Erreur lors de l'appel API : // console.log(`Erreur lors de l'appel API :
${error.message}`); // ${error.message}`);
}); // });
function remplissage(json){ function remplissage(json){
console.log(json.results[0]); console.log(json.results[0]);
@ -47,41 +47,52 @@ fetch(API_URL+"/people")
PERSONNAGES.innerHTML = ''; PERSONNAGES.innerHTML = '';
const PERPAGE = json.results.length; const PERPAGE = json.results.length;
const previousUrl = json.previous;
const nextUrl = json.next;
console.log(previousUrl);
console.log(nextUrl);
for (let i = 0; i < PERPAGE; i++) {
for (let i = 0; i < PERPAGE; i++) { const urlbirth_year = json.results[i].birth_year;
const urlbirth_year = json.results[i].birth_year; const urleye_colo=json.results[i].eye_colo;
const urleye_colo=json.results[i].eye_colo; const urlgender=json.results[i].gender;
const urlgender=json.results[i].gender; const urlhair_color=json.results[i].hair_color;
const urlhair_color=json.results[i].hair_color; const urlheight = json.results[i].height;
const urlheight = json.results[i].height; const urlmass=json.results[i].mass;
const urlmass=json.results[i].mass; const urlskin_color= json.results[i].skin_color;
const urlskin_color= json.results[i].skin_color; const urlname= json.results[i].name;
const urlname= json.results[i].name; const urlhomeworld=json.results[i].homeworld;
const urlhomeworld=json.results[i].homeworld; const urlfilms=json.results[i].films;
const urlfilms=json.results[i].films;
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
// const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color); // console.log(gens);
// console.log(gens); //Appel Api pour les planetes :
//Appel Api pour les planetes :
PERSONNAGES.innerHTML += PERSONNAGES.innerHTML +=
`<section class="resultat accordeon_item"> `<section class="resultat accordeon_item">
<h1 class="accordeon_item_header">${urlname}</h1> <h1 class="accordeon_item_header">${urlname}</h1>
<div class="accordeon_item_body"> <div class="accordeon_item_body">
<div class="1"> <div class="1">
<div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div> <div id=annéeNaissance>Année de Naissance : ${urlbirth_year} </div>
<div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div> <div id=couleurYeux> Couleur des Yeux : ${urleye_colo}</div>
<div id=genre>Genre : ${urlgender}</div> <div id=genre>Genre : ${urlgender}</div>
<div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div> <div id=couleurCheveux> Couleur des Cheveux : ${urlhair_color} </div>
<div id= poids> Poids du personnage : ${urlmass} kg</div> <div id=taille> Taille : ${urlheight}</div>
<div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div> <div id= poids> Poids du personnage : ${urlmass} kg</div>
<div class="2"> Planète de Naissance : ${urlhomeworld}</div> <div id= couleurPeau> Couleur de Peau : ${urlskin_color} </div>
<div class="3"> Film où je suis présent : ${urlfilms}</div> <div class="2"> Planète de Naissance : ${urlhomeworld}</div>
</div> <div class="3"> Film où je suis présent : ${urlfilms}</div>
</section>`; </div>
</section>`;
} }
}
//Pagination
createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
}
api_call(API_URL + "/people", remplissage);
console.log('personnage.js loaded');

2
scripts/util.js
View File

@ -43,7 +43,7 @@ export const api_call = (url, callback) => {
*/ */
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => { export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
console.log("Url précédente : " + prevUrl); console.log("Url précédente : " + prevUrl);
console.group("Url suivante : " + nextUrl); console.log("Url suivante : " + nextUrl);
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1); const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
console.log("Page courante : " + currentPage); console.log("Page courante : " + currentPage);