chargement en cours

scripts/planets.js

@@ -1,4 +1,4 @@
-import { api_call, API_URL, createPagination } from "./util";
+import { api_call, API_URL, createPagination, api_call_array } from "./util";
 
 
 const planetes = document.getElementById("resultats");
@@ -36,20 +36,37 @@ function remplissage(results) {
                 <div class="column3">${tabFilms}</div>
             </div>
         </section>`;
+
+        const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+        item = accordeonItemHeader[accordeonItemHeader.length - 1];
+        item.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+            api_call_array(tabResidents, fillDetails);
+            api_call_array(tabFilms, fillDetails);
+        });
+
+        //Pagination
+        createPagination(previousUrl, nextUrl, planetes, remplissage);
+
+        // const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+        // accordeonItemHeader.forEach(accordeonItemHeader => {
+        //     accordeonItemHeader.addEventListener("click", event => {
+        //         accordeonItemHeader.classList.toggle("active");
+        //         api_call_array(tabResidents, fillDetails);
+        //         api_call_array(tabFilms, fillDetails);
+        //     });
+        // });
     }
 
-    //Pagination
+    const fillResidents = (jsonResp) => {
-    createPagination(previousUrl, nextUrl, planetes, remplissage);
+        console.log(jsonResp);
+    }
 
-    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    const fillFilms = (jsonResp) => {
-    accordeonItemHeader.forEach(accordeonItemHeader => {
+        console.log(jsonResp);
-        accordeonItemHeader.addEventListener("click", event => {
+    }
-            accordeonItemHeader.classList.toggle("active");
-        });
-    });
-}
 
-api_call(API_URL + "/planets", remplissage);
+    api_call(API_URL + "/planets", remplissage);
 
 
-console.log('planet.js loaded');
+    console.log('planet.js loaded');

scripts/util.js

@@ -21,6 +21,30 @@ export const api_call = (url, callback) => {
         });
 }
 
+/**
+ * Envoi un tableau d'url vers l'api swapi
+ * @param {array} urlArray Un tableau d'url
+ * @param {function} callback La finction de callback qui traitera la réponse de l'api
+ */
+export const api_call_array = (urlArray, callback) => {
+    let promises = urlArray.map((url) => {
+        fetch(url).catch(error => {
+            console.log("Erreur :(");
+        });
+
+        Promise.all(promises)
+            .then(response => {
+                return response.json();
+            })
+            .then(jsonResp => {
+                callback(jsonResp);
+            })
+            .catch(error => {
+                console.log("Error :(");
+            })
+    })
+}
+
 /**
  * Récupère le numéro de la page courante
  * @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)

styles/style.css

@@ -152,6 +152,7 @@ div.image-charactere {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
+    display: flex;
   } 
   
   .accordeon_item_body_content{