2021-11-04 15:50:40 +01:00
import { FreeDatas2HTML , Pagination , Render , SearchEngine , Selector , SortingField } from "../FreeDatas2HTML" ;
2021-11-09 16:45:40 +01:00
const initialise = async ( ) = >
2021-11-04 15:50:40 +01:00
{
try
{
2021-11-09 16:45:40 +01:00
// Fonction spécifique de classement, utile pour les données du 4ième champ :
const mySort = ( a : any , b : any , order : "asc" | "desc" = "asc" ) = >
2021-11-04 15:50:40 +01:00
{
2021-11-09 16:45:40 +01:00
const values = [ "> 100000" , "> 1 et < 100 000" , "≤ 1" , "Traces" , "Inexistant" ] ;
2021-11-04 15:50:40 +01:00
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"
2021-11-09 16:45:40 +01:00
const converter = new FreeDatas2HTML ( "CSV" ) ;
2022-02-21 17:16:23 +01:00
converter . parser . setRemoteSource ( { url : "https://freedatas2html.le-fab-lab.com/datas/elements-chimiques.csv" } ) ;
2021-11-09 16:45:40 +01:00
// Parsage des données, qui ne sont pas encore affichées :
await converter . run ( ) ;
2021-11-04 15:50:40 +01:00
2021-11-09 16:45:40 +01:00
// Adaptation du rendu suivant la taille de l'écran :
2021-11-04 15:50:40 +01:00
const myRender = new Render ( ) ;
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
{
2021-11-09 16:45:40 +01:00
// Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css :
2021-11-04 15:50:40 +01:00
myRender . settings . allBegining = "<table class='table-hover'>" ;
converter . datasRender = myRender ;
}
2021-11-09 16:45:40 +01:00
// Ajout de la fonction de classement spécifique déclarée plus haut :
2021-11-04 15:50:40 +01:00
converter . datasSortingFunctions = [ { datasFieldNb :4 , sort :mySort } ] ;
2021-11-09 16:45:40 +01:00
// Configuration de la pagination :
2021-11-04 15:50:40 +01:00
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 ( ) ;
2022-01-13 17:26:15 +01:00
2021-11-09 16:45:40 +01:00
// Création d'outils permettant de filtrer les données sur 3 champs différents :
2021-11-04 15:50:40 +01:00
let filtre1 = new Selector ( converter , 3 , { id : "filtre1" } ) ;
filtre1 . filter2HTML ( ) ;
let filtre2 = new Selector ( converter , 4 , { id : "filtre2" } ) ;
filtre2 . filter2HTML ( ) ;
2021-11-09 16:45:40 +01:00
// Le troisième devant prendre en compte un séparateur :
2021-11-04 15:50:40 +01:00
let filtre3 = new Selector ( converter , 5 , { id : "filtre3" } , "," ) ;
2022-01-13 17:26:15 +01:00
filtre3 . isMultiple = true ;
2021-11-04 15:50:40 +01:00
filtre3 . filter2HTML ( ) ;
2021-11-09 16:45:40 +01:00
// + Un moteur de recherche opérant sur tous les champs :
const mySearch = new SearchEngine ( converter , { id : "search" } ) ;
2021-11-04 15:50:40 +01:00
mySearch . label = "Qui cherche trouve ?" ;
mySearch . btnTxt = "Va chercher !" ;
2021-11-09 16:45:40 +01:00
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
2021-11-04 15:50:40 +01:00
mySearch . automaticSearch = true ;
mySearch . nbCharsForSearch = 2 ;
mySearch . placeholder = "Tapes en NB, chef !" ;
mySearch . filter2HTML ( ) ;
2021-11-09 16:45:40 +01:00
// Injection des filtres dans le convertisseur :
2022-02-21 17:04:19 +01:00
converter . datasFilters = [ filtre1 , filtre2 , filtre3 , mySearch ] ;
2021-11-04 15:50:40 +01:00
2021-11-09 16:45:40 +01:00
// Désignation des champs permettant de classer les données :
// Uniquement avec un rendu sous forme de tableau (grand écran), car des en-têtes de colonne sont nécessaires.
2021-11-04 15:50:40 +01:00
if ( window . innerWidth >= 800 )
{
let sortingField1 = new SortingField ( converter , 0 ) ;
let sortingField2 = new SortingField ( converter , 1 ) ;
let sortingField3 = new SortingField ( converter , 2 ) ;
let sortingField4 = new SortingField ( converter , 4 ) ;
converter . datasSortingFields = [ sortingField1 , sortingField2 , sortingField3 , sortingField4 ] ;
}
2021-11-09 16:45:40 +01:00
// Affichage initial avec l'id de l'élément HTML devant afficher le compteur :
2021-11-04 15:50:40 +01:00
converter . datasViewElt = { id : "datas" } ;
converter . datasCounterElt = { id : "compteur" } ;
converter . refreshView ( ) ;
}
catch ( e )
{
console . error ( e ) ;
2021-11-09 16:45:40 +01:00
document . getElementById ( "datas" ) ! . innerHTML = ` <div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div> ` ;
2021-11-04 15:50:40 +01:00
}
}
2021-11-09 16:45:40 +01:00
2022-03-09 13:06:14 +01:00
console . log ( "Hello, les dev !\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/exampleWithCSV.ts" ) ;
2021-11-04 15:50:40 +01:00
initialise ( ) ;