Brief_starWars/scripts/planetes.js

262 lines
8.1 KiB
JavaScript
Raw Normal View History

2021-10-19 14:19:10 +00:00
const API_URL = "https://swapi.dev/api/planets/?page=";
let pageEnCours = 1;
2021-10-20 10:25:27 +00:00
let tableau_perso = new Array();
2021-10-19 14:19:10 +00:00
2021-10-20 09:17:57 +00:00
// function pour afficher les planetes et leur correspondances
2021-10-19 14:19:10 +00:00
async function getPlanets() {
const PLANETS = await fetch(API_URL+pageEnCours);
const PLANET = await PLANETS.json();
const total_pages = PLANET.count/PLANET.results.length;
2021-10-20 10:25:27 +00:00
tableau_perso = [];
2021-10-19 14:19:10 +00:00
// on vide le div
document.getElementById('container').innerHTML = "";
2021-10-20 09:17:57 +00:00
// boucle pour parser les planetes
2021-10-19 14:19:10 +00:00
for(i=0;i<total_pages;i++){
const PLANET_NAME = PLANET.results[i].name;
const ROTATION_PERIOD = PLANET.results[i].rotation_period;
const ORBITAL_PERIOD = PLANET.results[i].orbital_period;
const DIAMETER = PLANET.results[i].diameter;
const CLIMATE = PLANET.results[i].climate;
const GRAVITY = PLANET.results[i].gravity;
const TERRAIN = PLANET.results[i].terrain;
const SURFACE_WATER = PLANET.results[i].surface_water;
const POPULATION = PLANET.results[i].population;
document.getElementById('container').innerHTML += `
2021-10-19 15:38:04 +00:00
<section class="card">
2021-10-20 09:35:52 +00:00
<h2 style="display: inline;">${PLANET_NAME}</h2> </h2><a href="#" class="etendre">+</a>
<div class="details">
<div class="data">
<h3>Rotation :</h3>
<p>${ROTATION_PERIOD}</p>
2021-10-19 14:19:10 +00:00
</div>
2021-10-20 09:35:52 +00:00
<div>
<h3>ORBITAL :</h3>
<p>${ORBITAL_PERIOD}</p>
</div>
<div class="data">
<h3>Diameter :</h3>
<p>${DIAMETER}</p>
</div>
<div class="data">
<h3>Climate :</h3>
<p>${CLIMATE}</p>
</div>
<div class="data" >
<h3>Gravity : </h3>
<p>${GRAVITY}</p>
</div>
<div class="data" >
<h3>Terrain :</h3>
<p>${TERRAIN}</p>
</div>
<div class="data">
<h3>Surface water : </h3>
<p>${SURFACE_WATER}</p>
</div>
<div class="data">
<h3>Population :</h3
<p>${POPULATION}</p>
</div>
<div class="data">
2021-10-20 10:25:27 +00:00
<button class="films" value="${PLANET.results[i].films}">Voir les films +</button>
2021-10-20 09:35:52 +00:00
<div id="detailsFilms${i}"></div>
2021-10-19 14:19:10 +00:00
</div>
2021-10-20 09:35:52 +00:00
<div class="data">
2021-10-20 10:25:27 +00:00
<button class="residents" value="${PLANET.results[i].residents}">Voir les résidents +</button>
2021-10-20 09:35:52 +00:00
<div id="detailsResidents${i}"></div>
2021-10-19 14:19:10 +00:00
</div>
2021-10-20 07:40:36 +00:00
</div>
2021-10-19 15:38:04 +00:00
</section>
2021-10-19 14:19:10 +00:00
`;
2021-10-20 10:25:27 +00:00
tableau_perso.push({name:PLANET_NAME,rotation:ROTATION_PERIOD,orbital:ORBITAL_PERIOD,diameter:DIAMETER,climate:CLIMATE,gravity:GRAVITY,terrain:TERRAIN,surface:SURFACE_WATER,population:POPULATION});
2021-10-19 14:19:10 +00:00
}
const BUTTONS_FILMS = document.querySelectorAll('.films');
for(var i = 0;i < BUTTONS_FILMS.length;i++){
let BUTTON = BUTTONS_FILMS[i];
BUTTON.addEventListener("click", function() {
//console.log(BUTTON.nextElementSibling);
getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
const BUTTONS_RESIDENTS = document.querySelectorAll('.residents');
for(var i = 0;i < BUTTONS_RESIDENTS.length;i++){
let BUTTON = BUTTONS_RESIDENTS[i];
BUTTON.addEventListener("click", function() {
//console.log(BUTTON.nextElementSibling);
getResidents(BUTTON.value,BUTTON.nextElementSibling.id);
});
}
2021-10-20 09:35:52 +00:00
const accordion = document.getElementsByClassName('etendre');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function (e) {
e.preventDefault();
//console.log('this.nextElementSibling');
this.nextElementSibling.classList.toggle('active');
});
}
2021-10-19 14:19:10 +00:00
}
// function pour afficher les films
async function getFilms(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<url.length;i++){
console.log(url[i]);
const FILMS = await fetch(url[i]);
const FILM = await FILMS.json();
//console.log(film);
2021-10-20 09:17:57 +00:00
document.getElementById(div).innerHTML += `<p>${FILM.title}</p>`;
2021-10-19 14:19:10 +00:00
}
}
// function pour afficher les résidents
async function getResidents(liste,div) {
const url = liste.split(',');
console.log(div);
document.getElementById(div).innerHTML = "";
for(i=0;i<url.length;i++){
console.log(url[i]);
const RESIDENTS = await fetch(url[i]);
const RESIDENT = await RESIDENTS.json();
//console.log(film);
2021-10-20 09:17:57 +00:00
document.getElementById(div).innerHTML += `<p>${RESIDENT.name}</p>`;
2021-10-19 14:19:10 +00:00
}
}
// boucle pour afficher les boutons de navigation
fetch(API_URL)
.then(response => response.json())
.then(data => {
let totalPages = data.count / data.results.length;
for (let index = 1; index < totalPages +1; index++) {
document.getElementById('buttons').innerHTML += `
<button class="allButtons boutonNum" name="${index}" value="${index}"> ${index} </button>`;
}
let buttons = document.querySelectorAll('.allButtons');
let boutonNum = document.querySelectorAll('.boutonNum');
console.log(boutonNum);
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function(e) {
if (e.target.name === "moins" || e.target.name === "plus"){
pageEnCours = pageEnCours + parseInt(e.target.value);
if(pageEnCours < 1){
pageEnCours = 1;
}else if(pageEnCours > boutonNum.length){
pageEnCours = boutonNum.length;
}
}else{
pageEnCours = parseInt(e.target.value);
}
getPlanets();
});
}});
2021-10-20 10:25:27 +00:00
document.getElementById('myInput').addEventListener("keyup", function() {
searchPeople();
});
function searchPeople() {
// Declare variables
let query = myInput.value;
// if(query.length>1){
// getSearch(query);
// }else{
// getPeople();
// }
//console.log(tableau_perso);
let results = tableau_perso.filter(user=>user.name.includes(query));
console.log(results);
document.getElementById('container').innerHTML = "";
for(i=0;i<results.length;i++){
document.getElementById('container').innerHTML += `
<section class="card">
<h2 style="display: inline;">${results[i].name}</h2> </h2><a href="#" class="etendre">+</a>
<div class="details">
<div class="data">
<h3>Rotation :</h3>
<p>${results[i].rotation}</p>
</div>
<div>
<h3>ORBITAL :</h3>
<p>${results[i].orbital}</p>
</div>
<div class="data">
<h3>Diameter :</h3>
<p>${results[i].diameter}</p>
</div>
<div class="data">
<h3>Climate :</h3>
<p>${results[i].climate}</p>
</div>
<div class="data" >
<h3>Gravity : </h3>
<p>${results[i].gravity}</p>
</div>
<div class="data" >
<h3>Terrain :</h3>
<p>${results[i].terrain}</p>
</div>
<div class="data">
<h3>Surface water : </h3>
<p>${results[i].surface}</p>
</div>
<div class="data">
<h3>Population :</h3
<p>${results[i].population}</p>
</div>
</div>
</section>
`;
const accordion = document.getElementsByClassName('etendre');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function (e) {
e.preventDefault();
//console.log('this.nextElementSibling');
this.nextElementSibling.classList.toggle('active');
});
}
}
}
2021-10-19 14:19:10 +00:00
// initialisation de la page, pour un affichage au chargement
getPlanets();