Ajout page d'exemple pour l'extension SortingFieldsStandAlone

This commit is contained in:
Fabrice PENHOËT 2021-12-09 11:49:44 +01:00
parent ad7575bf8b
commit efa0c77213
4 changed files with 106 additions and 0 deletions

View File

@ -31,6 +31,7 @@
<li><a href="/withCSV.html">Parser et afficher un fichier CSV prédéfini</a>, avec ajout de filtres multi-critères, moteur de recherche, pagination, compteur de résultats.. Il s'agit de l'exemple le plus complet.</li>
<li><a href="/withJSON.html">Parser et afficher des données JSON</a>, avec ajout d'un filtre, d'un moteur de recherche, pagination et compteur de résultats.</li>
<li><a href="/withHTML.html">Parser et réafficher les données situées dans le code HTML</a> de la page, avec filtre, pagination et adaptation à la taille de l'écran.</li>
<li><a href="/withUL.html">Utilisation d'une extension créant des liens de classement</a>, dans le cas où les données ne sont pas listées dans un tableau.</li>
</ul>
<p>Un lien vers le code source TypeScript est fourni pour chaque exemple, de manière à ce que vous puissiez lire le code, tout en observant le résultat.</p>
</article>

53
public/withUL.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple dutilisation de FreeDatas2HTML pour classer des données, non listées sous forme de tableau.">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithUL.app.js" defer></script>
<script src="JS/matomo.js" defer></script>
<title>Classer des données non listées sous forme de tableau HTML - FreeDatas2HTML</title>
</head>
<body class="paper container">
<header id="header" class="text-center">
<h1><a href="/">FreeDatas2HTML</a></h1>
<nav id="menu-principal">
<ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li>
<li><a href="./examples.html#content" class="badge success sm-12 col">Exemples</a></li>
<li><a href="https://forge.chapril.org/Fab_Blab/FreeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="badge success sm-12 col">Git</a></li>
</ul>
</nav>
</header>
<h2>Classer des données non listées sous forme de tableau</h2>
<article id="content">
<p>Dans lexemple ci-dessous FreeDatas2HTML liste les données autrement que sous forme de tableau.<br>Dans ce cas, labsence dentêtes de colonne ne permet pas dutiliser le module rendant cliquables ces entêtes pour lancer le classement les données.</p>
<p>Aussi, <a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/extensions/exampleWithUL.ts" title="Script de lextension" target="_blank">une extension</a> est utilisée. Elle gère de manière autonome la création et le fonctionnement des liens de classements. Vous pouvez écrire votre propre extension, par exemple si vous préférez proposer une liste SELECT pour choisir le champ de classement. Limportant est que la demande de classement par lutilisateur appelle la fonction dactualisation de FreeDatas2HTML, en lui ayant transmis préalablement le champ sur lequel classer les données et lordre dans lequel les classer.</p>
</article>
<div id="classement">
</div>
<div id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier CSV.</p>
</div>
<aside>
<p>Les données listées viennent d<a href="./datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank" rel="noopener" title="Wikipédia">sur Wikipédia</a>.</p>
</aside>
<aside>
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithUL.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
</aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Contact et mentions légales</a>.</p></footer>
</body>
</html>

51
src/demo/exampleWithUL.ts Normal file
View File

@ -0,0 +1,51 @@
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
import { SortingFieldsStandAlone } from "../extensions/SortingFieldsStandAlone";
const initialise=async () =>
{
try
{
// Création d'un convertisseur parsant les données d'un fichier CSV "distant"
const converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
// Parsage des données, qui ne sont pas encore affichées :
await converter.run();
// On affiche que certains champs :
converter.fields2Rend=[0,1,2,3];
// Les données sont listées en dehors d'un tableau :
const myRender=new Render();
myRender.settings=
{
allBegining:"<h4>Liste des éléments chimiques :</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
// Désignation des champs permettant de classer les données en dehors de l'affichage des données
let sortingField1=new SortingField(converter, 0);
let sortingField2=new SortingField(converter, 1);
let sortingField3=new SortingField(converter, 2);
const allFields=new SortingFieldsStandAlone(converter,{ id:"classement" });
allFields.datasSortingFields=[sortingField1,sortingField2, sortingField3];
allFields.rendSettings.allBeginning="<h4>#LABEL</h4><ul>";
allFields.rend2HTML("Champ sur lequel classer les données :") ;
// Affichage initial :
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, ami développeur :-)\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/exampleWithJSON.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
initialise();

View File

@ -8,6 +8,7 @@ module.exports =
exampleWithCSV: "./src/demo/exampleWithCSV.ts",
exampleWithHTML: "./src/demo/exampleWithHTML.ts",
exampleWithJSON: "./src/demo/exampleWithJSON.ts",
exampleWithUL: "./src/demo/exampleWithUL.ts",
exampleWithUserFile: "./src/demo/exampleWithUserFile.ts"
},
output: