Merge pull request #16 from rasoirnoir/characters

pagination ok

scripts/personnages.js

@@ -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,9 +47,12 @@ 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++) {
+    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;
@@ -63,7 +66,7 @@ for (let i = 0; i < PERPAGE; i++) {
       
       // const gens = new People(urlbirth_year, urleye_colo, urlgender, urlhair_color, urlmass,urlskin_color);
       // console.log(gens);
-//Appel Api pour les planetes :
+    //Appel Api pour les planetes :
 
 
       PERSONNAGES.innerHTML += 
@@ -75,13 +78,21 @@ for (let i = 0; i < PERPAGE; i++) {
             <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>`;
+    </section>`;
 
 
       }
+
+
+    //Pagination
+    createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
 }
+
+api_call(API_URL + "/people", remplissage);
+console.log('personnage.js loaded');

scripts/util.js

@@ -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);