regroupement des archives pour eviter de d'inonder les resultats

css/index.css

@@ -163,7 +163,19 @@
     padding: 20px;
 }
   
-.card img {
+
+
+
+.card-doc {
+  margin-top: 5vh;
+  background-color: #dfdaba;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-bottom: 20px;
+  padding: 20px;
+}
+
+.card-doc img {
   width: 100%;
   height: auto;
   margin-bottom: 10px;
@@ -171,42 +183,42 @@
 
 }
 
-.card textarea{
+.card-doc textarea{
   width: 100%;
   height: 100vh;
   margin-bottom: 10px;
   border-radius: 7px;
 }
 
-.card embed{
+.card-doc embed{
   width: 100%;
   height: 50vh;
   margin-bottom: 10px;
 }
 
-.card iframe {
+.card-doc iframe {
   width: 100%;
   height: 50vh; 
 
 }
 
-.card video {
+.card-doc video {
   width: 100%;
   height: auto;
 
 }
 
-.card div {
+.card-doc div {
   margin-bottom: 10px;
   line-height: 1.5;
 }
 
-.card ul {
+.card-doc ul {
   padding-left: 20px;
   margin-bottom: 10px;
 }
 
-.card a{
+.card-doc a{
   width: fit-content;
   grid-column: auto;
 }

index.php

@@ -19,7 +19,6 @@
  /(__)\  )   /( (__  ) _ (     _)(_  )  ( \__ \ /(__)\ 
 (__)(__)(_)\_) \___)(_) (_)   (____)(_)\_)(___/(__)(__)
     </pre>
-
 </div>
 
     <h4>Comme vous pouvez le constater, on cherche quelqu'un pour le design (html + css) du site :D club.info@amicale-insat.fr</h4>
@@ -67,6 +66,7 @@
     <?php
         if(isset($_SESSION["utilisateur_authentifie"]) && ($_SESSION["utilisateur_authentifie"] == 1)){
             ?>
+    <img src="img/fox-reverse.gif">
 
 <div class="barre-recherche centre-horizontal">
         <form id="recherche_form">

js/index.js

@@ -1,58 +1,12 @@
-
+function createDocumentCard(doc){
-async function rechercher(){
-
-    var req = document.getElementById("recherche_input").value;
-    var themes = [];
-    Array.from(document.getElementsByClassName("theme")).forEach(function (el) {
-        // on encode en  url pour pouvoir le passer dans la requete GET
-        themes.push(encodeURIComponent(el.innerText));
-    });
-    var duree =document.getElementById("duree_input").value
-
-    var url = "api.php/rechercher?req="+req;
-    if(themes.toString() != ""){
-        url = url +"&themes="+themes.toString();
-    } 
-
-    if(duree != ""){
-        url = url +"&duree="+duree;
-
-    }
-    console.log(url);
-
-
-    var tout_les_insa_switch = document.getElementById("tout_les_insa_switch").checked;
-    if(tout_les_insa_switch){
-        url = url+"&tout_les_insa=1"
-    }
-
-    resp = await fetch(url);
-    
-    data = await resp.json();
-
-    console.log(data);
-
-    // vide d'abord les éléments présents dans la liste sur la page
-    document.getElementById("liste_resultats").innerHTML = "";
-
-    // ensuite on ajoute un petit titre à la chronologie
-    let titre = document.createElement("h1");
-    titre.innerText = "Voilà les "+data.resultats.length+" résultats de ta recherche :";
-    document.getElementById("liste_resultats").appendChild(titre);
-    
-    if(data.status == 1){
-        data.resultats.forEach(doc => {
-
-
     const card = document.createElement('div');
-            card.classList.add('card');                
+    card.classList.add('card-doc');                
 
     // on affiche le titre du résultat parce qu'on est pas des sauvages
     let titre_ensemble;
     titre_ensemble = document.createElement("h2");
-            titre_ensemble.innerText = doc.titre;
+    titre_ensemble.innerText = "Document de l'archive";
     titre_ensemble.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-            
     card.appendChild(titre_ensemble);
 
     const buttonsDiv = document.createElement("div");
@@ -60,129 +14,6 @@ async function rechercher(){
     
     // fichiers spéciaux ?
 
-            switch (doc.type) {
-                case 2: // image
-                    const img = document.createElement('img');
-                    img.src = doc.upload_path;
-                    img.alt = doc.titre;
-                    card.appendChild(img);
-
-                    const imageLink = document.createElement('a');
-                    imageLink.href = doc.upload_path;
-                    imageLink.classList.add('lien');
-                    imageLink.textContent = 'Voir image';
-                    imageLink.target = '_blank';
-                    card.appendChild(imageLink);
-                    break;
-                case 3: // pdf
-                    const embed = document.createElement('embed');
-                    embed.src = doc.upload_path;
-                    card.appendChild(embed);
-
-                    const pdfLink = document.createElement('a');
-                    pdfLink.href = doc.upload_path;
-                    pdfLink.classList.add('lien');
-                    pdfLink.textContent = 'Voir PDF en grand';
-                    pdfLink.target = '_blank';
-                    card.appendChild(pdfLink);
-                    break;
-                case 4: // video
-                    const video = document.createElement('video');
-                    video.src = doc.upload_path;
-                    video.controls = true;
-                    card.appendChild(video);
-                    break;
-                case 5:
-                    const iframe = document.createElement('iframe');
-                    iframe.src = doc.upload_path;
-                    card.appendChild(iframe);
-                    break;
-
-                case 1:
-                    const textarea = document.createElement('textarea');
-                    var xmlhttp, text;
-                    xmlhttp = new XMLHttpRequest();
-                    xmlhttp.open('GET', doc.upload_path, false);
-                    xmlhttp.send();
-                    text = xmlhttp.responseText;
-                    textarea.value = text;
-                    card.appendChild(textarea)
-                    break;
-                default:
-                    const unsupportedLink = document.createElement('a');
-                    unsupportedLink.href = doc.upload_path;
-                    unsupportedLink.classList.add('lien');
-                    unsupportedLink.textContent = 'Type de fichier non supporté.';
-                    unsupportedLink.target = '_blank';
-                    buttonsDiv.appendChild(unsupportedLink);
-                    break;
-            }
-
-            
-            const ele = document.createElement("a");
-            ele.innerText = "Voir tous les pdf de cet ensemble";
-            ele.href = `ens.php?ensemble_id=${doc.ensemble_id}`;
-            ele.classList.add("lien");
-
-            buttonsDiv.appendChild(ele);
-
-            card.appendChild(buttonsDiv);
-
-
-            document.getElementById("liste_resultats").appendChild(card);
-
-
-
-        });
-    }
-}
-
-
-
-async function gen_chronologie(){
-    var url = "api.php/generer_chronologie";
-
-    console.log(url);
-
-    resp = await fetch(url);
-
-    data = await resp.json();
-    // vide d'abord les éléments présents dans la liste sur la page
-    document.getElementById("liste_resultats").innerHTML = "";
-
-    if(data.resultats.length > 0){
-        // ensuite on ajoute un petit titre à la chronologie
-        let titre = document.createElement("h1");
-        titre.innerText = "Documents récemment publiés";
-        document.getElementById("liste_resultats").appendChild(titre);
-    }else{
-        
-    }
-
-    
-    // et on remplis avec ce que l'api a généré
-    if(data.status == 1){
-        data.resultats.forEach(ens => {
-
-            ens.documents.forEach(doc=>{
-
-                const card = document.createElement('div');
-                card.classList.add('card');                
-
-                // on affiche le titre du résultat parce qu'on est pas des sauvages
-                let titre_ensemble;
-                titre_ensemble = document.createElement("h2");
-                titre_ensemble.innerText = doc.titre;
-                titre_ensemble.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
-                
-                card.appendChild(titre_ensemble);
-
-                const buttonsDiv = document.createElement("div");
-                buttonsDiv.classList.add("ligne-boutons");
-                
-                // fichiers spéciaux ?     
-                
-        
     switch (doc.type) {
         case 2: // image
             const img = document.createElement('img');
@@ -251,12 +82,145 @@ async function gen_chronologie(){
 
     card.appendChild(buttonsDiv);
 
-                document.getElementById("liste_resultats").appendChild(card);
+    return card;
+}
+async function rechercher(){
 
+    var req = document.getElementById("recherche_input").value;
+    var themes = [];
+    Array.from(document.getElementsByClassName("theme")).forEach(function (el) {
+        // on encode en  url pour pouvoir le passer dans la requete GET
+        themes.push(encodeURIComponent(el.innerText));
     });
+    var duree =document.getElementById("duree_input").value
+
+    var url = "api.php/rechercher?req="+req;
+    if(themes.toString() != ""){
+        url = url +"&themes="+themes.toString();
+    } 
+
+    if(duree != ""){
+        url = url +"&duree="+duree;
+
+    }
+    console.log(url);
+
+
+    var tout_les_insa_switch = document.getElementById("tout_les_insa_switch").checked;
+    if(tout_les_insa_switch){
+        url = url+"&tout_les_insa=1"
+    }
+
+    resp = await fetch(url);
+    
+    data = await resp.json();
+
+    console.log(data);
+
+    // vide d'abord les éléments présents dans la liste sur la page
+    document.getElementById("liste_resultats").innerHTML = "";
+
+    // ensuite on ajoute un petit titre à la chronologie
+    let titre = document.createElement("h1");
+    titre.innerText = "Voilà les "+data.resultats.length+" résultats de ta recherche :";
+    document.getElementById("liste_resultats").appendChild(titre);
+    
+    if(data.status == 1){
+        let ensemblesMap = new Map();
+
+        data.resultats.forEach(doc => {
+            if (!ensemblesMap.has(doc.ensemble_id)) {
+                let ensembleDiv = document.createElement("div");
+                ensembleDiv.classList.add("ensemble");
+                ensembleDiv.classList.add("card");
+
+                let ensembleTitle = document.createElement("h2");
+                ensembleTitle.innerText = doc.ensemble_titre;
+                ensembleDiv.appendChild(ensembleTitle);
+
+                let toggleButton = document.createElement("button");
+                toggleButton.innerText = "Entrevoir/Masquer les documents de cet ensemble";
+                toggleButton.setAttribute("data-ensemble-id", doc.ensemble_id);
+                toggleButton.classList.add("button");
+                toggleButton.classList.add("color-red-tr");
+                toggleButton.onclick = () => toggleVisibility(doc.ensemble_id);
+                ensembleDiv.appendChild(toggleButton);
+
+                let documentsDiv = document.createElement("div");
+                documentsDiv.classList.add("documents");
+                documentsDiv.id = "documents-" + doc.ensemble_id;
+                ensembleDiv.appendChild(documentsDiv);
+
+                document.getElementById("liste_resultats").appendChild(ensembleDiv);
+                ensemblesMap.set(doc.ensemble_id, documentsDiv);
+            }
+
+            let card = createDocumentCard(doc);
+            ensemblesMap.get(doc.ensemble_id).appendChild(card);
+        });
+    }
+}
 
 
 
+async function gen_chronologie(){
+    var url = "api.php/generer_chronologie";
+
+    console.log(url);
+
+    resp = await fetch(url);
+
+    data = await resp.json();
+    // vide d'abord les éléments présents dans la liste sur la page
+    document.getElementById("liste_resultats").innerHTML = "";
+
+    if(data.resultats.length > 0){
+        // ensuite on ajoute un petit titre à la chronologie
+        let titre = document.createElement("h1");
+        titre.innerText = "Archives récemment publiées";
+        document.getElementById("liste_resultats").appendChild(titre);
+    }else{
+        
+    }
+
+    
+    // et on remplis avec ce que l'api a généré
+    if(data.status == 1){
+        let ensemblesMap = new Map();
+
+        data.resultats.forEach(ens => {
+            ens.documents.forEach(doc => {
+                if (!ensemblesMap.has(doc.ensemble_id)) {
+                    let ensembleDiv = document.createElement("div");
+                    ensembleDiv.classList.add("ensemble");
+                    ensembleDiv.classList.add("card");
+
+
+                    let ensembleTitle = document.createElement("h2");
+                    ensembleTitle.innerText = doc.titre;
+                    ensembleDiv.appendChild(ensembleTitle);
+
+                    let toggleButton = document.createElement("button");
+                    toggleButton.innerText = "Entrevoir/Masquer les documents de cet ensemble";
+                    toggleButton.setAttribute("data-ensemble-id", doc.ensemble_id);
+                    toggleButton.classList.add("button");
+                    toggleButton.classList.add("color-red-tr");
+                    toggleButton.onclick = () => toggleVisibility(doc.ensemble_id);
+                    ensembleDiv.appendChild(toggleButton);
+
+                    let documentsDiv = document.createElement("div");
+                    documentsDiv.classList.add("documents");
+                    documentsDiv.id = "documents-" + doc.ensemble_id;
+                    ensembleDiv.appendChild(documentsDiv);
+
+                    document.getElementById("liste_resultats").appendChild(ensembleDiv);
+                    ensemblesMap.set(doc.ensemble_id, documentsDiv);
+                }
+
+                let card = createDocumentCard(doc);
+                card.style.display = "none";
+                ensemblesMap.get(doc.ensemble_id).appendChild(card);
+            });
         });
     }
 }
@@ -299,3 +263,12 @@ document.addEventListener("DOMContentLoaded", (event)=>{
 
 });
 
+function toggleVisibility(ensembleId) {
+    let documentsDiv = document.getElementById("documents-" + ensembleId);
+    
+    let cards = documentsDiv.getElementsByClassName("card-doc");
+
+    for(i = 0;i<cards.length;i++){
+        cards[i].style.display = cards[i].style.display === "none" ? "block" : "none";
+    }
+}