From 6998eb67aaf565bd0fa4734a2887bd87fdcb015b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Tue, 9 Nov 2021 16:45:40 +0100 Subject: [PATCH] =?UTF-8?q?Finalisation=20de=20la=20premi=C3=A8re=20versio?= =?UTF-8?q?n=20du=20site=20de=20d=C3=A9monstration.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- public/CSS/fd2html.css | 1 + public/examples.html | 17 ++-- public/index.html | 7 +- public/mentions-legales.html | 28 +++--- public/userFile.html | 28 +++--- public/withCSV.html | 36 +++++--- public/withHTML.html | 149 +++++++++++--------------------- public/withJSON.html | 36 +++++--- src/demo/exampleWithCSV.ts | 42 +++++---- src/demo/exampleWithHTML.ts | 36 ++++---- src/demo/exampleWithJSON.ts | 52 +++++++---- src/demo/exampleWithUserFile.ts | 60 ++++++++----- 13 files changed, 256 insertions(+), 238 deletions(-) diff --git a/package.json b/package.json index e64e512..e6573c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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.", "main": "index.js", "scripts": { diff --git a/public/CSS/fd2html.css b/public/CSS/fd2html.css index 3a2f619..b22acc4 100644 --- a/public/CSS/fd2html.css +++ b/public/CSS/fd2html.css @@ -12,3 +12,4 @@ h1 a:visited { color:black } h2 { font-size:2rem; } h3 { font-size:1.5rem; } header li a:visited { color:white; } +table caption { font-weight: bolder} \ No newline at end of file diff --git a/public/examples.html b/public/examples.html index 7dcadfd..5afc1a3 100644 --- a/public/examples.html +++ b/public/examples.html @@ -7,8 +7,8 @@ - - Exemples d'utilisation du module FreeDatas2HTML + + Exemples d'utilisation de FreeDatas2HTML @@ -25,15 +25,16 @@
-

Exemples d’utilisation de Freedatas2html

+

Exemples d’utilisation de FreeDatas2HTML

+

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.

- + \ No newline at end of file diff --git a/public/index.html b/public/index.html index 63c8511..d3e1f69 100644 --- a/public/index.html +++ b/public/index.html @@ -7,7 +7,7 @@ - + FreeDatas2HTML : parser et afficher des données en TypeScript/JavaScript @@ -69,8 +69,7 @@

Pagination

-

Une valeur de pagination peut être définie et/ou plusieurs options de pagination proposées aux utilisateurs finaux.

-

Les pages proposées à la navigation s’adaptent évidemment au nombre de résultats.

+

Une valeur de pagination peut être définie et/ou plusieurs options de pagination proposées aux utilisateurs finaux.
Les pages proposées à la navigation s’adaptent évidemment au nombre de résultats.

Adaptable à vos besoins

@@ -91,6 +90,6 @@

Accéder au dépôt GIT du projet.

- + \ No newline at end of file diff --git a/public/mentions-legales.html b/public/mentions-legales.html index a97d3d3..1aedbe8 100755 --- a/public/mentions-legales.html +++ b/public/mentions-legales.html @@ -3,10 +3,10 @@ - + - + Mentions légales @@ -24,27 +24,19 @@
-

Mentions légales du site Freedatas2html

+

Contact

+

Si vous souhaitez me signaler une erreur, merci de le faire sur cette adresse : fabrice@le-fab-lab.com.
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.

+ +

Mentions légales du site FreeDatas2HTML

- Propriétaire du site :
+ Propriétaire et éditeur du site :

- Fabrice PENHOËT
+ Fabrice PENHOËT
4 RUE DU CAPITAINE LOUIS ROSSEL
56100 LORIENT
- fabrice@le-fab-lab.com

- -

- Éditeur du site :
-

- Fabrice PENHOËT
- 4 RUE DU CAPITAINE LOUIS ROSSEL
- 56100 LORIENT
- fabrice@le-fab-lab.com -
-

- +

Hébergement du site :

@@ -59,7 +51,7 @@ >
- + \ No newline at end of file diff --git a/public/userFile.html b/public/userFile.html index b50e62f..f429a26 100644 --- a/public/userFile.html +++ b/public/userFile.html @@ -3,13 +3,13 @@ - + - - Afficher les données d'un fichier CSV dans une page web à l'aide de FreeDatas2HTML + + Afficher les données d’un fichier CSV dans une page web @@ -19,14 +19,14 @@ -

Afficher votre fichier CSV dans la page web

+

Affichez les données de votre fichier CSV

-

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.

+

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.

@@ -38,15 +38,21 @@
- -
- +

+
+

Fichier CSV ?

+

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. Lire ici comment enregistrer en CSV avec LibreOffice. À noter que votre fichier doit être encodé en UTF8, 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.

+

Pas de fichier CSV sous la main ? Alors vous pouvez cliquer ici pour télécharger la liste des villes françaises de + de 30 000 habitants, que j’ai moi-même recopiée de Wikipédia. Une fois le fichier enregistré sur votre ordinateur, sélectionnez-le via le formulaire ci-dessus.

+

À lire avant de partager cette page :-)

+

FreeDatas2HTML s’exécute uniquement côté client, c’est-à-dire dans votre navigateur. 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. Il est évidemment possible d’indiquer un fichier CSV à afficher par défaut dans une page ! C’est même ce qui est fait dans cet autre exemple.

+
+ - + \ No newline at end of file diff --git a/public/withCSV.html b/public/withCSV.html index 5d6946e..5ccc128 100644 --- a/public/withCSV.html +++ b/public/withCSV.html @@ -8,8 +8,8 @@ - - Parser et afficher des données CSV via FreeDatas2HTML + + Parser, afficher, paginer, filtrer... des données CSV en TypeScript/JavaScript @@ -19,7 +19,7 @@ @@ -35,20 +35,32 @@

Nombre total de résultats :

-
+

Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.

-
+

+
+

Cet exemple d’utilisation de FreeDatas2HTML est assez complet en montrant comment à partir d’un fichier de données, il est possible de proposer :

+
    +
  • Des listes permettant de filtrer les données. La troisième liste (Mots-clés) démontrant qu’il est possible d’extraire des données d’un champ ayant plusieurs valeurs par ligne. 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.
    • +
  • Des champs (=colonnes) permettant de classer les données : 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.
    • +
  • Un compteur affichant le nombre total de résultats, avec prise en compte des éventuels filtres utilisés.
    • +
  • Des options de pagination.
    • +
  • Un moteur de recherche, permettant de filtrer les données, cette fois sur l’ensemble des champs, contrairement aux listes.
    • +
+ +

Enfin, il est possible d’afficher les données autrement que sous forme de tableau HTML. 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.

+
+ - + + + \ No newline at end of file diff --git a/public/withHTML.html b/public/withHTML.html index 85f0b45..ae25113 100644 --- a/public/withHTML.html +++ b/public/withHTML.html @@ -8,8 +8,8 @@ - - Parser et afficher un tableau HTML via FreeDatas2HTML + + Parser un tableau HTML pour adapter son affichage en TypeScript/JavaScript @@ -20,130 +20,83 @@ -

Parser un tableau HTML pour adapter son affichage

+

Parser un tableau HTML pour l'adapter en ajoutant filtres et pagination

-
-
+
+
-

Nombre total de résultats :

-
+
- + + - - - - - - + + + + + + - - - - + + + + - + - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - + + + + + +
SéquenceSignificationDécrit en sectionVersion CSS
*tout élémentSélecteur universel2
Etout élément de type ESélecteur de type d'élément1
E[foo]tout élément E portant l'attribut "foo"Sélecteurs d'attribut2
E[foo="bar"]tout élément E portant l'attribut" - foo" et dont la valeur de cet attribut est exactement "bar"Sélecteurs d'attribut2
E[foo~="bar"]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"Sélecteurs d'attribut2
E[foo^="bar"]tout élément E dont la valeur de l'attribut - "foo" commence exactement par la chaîne "bar"Sélecteurs d'attribut3
E[foo$="bar"]tout élément E dont la valeur de l'attribut - "foo" finit exactement par la chaîne "bar"Sélecteurs d'attribut3
E[foo*="bar"]tout élément E dont la valeur de l'attribut - "foo" contient la sous-chaîne "bar"Sélecteurs d'attribut3
E[lang|="en"]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"Sélecteurs d'attribut2
E[foo="bar"]tout élément E portant l'attribut "foo" et dont la valeur de cet attribut est exactement "bar"Sélecteurs d'attribut2
E[foo~="bar"]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"Sélecteurs d'attribut2
E[foo^="bar"]tout élément E dont la valeur de l'attribut "foo" commence exactement par la chaîne "bar"Sélecteurs d'attribut3
E[foo$="bar"]tout élément E dont la valeur de l'attribut "foo" finit exactement par la chaîne "bar"Sélecteurs d'attribut3
E[foo*="bar"]tout élément E dont la valeur de l'attribut "foo" contient la sous-chaîne "bar"Sélecteurs d'attribut3
E[lang|="en"]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"Sélecteurs d'attribut2
E:rootun élément E, racine du documentPseudo-classes structurelles3
E:nth-child(n)un élément E qui est le n-ième enfant - de son parentPseudo-classes structurelles3
E:nth-last-child(n)un élément E qui est le n-ième enfant - de son parent en comptant depuis le dernier enfantPseudo-classes structurelles3
E:nth-of-type(n)un élément E qui est le n-ième enfant - de son parent et de ce typePseudo-classes structurelles3
E:nth-last-of-type(n)un élément E qui est le n-ième enfant - de son parent et de ce type en comptant depuis le dernier enfantPseudo-classes structurelles3
E:nth-child(n)un élément E qui est le n-ième enfant de son parentPseudo-classes structurelles3
E:nth-last-child(n)un élément E qui est le n-ième enfant de son parent en comptant depuis le dernier enfantPseudo-classes structurelles3
E:nth-of-type(n)un élément E qui est le n-ième enfant de son parent et de ce typePseudo-classes structurelles3
E:nth-last-of-type(n)un élément E qui est le n-ième enfant de son parent et de ce type en comptant depuis le dernier enfantPseudo-classes structurelles3
E:first-childun élément E, premier enfant de son parentPseudo-classes structurelles2
E:last-childun élément E, dernier enfant de son parentPseudo-classes structurelles3
E:first-of-typeun élément E, premier enfant de son typePseudo-classes structurelles3
E:last-of-typeun élément E, dernier enfant de son typePseudo-classes structurelles3
E:only-childun élément E, seul enfant de - son parentPseudo-classes - structurelles3
E:only-childun élément E, seul enfant de son parentPseudo-classes structurelles3
E:only-of-typeun élément E, seul enfant de son typePseudo-classes structurelles3
E:emptyun élément E qui n'a aucun enfant (y compris - noeuds textuels purs)Pseudo-classes structurelles3
E:link
- E:visited		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)Les pseudo-classes de lien1
E:active
- E:hover
- E:focus		un élément E pendant certaines actions de - l'usagerLes pseudo-classes d'action - Usager 1 and 2
E:targetun élément E qui est la cible de l'URL d'origine - contenant lui-même un fragment identifiant.La pseudo-classe :target3
E:lang(c)un élément E dont le langage (humain) est - c (le langage du document spécifie comment le langage humain est - déterminé)La pseudo-classe :lang() 2
E:enabled
- E:disabled 		un élément d'interface utilisateur E qui - est actif ou inactif.Les pseudo-classes d'état - d'élément d'interface3
E:checked
- E:indeterminate 		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)Les pseudo-classes d'état - d'élément d'interface3
E:contains("foo")un élément E dont le contenu textuel concaténé - contient la sous-chaîne "foo"La pseudo-classe de contenu3
E::first-linela première ligne formatée d'un élément - EThe :first-line pseudo-element1
E::first-letterle premier caractère formaté d'un élément - ELe pseudo-élément - ::first-letter 1
E::selectionla partie d'un élément E qui est actuellement - sélectionnée/mise en exergue par l'usagerLes pseudo-éléments - fragments d'éléments d'interface3
E::beforele contenu généré avant un élément - ELe pseudo-élément - ::before 2
E::afterle contenu généré après un - élément ELe pseudo-élément - ::after 2
E:emptyun élément E qui n'a aucun enfant (y compris noeuds textuels purs)Pseudo-classes structurelles3
E:link E:visitedun é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)Les pseudo-classes de lien1
E:active E:hover E:focusun élément E pendant certaines actions de l'usagerLes pseudo-classes d'action Usager 1 and 2
E:targetun élément E qui est la cible de l'URL d'origine contenant lui-même un fragment identifiant.La pseudo-classe :target3
E:lang(c)un élément E dont le langage (humain) est c (le langage du document spécifie comment le langage humain est déterminé)La pseudo-classe :lang() 2
E:enabled E:disabledun élément d'interface utilisateur E qui est actif ou inactif.Les pseudo-classes d'état d'élément d'interface3
E:checked E:indeterminateun é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)Les pseudo-classes d'état d'élément d'interface3
E:contains("foo")un élément E dont le contenu textuel concaténé contient la sous-chaîne "foo"La pseudo-classe de contenu3
E::first-linela première ligne formatée d'un élément EThe :first-line pseudo-element1
E::first-letterle premier caractère formaté d'un élément ELe pseudo-élément ::first-letter 1
E::selectionla partie d'un élément E qui est actuellement sélectionnée/mise en exergue par l'usagerLes pseudo-éléments fragments d'éléments d'interface3
E::beforele contenu généré avant un élément ELe pseudo-élément ::before 2
E::afterle contenu généré après un élément ELe pseudo-élément ::after 2
E.warningUniquement en HTML. Identique à E[class~="warning"].Sélecteurs de classe1
E#myidun élément E dont l'ID est égal à - "myid".Sélecteurs d'ID1
E:not(s) un élément E qui n'est pas représenté - par le sélecteur simple sLa pseudo-classe de négation3
E Fun élément F qui est le descendant d'un - élément ECombinateur de descendance - 1
E > Fun élément F qui est le fils d'un élément - ECombinateur filial2
E + Fun élément F immédiatement précédé - par un élément ECombinateur d'adjacence - directe2
E ~ Fun élément F précédé - par un élément ECombinateur d'adjacence - indirecte3
E#myidun élément E dont l'ID est égal à "myid".Sélecteurs d'ID1
E:not(s) un élément E qui n'est pas représenté par le sélecteur simple sLa pseudo-classe de négation3
E Fun élément F qui est le descendant d'un élément ECombinateur de descendance1
E > Fun élément F qui est le fils d'un élément ECombinateur filial2
E + Fun élément F immédiatement précédé par un élément ECombinateur d'adjacence directe2
E ~ Fun élément F précédé par un élément ECombinateur d'adjacence indirecte3
-
-

+ +
+ +
+

Dans cette page, avant l’action de FreeDatas2HTML, toutes les données sont affichées, sans proposer ni filtre, ni pagination.

+

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 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.

+

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 ».

+

Dans l’autre sens, il pouvez aussi parser des données listées autrement que dans un tableau HTML, 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 site du W3C pourront vous être utiles !

+
+

Code source utilisé par cette page.

+ - + \ No newline at end of file diff --git a/public/withJSON.html b/public/withJSON.html index d4f0a23..16d23e3 100644 --- a/public/withJSON.html +++ b/public/withJSON.html @@ -3,13 +3,13 @@ - + - - Parser et afficher des données JSON via FreeDatas2HTML + + Parser, afficher, paginer, filtrer... des données JSON en TypeScript/JavaScript @@ -20,7 +20,7 @@ @@ -29,19 +29,35 @@
-
+ +

Nombre total de résultats :

-
+

Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier JSON.

+
+

+ +
+

Le format JSON est un des plus utilisés pour échanger des données entre applications, surtout lorsqu’il s’agit de « consommer » une API. 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.

+

Pour pouvoir être correctement parsée, votre chaîne JSON peut avoir deux formats différents :

+
    +
  • 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. Voir le fichier utilisé pour l’exemple de cette page.
    • +
  • 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. Voir l’équivalent du fichier précédent, structuré de cette façon.
    • +
+

Dans les deux cas, les données parsées doivent être de type string, number ou boolean, sans quoi elles seront ignorées.

+

Pour le reste, le fonctionnement de l’exemple ci-dessus est similaire à celui parsant du CSV. 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.

-

+ + + - + \ No newline at end of file diff --git a/src/demo/exampleWithCSV.ts b/src/demo/exampleWithCSV.ts index ea57aed..b09f6f9 100644 --- a/src/demo/exampleWithCSV.ts +++ b/src/demo/exampleWithCSV.ts @@ -1,13 +1,13 @@ import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "../FreeDatas2HTML"; -const initialise = async () => +const initialise=async () => { try { - // Fonction spécifique de classement utile pour les données du 4ième champs - const mySort = (a: any, b: any, order: "asc"|"desc" = "asc") => + // 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 values = [ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"]; + const values=[ "> 100000", "> 1 et < 100 000", "≤ 1", "Traces", "Inexistant"]; if(order === "desc") values.reverse(); 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" - let converter=new FreeDatas2HTML("CSV"); + const converter=new FreeDatas2HTML("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(); if(window.innerWidth < 800) { @@ -41,41 +42,45 @@ const initialise = async () => } else { + // Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css : myRender.settings.allBegining=""; 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 }]; - // Configuration de la pagination + // Configuration de la pagination : 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(); - // 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"} ); filtre1.filter2HTML(); let filtre2=new Selector(converter, 4, { id:"filtre2"} ); filtre2.filter2HTML(); + // Le troisième devant prendre en compte un séparateur : let filtre3=new Selector(converter, 5, { id:"filtre3"}, ","); filtre3.filter2HTML(); - // + un moteur de recherche - const mySearch=new SearchEngine(converter, { id:"search" }, [1,3,5]); + // + Un moteur de recherche opérant sur tous les champs : + const mySearch=new SearchEngine(converter, { id:"search" }); 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 + + // Injection des filtres dans le convertisseur : converter.datasFilters=[filtre1,filtre2,filtre3, mySearch]; - // Ajout de champs permettant de classer les données - // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires + // 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. if(window.innerWidth >= 800) { let sortingField1=new SortingField(converter, 0); @@ -85,7 +90,7 @@ const initialise = async () => 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.datasCounterElt={ id:"compteur" }; converter.refreshView(); @@ -93,8 +98,9 @@ const initialise = async () => catch(e) { console.error(e); - if(document.getElementById("datas")!==null) - document.getElementById("datas")!.innerHTML="Désolé, mais un problème technique empêche l'affichage des données."; + document.getElementById("datas")!.innerHTML=`
Désolé, mais un problème technique empêche l'affichage des données.
`; } } + +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(); \ No newline at end of file diff --git a/src/demo/exampleWithHTML.ts b/src/demo/exampleWithHTML.ts index d15cd31..83fed6a 100644 --- a/src/demo/exampleWithHTML.ts +++ b/src/demo/exampleWithHTML.ts @@ -1,14 +1,15 @@ import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "../FreeDatas2HTML"; -const initialise = async () => +const initialise=async () => { try - { - // Création d'un convertisseur parsant des données transmises en HTML - let converter=new FreeDatas2HTML("HTML"); - await converter.run(); // parsage des données + { + // Création d'un convertisseur parsant des données transmises en HTML : + const converter=new FreeDatas2HTML("HTML"); + // 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(); if(window.innerWidth < 800) { @@ -26,24 +27,25 @@ const initialise = async () => } else { + // Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css : myRender.settings.allBegining="
"; converter.datasRender=myRender; } - // Configuration de la pagination + // Configuration de la pagination : 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.selectedValue=30; + pagination.selectedValue=15; converter.pagination=pagination; 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"} ); filtre1.filter2HTML(); converter.datasFilters=[filtre1]; - // Ajout de champs permettant de classer les données - // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires + // 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. if(window.innerWidth >= 800) { let sortingField1=new SortingField(converter, 2); @@ -51,16 +53,16 @@ const initialise = async () => converter.datasSortingFields=[sortingField1,sortingField2]; } - // Affichage initial + // Affichage initial : converter.datasViewElt={ id:"datas" }; - converter.datasCounterElt={ id:"compteur" }; - converter.refreshView(); + converter.refreshView(); } catch(e) { console.error(e); - if(document.getElementById("datas")!==null) - document.getElementById("datas")!.innerHTML="Désolé, mais un problème technique empêche l'affichage des données."; + document.getElementById("datas")!.innerHTML=`
Désolé, mais un problème technique empêche l'affichage des données.
`; } } + +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(); \ No newline at end of file diff --git a/src/demo/exampleWithJSON.ts b/src/demo/exampleWithJSON.ts index f6baf95..a786691 100644 --- a/src/demo/exampleWithJSON.ts +++ b/src/demo/exampleWithJSON.ts @@ -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 - { - // Création d'un convertisseur parsant des données transmises en JSON - let converter=new FreeDatas2HTML("JSON"); - converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] }); - await converter.run(); // parsage des données + { + // Création d'un convertisseur parsant des données transmises en JSON : + const converter=new FreeDatas2HTML("JSON"); + // Exemple d'utilisation de headers (bien qu'inutiles ici) : + 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(); if(window.innerWidth < 800) { @@ -27,19 +29,20 @@ const initialise = async () => } else { + // Ici, on adapte juste la balise encadrant l'ensemble des données pour passer une classe de paper.css : myRender.settings.allBegining="
"; converter.datasRender=myRender; } - - // Configuration de la pagination + + // Configuration de la pagination : 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; converter.pagination=pagination; pagination.options2HTML(); - // Ajout de champs permettant de classer les données - // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires + // 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. if(window.innerWidth >= 800) { let sortingField1=new SortingField(converter, 0); @@ -48,12 +51,24 @@ const initialise = async () => 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"} ); 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.datasCounterElt={ id:"compteur" }; converter.refreshView(); @@ -61,8 +76,9 @@ const initialise = async () => catch(e) { console.error(e); - if(document.getElementById("datas")!==null) - document.getElementById("datas")!.innerHTML="Désolé, mais un problème technique empêche l'affichage des données."; + document.getElementById("datas")!.innerHTML=`
Désolé, mais un problème technique empêche l'affichage des données.
`; } } + +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(); \ No newline at end of file diff --git a/src/demo/exampleWithUserFile.ts b/src/demo/exampleWithUserFile.ts index fb14840..1cd6770 100644 --- a/src/demo/exampleWithUserFile.ts +++ b/src/demo/exampleWithUserFile.ts @@ -4,37 +4,37 @@ const initialise = () => { try { - const dataDisplayElt=document.getElementById("datas"); - const dataDisplayOptionsElt=document.getElementById("displayOptions"); + // Éléments du DOM utilisés : + const dataDisplayElt=document.getElementById("datas") as HTMLElement; + const dataDisplayOptionsElt=document.getElementById("displayOptions") as HTMLElement; const myFile=document.getElementById("myFile") as HTMLInputElement; const myForm=document.getElementById("userSettings") as HTMLElement; const pagesElt=document.getElementById("pages") as HTMLElement; const paginationElt=document.getElementById("paginationOptions") as HTMLElement; const searchElt=document.getElementById("search") as HTMLElement; - 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;"); - 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="
"; + + myFile.addEventListener("change", function(e) + { + // Place nette pour le nouveau fichier : dataDisplayElt.innerHTML=""; dataDisplayOptionsElt.innerHTML=""; pagesElt.innerHTML=""; paginationElt.innerHTML=""; searchElt.innerHTML=""; - } - let converter : FreeDatas2HTML; - const myRender=new Render(); - // Attention, l'élément affichant le compteur n'est pas initialement présent dans la page : - myRender.settings.allBegining="
Nombre de résultats :
"; - - myFile.addEventListener("change", function(e) - { - reInitialise(); + // Création d'un convertisseur parsant les données du fichier CSV sélectionné : converter=new FreeDatas2HTML("CSV"); converter.datasRender=myRender; - + + // L'utilisateur a-t-il vraiment sélectionné un fichier ? + // Si oui, est-ce un fichier CSV ? const selectedFiles=myFile.files; if(selectedFiles !== null && selectedFiles.length === 1) { @@ -42,6 +42,7 @@ const initialise = () => dataDisplayOptionsElt.innerHTML=`

Le document que vous avez sélectionné ne semble pas être un fichier CSV valide.

`; else { + // Lecture du contenu du fichier qui est passé au parseur : const reader=new FileReader(); 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) { e.preventDefault(); dataDisplayElt.innerHTML=""; + + // Quels champs ont été sélectionnés ? let fields2Rend: number[]=[]; let checkBox: HTMLInputElement; for(let i=0; i < converter.fields.length; i++) @@ -75,16 +79,17 @@ const initialise = () => } if( fields2Rend.length === 0) - dataDisplayElt.innerHTML=`

Vous n'avez sélectionné aucun champ à afficher !

`; + dataDisplayElt.innerHTML=`

Merci de sélectionner les champs que vous souhaitez afficher !

`; else { converter.fields2Rend=fields2Rend; 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" }); 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="Saisir un moins 2 caractères"; @@ -93,8 +98,8 @@ const initialise = () => // + Pagination : 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; + pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,100,500] , name: "Choix de pagination :" }; + pagination.selectedValue=20; converter.pagination=pagination; pagination.options2HTML(); @@ -110,17 +115,26 @@ const initialise = () => converter.datasSortingFields.push(sortingField); } - // Actualisation de l'affichage + // Actualisation de l'affichage : 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) { console.error(e); - document.getElementById("datas")!.innerHTML=`Désolé, mais un problème imprévu empêche l'affichage des données.`; + document.getElementById("datas")!.innerHTML=`
Désolé, mais un problème technique empêche le fonctionnement normal de cette page.
`; } } +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(); \ No newline at end of file
Nombre de résultats :