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) {
${tabFilms}
`; + + 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{