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.
FreeDatas2HTML/src/demo/exampleWithMixedFields.ts

57 lines
2.7 KiB

import { FreeDatas2HTML, Selector } from "../FreeDatas2HTML";
import { MixedFieldsRender } from "../extensions/MixedFieldsRender";
const initialise=async () =>
{
try
{
// Création d'un convertisseur parsant des données transmises en JSON :
const converter=new FreeDatas2HTML("JSON");
converter.parser.setRemoteSource({ url: "https://freedatas2html.le-fab-lab.com/datas/links.json"});
// Parsage des données, qui ne sont pas encore affichées :
await converter.run();
// Chaînes à utiliser par le moteur de rendu :
const renderSettings=
{
allBegining: `<ul>`,
allEnding: `</ul>`,
datasLinesDisplaying: `<li><ul><li>##1##</li><li>Mots-clés : ##2##.</li>##0##</ul></li>`
};
// Fonctions spécifiques pour créer les liens hypertextes :
const rendAnchor2HTML=(values: {[index: string]:string} ) : string =>
{
if(values["url"] !== undefined && values["url"] !== "") // je considère que anchor est toujours renseigné, mais on pourrait tester.
return `<a href="${values['url']}" target="_blank">${values["anchor"]}</a>`;
else
return `<b>${values["anchor"]}</b>`;
};
const rendUrl2HTML=(values: {[index: string]:string} ) : string =>
{
if(values["url"] !== "") // si values["url"] = undefined, la fonction rendUrl2HTML() n'est pas appelée.
return `<li><a href="${values['url']}" target="_blank" title="Visiter ${values['anchor']}">${values["url"]}</a></li>`;
else
return "";
};
const myRender=new MixedFieldsRender(renderSettings);
myRender.fieldRenders=[{ name:"anchor", rend2HTML: rendAnchor2HTML}, { name:"url", rend2HTML: rendUrl2HTML}];
converter.datasRender=myRender;
// Création d'un filtre sur le troisième champ :
let filtre1=new Selector(converter, 2, { id:"filtre1"}, "," );
filtre1.filter2HTML("Mots-clés");
converter.datasFilters=[filtre1];
// Affichage initial avec l'id de l'élément HTML devant afficher le compteur :
converter.datasViewElt={ id:"datas" };
converter.refreshView();
}
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>`;
}
}
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/exampleWithMixedFields.ts");
initialise();