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