From 4287c0e09b00535efeaa8ba84364c3381251e4e7 Mon Sep 17 00:00:00 2001
From: William Noris <w.noris@protonmail.com>
Date: Wed, 20 Oct 2021 11:58:23 +0200
Subject: [PATCH] chargement en cours

---
 scripts/planets.js | 41 +++++++++++++++++++++++++++++------------
 scripts/util.js    | 24 ++++++++++++++++++++++++
 styles/style.css   |  1 +
 3 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/scripts/planets.js b/scripts/planets.js
index 7522478..66dd537 100644
--- a/scripts/planets.js
+++ b/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
-    createPagination(previousUrl, nextUrl, planetes, remplissage);
+    const fillResidents = (jsonResp) => {
+        console.log(jsonResp);
+    }
 
-    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    accordeonItemHeader.forEach(accordeonItemHeader => {
-        accordeonItemHeader.addEventListener("click", event => {
-            accordeonItemHeader.classList.toggle("active");
-        });
-    });
-}
+    const fillFilms = (jsonResp) => {
+        console.log(jsonResp);
+    }
 
-api_call(API_URL + "/planets", remplissage);
+    api_call(API_URL + "/planets", remplissage);
 
 
-console.log('planet.js loaded');
+    console.log('planet.js loaded');
diff --git a/scripts/util.js b/scripts/util.js
index f2612eb..64fc22e 100644
--- a/scripts/util.js
+++ b/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)
diff --git a/styles/style.css b/styles/style.css
index f822791..49c6920 100644
--- a/styles/style.css
+++ b/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{