FreeDatas2HTML/src/exampleWithCSV.ts

95 lines
3.8 KiB
TypeScript

import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./freeDatas2HTML";
const initialise = async () =>
{
try
{
// Fonction spécifique de classement utile pour les données du 4ième champs
const mySort = (a: any, b: any, order: "asc"|"desc" = "asc") =>
{
const values = [ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"];
if(order === "desc")
values.reverse();
if(values.indexOf(a) > values.indexOf(b))
return -1;
else if(values.indexOf(a) < values.indexOf(b))
return 1;
else
return 0;
};
// Création d'un convertisseur parsant les données d'un fichier CSV "distant"
let converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
converter.datasViewElt={ id:"datas" };
await converter.run();
// Adaptation du rendu suivant la taille de l'écran
const myRender=new Render(converter);
if(window.innerWidth < 800)
{
myRender.settings=
{
allBegining:"<h4>Affichage petits écrans !</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
}
else
{
myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender;
}
// Ajout d'une fonction de classement spécifique
converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }];
// Configuration de la 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.rend2HTML();
// Affichage initial
converter.datasCounter={ id:"compteur" };
await converter.run();
// Création d'outils permettant de filtrer les données des champs de données
let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.selector2HTML();
let filtre2=new Selector(converter, 4, { id:"filtre2"} );
filtre2.selector2HTML();
let filtre3=new Selector(converter, 5, { id:"filtre3"} );
filtre3.separator=",";
filtre3.selector2HTML();
// + Injection des filtres dans le convertisseur
converter.datasSelectors=[filtre1,filtre2,filtre3];
// Ajout de champs permettant de classer les données
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
if(window.innerWidth >= 800)
{
let sortingField1=new SortingField(converter, 0);
sortingField1.field2HTML();
let sortingField2=new SortingField(converter, 1);
sortingField2.field2HTML();
let sortingField3=new SortingField(converter, 2);
sortingField3.field2HTML();
let sortingField4=new SortingField(converter, 4);
sortingField4.field2HTML();
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];
}
}
catch(e)
{
console.error(e);
if(document.getElementById("datas")!==null)
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
}
}
initialise();