diff --git a/assets/image b/assets/image deleted file mode 100644 index e69de29..0000000 diff --git a/scripts/planets.js b/scripts/planets.js index 7522478..9b53bec 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"); @@ -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) {
${tabFilms}
`; + + 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); 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{