Merge branch 'dev' into characters
This commit is contained in:
William Noris
GitHub
commit
adc9e4af55
5 changed files with 201 additions and 171 deletions
154
scripts/films.js
154
scripts/films.js
|
|
@ -1,122 +1,68 @@
|
|||
const FILMS = document.getElementById('reponses-films');
|
||||
const { div } = require("prelude-ls");
|
||||
|
||||
const FILMS = document.getElementsByClassName('accordeon');
|
||||
const VAISSEAUX = document.getElementById('vaisseaux-films');
|
||||
const ESPECES = document.getElementById('especes-films');
|
||||
const DEPLIE = document.getElementById ('deploiement-films');
|
||||
const DEPLIE2 = document.getElementById ('deploiement-films2');
|
||||
const DEPLIE3 = document.getElementById ('deploiement-films3');
|
||||
const DEPLIE4 = document.getElementById ('deploiement-films4');
|
||||
const DEPLIE5 = document.getElementById ('deploiement-films5');
|
||||
const DEPLIE6 = document.getElementById ('deploiement-films6');
|
||||
|
||||
const TITRE = document.getElementsByClassName('titres');
|
||||
console.log(FILMS);
|
||||
|
||||
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
|
||||
fetch(API_URL) // recupère la liste des films
|
||||
.then((response) => { // retourne une reponse
|
||||
const API_URL = "https://swapi.dev/api/films/";
|
||||
fetch(API_URL + target.id)
|
||||
.then((response) => { // retourne une reponse
|
||||
console.log(response);
|
||||
return response.json(); // sous format json
|
||||
return response.json(); // sous format json
|
||||
})
|
||||
.then(afficherFilms => { // on affiche ensuite les films
|
||||
console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){ // on sait qu'il y en a 6, donc une boucle pour les afficher tous
|
||||
console.log(afficherFilms.results[index]);
|
||||
const EPISODES = afficherFilms.results[index]; // on déclare qu'un épisode est toujours la fonction avec sa boucle
|
||||
.then(afficherFilms => { // on affiche ensuite les films
|
||||
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
|
||||
console.log(EPISODES);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
TITRE.innerHTML +=`
|
||||
<p class= "titre">${EPISODES.title}</p>
|
||||
`
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
DEPLIE.addEventListener('click', ()=>{
|
||||
|
||||
const API_URL_1 = "https://swapi.dev/api/films/1";
|
||||
fetch(API_URL_1)
|
||||
.then((response1) => {
|
||||
console.log(response1);
|
||||
return response1.json();
|
||||
})
|
||||
.then(afficherFilms => {
|
||||
/*console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){
|
||||
console.log(afficherFilms.results[index]); */
|
||||
const EPISODE1 = afficherFilms;
|
||||
console.log(EPISODE1);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "episode">Episode : ${EPISODE1.episode_id}</p>
|
||||
<p class= "directeur">Directeur : ${EPISODE1.director}</p>
|
||||
<p class= "producteur">Producteur : ${EPISODE1.producer}</p>
|
||||
<p class= "sortie">Date de Sortie : ${EPISODE1.release_date}</p>
|
||||
`
|
||||
`
|
||||
}
|
||||
,)
|
||||
|
||||
const API_URL_VAISSEAUX = "https://swapi.dev/api/starships/"
|
||||
fetch(API_URL_VAISSEAUX)
|
||||
.then((response2)=>{
|
||||
console.log(response2);
|
||||
return response2.json();
|
||||
const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
|
||||
accordeonItemHeader.forEach(accordeonItemHeader =>{
|
||||
accordeonItemHeader.addEventListener("click", event => {
|
||||
|
||||
console.log(event.target.id);
|
||||
console.log(event.target.nextSibling)
|
||||
console.log(event.target.nextSibling.nextElementSibling)
|
||||
console.log(event.target.nextSibling.nextElementSibling.children)
|
||||
const DEPLIE = event.target.nextSibling.nextElementSibling.children[0];
|
||||
|
||||
accordeonItemHeader.classList.toggle("active");
|
||||
|
||||
const API_URL = "https://swapi.dev/api/films/"; // déclare la localisation de la liste des films
|
||||
fetch(API_URL + event.target.id) // recupère la liste des films
|
||||
.then((response) => { // retourne une reponse
|
||||
console.log(response);
|
||||
return response.json(); // sous format json
|
||||
})
|
||||
.then(afficherVaisseaux =>{
|
||||
console.log(afficherVaisseaux);
|
||||
for (let index = 0; index <36; index++){
|
||||
console.log(afficherVaisseaux.results[index]);
|
||||
const VAISSEAU = afficherVaisseaux.results[index];
|
||||
console.log(VAISSEAU);
|
||||
|
||||
VAISSEAUX.innerHTML +=`
|
||||
<p class= "Nom des Vaisseaux">${VAISSEAU.name}</p>
|
||||
`
|
||||
}
|
||||
}
|
||||
,)
|
||||
|
||||
const API_URL_ESPECES = "https://swapi.dev/api/species/"
|
||||
fetch(API_URL_ESPECES)
|
||||
.then((response3)=>{
|
||||
console.log(response3);
|
||||
return response3.json();
|
||||
})
|
||||
.then(afficherEspeces =>{
|
||||
console.log(afficherEspeces);
|
||||
for (let index = 0; index <37; index++){
|
||||
console.log(afficherEspeces.results[index]);
|
||||
const ESPECE = afficherEspeces.results[index];
|
||||
console.log(ESPECE);
|
||||
|
||||
ESPECES.innerHTML +=`
|
||||
<p class= "Nom des Espèces">${ESPECE.name}</p>
|
||||
`
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
DEPLIE2.addEventListener('click', ()=>{
|
||||
|
||||
const API_URL_2 = "https://swapi.dev/api/films/2";
|
||||
fetch(API_URL_2)
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
return response.json();
|
||||
})
|
||||
.then(afficherFilms => {
|
||||
/*console.log(afficherFilms);
|
||||
for(let index = 0; index <6; index++){
|
||||
console.log(afficherFilms.results[index]); */
|
||||
const EPISODE2 = afficherFilms;
|
||||
console.log(EPISODE2);
|
||||
.then(afficherFilms => { // on affiche ensuite les films
|
||||
const EPISODES = afficherFilms; // on déclare qu'un épisode est toujours la fonction avec sa boucle
|
||||
console.log(EPISODES);
|
||||
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "titre">${EPISODE2.episode_id}</p>
|
||||
<p class= "titre">${EPISODE2.director}</p>
|
||||
<p class= "titre">${EPISODE2.producer}</p>
|
||||
<p class= "titre">${EPISODE2.release_date}</p>
|
||||
DEPLIE.innerHTML +=`
|
||||
<p class= "titre">${EPISODES.title}</p>
|
||||
<p class= "episode">Episode : ${EPISODES.episode_id}</p>
|
||||
<p class= "directeur">Directeur : ${EPISODES.director}</p>
|
||||
<p class= "producteur">Producteur : ${EPISODES.producer}</p>
|
||||
<p class= "sortie">Date de Sortie : ${EPISODES.release_date}</p>
|
||||
`
|
||||
}
|
||||
,)
|
||||
/*for(let index = 0; index <5; index++){
|
||||
FILMS.innerHTML +=`
|
||||
<p class ="especes"> Espèces : ${EPISODES.species[index]}</p>
|
||||
`
|
||||
}
|
||||
for(let index = 0; index<8; index++){
|
||||
FILMS.innerHTML +=`
|
||||
<p class= "vaisseaux"> Vaisseaux : ${EPISODES.starships[index]}</p>
|
||||
`
|
||||
}*/
|
||||
|
||||
,)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import { api_call, API_URL, getPage } from "./util";
|
||||
import { api_call, API_URL, createPagination } from "./util";
|
||||
|
||||
|
||||
const planetes = document.getElementById("resultats");
|
||||
|
||||
console.log('planet.js loaded');
|
||||
|
||||
|
||||
function remplissage(results){
|
||||
function remplissage(results) {
|
||||
|
||||
planetes.innerHTML = "";
|
||||
|
||||
|
|
@ -13,7 +12,7 @@ function remplissage(results){
|
|||
const nextUrl = results.next;
|
||||
const tabResults = results.results;
|
||||
|
||||
for(resultPlanet of tabResults){
|
||||
for (resultPlanet of tabResults) {
|
||||
const nom = resultPlanet.name;
|
||||
const diametre = resultPlanet.diameter;
|
||||
const climate = resultPlanet.climate;
|
||||
|
|
@ -33,8 +32,8 @@ function remplissage(results){
|
|||
const tabFilms = resultPlanet.films;
|
||||
|
||||
|
||||
planetes.innerHTML +=
|
||||
`<section class="resultat">
|
||||
planetes.innerHTML +=
|
||||
`<section class="resultat">
|
||||
<h1 class="titreAccordeon">${nom}</h1>
|
||||
<div class="accordeon">
|
||||
<div class="1">
|
||||
|
|
@ -49,35 +48,10 @@ function remplissage(results){
|
|||
}
|
||||
|
||||
//Pagination
|
||||
console.log("Url précédente : " + previousUrl);
|
||||
console.group("Url suivante : " + nextUrl);
|
||||
const currentPage = (previousUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(previousUrl)) + 1);
|
||||
console.log("Page courante : " + currentPage);
|
||||
|
||||
let firstPage = false;
|
||||
let lastPage = false;
|
||||
if(previousUrl == null) firstPage = true;
|
||||
if(nextUrl == null) lastPage = true;
|
||||
let previousButton = `<button id="prevButton">Page précédente</button>`;
|
||||
let currentButton = `${currentPage}`;
|
||||
let nextButton = `<button id="nextButton">Page suivante</button>`;
|
||||
if(!firstPage) {
|
||||
planetes.innerHTML += previousButton;
|
||||
console.log(document.getElementById("prevButton"));
|
||||
document.getElementById("prevButton").addEventListener("click", () => {
|
||||
api_call(previousUrl, remplissage);
|
||||
});
|
||||
}
|
||||
planetes.innerHTML += currentButton;
|
||||
if(!lastPage) {
|
||||
planetes.innerHTML += nextButton;
|
||||
document.getElementById("nextButton").addEventListener("click", () => {
|
||||
api_call(nextUrl, remplissage);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
createPagination(previousUrl, nextUrl, planetes, remplissage);
|
||||
}
|
||||
|
||||
api_call(API_URL + "/planets", remplissage);
|
||||
|
||||
|
||||
console.log('planet.js loaded');
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export const api_call = (url, callback) => {
|
|||
* @param {string} url l'url d'un résultat multipage (qui se termine par ?page=2 par exemple)
|
||||
* @returns Le numéro de la page de l'url
|
||||
*/
|
||||
export const getPage = (url) => {
|
||||
const getPage = (url) => {
|
||||
tabUrl = url.split('/');
|
||||
pageEgal = tabUrl[tabUrl.length - 1];
|
||||
tabPageEgal = pageEgal.split('=');
|
||||
|
|
@ -34,3 +34,49 @@ export const getPage = (url) => {
|
|||
|
||||
return numeroPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajoutes des boutons de pagination à un élément
|
||||
* @param {string} prevUrl l'url de la page précédente
|
||||
* @param {string} nextUrl l'url de la page suivante
|
||||
* @param {object} elementParent L'objet parent dans lequel ajouter les boutons
|
||||
*/
|
||||
export const createPagination = (prevUrl, nextUrl, elementParent, remplissage) => {
|
||||
console.log("Url précédente : " + prevUrl);
|
||||
console.group("Url suivante : " + nextUrl);
|
||||
const currentPage = (prevUrl == null ? parseInt(getPage(nextUrl)) - 1 : parseInt(getPage(prevUrl)) + 1);
|
||||
console.log("Page courante : " + currentPage);
|
||||
|
||||
let firstPage = false;
|
||||
let lastPage = false;
|
||||
if (prevUrl == null) firstPage = true;
|
||||
if (nextUrl == null) lastPage = true;
|
||||
let previousButton = `<button id="prevButton">Page précédente</button>`;
|
||||
let currentButton = `${currentPage}`;
|
||||
let nextButton = `<button id="nextButton">Page suivante</button>`;
|
||||
|
||||
elementParent.innerHTML += previousButton;
|
||||
elementParent.innerHTML += currentButton;
|
||||
elementParent.innerHTML += nextButton;
|
||||
|
||||
if(firstPage){
|
||||
document.getElementById("prevButton").hidden = true;
|
||||
}
|
||||
else{
|
||||
document.getElementById("prevButton").hidden = false;
|
||||
}
|
||||
if(lastPage){
|
||||
document.getElementById("nextButton").hidden = true;
|
||||
}
|
||||
else{
|
||||
document.getElementById("nextButton").hidden = false;
|
||||
}
|
||||
|
||||
|
||||
document.getElementById("prevButton").addEventListener("click", () => {
|
||||
api_call(prevUrl, remplissage);
|
||||
});
|
||||
document.getElementById("nextButton").addEventListener("click", () => {
|
||||
api_call(nextUrl, remplissage);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue