tentative d'ajout d'event

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");
@@ -12,6 +12,10 @@ function remplissage(results) {
     const nextUrl = results.next;
     const tabResults = results.results;
 
+    planetsItems = [];
+    residentsArray = [];
+    filmsArray = [];
+
     for (resultPlanet of tabResults) {
         const nom = resultPlanet.name;
         const diametre = resultPlanet.diameter;
@@ -21,6 +25,8 @@ function remplissage(results) {
 
         const tabResidents = resultPlanet.residents;
         const tabFilms = resultPlanet.films;
+        residentsArray.push(tabResidents);
+        filmsArray.push(tabFilms);
 
 
         planetes.innerHTML +=
@@ -36,19 +42,57 @@ function remplissage(results) {
                 <div class="column3">${tabFilms}</div>
             </div>
         </section>`;
+
+        const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+        console.log(accordeonItemHeader[accordeonItemHeader.length - 1]);
+        accordeonItemHeader[accordeonItemHeader.length - 1].addEventListener("click", function (event) {
+            console.log(`click on `);
+            console.log(event.target);
+            accordeonItemHeader[accordeonItemHeader.length - 1].classList.toggle("active");
+            // api_call_array(residentsArray[index], fillDetails);
+            // api_call_array(filmsArray[index], fillDetails);
+        });
     }
+    // item = accordeonItemHeader[accordeonItemHeader.length - 1];
+    // planetsItems.push(item);
+
+
+
+
 
     //Pagination
     createPagination(previousUrl, nextUrl, planetes, remplissage);
 
-    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    accordeonItemHeader.forEach(accordeonItemHeader => {
-        accordeonItemHeader.addEventListener("click", event => {
-            accordeonItemHeader.classList.toggle("active");
-        });
-    });
+
+    // for(index in planetsItems){
+    //     console.log(planetsItems[index]);
+    //     planetsItems[index].addEventListener("click", function(event){
+    //         console.log(`click on ${event.target}`);
+    //         planetsItems[index].classList.toggle("active");
+    //         // api_call_array(residentsArray[index], fillDetails);
+    //         // api_call_array(filmsArray[index], fillDetails);
+    //     });
+    // }
+    // 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);
+    //     });
+    // });
+
 }
 
+const fillResidents = (jsonResp) => {
+    console.log(jsonResp);
+}
+
+const fillFilms = (jsonResp) => {
+    console.log(jsonResp);
+}
+
+
 api_call(API_URL + "/planets", remplissage);
 
 

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{