c'est plus joli comme ça :D

This commit is contained in:
thaaoblues 2024-04-09 16:22:47 +02:00
parent ea77a8f585
commit b6d4e9dc83
5 changed files with 465 additions and 52 deletions

View file

@ -64,4 +64,93 @@ tr:hover {
.centre-horizontal{
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;
}

View file

@ -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{
@ -118,4 +125,70 @@
.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;
}

View file

@ -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 id="liste_resultats" class="centre-txt">
</div>
<div class="centre-horizontal etaler">
<div id="liste_resultats" class="centre-txt">
</div>
<div>
</body>
<?php

149
js/ens.js
View file

@ -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();

View file

@ -56,30 +56,88 @@ 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;
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 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");