From 5b29b7e155dee3c0daa23a920edd2aff8c6e2f67 Mon Sep 17 00:00:00 2001
From: HarmandI <isabelle44.74@gmail.com>
Date: Wed, 20 Oct 2021 09:31:51 +0200
Subject: [PATCH] pagination ok

---
 scripts/personnages.js | 101 +++++++++++++++++++++++------------------
 scripts/util.js        |   2 +-
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/scripts/personnages.js b/scripts/personnages.js
index 4414f55..68d118e 100644
--- a/scripts/personnages.js
+++ b/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,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>`;
 
 
-  }
-}
\ No newline at end of file
+      }
+
+
+    //Pagination
+    createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
+}
+
+api_call(API_URL + "/people", remplissage);
+console.log('personnage.js loaded');
diff --git a/scripts/util.js b/scripts/util.js
index aef73e6..f2612eb 100644
--- a/scripts/util.js
+++ b/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);