100 lines
3.1 KiB
JavaScript
100 lines
3.1 KiB
JavaScript
import { api_call, API_URL, createPagination, api_call_array } from "./util";
|
|
|
|
|
|
const planetes = document.getElementById("resultats");
|
|
|
|
|
|
function remplissage(results) {
|
|
|
|
planetes.innerHTML = "";
|
|
|
|
const previousUrl = results.previous;
|
|
const nextUrl = results.next;
|
|
const tabResults = results.results;
|
|
|
|
planetsItems = [];
|
|
residentsArray = [];
|
|
filmsArray = [];
|
|
|
|
for (resultPlanet of tabResults) {
|
|
const nom = resultPlanet.name;
|
|
const diametre = resultPlanet.diameter;
|
|
const climate = resultPlanet.climate;
|
|
const terrain = resultPlanet.terrain;
|
|
const population = resultPlanet.population;
|
|
|
|
const tabResidents = resultPlanet.residents;
|
|
const tabFilms = resultPlanet.films;
|
|
residentsArray.push(tabResidents);
|
|
filmsArray.push(tabFilms);
|
|
|
|
|
|
planetes.innerHTML +=
|
|
`<section class="resultat accordeon_item">
|
|
<h1 class="accordeon_item_header">${nom}</h1>
|
|
<div class="accordeon_item_body">
|
|
<div class="column1">
|
|
<p>${terrain}</p>
|
|
<p>${climate}</p>
|
|
<p>${diametre}Km</p>
|
|
</div>
|
|
<div class="column2">${tabResidents}</div>
|
|
<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);
|
|
|
|
|
|
// 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');
|