From b32e65c82bcd13bd7dae3d994fca5b0eec53e884 Mon Sep 17 00:00:00 2001
From: William Noris <w.noris@protonmail.com>
Date: Tue, 19 Oct 2021 16:04:18 +0200
Subject: [PATCH] Pagination fonctionnelle dans planets

---
 scripts/planets.js | 52 ++++++++++++++++++++++++++--------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/scripts/planets.js b/scripts/planets.js
index 03436ff..75441ed 100644
--- a/scripts/planets.js
+++ b/scripts/planets.js
@@ -5,7 +5,7 @@ const planetes = document.getElementById("resultats");
 console.log('planet.js loaded');
 
 
-function remplissage(results){
+function remplissage(results) {
 
     planetes.innerHTML = "";
 
@@ -13,7 +13,7 @@ function remplissage(results){
     const nextUrl = results.next;
     const tabResults = results.results;
 
-    for(resultPlanet of tabResults){
+    for (resultPlanet of tabResults) {
         const nom = resultPlanet.name;
         const diametre = resultPlanet.diameter;
         const climate = resultPlanet.climate;
@@ -33,8 +33,8 @@ function remplissage(results){
         const tabFilms = resultPlanet.films;
 
 
-        planetes.innerHTML += 
-        `<section class="resultat">
+        planetes.innerHTML +=
+            `<section class="resultat">
             <h1 class="titreAccordeon">${nom}</h1>
             <div class="accordeon">
                 <div class="1">
@@ -56,28 +56,36 @@ function remplissage(results){
 
     let firstPage = false;
     let lastPage = false;
-    if(previousUrl == null) firstPage = true;
-    if(nextUrl == null) lastPage = true;
+    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);
-        });
-    };
 
-    
-    
+    planetes.innerHTML += previousButton;
+    planetes.innerHTML += currentButton;
+    planetes.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(previousUrl, remplissage);
+    });
+    document.getElementById("nextButton").addEventListener("click", () => {
+        api_call(nextUrl, remplissage);
+    });
 }
 
 api_call(API_URL + "/planets", remplissage);