From f5382564ec1f04d7f0836781e5201080f4519c69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Tue, 2 Nov 2021 18:04:20 +0100 Subject: [PATCH] =?UTF-8?q?Premi=C3=A8re=20version=20de=20la=20page=20perm?= =?UTF-8?q?ettant=20d'afficher=20un=20fichier=20s=C3=A9lectionn=C3=A9=20pa?= =?UTF-8?q?r=20l'utilisateur.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/userFile.html | 43 ++++++++++++++++ src/exampleWithUserFile.ts | 100 +++++++++++++++++++++++++++++++++++++ webpack.config.js | 1 + 3 files changed, 144 insertions(+) create mode 100644 public/userFile.html create mode 100644 src/exampleWithUserFile.ts diff --git a/public/userFile.html b/public/userFile.html new file mode 100644 index 0000000..02489b0 --- /dev/null +++ b/public/userFile.html @@ -0,0 +1,43 @@ + + + + + + + + + + + freeDatas2HTML : afficher les données d'un fichier CSV dans une page web + + +

freeDatas2HTML

+

Afficher votre fichier CSV dans la page web

+

Sur cette page vous permet de tester directement freeDatas2HTML en affichant les données d'un fichier CSV de votre choix, en choisissant en options les champs à afficher, sur lesquels filter filter les données, faire des recherche... ou encore le nombre de lignes par page.

+

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.

+
+
+ Configuration + +
+
+
+ +
+ +
+
+
+
+
+ +
+ + +
+
+

+ + + \ No newline at end of file diff --git a/src/exampleWithUserFile.ts b/src/exampleWithUserFile.ts new file mode 100644 index 0000000..34f8225 --- /dev/null +++ b/src/exampleWithUserFile.ts @@ -0,0 +1,100 @@ +import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML"; + +const initialise = async () => +{ + try + { + const myForm=document.getElementById("userSettings") as HTMLElement; + const myFile=document.getElementById("myFile") as HTMLInputElement; + const dataDisplayElt=document.getElementById("datas"); + const dataDisplayOptionsElt=document.getElementById("displayOptions"); + + if(myFile === null || myForm === null || dataDisplayOptionsElt === null || dataDisplayElt === null) + throw new Error("Certains éléments nécessaires n'ont pas été trouvés dans le DOM;"); + + const converter=new FreeDatas2HTML("CSV"); + + myFile.addEventListener("change", function(e) + { + dataDisplayElt.innerHTML=""; + dataDisplayOptionsElt.innerHTML=""; + const selectedFiles=myFile.files; + if(selectedFiles !== null && selectedFiles.length === 1) + { + if(selectedFiles[0].type !== "text/csv" && selectedFiles[0].type !== "text/tsv") + dataDisplayOptionsElt.innerHTML=`

Le fichier que vous avez sélectionné ne semble pas être un fichier CSV ?

`; + else + { + const reader=new FileReader(); + reader.onload=async function(e) + { + converter.parser.datas2Parse=reader.result as string; + await converter.run(); + + let fieldsSelectorHTML=`
Quels champs souhaitez-vous afficher ?`; + let filtersSelectorHTML=`
Avec quels champs souhaitez-vous pouvoir filtrer vos données ?`; + for(let i=0; i < converter.fields.length; i++) + { + fieldsSelectorHTML+=``; + filtersSelectorHTML+=``; + } + fieldsSelectorHTML+=`
`; + filtersSelectorHTML+=`
`; + dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+filtersSelectorHTML+``; + }; + reader.readAsText(selectedFiles[0]); + } + } + }); + + myForm.addEventListener("submit", function(e) + { + e.preventDefault(); + const fields2Rend: number[]=[]; + let checkBox: HTMLInputElement, nbSelector=0; + for(let i=0; i < converter.fields.length; i++) + { + checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement; + if(checkBox !== null) + { + if(checkBox.checked) + fields2Rend.push(i); + } + if(nbSelector < 3) + { + checkBox=document.getElementById("selectedFilter_"+i) as HTMLInputElement; + if(checkBox !== null) + { + if(checkBox.checked) + { + nbSelector++; + let filtre1=new Selector(converter, i, { id:"filtre"+nbSelector} ); + filtre1.filter2HTML(); + converter.datasFilters.push(filtre1); + } + } + } + } + + /// + rendre classable toutes les colonnes + /// + ajout moteur de recherche + /// + nombre de résultat + /// + rendu autre que tableau ou alors permettre scroll horizontale ? + if( fields2Rend.length === 0) + dataDisplayElt.innerHTML=`

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

`; + else + { + converter.fields2Rend=fields2Rend; + converter.datasViewElt={ id:"datas" }; + converter.run();// run pour prendre les champs à afficher, mais refreshView devrait suffire ! + } + }); + } + 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."; + } +} +initialise(); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 572b877..4990bb0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,6 +8,7 @@ module.exports = exampleWithCSV: "./src/exampleWithCSV.ts", exampleWithHTML: "./src/exampleWithHTML.ts", exampleWithJSON: "./src/exampleWithJSON.ts", + exampleWithUserFile: "./src/exampleWithUserFile.ts" }, output: {