From 4287c0e09b00535efeaa8ba84364c3381251e4e7 Mon Sep 17 00:00:00 2001 From: William Noris Date: Wed, 20 Oct 2021 11:58:23 +0200 Subject: [PATCH 1/2] 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) {
${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{ From 5ea8a5af790b4ab42f1c5986cbe835a059648ac4 Mon Sep 17 00:00:00 2001 From: William Noris Date: Wed, 20 Oct 2021 14:04:21 +0200 Subject: [PATCH 2/2] tentative d'ajout d'event --- scripts/planets.js | 83 ++++++++++++++++++++++++++++++---------------- 1 file changed, 55 insertions(+), 28 deletions(-) diff --git a/scripts/planets.js b/scripts/planets.js index 66dd537..9b53bec 100644 --- a/scripts/planets.js +++ b/scripts/planets.js @@ -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 += @@ -38,35 +44,56 @@ function remplissage(results) { `; 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); + 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); }); - - //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); - // }); - // }); } - - const fillResidents = (jsonResp) => { - console.log(jsonResp); - } - - const fillFilms = (jsonResp) => { - console.log(jsonResp); - } - - api_call(API_URL + "/planets", remplissage); + // item = accordeonItemHeader[accordeonItemHeader.length - 1]; + // planetsItems.push(item); - console.log('planet.js loaded'); + + + + //Pagination + createPagination(previousUrl, nextUrl, planetes, remplissage); + + + // 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); + + +console.log('planet.js loaded');