Fab_Blab/FreeDatas2HTML
1
1
Fork 0
Code Issues Pull Requests Projects Releases Activity

Finalisation de la première version du site de démonstration.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-11-09 16:45:40 +01:00
parent 11e27dbbd2
commit 6998eb67aa
13 changed files with 256 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "freedatas2html", "name": "freedatas2html",
"version": "0.9.9", "version": "1.0.0",
"description": "Conversion and display of data in different formats (CSV, JSON, HTML) with the possibility of filtering, classifying and paginating the results.", "description": "Conversion and display of data in different formats (CSV, JSON, HTML) with the possibility of filtering, classifying and paginating the results.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {

1
public/CSS/fd2html.css
View File

@ -12,3 +12,4 @@ h1 a:visited { color:black }
h2 { font-size:2rem; } h2 { font-size:2rem; }
h3 { font-size:1.5rem; } h3 { font-size:1.5rem; }
header li a:visited { color:white; } header li a:visited { color:white; }
table caption { font-weight: bolder}

17
public/examples.html
View File

@ -7,8 +7,8 @@
<meta name="robots" content="index,follow"> <meta name="robots" content="index,follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. --> <script src="JS/matomo.js" defer></script>
<title>Exemples d'utilisation du module FreeDatas2HTML</title> <title>Exemples d'utilisation de FreeDatas2HTML</title>
</head> </head>
<body class="paper container"> <body class="paper container">
@ -25,15 +25,16 @@
</header> </header>
<article id="content"> <article id="content">
<h2>Exemples d’utilisation de Freedatas2html</h2> <h2>Exemples d’utilisation de FreeDatas2HTML</h2>
<ul> <ul>
<li><a href="/userFile.html">Parsage et affichage votre propre fichier CSV</a> en sélectionnant les champs à afficher dans la page.</li> <li><a href="/userFile.html">Afficher les données de votre propre fichier CSV</a> en sélectionnant les champs à afficher dans la page.</li>
<li><a href="/withCSV.html">Parsage et affichage d’un fichier CSV</a> prédéfini, avec filtres multi-critères, pagination et compteur de résultats.</li> <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">Parsage et affichage de données JSON</a> prédéfinies, avec filtre, pagination et compteur de résultats.</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">Parsage et réaffichage de données situées dans le code HTML</a> de la page, avec filtre, 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>
</ul> </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> </article>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <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> </body>
</html> </html>

7
public/index.html
View File

@ -7,7 +7,7 @@
<meta name="robots" content="index,follow"> <meta name="robots" content="index,follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) --> <script src="JS/matomo.js" defer></script>
<title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title> <title>FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript</title>
</head> </head>
@ -69,8 +69,7 @@
<h3>Pagination</h3> <h3>Pagination</h3>
<p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.</p> <p>Une valeur de pagination peut être définie et/ou plusieurs <strong>options de pagination</strong> proposées aux utilisateurs finaux.<br>Les pages proposées à la navigation s’adaptent évidemment au nombre de résultats.</p>
<p>Les pages proposées à la navigation s’adaptent évidemment au nombre de résultats.</p>
<h3>Adaptable à vos besoins</h3> <h3>Adaptable à vos besoins</h3>
@ -91,6 +90,6 @@
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p> <p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML" target="_blank" title="accéder au dépôt GIT" rel="noopener" class="paper-btn btn-secondary">Accéder au dépôt GIT du projet.</a></p>
</article> </article>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <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> </body>
</html> </html>

24
public/mentions-legales.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex, follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. --> <script src="JS/matomo.js" defer></script>
<title>Mentions légales</title> <title>Mentions légales</title>
</head> </head>
@ -24,24 +24,16 @@
</header> </header>
<article> <article>
<h2>Mentions légales du site Freedatas2html</h2> <h2>Contact</h2>
<p> <p>Si vous souhaitez me signaler une erreur, merci de le faire sur cette adresse : <a href="mailto:fabrice@le-fab-lab.com?subject=FreeDatas2HTML">fabrice@le-fab-lab.com</a>.<br>Idem si vous avez besoin d’aide pour une utilisation de FreeDatas2HTML. Dans ce deuxième cas, je vous communiquerai un tarif d’intervention en retour.</p>
<strong>Propriétaire du site :</strong><br />
<address>
Fabrice PENHOËT<br />
4 RUE DU CAPITAINE LOUIS ROSSEL<br />
56100 LORIENT<br />
<a href="mailto:fabrice@le-fab-lab.com?subject=FreeDatas2HTML">fabrice@le-fab-lab.com</a>
</address>
</p>
<h2>Mentions légales du site FreeDatas2HTML</h2>
<p> <p>
<strong>Éditeur du site :</strong><br /> <strong>Propriétaire et éditeur du site :</strong><br />
<address> <address>
Fabrice PENHOËT<br /> <a href="https://cv.le-fab-lab.com/" title="Mon web CV">Fabrice PENHOËT</a><br />
4 RUE DU CAPITAINE LOUIS ROSSEL<br /> 4 RUE DU CAPITAINE LOUIS ROSSEL<br />
56100 LORIENT<br /> 56100 LORIENT<br />
<a href="mailto:fabrice@le-fab-lab.com?subject=FreeDatas2HTML">fabrice@le-fab-lab.com</a>
</address> </address>
</p> </p>
@ -59,7 +51,7 @@
></iframe> ></iframe>
</article> </article>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <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> </body>
</html> </html>

28
public/userFile.html
View File

@ -3,13 +3,13 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple d'utilisation du script freeDatas2HTML pour afficher les informations d'un fichier CSV dans une page web avec filtres, pagination, moteur de recherche."> <meta name="description" content="Exemple d’utilisation du script FreeDatas2HTML pour afficher les informations d’un fichier CSV dans une page web avec pagination et moteur de recherche.">
<meta name="robots" content="noindex"> <meta name="robots" content="noindex">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithUserFile.app.js" defer></script> <script src="JS/exampleWithUserFile.app.js" defer></script>
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) --> <script src="JS/matomo.js" defer></script>
<title>Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML</title> <title>Afficher les données d’un fichier CSV dans une page web</title>
</head> </head>
<body class="paper container"> <body class="paper container">
@ -19,14 +19,14 @@
<ul class="inline row flex-center"> <ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li> <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="./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> <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> </ul>
</nav> </nav>
</header> </header>
<h2>Afficher votre fichier CSV dans la page web</h2> <h2>Affichez les données de votre fichier CSV</h2>
<p>Cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix. Vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou - lisible... Sachez que FreeDatas2HTML permet d'afficher les données autrement que sous forme de tableau quan cela est plus pratique.</p> <p>Cette page vous permet de tester directement FreeDatas2HTML en affichant les données d’un fichier CSV de votre choix. Une fois votre fichier sélectionné, vous pourrez choisir les champs/colonnes à afficher. Suivant la taille de votre écran ou encore le nombre champs, le résultat peut être + ou − lisible… Sachez que FreeDatas2HTML permet d’afficher les données autrement que sous forme de tableau.</p>
<form id="userSettings"> <form id="userSettings">
<fieldset class="form-group"> <fieldset class="form-group">
@ -38,15 +38,21 @@
<div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div> <div id="paginationOptions" class="sm-12 md-6 lg-3 col"></div>
<div id="search" class="sm-12 md-6 lg-9 col"></div> <div id="search" class="sm-12 md-6 lg-9 col"></div>
</div> </div>
<div id="datas"></div>
<article id="datas"></article>
<p id="pages"></p> <p id="pages"></p>
<article id="content">
<h3>Fichier CSV ?</h3>
<p>Le format CSV reste couramment utilisé par des nombreux logiciels pour exporter/importer les données. Vous pouvez aussi en créer un en saisissant des données dans un tableur et choisissant le format CSV lors de l’enregistrement. <a href="https://help.libreoffice.org/latest/fr/text/scalc/guide/csv_files.html" title="Tutoriel site officiel LibreOffice" target="_blank" rel="noopener">Lire ici comment enregistrer en CSV avec LibreOffice</a>. À noter que votre fichier doit être <b>encodé en UTF8</b>, sous peine de rencontrer certains problèmes d’affichage, notamment si vos données contiennent des caractères accentués. Le problème peut se rencontrer en exportant des données à partir de logiciels assez anciens.</p>
<p>Pas de fichier CSV sous la main ? Alors vous pouvez <a href="/datas/grandes-villes-fr.csv">cliquer ici</a> pour télécharger la liste des villes françaises de + de 30 000 habitants, que j’ai moi-même <a href="https://fr.wikipedia.org/wiki/Liste_des_communes_de_France_les_plus_peupl%C3%A9es#Communes_de_plus_de_30_000_habitants" target="_blank" rel="noopener" title="Page Wikipédia">recopiée de Wikipédia</a>. Une fois le fichier enregistré sur votre ordinateur, sélectionnez-le via <a href="#userSettings">le formulaire ci-dessus</a>.</p>
<h3>À lire avant de partager cette page :-)</h3>
<p>FreeDatas2HTML <b>s’exécute uniquement côté client, c’est-à-dire dans votre navigateur</b>. Les données de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d’autres personnes, elles devront elles-mêmes sélectionner le même fichier pour visualiser la même chose que vous. <b>Il est évidemment possible d’indiquer un fichier CSV à afficher par défaut dans une page !</b> C’est même ce qui est fait <a href="/withCSV.html">dans cet autre exemple</a>.</p>
</article>
<aside> <aside>
<p>Pour rappel, freeDatas2HTML s'exécute uniquement côté client, c'est-à-dire dans votre navigateur. Les donnée de votre fichier ne sont donc pas envoyées sur un serveur. En conséquence, si vous partager cette page avec d'autres personnes, elles devront elles-mêmes sélectionner le fichier pour visualiser les données. Il est évidemment possible d'indiquer un fichier à afficher par défaut. C'est ce qui est fait dans les autres exemples présentés sur ce site.</p> <p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithUserFile.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
</aside> </aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <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> </body>
</html> </html>

36
public/withCSV.html
View File

@ -8,8 +8,8 @@
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithCSV.app.js" defer></script> <script src="JS/exampleWithCSV.app.js" defer></script>
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) --> <script src="JS/matomo.js" defer></script>
<title>Parser et afficher des données CSV via FreeDatas2HTML</title> <title>Parser, afficher, paginer, filtrer... des données CSV en TypeScript/JavaScript</title>
</head> </head>
<body class="paper container"> <body class="paper container">
@ -19,7 +19,7 @@
<ul class="inline row flex-center"> <ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li> <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="./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> <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> </ul>
</nav> </nav>
</header> </header>
@ -35,20 +35,32 @@
</div> </div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3> <h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas"> <div id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article> </div>
<p id="pages"></p> <p id="pages"></p>
<article>
<p>Cet exemple d’utilisation de FreeDatas2HTML est assez complet en montrant comment à partir d’un fichier de données, il est possible de proposer :</p>
<ul>
<li>Des <b>listes permettant de filtrer les données</b>. La troisième liste (Mots-clés) démontrant qu’il est possible d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>. Ici, les valeurs distinctes sont séparées par des virgules, mais n’importe quel autre caractère séparateur peut être désigné. Les sélections dans les différentes listes sont combinées pour ne garder que les résultats validant tous les choix.</li>
<li>Des champs (=colonnes) permettant de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite. Remarquez que le champ « Abondance… » utilise une fonction spécifique, car un classement par ordre alphabétique n’aurait pas convenu ici.</li>
<li>Un <b>compteur affichant le nombre total de résultats</b>, avec prise en compte des éventuels filtres utilisés.</li>
<li>Des <b>options de pagination</b>.</li>
<li>Un <b>moteur de recherche</b>, permettant de filtrer les données, cette fois sur l’ensemble des champs, contrairement aux listes.</li>
</ul>
<p>Enfin, il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous visualisez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez simuler cet affichage en faisant « Ctrl+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
</article>
<aside> <aside>
<p>Les données affiché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">sur Wikipédia</a>.</p> <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>
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe quel autre caractère séparateur.</p>
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
<p>Il est également possible d’afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
<p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
</aside> </aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <aside>
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithCSV.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> </body>
</html> </html>

149
public/withHTML.html
View File

@ -8,8 +8,8 @@
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithHTML.app.js" defer></script> <script src="JS/exampleWithHTML.app.js" defer></script>
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) --> <script src="JS/matomo.js" defer></script>
<title>Parser et afficher un tableau HTML via FreeDatas2HTML</title> <title>Parser un tableau HTML pour adapter son affichage en TypeScript/JavaScript</title>
</head> </head>
<body class="paper container"> <body class="paper container">
@ -20,130 +20,83 @@
<ul class="inline row flex-center"> <ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li> <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="./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> <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> </ul>
</nav> </nav>
</header> </header>
<h2>Parser un tableau HTML pour adapter son affichage</h2> <h2>Parser un tableau HTML pour l'adapter en ajoutant filtres et pagination</h2>
<div class="row"> <div class="row">
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div> <div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div>
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div> <div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
</div> </div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3> <div id="datas">
<article id="datas">
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Version CSS</th> <th>Séquence</th><th>Signification</th><th>Décrit en section</th><th>Version CSS</th>
</tr> </tr>
</thead </thead>
<tbody> <tbody>
<tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr> <tr><td>*</td><td>tout élément</td><td>Sélecteur universel</td><td>2</td></tr>
<tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr> <tr><td>E</td><td>tout élément de type E</td><td>Sélecteur de type d'élément</td><td>1</td></tr>
<tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr> <tr><td>E[foo]</td><td>tout élément E portant l'attribut "foo"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut" <tr><td>E[foo="bar"]</td><td>tout élément E portant l'attribut "foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
foo" et dont la valeur de cet attribut est exactement "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr> <tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo" contient une liste de valeurs séparées par des espaces, l'une de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E[foo~="bar"]</td><td>tout élément E dont l'attribut "foo" <tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
contient une liste de valeurs séparées par des espaces, l'une <tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
de ces valeurs étant exactement égale à "bar"</td><td>Sélecteurs d'attribut</td><td>2</td></tr> <tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo^="bar"]</td><td>tout élément E dont la valeur de l'attribut <tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut "lang" est une liste de valeurs séparées par des tirets et commençant (à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
"foo" commence exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo$="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" finit exactement par la chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[foo*="bar"]</td><td>tout élément E dont la valeur de l'attribut
"foo" contient la sous-chaîne "bar"</td><td>Sélecteurs d'attribut</td><td>3</td></tr>
<tr><td>E[lang|="en"]</td><td>tout élément E dont l'attribut 'lang"
est une liste de valeurs séparées par des tirets et commençant
(à gauche) par "en"</td><td>Sélecteurs d'attribut</td><td>2</td></tr>
<tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:root</td><td>un élément E, racine du document</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant <tr><td>E:nth-child(n)</td><td>un élément E qui est le n-ième enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-child(n)</td><td>un élément E qui est le n-ième enfant <tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
de son parent en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:nth-last-of-type(n)</td><td>un élément E qui est le n-ième enfant
de son parent et de ce type en comptant depuis le dernier enfant</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr> <tr><td>E:first-child</td><td>un élément E, premier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>2</td></tr>
<tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:last-child</td><td>un élément E, dernier enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:first-of-type</td><td>un élément E, premier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:last-of-type</td><td>un élément E, dernier enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr> <tr>
<td height="19">E:only-child</td><td height="19">un élément E, seul enfant de <td>E:only-child</td><td>un élément E, seul enfant de son parent</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
son parent</td><td height="19">Pseudo-classes
structurelles</td><td height="19">3</td></tr>
<tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:only-of-type</td><td>un élément E, seul enfant de son type</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
<tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris <tr><td>E:empty</td><td>un élément E qui n'a aucun enfant (y compris noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr>
noeuds textuels purs)</td><td>Pseudo-classes structurelles</td><td>3</td></tr> <tr><td>E:link E:visited</td><td>un élément E qui est la source d'un hyperlien dont la cible n'a pas encore été visitée (:link) ou a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr>
<tr><td>E:link <br> <tr><td>E:active E:hover E:focus</td><td>un élément E pendant certaines actions de l'usager</td><td>Les pseudo-classes d'action Usager </td><td>1 and 2</td></tr>
E:visited</td><td>un élément E qui est la source d'un hyperlien <tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr>
dont la cible n'a pas encore été visitée (:link) ou <tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé)</td><td>La pseudo-classe :lang()&nbsp;</td><td>2</td></tr>
a déjà été visitée (:visited)</td><td>Les pseudo-classes de lien</td><td>1</td></tr> <tr><td>E:enabled E:disabled</td><td>un élément d'interface utilisateur E qui est actif ou inactif.</td><td>Les pseudo-classes d'état d'élément d'interface</td><td>3</td></tr>
<tr><td>E:active <br> <tr><td>E:checked E:indeterminate</td><td>un élément d'interface utilisateur E qui est coché ou dont l'état est indéterminé (par exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état d'élément d'interface</td><td>3</td></tr>
E:hover <br> <tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
E:focus</td><td>un élément E pendant certaines actions de <tr><td>E::first-line</td><td>la première ligne formatée d'un élément E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
l'usager</td><td>Les pseudo-classes d'action <tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément E</td><td>Le pseudo-élément ::first-letter </td><td>1</td></tr>
Usager </td><td>1 and 2</td></tr> <tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments fragments d'éléments d'interface</td><td>3</td></tr>
<tr><td>E:target</td><td>un élément E qui est la cible de l'URL d'origine <tr><td>E::before</td><td>le contenu généré avant un élément E</td><td>Le pseudo-élément ::before </td><td>2</td></tr>
contenant lui-même un fragment identifiant.</td><td>La pseudo-classe :target</td><td>3</td></tr> <tr><td>E::after</td><td>le contenu généré après un élément E</td><td>Le pseudo-élément ::after </td><td>2</td></tr>
<tr><td>E:lang(c)</td><td>un élément E dont le langage (humain) est
c (le langage du document spécifie comment le langage humain est
déterminé)</td><td>La pseudo-classe :lang()&nbsp;</td><td>2</td></tr>
<tr><td>E:enabled<br>
E:disabled&nbsp;</td><td>un élément d'interface utilisateur E qui
est actif ou inactif.</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:checked<br>
E:indeterminate&nbsp;</td><td>un élément d'interface utilisateur E qui
est coché ou dont l'état est indéterminé (par
exemple un bouton-radio ou une case à cocher)</td><td>Les pseudo-classes d'état
d'élément d'interface</td><td>3</td></tr>
<tr><td>E:contains("foo")</td><td>un élément E dont le contenu textuel concaténé
contient la sous-chaîne "foo"</td><td>La pseudo-classe de contenu</td><td>3</td></tr>
<tr><td>E::first-line</td><td>la première ligne formatée d'un élément
E</td><td>The :first-line pseudo-element</td><td>1</td></tr>
<tr><td>E::first-letter</td><td>le premier caractère formaté d'un élément
E</td><td>Le pseudo-élément
::first-letter </td><td>1</td></tr>
<tr><td>E::selection</td><td>la partie d'un élément E qui est actuellement
sélectionnée/mise en exergue par l'usager</td><td>Les pseudo-éléments
fragments d'éléments d'interface</td><td>3</td></tr>
<tr><td>E::before</td><td>le contenu généré avant un élément
E</td><td>Le pseudo-élément
::before </td><td>2</td></tr>
<tr><td>E::after</td><td>le contenu généré après un
élément E</td><td>Le pseudo-élément
::after </td><td>2</td></tr>
<tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr> <tr><td>E.warning</td><td><i>Uniquement en HTML</i>. Identique à E[class~="warning"].</td><td>Sélecteurs de classe</td><td>1</td></tr>
<tr><td>E#myid</td><td>un élément E dont l'ID est égal à <tr><td>E#myid</td><td>un élément E dont l'ID est égal à "myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr>
"myid".</td><td>Sélecteurs d'ID</td><td>1</td></tr> <tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr>
<tr><td>E:not(s)</td><td> un élément E qui n'est pas représenté <tr><td>E F</td><td>un élément F qui est le descendant d'un élément E</td><td>Combinateur de descendance</td><td>1</td></tr>
par le sélecteur simple s</td><td>La pseudo-classe de négation</td><td>3</td></tr> <tr><td>E &gt; F</td><td>un élément F qui est le fils d'un élément E</td><td>Combinateur filial</td><td>2</td></tr>
<tr><td>E F</td><td>un élément F qui est le descendant d'un <tr><td>E + F</td><td>un élément F immédiatement précédé par un élément E</td><td>Combinateur d'adjacence directe</td><td>2</td></tr>
élément E</td><td>Combinateur de descendance <tr><td>E ~ F</td><td>un élément F précédé par un élément E</td><td>Combinateur d'adjacence indirecte</td><td>3</td></tr>
</td><td>1</td></tr>
<tr><td>E &gt; F</td><td>un élément F qui est le fils d'un élément
E</td><td>Combinateur filial</td><td>2</td></tr>
<tr><td>E + F</td><td>un élément F immédiatement précédé
par un élément E</td><td>Combinateur d'adjacence
directe</td><td>2</td></tr>
<tr><td>E ~ F</td><td>un élément F précédé
par un élément E</td><td>Combinateur d'adjacence
indirecte</td><td>3</td></tr>
</tbody> </tbody>
</table> </table>
</article> </div>
<p id="pages"></p> <div id="pages"></div>
<article id="content">
<p>Dans cette page, avant l’action de FreeDatas2HTML, toutes les données sont affichées, sans proposer ni filtre, ni pagination.</p>
<p>C’est un cas d’usage possible de FreeDatas2HTML : vous listez des données dans une page via votre code backend (PHP, Python, node.js…). Vous souhaitez proposer à vos utilisateurs de <b>passer de pages en pages, d’effectuer des recherches… tout cela sans avoir à appeler de nouveau votre backend</b>. Le résultat est plus fluide et cela économise les ressources de votre serveur, <b>tout se faisant dans le navigateur</b> de l’utilisateur.</p>
<p>Il est aussi possible d’adapter le rendu à la taille de l’écran de votre utilisateur. C’est le cas dans cette page où les données ne sont pas réaffichées sous forme de tableau si l’écran est large de moins 800 px. Si vous visionnez cette page sur un grand écran, vous pouvez simuler cet affichage en faisant « Ctrl+Maj+M », puis « F5 ».</p>
<p>Dans l’autre sens, il pouvez aussi <b>parser des données listées autrement que dans un tableau HTML</b>, du moment qu’il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. Dans ce but, les sélecteurs listés ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">site du W3C</a> pourront vous être utiles !</p>
</article>
<aside> <aside>
<p>Dans cette page, avant l'action de FreeDatas2HTML, toutes les données sont affichées, sans proposer de pagination ni de filtre.</p> <p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithHTML.ts" target="_blank" title="accéder au code" rel="noopener" class="paper-btn btn-secondary">Code source utilisé par cette page.</a></p>
<p>C'est un cas d'usage possible de FreeDatas2HTML : vous avez listé des données dans une page via votre code backend (PHP, Python, node.js...). Vous souhaitez proposer à vos utilisateurs de passer de pages en pages, d'effectuer des recherches... tout cela sans avoir à appeler de nouveau votre backend. Le résultat est plus fluide et cela économise les ressources de votre serveur, tout se faisant dans le navigateur de l'utilisateur.</p> </aside>
<p>Il est tout à fait possible de lister vos données autrement que dans un tableau, du moment qu'il reste possible de cibler séparément le nom des champs et la liste des enregistrements via des sélecteurs CSS. D'où le tableau ci-dessous, venant du <a href="https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors" target="_blank" rel="noopener">W3C</a> et dont le contenu pourra donc vous être utile :-)</p>
</aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <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> </body>
</html> </html>

36
public/withJSON.html
View File

@ -3,13 +3,13 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et adapter l'affichage de données JSON."> <meta name="description" content="Exemple d'utilisation de FreeDatas2HTML pour parser et afficher des données JSON dans une page web.">
<meta name="robots" content="index, follow"> <meta name="robots" content="index, follow">
<link rel="stylesheet" href="CSS/paper.min.css"> <link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css"> <link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithJSON.app.js" defer></script> <script src="JS/exampleWithJSON.app.js" defer></script>
<script src="JS/matomo.js" defer></script><!-- Outil statistique pour le site de démonstration. À ne pas garder lors d'une réutilisation :-) --> <script src="JS/matomo.js" defer></script>
<title>Parser et afficher des données JSON via FreeDatas2HTML</title> <title>Parser, afficher, paginer, filtrer... des données JSON en TypeScript/JavaScript</title>
</head> </head>
<body class="paper container"> <body class="paper container">
@ -20,7 +20,7 @@
<ul class="inline row flex-center"> <ul class="inline row flex-center">
<li><a href="./#intro" class="badge warning sm-12 col">Introduction</a></li> <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="./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> <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> </ul>
</nav> </nav>
</header> </header>
@ -29,19 +29,35 @@
<div class="row"> <div class="row">
<div id="filtre1" class="sm-12 md-6 lg-6 col"></div> <div id="filtre1" class="sm-12 md-6 lg-6 col"></div>
<div id="paginationOptions" class="sm-12 md-6 lg-6 col"></div> <div id="search" class="sm-12 md-6 lg-6 col"></div>
<div id="paginationOptions" class="sm-12 md-12 lg-12 col"></div>
</div> </div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3> <h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas"> <div id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p> <p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.</p>
</div>
<div id="pages"></p>
<article id="content">
<p>Le <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON" title="Présentation du JSON sur MDN">format JSON</a> est un des plus utilisés pour échanger des données entre applications, surtout lorsqu’il s’agit de <strong>« consommer » une API</strong>. Souvent, il est nécessaire de s’identifier pour accéder aux données tierces. FreeDatas2HTML permet de le faire en ajoutant des en-têtes aux requêtes distantes.</p>
<p>Pour pouvoir être correctement parsée, votre chaîne JSON peut avoir deux formats différents :</p>
<ul>
<li>soit un tableau d’objets JavaScript, dont chaque objet est susceptible d’avoir des attributs différents. À partir du moment où un attribut y sera trouvé une fois, il sera considéré comme un champ pour vos données, même s’il ne concerne qu’un enregistrement. <a href="/datas/posts.json" title="fichier de données" target="_blank" rel="nofollow">Voir le fichier utilisé pour l’exemple de cette page</a>.</li>
<li>soit deux tableaux distincts : « fields » et « datas », listant respectivement les noms des champs et les enregistrements. Dans ce cas, toute donnée surnuméraire par rapport au nombre de champs pour un enregistrement sera ignorée. Cette seconde solution se rapproche de la structure des fichiers CSV et est sans doute à préférer si vous avez la main sur la construction de la chaîne JSON. <a href="/datas/posts2.json" title="fichier de données" target="_blank" rel="nofollow">Voir l’équivalent du fichier précédent, structuré de cette façon</a>.</li>
</ul>
<p>Dans les deux cas, les données parsées doivent être de type <b>string</b>, <b>number</b> ou <b>boolean</b>, sans quoi elles seront ignorées.</p>
<p>Pour le reste, le fonctionnement de l’exemple ci-dessus est similaire à celui <a href="./withCSV.html">parsant du CSV</a>. Ici, il n’y a qu’une liste « userId » proposée pour filtrer les données. Le moteur de recherche permet de filtrer les données des champs « title » et « body » — histoire de vous faire réviser votre latin :-) — et de montrer que le moteur de recherche de FreeDatas2HTML n’utilise pas forcément tous les champs existants.</p>
</article> </article>
<p id="pages"></p>
<aside> <aside>
<p>Le format JSON est sans doute le plus utilisé de nos jours, surtout si vous cherchez à <strong>afficher les données provenant d'une API</strong>, ce que permet FreeDatas2HTML en passant par exemple un token en entête de votre requête.</p> <p>Les données JSON affichées sur cette page ont été recopiées de l’<a href="https://jsonplaceholder.typicode.com/" target="_blank" rel="noopener">API de test {JSON} Placeholder</a> pour éviter les appels distants inutiles, mais elles pourraient très bien être récupérées à chaque nouvel affichage de la page.</p>
<p>Pour le reste, le fonctionnement est similaire qu'<a href="./withCSV.html">avec du CSV</a>.<br>Les données JSON ont été recopiées de l'<a href="https://jsonplaceholder.typicode.com/" target="_blank"rel="noopener">API de test {JSON} Placeholder</a>.</p>
</aside> </aside>
<footer><p>Design : <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a> | <a href="/mentions-legales.html">Mentions légales</a>.</p></footer> <aside>
<p><a href="https://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithJSON.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> </body>
</html> </html>

42
src/demo/exampleWithCSV.ts
View File

@ -1,13 +1,13 @@
import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML"; import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
const initialise = async () => const initialise=async () =>
{ {
try try
{ {
// Fonction spécifique de classement utile pour les données du 4ième champs // Fonction spécifique de classement, utile pour les données du 4ième champ :
const mySort = (a: any, b: any, order: "asc"|"desc" = "asc") => const mySort=(a: any, b: any, order: "asc"|"desc" = "asc") =>
{ {
const values = [ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"]; const values=[ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"];
if(order === "desc") if(order === "desc")
values.reverse(); values.reverse();
if(values.indexOf(a) > values.indexOf(b)) if(values.indexOf(a) > values.indexOf(b))
@ -19,11 +19,12 @@ const initialise = async () =>
}; };
// Création d'un convertisseur parsant les données d'un fichier CSV "distant" // Création d'un convertisseur parsant les données d'un fichier CSV "distant"
let converter=new FreeDatas2HTML("CSV"); const converter=new FreeDatas2HTML("CSV");
converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" }); converter.parser.setRemoteSource({ url:"http://localhost:8080/datas/elements-chimiques.csv" });
await converter.run(); // parsage // Parsage des données, qui ne sont pas encore affichées :
await converter.run();
// Adaptation du rendu suivant la taille de l'écran // Adaptation du rendu suivant la taille de l'écran :
const myRender=new Render(); const myRender=new Render();
if(window.innerWidth < 800) if(window.innerWidth < 800)
{ {
@ -41,41 +42,45 @@ const initialise = async () =>
} }
else else
{ {
// Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css :
myRender.settings.allBegining="<table class='table-hover'>"; myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender; converter.datasRender=myRender;
} }
// Ajout d'une fonction de classement spécifique // Ajout de la fonction de classement spécifique déclarée plus haut :
converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }]; converter.datasSortingFunctions=[{ datasFieldNb:4, sort:mySort }];
// Configuration de la pagination // Configuration de la pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" }; pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
pagination.selectedValue=10; pagination.selectedValue=10;
converter.pagination=pagination; converter.pagination=pagination;
pagination.options2HTML(); pagination.options2HTML();
// Création d'outils permettant de filtrer les données des champs de données // Création d'outils permettant de filtrer les données sur 3 champs différents :
let filtre1=new Selector(converter, 3, { id:"filtre1"} ); let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.filter2HTML(); filtre1.filter2HTML();
let filtre2=new Selector(converter, 4, { id:"filtre2"} ); let filtre2=new Selector(converter, 4, { id:"filtre2"} );
filtre2.filter2HTML(); filtre2.filter2HTML();
// Le troisième devant prendre en compte un séparateur :
let filtre3=new Selector(converter, 5, { id:"filtre3"}, ","); let filtre3=new Selector(converter, 5, { id:"filtre3"}, ",");
filtre3.filter2HTML(); filtre3.filter2HTML();
// + un moteur de recherche // + Un moteur de recherche opérant sur tous les champs :
const mySearch=new SearchEngine(converter, { id:"search" }, [1,3,5]); const mySearch=new SearchEngine(converter, { id:"search" });
mySearch.label="Qui cherche trouve ?"; mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !"; mySearch.btnTxt="Va chercher !";
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
mySearch.automaticSearch=true; mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2; mySearch.nbCharsForSearch=2;
mySearch.placeholder="Tapes en NB, chef !"; mySearch.placeholder="Tapes en NB, chef !";
mySearch.filter2HTML(); mySearch.filter2HTML();
// + Injection des filtres dans le convertisseur
// Injection des filtres dans le convertisseur :
converter.datasFilters=[filtre1,filtre2,filtre3, mySearch]; converter.datasFilters=[filtre1,filtre2,filtre3, mySearch];
// Ajout de champs permettant de classer les données // Désignation des champs permettant de classer les données :
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires // Uniquement avec un rendu sous forme de tableau (grand écran), car des en-têtes de colonne sont nécessaires.
if(window.innerWidth >= 800) if(window.innerWidth >= 800)
{ {
let sortingField1=new SortingField(converter, 0); let sortingField1=new SortingField(converter, 0);
@ -85,7 +90,7 @@ const initialise = async () =>
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4]; converter.datasSortingFields=[sortingField1,sortingField2,sortingField3,sortingField4];
} }
// Affichage initial // Affichage initial avec l'id de l'élément HTML devant afficher le compteur :
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
converter.datasCounterElt={ id:"compteur" }; converter.datasCounterElt={ id:"compteur" };
converter.refreshView(); converter.refreshView();
@ -93,8 +98,9 @@ const initialise = async () =>
catch(e) catch(e)
{ {
console.error(e); console.error(e);
if(document.getElementById("datas")!==null) document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`;
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
} }
} }
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/exampleWithCSV.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
initialise(); initialise();

30
src/demo/exampleWithHTML.ts
View File

@ -1,14 +1,15 @@
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "../FreeDatas2HTML"; import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "../FreeDatas2HTML";
const initialise = async () => const initialise=async () =>
{ {
try try
{ {
// Création d'un convertisseur parsant des données transmises en HTML // Création d'un convertisseur parsant des données transmises en HTML :
let converter=new FreeDatas2HTML("HTML"); const converter=new FreeDatas2HTML("HTML");
await converter.run(); // parsage des données // Parsage des données, qui ne sont pas encore réaffichées :
await converter.run();
// Adaptation du rendu suivant la taille de l'écran // Adaptation du rendu suivant la taille de l'écran :
const myRender=new Render(); const myRender=new Render();
if(window.innerWidth < 800) if(window.innerWidth < 800)
{ {
@ -26,24 +27,25 @@ const initialise = async () =>
} }
else else
{ {
// Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css :
myRender.settings.allBegining="<table class='table-hover'>"; myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender; converter.datasRender=myRender;
} }
// Configuration de la pagination // Configuration de la pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50] , name: "Nombre de lignes par page :" }; pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50] , name: "Nombre de lignes par page :" };
pagination.selectedValue=30; pagination.selectedValue=15;
converter.pagination=pagination; converter.pagination=pagination;
pagination.options2HTML(); pagination.options2HTML();
// Création d'un filtre : // Création d'un filtre sur le 4ième champ :
let filtre1=new Selector(converter, 3, { id:"filtre1"} ); let filtre1=new Selector(converter, 3, { id:"filtre1"} );
filtre1.filter2HTML(); filtre1.filter2HTML();
converter.datasFilters=[filtre1]; converter.datasFilters=[filtre1];
// Ajout de champs permettant de classer les données // Désignation des champs permettant de classer les données :
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires // Uniquement avec un rendu sous forme de tableau (grand écran), car des en-têtes de colonne sont nécessaires.
if(window.innerWidth >= 800) if(window.innerWidth >= 800)
{ {
let sortingField1=new SortingField(converter, 2); let sortingField1=new SortingField(converter, 2);
@ -51,16 +53,16 @@ const initialise = async () =>
converter.datasSortingFields=[sortingField1,sortingField2]; converter.datasSortingFields=[sortingField1,sortingField2];
} }
// Affichage initial // Affichage initial :
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
converter.datasCounterElt={ id:"compteur" };
converter.refreshView(); converter.refreshView();
} }
catch(e) catch(e)
{ {
console.error(e); console.error(e);
if(document.getElementById("datas")!==null) document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`;
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
} }
} }
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/exampleWithHTML.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
initialise(); initialise();

48
src/demo/exampleWithJSON.ts
View File

@ -1,15 +1,17 @@
import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "../FreeDatas2HTML"; import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML";
const initialise = async () => const initialise=async () =>
{ {
try try
{ {
// Création d'un convertisseur parsant des données transmises en JSON // Création d'un convertisseur parsant des données transmises en JSON :
let converter=new FreeDatas2HTML("JSON"); const converter=new FreeDatas2HTML("JSON");
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] }); // Exemple d'utilisation de headers (bien qu'inutiles ici) :
await converter.run(); // parsage des données converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts2.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] });
// Parsage des données, qui ne sont pas encore affichées :
await converter.run();
// Adaptation du rendu suivant la taille de l'écran // Adaptation du rendu suivant la taille de l'écran :
const myRender=new Render(); const myRender=new Render();
if(window.innerWidth < 800) if(window.innerWidth < 800)
{ {
@ -27,19 +29,20 @@ const initialise = async () =>
} }
else else
{ {
// Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css :
myRender.settings.allBegining="<table class='table-hover'>"; myRender.settings.allBegining="<table class='table-hover'>";
converter.datasRender=myRender; converter.datasRender=myRender;
} }
// Configuration de la pagination // Configuration de la pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50,100] , name: "Nombre de lignes par page :" }; pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,90,150] , name: "Nombre de lignes par page :" };
pagination.selectedValue=15; pagination.selectedValue=15;
converter.pagination=pagination; converter.pagination=pagination;
pagination.options2HTML(); pagination.options2HTML();
// Ajout de champs permettant de classer les données // Désignation des champs permettant de classer les données :
// Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires // Uniquement avec un rendu sous forme de tableau (grand écran), car des en-têtes de colonne sont nécessaires.
if(window.innerWidth >= 800) if(window.innerWidth >= 800)
{ {
let sortingField1=new SortingField(converter, 0); let sortingField1=new SortingField(converter, 0);
@ -48,12 +51,24 @@ const initialise = async () =>
converter.datasSortingFields=[sortingField1,sortingField2,sortingField3]; converter.datasSortingFields=[sortingField1,sortingField2,sortingField3];
} }
// Création d'un filtre par auteur : // Création d'un filtre sur la premier champ :
let filtre1=new Selector(converter, 0, { id:"filtre1"} ); let filtre1=new Selector(converter, 0, { id:"filtre1"} );
filtre1.filter2HTML(); filtre1.filter2HTML();
converter.datasFilters=[filtre1];
// Affichage initial // + Un moteur de recherche, mais filtrant les données seulement sur les 2 derniers champs :
const mySearch=new SearchEngine(converter, { id:"search" }, [2,3]);
mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !";
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2;
mySearch.placeholder="Tapes en NB, chef !";
mySearch.filter2HTML();
// Injection des filtres dans le convertisseur :
converter.datasFilters=[filtre1, mySearch];
// Affichage initial avec l'id de l'élément HTML devant afficher le compteur :
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
converter.datasCounterElt={ id:"compteur" }; converter.datasCounterElt={ id:"compteur" };
converter.refreshView(); converter.refreshView();
@ -61,8 +76,9 @@ const initialise = async () =>
catch(e) catch(e)
{ {
console.error(e); console.error(e);
if(document.getElementById("datas")!==null) document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche l'affichage des données.</div>`;
document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
} }
} }
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(); initialise();

58
src/demo/exampleWithUserFile.ts
View File

@ -4,37 +4,37 @@ const initialise = () =>
{ {
try try
{ {
const dataDisplayElt=document.getElementById("datas"); // Éléments du DOM utilisés :
const dataDisplayOptionsElt=document.getElementById("displayOptions"); const dataDisplayElt=document.getElementById("datas") as HTMLElement;
const dataDisplayOptionsElt=document.getElementById("displayOptions") as HTMLElement;
const myFile=document.getElementById("myFile") as HTMLInputElement; const myFile=document.getElementById("myFile") as HTMLInputElement;
const myForm=document.getElementById("userSettings") as HTMLElement; const myForm=document.getElementById("userSettings") as HTMLElement;
const pagesElt=document.getElementById("pages") as HTMLElement; const pagesElt=document.getElementById("pages") as HTMLElement;
const paginationElt=document.getElementById("paginationOptions") as HTMLElement; const paginationElt=document.getElementById("paginationOptions") as HTMLElement;
const searchElt=document.getElementById("search") as HTMLElement; const searchElt=document.getElementById("search") as HTMLElement;
if(dataDisplayElt === null || dataDisplayOptionsElt === null || myFile === null || myForm === null|| pagesElt === null|| paginationElt === null|| searchElt === null) if(dataDisplayElt === null || dataDisplayOptionsElt === null || myFile === null || myForm === null|| pagesElt === null|| paginationElt === null|| searchElt === null)
throw new Error("Tous les éléments HTML nécessaires au fonctionnement n'ont pas été trouvés dans la page;"); throw new Error("Tous les éléments HTML nécessaires au fonctionnement n'ont pas été trouvés dans la page;");
const reInitialise= () => let converter: FreeDatas2HTML;
{ const myRender=new Render();
// Attention, ici l'élément devant afficher le compteur n'est pas initialement présent dans la page :
myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span id='counter'></span></caption>";
myFile.addEventListener("change", function(e)
{
// Place nette pour le nouveau fichier :
dataDisplayElt.innerHTML=""; dataDisplayElt.innerHTML="";
dataDisplayOptionsElt.innerHTML=""; dataDisplayOptionsElt.innerHTML="";
pagesElt.innerHTML=""; pagesElt.innerHTML="";
paginationElt.innerHTML=""; paginationElt.innerHTML="";
searchElt.innerHTML=""; searchElt.innerHTML="";
}
let converter : FreeDatas2HTML; // Création d'un convertisseur parsant les données du fichier CSV sélectionné :
const myRender=new Render();
// Attention, l'élément affichant le compteur n'est pas initialement présent dans la page :
myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span id='counter'></span></caption>";
myFile.addEventListener("change", function(e)
{
reInitialise();
converter=new FreeDatas2HTML("CSV"); converter=new FreeDatas2HTML("CSV");
converter.datasRender=myRender; converter.datasRender=myRender;
// L'utilisateur a-t-il vraiment sélectionné un fichier ?
// Si oui, est-ce un fichier CSV ?
const selectedFiles=myFile.files; const selectedFiles=myFile.files;
if(selectedFiles !== null && selectedFiles.length === 1) if(selectedFiles !== null && selectedFiles.length === 1)
{ {
@ -42,6 +42,7 @@ const initialise = () =>
dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`; dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.</p>`;
else else
{ {
// Lecture du contenu du fichier qui est passé au parseur :
const reader=new FileReader(); const reader=new FileReader();
reader.onload=async function(e) reader.onload=async function(e)
{ {
@ -58,10 +59,13 @@ const initialise = () =>
} }
}); });
// Une fois le choix des champs à afficher validé, on peut afficher les données et certains outils :
myForm.addEventListener("submit", function(e) myForm.addEventListener("submit", function(e)
{ {
e.preventDefault(); e.preventDefault();
dataDisplayElt.innerHTML=""; dataDisplayElt.innerHTML="";
// Quels champs ont été sélectionnés ?
let fields2Rend: number[]=[]; let fields2Rend: number[]=[];
let checkBox: HTMLInputElement; let checkBox: HTMLInputElement;
for(let i=0; i < converter.fields.length; i++) for(let i=0; i < converter.fields.length; i++)
@ -75,16 +79,17 @@ const initialise = () =>
} }
if( fields2Rend.length === 0) if( fields2Rend.length === 0)
dataDisplayElt.innerHTML=`<p class='text-danger'>Vous n'avez sélectionné aucun champ à afficher !</p>`; dataDisplayElt.innerHTML=`<p class='text-danger'>Merci de sélectionner les champs que vous souhaitez afficher !</p>`;
else else
{ {
converter.fields2Rend=fields2Rend; converter.fields2Rend=fields2Rend;
converter.datasViewElt={ id:"datas" }; converter.datasViewElt={ id:"datas" };
// + Un moteur de recherche : // + Un moteur de recherche opérant sur tous les champs :
const mySearch=new SearchEngine(converter, { id:"search" }); const mySearch=new SearchEngine(converter, { id:"search" });
mySearch.label="Qui cherche trouve ?"; mySearch.label="Qui cherche trouve ?";
mySearch.btnTxt="Va chercher !"; mySearch.btnTxt="Va chercher !";
// La recherche se lance automatiquement, dès que 2 caractères sont saisis :
mySearch.automaticSearch=true; mySearch.automaticSearch=true;
mySearch.nbCharsForSearch=2; mySearch.nbCharsForSearch=2;
mySearch.placeholder="Saisir un moins 2 caractères"; mySearch.placeholder="Saisir un moins 2 caractères";
@ -93,8 +98,8 @@ const initialise = () =>
// + Pagination : // + Pagination :
const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" }; pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,100,500] , name: "Choix de pagination :" };
pagination.selectedValue=10; pagination.selectedValue=20;
converter.pagination=pagination; converter.pagination=pagination;
pagination.options2HTML(); pagination.options2HTML();
@ -110,17 +115,26 @@ const initialise = () =>
converter.datasSortingFields.push(sortingField); converter.datasSortingFields.push(sortingField);
} }
// Actualisation de l'affichage // Actualisation de l'affichage :
converter.refreshView(); converter.refreshView();
// Déplacement vers les données
const here=window.location;
if(window.location.hash!=="")
{
window.location.hash="";// ! le "#" reste
window.location.assign(here+"paginationOptions");
}
else
window.location.assign(here+"#paginationOptions");
} }
}); });
} }
catch(e) catch(e)
{ {
console.error(e); console.error(e);
document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`; document.getElementById("datas")!.innerHTML=`<div class="alert alert-warning">Désolé, mais un problème technique empêche le fonctionnement normal de cette page.</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/exampleWithUserFile.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
initialise(); initialise();