Affichage de données pouvant provenir de différentes sources (fichier, API...) avec différents formats (CSV, JSON, HTML...) et possibilité de trier, filtrer ou encore paginer les données. https://freedatas2html.le-fab-lab.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

142 lines
7.2 KiB

import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
const initialise = () =>
{
try
{
// Éléments du DOM utilisés :
const dataDisplayElt=document.getElementById("datas") as HTMLElement;
const dataDisplayOptionsElt=document.getElementById("displayOptions") as HTMLElement;
const myFile=document.getElementById("myFile") as HTMLInputElement;
const myForm=document.getElementById("userSettings") as HTMLElement;
const pagesElt=document.getElementById("pages") as HTMLElement;
const paginationElt=document.getElementById("paginationOptions") as HTMLElement;
const searchElt=document.getElementById("search") as HTMLElement;
if(dataDisplayElt === null || dataDisplayOptionsElt === null || myFile === null || myForm === null|| pagesElt === null|| paginationElt === null|| searchElt === null)
throw new Error("Tous les éléments HTML nécessaires au fonctionnement n'ont pas été trouvés dans la page;");
let converter: FreeDatas2HTML;
const myRender=new Render();
// Attention, ici l'élément devant afficher le compteur n'est pas initialement présent dans la page :
myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span id='counter'></span></caption>";
myFile.addEventListener("change", function(e)
{
// Place nette pour le nouveau fichier :
dataDisplayElt.innerHTML="";
dataDisplayOptionsElt.innerHTML="";
pagesElt.innerHTML="";
paginationElt.innerHTML="";
searchElt.innerHTML="";
// Création d'un convertisseur parsant les données du fichier CSV sélectionné :
converter=new FreeDatas2HTML("CSV");
converter.datasRender=myRender;
// L'utilisateur a-t-il vraiment sélectionné un fichier ?
// Si oui, est-ce un fichier CSV ?
const selectedFiles=myFile.files;
if(selectedFiles !== null && selectedFiles.length === 1)
{
// selectedFiles[0].type ne fonctionne pas avec certains navigateurs (Fennec), donc... :
const extension=selectedFiles[0].name.substring(selectedFiles[0].name.lastIndexOf(".")+1);
if(extension !== "csv")
dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le fichier que vous avez sélectionné ne semble pas être un fichier CSV.</p>`;
else
{
// Lecture du contenu du fichier qui est passé au parseur :
const reader=new FileReader();
reader.onload=async function(e)
{
converter.parser.datas2Parse=reader.result as string;
await converter.run();
let fieldsSelectorHTML=`<fieldset class="form-group"><legend>Quels champs souhaitez-vous afficher ?</legend>`;
for(let i=0; i < converter.fields.length; i++)
fieldsSelectorHTML+=`<label for="selectedField_${i}" class="paper-check"> <input type="checkbox" class="selectedFields" id="selectedField_${i}" name="selectedField_${i}" value=${i} checked> <span>${converter.fields[i]}</span></label>`;
fieldsSelectorHTML+=`</fieldset>`;
dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
};
reader.readAsText(selectedFiles[0]);
}
}
});
// Une fois le choix des champs à afficher validé, on peut afficher les données et certains outils :
myForm.addEventListener("submit", function(e)
{
e.preventDefault();
dataDisplayElt.innerHTML="";
// Quels champs ont été sélectionnés ?
let fields2Rend: number[]=[];
let checkBox: HTMLInputElement;
for(let i=0; i < converter.fields.length; i++)
{
checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement;
if(checkBox !== null)
{
if(checkBox.checked)
fields2Rend.push(i);
}
}
if( fields2Rend.length === 0)
dataDisplayElt.innerHTML=`<p class='text-danger'>Merci de sélectionner les champs que vous souhaitez afficher !</p>`;
else
{
converter.fields2Rend=fields2Rend;
converter.datasViewElt={ id:"datas" };
// + Un moteur de recherche opérant sur tous les champs :
const mySearch=new SearchEngine(converter, { id:"search" });
mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !";
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2;
mySearch.placeholder="Saisir un moins 2 caractères";
mySearch.filter2HTML();
converter.datasFilters=[mySearch];
// + Pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,100,500] , name: "Choix de pagination :" };
pagination.selectedValue=20;
converter.pagination=pagination;
pagination.options2HTML();
// + Compteur :
converter.datasCounterElt={ id:"counter" };
// +Toutes les colonnes affichées sont classables :
let sortingField: SortingField;
converter.datasSortingFields=[];
for(let i=0; i < converter.fields2Rend.length; i++)
{
sortingField=new SortingField(converter, converter.fields2Rend[i]);
converter.datasSortingFields.push(sortingField);
}
// Actualisation de l'affichage :
converter.refreshView();
// Déplacement vers les données
const here=window.location;
if(window.location.hash!=="")
{
window.location.hash="";// ! le "#" reste
window.location.assign(here+"paginationOptions");
}
else
window.location.assign(here+"#paginationOptions");
}
});
}
catch(e)
{
console.error(e);
document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche le fonctionnement normal de cette page.</div>`;
}
}
console.log("Hello, ami développeur :-)\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithUserFile.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
initialise();