From 438c3ba8b23bf4dede88cd7df95454cd847a19b0 Mon Sep 17 00:00:00 2001
From: HediMjid <hedi.mjid@gmail.com>
Date: Wed, 20 Oct 2021 11:35:52 +0200
Subject: [PATCH] js accordeon

---
 scripts/films.js    | 68 ++++++++++++++++++--------------
 scripts/people.js   | 94 +++++++++++++++++++++++++++------------------
 scripts/planetes.js | 84 ++++++++++++++++++++++------------------
 3 files changed, 142 insertions(+), 104 deletions(-)

diff --git a/scripts/films.js b/scripts/films.js
index cc162f3..b0a4314 100644
--- a/scripts/films.js
+++ b/scripts/films.js
@@ -27,41 +27,42 @@ async function getMovies() {
     // Boucle pour parser les films
     document.getElementById('container').innerHTML += `
         <section class="card">
-            <h2>${TITRE}</h2>
+            <h2 style="display: inline;">${TITRE}</h2> <a href="#" class="etendre">+</a>
+            <div class="details">
+                <div class="data">
+                    <h3> Episode ID : </h3>
+                    <p>${EPISODE}</p>
+                </div>
 
-            <div class="data">
-                <h3> Episode ID : </h3>
-                <p>${EPISODE}</p>
-            </div>
+                <div class="data">
+                    <h3> Opening Crawl : </h3>
+                    <p>${OPENING}</p>
+                </div>
 
-            <div class="data">
-                <h3> Opening Crawl : </h3>
-                <p>${OPENING}</p>
-            </div>
+                <div class="data">
+                    <h3>Director : </h3>
+                    <p>${DIRECTOR}</p>
+                </div>
 
-            <div class="data">
-                <h3>Director : </h3>
-                <p>${DIRECTOR}</p>
-            </div>
+                <div class="data">
+                    <h3>Producer(s) :</h3>
+                    <p> ${PRODUCER}</p>
+                </div>
 
-            <div class="data">
-                <h3>Producer(s) :</h3>
-                <p> ${PRODUCER}</p>
-            </div>
+                <div class="data">
+                    <h3>Release Date :</h3>
+                    <p>${DATE}</p>
+                </div>
 
-            <div class="data">
-                <h3>Release Date :</h3>
-                <p>${DATE}</p>
-            </div>
+                <div class="data">
+                    <button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
+                    <div id="detailsStarships${i}"></div>
+                </div>
 
-            <div class="data">
-                <button class="starships" value="${FILM.results[i].starships}">Voir les vaisseaux</button>
-                <div id="detailsStarships${i}"></div>
-            </div>
-
-            <div class="data">
-                <button class="species" value="${FILM.results[i].species}">Voir les especes</button>
-                <div id="detailsSpecies${i}"></div>
+                <div class="data">
+                    <button class="species" value="${FILM.results[i].species}">Voir les especes</button>
+                    <div id="detailsSpecies${i}"></div>
+                </div>
             </div>
         </section>
     `;
@@ -84,6 +85,15 @@ async function getMovies() {
             getSpecies(BUTTON1.value,BUTTON1.nextElementSibling.id);
             });
         }
+
+        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');
+          });
+        }
 }
 
 // Fonction pour afficher les vaisseaux
diff --git a/scripts/people.js b/scripts/people.js
index ebb2169..00b6942 100644
--- a/scripts/people.js
+++ b/scripts/people.js
@@ -1,5 +1,6 @@
 const API_URL =  "https://swapi.dev/api/people/?page=";
 let pageEnCours = 1;
+let tableau_perso = new Array();
 
 class People {
     constructor(name, height, mass, hair_color, skin_color, eye_color, birth_year, gender, homeworld, index, films) {
@@ -19,7 +20,7 @@ class People {
     affichePeople () {
         document.getElementById('container').innerHTML += `
         <section class="card">
-            <h2 style="display: inline;">Name : ${this.name} </h2><a href="#" class="etendre">+</a>
+            <h2 style="display: inline;">${this.name} </h2><a href="#" class="etendre">+</a>
             <div class="details">
             <div class="data"> 
                 <h3>Né sur :</h3> 
@@ -67,6 +68,10 @@ async function getPeople() {
     const peoples = await fetch(API_URL+pageEnCours);
     const people = await peoples.json();
     const total_pages = people.count/people.results.length;
+    tableau_perso = [];
+
+
+
 
     // on vide le div
     document.getElementById('container').innerHTML = "";
@@ -88,6 +93,7 @@ async function getPeople() {
     //       console.log(film.title);
     //       movies += `<p>${film.title}</p>`;
     //   }
+            tableau_perso.push({name:people.results[i].name,height:people.results[i].height,mass:people.results[i].mass,hair_color:people.results[i].hair_color,skin_color:people.results[i].skin_color,eye_color:people.results[i].eye_color,birth_year:people.results[i].birth_year,gender:people.results[i].gender,homeworld:planet.name,index:i,films:people.results[i].films});
             const perso = new People(people.results[i].name,people.results[i].height,people.results[i].mass,people.results[i].hair_color,people.results[i].skin_color,people.results[i].eye_color,people.results[i].birth_year,people.results[i].gender,planet.name,i,people.results[i].films);
             perso.affichePeople();
       }
@@ -102,11 +108,13 @@ async function getPeople() {
 
         const accordion = document.getElementsByClassName('etendre');
         for (i=0; i<accordion.length; i++) {
-            accordion[i].addEventListener('click', function () {
+            accordion[i].addEventListener('click', function (e) {
+                e.preventDefault();
                 //console.log('this.nextElementSibling');
                 this.nextElementSibling.classList.toggle('active');
           });
         }
+        
   }
 
 // function pour afficher les peoples et leur correspondances
@@ -115,7 +123,7 @@ async function getFilms(liste,div) {
     console.log(url);
     document.getElementById(div).innerHTML = "";
     for(i=0;i<url.length;i++){
-        console.log(url[i]);
+        //console.log(url[i]);
         const films = await fetch(url[i]);
         const film = await films.json();
         //console.log(film);
@@ -173,41 +181,19 @@ document.getElementById('myInput').addEventListener("keyup", function() {
 function searchPeople() {
     // Declare variables
     let query = myInput.value;
-    if(query.length>1){
-        getSearch(query);
-    }else{
-        getPeople();
-    }
-    
-    //let result = array.filter(user=>user.name.includes(query));
-    //console.log(result);
-    // document.getElementById('container').innerHTML = "";
-    // for(i=0;i<result.length;i++){
-    //     document.getElementById('container').innerHTML += `<p>${result[i].name}</p>`;
+    // if(query.length>1){
+    //     getSearch(query);
+    // }else{
+    //     getPeople();
     // }
-  }
-
-
-async function getSearch(query) {
+    //console.log(tableau_perso);
+    let results = tableau_perso.filter(user=>user.name.includes(query));
+    //console.log(result);
     document.getElementById('container').innerHTML = "";
-        const searchs = await fetch("https://swapi.dev/api/people/?search="+query);
-        const search = await searchs.json();
-        console.log(search);
-        for(i=0;i<search.count;i++){
-          const planets = await fetch(search.results[i].homeworld);
-          const planet = await planets.json();
-            
-            const perso = new People(search.results[i].name,search.results[i].height,search.results[i].mass,search.results[i].hair_color,search.results[i].skin_color,search.results[i].eye_color,search.results[i].birth_year,search.results[i].gender,planet.name,i,search.results[i].films);
-            perso.affichePeople();
-        }
-          const BUTTONS = document.querySelectorAll('.films');
-          for(var i = 0;i < BUTTONS.length;i++){
-              let BUTTON = BUTTONS[i];
-              BUTTON.addEventListener("click", function() {
-                   //console.log(BUTTON.nextElementSibling);
-                   getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
-            });
-          }
+    for(i=0;i<results.length;i++){
+        //document.getElementById('container').innerHTML += `<p>${result[i].name}</p>`;
+        const perso = new People(results[i].name,results[i].height,results[i].mass,results[i].hair_color,results[i].skin_color,results[i].eye_color,results[i].birth_year,results[i].gender,results[i].homeworld,i,results[i].films);
+        perso.affichePeople();
 
         const accordion = document.getElementsByClassName('etendre');
         for (i=0; i<accordion.length; i++) {
@@ -216,9 +202,41 @@ async function getSearch(query) {
                 this.nextElementSibling.classList.toggle('active');
           });
         }
-
-
+    }
   }
 
+
+// async function getSearch() {
+//     document.getElementById('container').innerHTML = "";
+//         const searchs = await fetch("https://swapi.dev/api/people/?search="+query);
+//         const search = await searchs.json();
+//         console.log(search);
+//         for(i=0;i<search.count;i++){
+//           const planets = await fetch(search.results[i].homeworld);
+//           const planet = await planets.json();
+            
+//             const perso = new People(search.results[i].name,search.results[i].height,search.results[i].mass,search.results[i].hair_color,search.results[i].skin_color,search.results[i].eye_color,search.results[i].birth_year,search.results[i].gender,planet.name,i,search.results[i].films);
+//             perso.affichePeople();
+//         }
+//           const BUTTONS = document.querySelectorAll('.films');
+//           for(var i = 0;i < BUTTONS.length;i++){
+//               let BUTTON = BUTTONS[i];
+//               BUTTON.addEventListener("click", function() {
+//                    //console.log(BUTTON.nextElementSibling);
+//                    getFilms(BUTTON.value,BUTTON.nextElementSibling.id);
+//             });
+//           }
+
+//         const accordion = document.getElementsByClassName('etendre');
+//         for (i=0; i<accordion.length; i++) {
+//             accordion[i].addEventListener('click', function () {
+//                 //console.log('this.nextElementSibling');
+//                 this.nextElementSibling.classList.toggle('active');
+//           });
+//         }
+
+
+//   }
+
 // initialisation de la page, pour un affichage au chargement
 getPeople();
diff --git a/scripts/planetes.js b/scripts/planetes.js
index f270d7f..f3c5e07 100644
--- a/scripts/planetes.js
+++ b/scripts/planetes.js
@@ -26,46 +26,48 @@ async function getPlanets() {
     
       document.getElementById('container').innerHTML += `
           <section class="card"> 
-          <h2>${PLANET_NAME}</h2>
-          <div class="data"> 
-            <h3>Rotation :</h3> 
-            <p>${ROTATION_PERIOD}</p>
-          </div>
-          <div>
-            <h3>ORBITAL :</h3>
-            <p>${ORBITAL_PERIOD}</p>
+          <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>
             </div>
-          <div class="data">
-            <h3>Diameter :</h3>
-            <p>${DIAMETER}</p>
+            <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">
+              <button class="films" value="${PLANET.results[i].films}">Films</button>
+              <div id="detailsFilms${i}"></div>
             </div>
-          <div class="data">
-            <h3>Climate :</h3>
-            <p>${CLIMATE}</p>
+            <div class="data">
+              <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
+              <div id="detailsResidents${i}"></div>
             </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">
-            <button class="films" value="${PLANET.results[i].films}">Films</button>
-            <div id="detailsFilms${i}"></div>
-          </div>
-          <div class="data">
-            <button class="residents" value="${PLANET.results[i].residents}">Résidents</button>
-            <div id="detailsResidents${i}"></div>
           </div>  
           </section>
         
@@ -91,6 +93,14 @@ async function getPlanets() {
         });
     }
        
+    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');
+      });
+    }
     
   }