c'est plus joli comme ça :D
This commit is contained in:
parent
ea77a8f585
commit
b6d4e9dc83
5 changed files with 465 additions and 52 deletions
89
css/ens.css
89
css/ens.css
|
@ -65,3 +65,92 @@ tr:hover {
|
|||
margin: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card iframe {
|
||||
width: 100%;
|
||||
height: 50vw;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
.card embed{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.card video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card div {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
@media only screen and (max-width: 600px) {
|
||||
.card {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.card div {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les titres importants */
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* Styles pour le texte principal */
|
||||
.main-text {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Styles pour les liens */
|
||||
.lien {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
background-color: rgba(224, 54, 54, 0.482);
|
||||
border-bottom: 2px solid rgba(224, 54, 54, 0.482);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.lien:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styles pour les informations secondaires */
|
||||
.secondary-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,20 +1,22 @@
|
|||
@media (hover: none) {
|
||||
@media (hover: none){
|
||||
/* For mobile phones: */
|
||||
.floating-action-btn{
|
||||
position: fixed;
|
||||
bottom: 30vh;
|
||||
margin-left:5%;
|
||||
padding: 10px;
|
||||
padding-top: 0px;
|
||||
width: fit-content;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
border-radius: 5px;
|
||||
border-width: 2px;
|
||||
font-weight:bolder;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
background-color: rgba(224, 54, 54, 0.482);
|
||||
border-bottom: 3px solid rgba(224, 54, 54, 0.482);
|
||||
|
||||
margin-top: 50vh;
|
||||
|
||||
}
|
||||
|
||||
.card{
|
||||
width: 85vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -36,6 +38,10 @@
|
|||
border-bottom: 3px solid rgba(224, 54, 54, 0.482);
|
||||
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 70vw;
|
||||
}
|
||||
}
|
||||
|
||||
.gros-titre{
|
||||
|
@ -52,6 +58,7 @@
|
|||
.centre-horizontal{
|
||||
margin: auto;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.centre-txt{
|
||||
|
@ -119,3 +126,69 @@
|
|||
.champ:focus{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: #f6f3f3;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.card embed{
|
||||
width: 100%;
|
||||
height: 50vw;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card iframe {
|
||||
width: 100%;
|
||||
height: 50vw; /* Ajuster la hauteur selon vos besoins */
|
||||
}
|
||||
|
||||
.card video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.card div {
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Styles pour les liens */
|
||||
.lien {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
background-color: rgba(224, 54, 54, 0.482);
|
||||
border-bottom: 2px solid rgba(224, 54, 54, 0.482);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 2vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.lien:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Styles pour les informations secondaires */
|
||||
.secondary-text {
|
||||
font-size: 14px;
|
||||
color: #777;
|
||||
}
|
15
index.php
15
index.php
|
@ -35,22 +35,27 @@
|
|||
<div class="barre-recherche centre-horizontal">
|
||||
<form id="recherche_form">
|
||||
<input class="champ" type="text" id="recherche_input" placeholder="Rechercher une fiche, annale ...">
|
||||
<input hidden type="submit">
|
||||
<input hidden class="champ" type="text" id="themes_input" placeholder="themes (appuyez sur la touche entrée entre chaque thèmes)">
|
||||
<input hidden class="champ" type="number" id="duree_input" placeholder="durée en minutes">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a href="televerser.php" class="color-red-tr floating-action-btn">
|
||||
|
||||
<pre> _
|
||||
_| |_
|
||||
|_ _| Téléverser des documents
|
||||
|_|
|
||||
<pre>
|
||||
============================================
|
||||
| _ |
|
||||
| _| |_ |
|
||||
| |_ _| Téléverser des documents |
|
||||
| |_| |
|
||||
============================================
|
||||
</pre></a>
|
||||
|
||||
|
||||
<div class="centre-horizontal etaler">
|
||||
<div id="liste_resultats" class="centre-txt">
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</body>
|
||||
<?php
|
||||
|
|
149
js/ens.js
149
js/ens.js
|
@ -1,14 +1,3 @@
|
|||
/*
|
||||
|
||||
pour les docs afficher un truc du même acabit que la php :
|
||||
if (strtolower($extension) === 'pdf'):
|
||||
echo "<embed src=\"{$doc['upload_path']}\" type=\"application/pdf\" width=\"100%\" height=\"600px\" />";
|
||||
elseif (in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif'])):
|
||||
echo "<img src=\"{$doc['upload_path']}\">";
|
||||
else:
|
||||
echo "<p>Oups ! Je ne sais pas afficher ce document :/ (Rales autant que tu veux je men fous) </p>".$doc['upload_path'];
|
||||
endif;
|
||||
*/
|
||||
|
||||
// fetch l'api et afficher tout ce qu'elle nous rend
|
||||
function querystring(key) {
|
||||
|
@ -20,7 +9,7 @@ function querystring(key) {
|
|||
}
|
||||
|
||||
|
||||
async function gen_contenu() {
|
||||
/*async function gen_contenu() {
|
||||
try {
|
||||
const response = await fetch('api.php/decomposer_ensemble?ensemble_id='+querystring("ensemble_id"));
|
||||
const data = await response.json();
|
||||
|
@ -172,9 +161,145 @@ async function gen_contenu() {
|
|||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}*/
|
||||
|
||||
async function gen_contenu() {
|
||||
try {
|
||||
const response = await fetch('api.php/decomposer_ensemble?ensemble_id=' + querystring("ensemble_id"));
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
|
||||
const image_extensions = [
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png',
|
||||
'gif',
|
||||
'bmp',
|
||||
'tiff',
|
||||
'tif',
|
||||
'webp',
|
||||
'svg',
|
||||
'ico',
|
||||
'raw'
|
||||
];
|
||||
|
||||
const dataContainer = document.getElementById('data-container');
|
||||
|
||||
if (data.status === "1" && data.msg.documents.length > 0) {
|
||||
data.msg.documents.forEach(doc => {
|
||||
// Création d'une carte (card)
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('card');
|
||||
|
||||
// Construction du contenu de la carte
|
||||
const idDiv = document.createElement('div');
|
||||
idDiv.textContent = `ID: ${doc.id}`;
|
||||
card.appendChild(idDiv);
|
||||
|
||||
const titreDiv = document.createElement('div');
|
||||
titreDiv.classList.add('title');
|
||||
titreDiv.textContent = `Titre: ${doc.titre}`;
|
||||
card.appendChild(titreDiv);
|
||||
|
||||
const typeDiv = document.createElement('div');
|
||||
typeDiv.textContent = `Type: ${doc.type}`;
|
||||
card.appendChild(typeDiv);
|
||||
|
||||
const uploadPathDiv = document.createElement('div');
|
||||
uploadPathDiv.textContent = `Upload Path: ${doc.upload_path}`;
|
||||
card.appendChild(uploadPathDiv);
|
||||
|
||||
// Ajout du contenu spécifique selon le type de fichier
|
||||
let ext = doc.upload_path.toString().split(".").pop();
|
||||
switch (true) {
|
||||
case image_extensions.includes(ext): // 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 ext == "pdf": // 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 ext == "mp4": // video
|
||||
const video = document.createElement('video');
|
||||
video.src = doc.upload_path;
|
||||
video.controls = true;
|
||||
card.appendChild(video);
|
||||
break;
|
||||
case ext == "html":
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = doc.upload_path;
|
||||
card.appendChild(iframe);
|
||||
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';
|
||||
card.appendChild(unsupportedLink);
|
||||
break;
|
||||
}
|
||||
|
||||
// Ajout du contenu restant de la carte
|
||||
const commentaireDiv = document.createElement('div');
|
||||
commentaireDiv.classList.add('title');
|
||||
commentaireDiv.textContent = `Commentaire Auteur: ${data.msg.commentaire_auteur || ''}`;
|
||||
card.appendChild(commentaireDiv);
|
||||
|
||||
// Exercices
|
||||
if (doc.exercices && doc.exercices.length > 0) {
|
||||
const exercicesTitle = document.createElement('div');
|
||||
exercicesTitle.classList.add('title');
|
||||
exercicesTitle.textContent = 'Exercices:';
|
||||
card.appendChild(exercicesTitle);
|
||||
|
||||
const exercicesList = document.createElement('ul');
|
||||
doc.exercices.forEach(exercice => {
|
||||
const exerciceItem = document.createElement('li');
|
||||
exerciceItem.classList.add('main-text');
|
||||
exerciceItem.textContent = `Exo n°${exercice.id} ${exercice.commentaire_auteur}, Durée: ${exercice.duree} min`;
|
||||
exercicesList.appendChild(exerciceItem);
|
||||
});
|
||||
card.appendChild(exercicesList);
|
||||
} else {
|
||||
const noExercicesDiv = document.createElement('div');
|
||||
noExercicesDiv.textContent = 'Pas de détails sur les exercices';
|
||||
card.appendChild(noExercicesDiv);
|
||||
}
|
||||
|
||||
// Ajout de la carte au conteneur principal
|
||||
dataContainer.appendChild(card);
|
||||
});
|
||||
} else {
|
||||
dataContainer.textContent = data.msg;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event)=>{
|
||||
|
||||
gen_contenu();
|
||||
|
|
169
js/index.js
169
js/index.js
|
@ -56,6 +56,8 @@ async function rechercher(){
|
|||
data.resultats.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;
|
||||
|
@ -63,23 +65,79 @@ async function rechercher(){
|
|||
titre_ensemble.innerText = doc.titre;
|
||||
titre_ensemble.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
|
||||
|
||||
document.getElementById("liste_resultats").appendChild(titre_ensemble);
|
||||
card.appendChild(titre_ensemble);
|
||||
|
||||
// fichiers spéciaux ?
|
||||
let ext = doc.upload_path.toString().split(".").pop();
|
||||
const image_extensions = [
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png',
|
||||
'gif',
|
||||
'bmp',
|
||||
'tiff',
|
||||
'tif',
|
||||
'webp',
|
||||
'svg',
|
||||
'ico',
|
||||
'raw'
|
||||
];
|
||||
|
||||
// images ou pdf ?
|
||||
let ele;
|
||||
if(doc.upload_path.toString().split(".").pop() == "pdf"){
|
||||
ele = document.createElement("embed");
|
||||
switch (true) {
|
||||
case image_extensions.includes(ext): // 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 ext == "pdf": // pdf
|
||||
const embed = document.createElement('embed');
|
||||
embed.src = doc.upload_path;
|
||||
card.appendChild(embed);
|
||||
|
||||
}else{
|
||||
ele = document.createElement("img");
|
||||
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 ext == "mp4": // video
|
||||
const video = document.createElement('video');
|
||||
video.src = doc.upload_path;
|
||||
video.controls = true;
|
||||
card.appendChild(video);
|
||||
break;
|
||||
case ext == "html":
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = doc.upload_path;
|
||||
card.appendChild(iframe);
|
||||
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';
|
||||
card.appendChild(unsupportedLink);
|
||||
break;
|
||||
}
|
||||
|
||||
ele.src = doc.upload_path;
|
||||
ele.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
|
||||
document.getElementById("liste_resultats").appendChild(ele);
|
||||
|
||||
const ele = document.createElement("a");
|
||||
ele.innerText = "Voir ce que c'est";
|
||||
ele.href = `ens.php?ensemble_id=${doc.ensemble_id}`;
|
||||
ele.classList.add("lien")
|
||||
card.appendChild(ele)
|
||||
|
||||
document.getElementById("liste_resultats").appendChild(card);
|
||||
|
||||
|
||||
|
||||
|
@ -111,34 +169,89 @@ async function gen_chronologie(){
|
|||
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()+"'");
|
||||
document.getElementById("liste_resultats").appendChild(titre_ensemble);
|
||||
|
||||
card.appendChild(titre_ensemble);
|
||||
|
||||
// fichiers spéciaux ?
|
||||
let apercu;
|
||||
let ext = doc.upload_path.toString().split(".").pop();
|
||||
switch(ext){
|
||||
case "pdf":
|
||||
ele = document.createElement("embed");
|
||||
const image_extensions = [
|
||||
'jpg',
|
||||
'jpeg',
|
||||
'png',
|
||||
'gif',
|
||||
'bmp',
|
||||
'tiff',
|
||||
'tif',
|
||||
'webp',
|
||||
'svg',
|
||||
'ico',
|
||||
'raw'
|
||||
];
|
||||
|
||||
switch (true) {
|
||||
case image_extensions.includes(ext): // 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 "html":
|
||||
ele = document.createElement("iframe");
|
||||
ele.setAttribute("sandbox","allow-forms allow-modals allow-scripts");
|
||||
case ext == "pdf": // 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 ext == "mp4": // video
|
||||
const video = document.createElement('video');
|
||||
video.src = doc.upload_path;
|
||||
video.controls = true;
|
||||
card.appendChild(video);
|
||||
break;
|
||||
case ext == "html":
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = doc.upload_path;
|
||||
card.appendChild(iframe);
|
||||
break;
|
||||
default:
|
||||
ele = document.createElement("img");
|
||||
const unsupportedLink = document.createElement('a');
|
||||
unsupportedLink.href = doc.upload_path;
|
||||
unsupportedLink.classList.add('lien');
|
||||
unsupportedLink.textContent = 'Type de fichier non supporté.';
|
||||
unsupportedLink.target = '_blank';
|
||||
card.appendChild(unsupportedLink);
|
||||
break;
|
||||
|
||||
|
||||
}
|
||||
|
||||
ele.src = doc.upload_path;
|
||||
ele.setAttribute("onclick","document.location.href='ens.php?ensemble_id="+doc.ensemble_id.toString()+"'");
|
||||
document.getElementById("liste_resultats").appendChild(ele);
|
||||
|
||||
const ele = document.createElement("a");
|
||||
ele.innerText = "Voir ce que c'est";
|
||||
ele.href = `ens.php?ensemble_id=${doc.ensemble_id}`;
|
||||
ele.classList.add("lien")
|
||||
card.appendChild(ele)
|
||||
|
||||
document.getElementById("liste_resultats").appendChild(card);
|
||||
|
||||
});
|
||||
|
||||
|
@ -158,6 +271,14 @@ document.addEventListener("DOMContentLoaded", (event)=>{
|
|||
rechercher();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("recherche_form").onsubmit = function(event){
|
||||
event.preventDefault();
|
||||
// faire tomber le clavier sur mobile
|
||||
document.activeElement.blur();
|
||||
rechercher();
|
||||
}
|
||||
|
||||
document.getElementById("themes_input").onkeydown =function(event) {
|
||||
if (event.key === "Enter"){
|
||||
var theme = document.createElement("div");
|
||||
|
|
Loading…
Reference in a new issue