126 lines
5.7 KiB
TypeScript
126 lines
5.7 KiB
TypeScript
|
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
|
||
|
|
||
|
const initialise = () =>
|
||
|
{
|
||
|
try
|
||
|
{
|
||
|
const dataDisplayElt=document.getElementById("datas");
|
||
|
const dataDisplayOptionsElt=document.getElementById("displayOptions");
|
||
|
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;");
|
||
|
|
||
|
const reInitialise= () =>
|
||
|
{
|
||
|
dataDisplayElt.innerHTML="";
|
||
|
dataDisplayOptionsElt.innerHTML="";
|
||
|
pagesElt.innerHTML="";
|
||
|
paginationElt.innerHTML="";
|
||
|
searchElt.innerHTML="";
|
||
|
}
|
||
|
|
||
|
let converter : FreeDatas2HTML;
|
||
|
const myRender=new Render();
|
||
|
// Attention, l'élément affichant 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)
|
||
|
{
|
||
|
reInitialise();
|
||
|
converter=new FreeDatas2HTML("CSV");
|
||
|
converter.datasRender=myRender;
|
||
|
|
||
|
const selectedFiles=myFile.files;
|
||
|
if(selectedFiles !== null && selectedFiles.length === 1)
|
||
|
{
|
||
|
if(selectedFiles[0].type !== "text/csv")
|
||
|
dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`;
|
||
|
else
|
||
|
{
|
||
|
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]);
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
myForm.addEventListener("submit", function(e)
|
||
|
{
|
||
|
e.preventDefault();
|
||
|
dataDisplayElt.innerHTML="";
|
||
|
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'>Vous n'avez sélectionné aucun champ à afficher !</p>`;
|
||
|
else
|
||
|
{
|
||
|
converter.fields2Rend=fields2Rend;
|
||
|
converter.datasViewElt={ id:"datas" };
|
||
|
|
||
|
// + Un moteur de recherche :
|
||
|
const mySearch=new SearchEngine(converter, { id:"search" });
|
||
|
mySearch.label="Qui cherche trouve ?";
|
||
|
mySearch.btnTxt="Va chercher !";
|
||
|
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,500] , name: "Choix de pagination :" };
|
||
|
pagination.selectedValue=10;
|
||
|
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();
|
||
|
}
|
||
|
|
||
|
});
|
||
|
|
||
|
}
|
||
|
catch(e)
|
||
|
{
|
||
|
console.error(e);
|
||
|
document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`;
|
||
|
}
|
||
|
}
|
||
|
initialise();
|