2022-05-02 11:01:54 +02:00
import { FreeDatas2HTML , Pagination , SearchEngine , Selector } from "../../src/FreeDatas2HTML" ;
2022-02-03 17:45:23 +01:00
import { MixedFieldsRender } from "../../src/extensions/MixedFieldsRender" ;
const initialise = async ( ) = >
{
try
{
// Création d'un convertisseur parsant des données transmises en JSON :
const converter = new FreeDatas2HTML ( "CSV" ) ;
2022-02-14 15:18:41 +01:00
converter . parser . setRemoteSource ( { url : "https://pluxml.segal.bzh/data/medias/partenaires/partenaires.csv" } ) ;
2022-02-03 17:45:23 +01:00
// Parsage des données, qui ne sont pas encore affichées :
await converter . run ( ) ;
// Chaînes à utiliser par le moteur de rendu :
const renderSettings =
{
2022-05-02 11:01:54 +02:00
allBegining : "<ul>" ,
allEnding : "</ul>" ,
datasLinesDisplaying : ` <li><h3>##0##</h3><ul><li>##8##</li><li>Lieu(x) d'exercice : ##7##</li>##10####11####4####12##</ul></li> `
2022-02-03 17:45:23 +01:00
} ;
// Fonctions spécifiques pour créer les liens hypertextes :
const rendName2HTML = ( values : { [ index : string ] : string } ) : string = >
{
2022-02-14 15:18:41 +01:00
if ( values [ "Présentation" ] !== undefined && values [ "Présentation" ] . trim ( ) !== "" )
2022-05-02 11:01:54 +02:00
return ` <a href=" ${ values [ 'Présentation' ] . trim ( ) } " title="Présentation de ${ values [ "Nom commercial" ] . trim ( ) } "> ${ values [ "Nom commercial" ] . trim ( ) } </a> ` ;
2022-02-03 17:45:23 +01:00
else
2022-02-14 15:18:41 +01:00
return values [ "Nom commercial" ] . trim ( ) ;
2022-02-03 17:45:23 +01:00
} ;
const rendSite2HTML = ( values : { [ index : string ] : string } ) : string = >
{
2022-02-14 15:18:41 +01:00
if ( values [ "Site" ] . trim ( ) !== "" )
2022-05-02 11:01:54 +02:00
return ` <li><a href=" ${ values [ 'Site' ] . trim ( ) } " target="_blank" title="Visiter le site de ${ values [ 'Nom commercial' ] . trim ( ) } ">Page internet</a></li> ` ;
2022-02-03 17:45:23 +01:00
else
return "" ;
} ;
const rendEmail2HTML = ( values : { [ index : string ] : string } ) : string = >
{
2022-02-14 15:18:41 +01:00
if ( values [ "E-mail" ] . trim ( ) !== "" )
2022-05-02 11:01:54 +02:00
return ` <li><a href="mailto: ${ values [ 'E-mail' ] . trim ( ) } ?subject=Le segal" title="Contactez ${ values [ 'Nom commercial' ] . trim ( ) } ">Courriel</a></li> ` ;
2022-02-03 17:45:23 +01:00
else
return "" ;
} ;
2022-02-14 15:18:41 +01:00
const rendTel2HTML = ( values : { [ index : string ] : string } ) : string = >
{
if ( values [ "Fixe" ] . trim ( ) !== "" )
2022-05-02 11:01:54 +02:00
return ` <li><a href="tel: ${ values [ 'Fixe' ] . trim ( ) } " title="Appelez ${ values [ 'Nom commercial' ] . trim ( ) } "> ${ values [ 'Fixe' ] . trim ( ) } </a></li> ` ;
2022-02-14 15:18:41 +01:00
else
return "" ;
} ;
const rendMobile2HTML = ( values : { [ index : string ] : string } ) : string = >
{
if ( values [ "Portable" ] . trim ( ) !== "" )
2022-05-02 11:01:54 +02:00
return ` <li><a href="tel: ${ values [ 'Portable' ] . trim ( ) } " title="Appelez ${ values [ 'Portable' ] . trim ( ) } "> ${ values [ 'Portable' ] . trim ( ) } </a></li> ` ;
2022-02-14 15:18:41 +01:00
else
return "" ;
} ;
2022-02-03 17:45:23 +01:00
const myRender = new MixedFieldsRender ( renderSettings ) ;
2022-02-14 15:18:41 +01:00
myRender . fieldRenders = [ { name : "Nom commercial" , rend2HTML : rendName2HTML } , { name : "E-mail" , rend2HTML : rendEmail2HTML } , { name : "Site" , rend2HTML : rendSite2HTML } , { name : "Fixe" , rend2HTML : rendTel2HTML } , { name : "Portable" , rend2HTML : rendMobile2HTML } ] ;
2022-02-03 17:45:23 +01:00
converter . datasRender = myRender ;
2022-05-02 11:01:54 +02:00
// Création des filtres :
2022-02-14 15:18:41 +01:00
const filtre1 = new Selector ( converter , 8 , { id : "filtreActivites" } ) ;
2022-05-02 11:01:54 +02:00
//let filtre2=new Selector(converter, 7, { id:"filtreLieux"}, "," );
2022-02-03 17:45:23 +01:00
filtre1 . filter2HTML ( "Domaine d'activité" ) ;
2022-05-02 11:01:54 +02:00
//filtre2.filter2HTML("Lieux");
2022-02-14 15:18:41 +01:00
2022-05-02 11:01:54 +02:00
// Dont un moteur de recherche :
const mySearch = new SearchEngine ( converter , { id : "search" } ) ;
mySearch . label = "" ;
mySearch . btnTxt = "Chercher" ;
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
mySearch . automaticSearch = true ;
mySearch . nbCharsForSearch = 2 ;
mySearch . placeholder = "Exemples de recherche : creperie port-louis, pain bio..." ;
mySearch . filter2HTML ( ) ;
2022-02-14 15:18:41 +01:00
2022-05-02 11:01:54 +02:00
converter . datasFilters = [ filtre1 , mySearch ] ;
// Id de l'élément HTML devant afficher la liste de partenaires :
2022-02-03 17:45:23 +01:00
converter . datasViewElt = { id : "partenaires" } ;
2022-05-02 11:01:54 +02:00
// Pas d'affichage initial, car il est généré en PHP côté backend.
2022-02-03 17:45:23 +01:00
}
catch ( e )
{
console . error ( e ) ;
document . getElementById ( "datas" ) ! . innerHTML = ` <div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div> ` ;
}
}
2022-05-02 11:01:54 +02:00
console . log ( "**** Hello les devs :-)\nLe code source de ce script est libre et vous pouvez le trouver à cette adresse :\n https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/integrations/src/segal.ts" ) ;
2022-02-03 17:45:23 +01:00
initialise ( ) ;