From 733ba413dc610d796c44e504636b6c2cd9fadcbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Wed, 11 Aug 2021 17:25:56 +0200 Subject: [PATCH] =?UTF-8?q?Premi=C3=A8re=20version=20fonctionelle=20des=20?= =?UTF-8?q?filtres=20des=20donn=C3=A9es=20du=20fichier=20=20+=20tests.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/freeCSV2HTML.ts | 71 ++++++++++++++++++++++++++++----------- tests/fixtures.js | 8 +++-- tests/freeCSV2HTMLSpec.ts | 28 ++++++++++++--- 4 files changed, 81 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index 5aaf2ea..b802ddd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "freecsv2html", - "version": "0.1.0", + "version": "0.2.0", "description": "Conversion of a csv file into an HTML code with selection lists, data sorting, etc.", "main": "index.js", "scripts": { diff --git a/src/freeCSV2HTML.ts b/src/freeCSV2HTML.ts index 7400bdf..5c9079a 100644 --- a/src/freeCSV2HTML.ts +++ b/src/freeCSV2HTML.ts @@ -111,22 +111,9 @@ export class freeCSV2HTML } else { + let converter=this; // pour les situations ambigues // Affichage initial des données du fichier - this.datasHTML=""; - for (let i in this.parseMeta.fields) - this.datasHTML+=""; - this.datasHTML+=""; - for (let row in this.parseDatas) - { - this.datasHTML+=""; - for(let field in this.parseDatas[row]) - { - if( this.parseMeta.fields.indexOf(field) !== -1) // si les erreurs papaParse sont acceptées, il peut y avoir des données en trop : "__parsed_extra" - this.datasHTML+=""; - } - this.datasHTML+=""; - } - this.datasHTML+="
"+this.parseMeta.fields[i]+"
"+this.parseDatas[row][field]+"
"; + this.datasHTML=this.createDatasHTML(this.parseMeta.fields, this.parseDatas); this._datasViewElt.eltDOM.innerHTML=this.datasHTML; // Si demandé, création des listes permettant de filter les données @@ -156,16 +143,62 @@ export class freeCSV2HTML selectorsHTML[i]+=""; selectorsHTML[i]+=""; this._datasSelectors[i].eltDOM!.innerHTML=selectorsHTML[i];// je force avec "!", car l'existence de eltDOM a été testée par le setter. + // On rechargera les données lors de chaque choix de l'utilisateur + let selectElement = document.getElementById("CSVDatasSelector"+i) as HTMLInputElement; + selectElement.addEventListener('change', function(e) + { + converter.datasHTML=converter.createDatasHTML(converter.parseMeta!.fields as string[], converter.parseDatas); + converter._datasViewElt.eltDOM!.innerHTML=converter.datasHTML; + }); } - - // suite : https://stackoverflow.com/questions/19329978/change-selects-option-and-trigger-events-with-javascript } } } return true; - } - + } } + + private createDatasHTML(fields: string[], datas: any[]) : string + { + // Je vérifie si des valeurs ont été sélectionnées pour filter les données + let checkContainerExist: HTMLSelectElement|null, filters: any[] = []; + for(let i in this._datasSelectors) + { + checkContainerExist=document.querySelector("#"+ this._datasSelectors[i].id+" select"); + if(checkContainerExist != null && checkContainerExist.value != "0") + filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values![checkContainerExist.selectedIndex-1] }); + }// ! si on récupère innerHTML du select, certains caractères peuvent être modifiés ! + + let datasHTML=""; + for (let i in fields) + datasHTML+=""; + datasHTML+=""; + for (let row in datas) + { + let view=true; + if(filters.length !== 0) + { + for(let i in filters) + { + if(datas[row][filters[i].field] != filters[i].value) + view=false; + } + } + if(view) + { + datasHTML+=""; + for(let field in datas[row]) + { + if(fields.indexOf(field) !== -1) // si les erreurs papaParse sont acceptées, il peut y avoir des données en trop : "__parsed_extra" + datasHTML+=""; + } + datasHTML+=""; + } + } + datasHTML+="
"+fields[i]+"
"+datas[row][field]+"
"; + return datasHTML; + } + } /* Exemple d'appelle complet à papaparse : Papa.parse(url, { diff --git a/tests/fixtures.js b/tests/fixtures.js index be7ab3a..68a07ae 100644 --- a/tests/fixtures.js +++ b/tests/fixtures.js @@ -4,6 +4,8 @@ module.exports = datasHTML : '
Z (numéro atomique)ÉlémentSymboleFamilleAbondance des éléments dans la croûte terrestre (μg/k)
1HydrogèneHNon-métal> 100000
2HéliumHeGaz noble> 1 et < 100 000
3LithiumLiMétal alcalin> 1 et < 100 000
4BérylliumBeMétal alcalino-terreux> 1 et < 100 000
5BoreBMétalloïde> 1 et < 100 000
6CarboneCNon-métal> 100000
7AzoteNNon-métal> 1 et < 100 000
8OxygèneONon-métal> 100000
9FluorFHalogène> 100000
10NéonNeGaz noble> 1 et < 100 000
11SodiumNaMétal alcalin> 100000
12MagnésiumMgMétal alcalino-terreux> 100000
13AluminiumAlMétal pauvre> 100000
14SiliciumSiMétalloïde> 100000
15PhosphorePNon-métal> 100000
16SoufreSNon-métal> 100000
17ChloreClHalogène> 100000
18ArgonArGaz noble> 1 et < 100 000
19PotassiumKMétal alcalin> 100000
20CalciumCaMétal alcalino-terreux> 100000
21ScandiumScMétal de transition> 1 et < 100 000
22TitaneTiMétal de transition> 100000
23VanadiumVMétal de transition> 100000
24ChromeCrMétal de transition> 100000
25ManganèseMnMétal de transition> 100000
26FerFeMétal de transition> 100000
27CobaltCoMétal de transition> 1 et < 100 000
28NickelNiMétal de transition> 1 et < 100 000
29CuivreCuMétal de transition> 1 et < 100 000
30ZincZnMétal pauvre> 1 et < 100 000
31GalliumGaMétal pauvre> 1 et < 100 000
32GermaniumGeMétalloïde> 1 et < 100 000
33ArsenicAsMétalloïde> 1 et < 100 000
34SéléniumSeNon-métal> 1 et < 100 000
35BromeBrHalogène> 1 et < 100 000
36KryptonKrgaz rare≤ 1
37RubidiumRbMétal alcalin> 1 et < 100 000
38StrontiumSrMétal alcalino-terreux> 100000
39YttriumYMétal de transition> 1 et < 100 000
40ZirconiumZrMétal de transition> 100000
41NiobiumNbMétal de transition> 1 et < 100 000
42MolybdèneMoMétal de transition> 1 et < 100 000
43TechnétiumTcMétal de transitionTraces
44RuthéniumRuMétal de transition≤ 1
45RhodiumRhMétal de transition≤ 1
46PalladiumPdMétal de transition> 1 et < 100 000
47ArgentAgMétal de transition> 1 et < 100 000
48CadmiumCdMétal pauvre> 1 et < 100 000
49IndiumInMétal pauvre> 1 et < 100 000
50ÉtainSnMétal pauvre> 1 et < 100 000
51AntimoineSbMétalloïde> 1 et < 100 000
52TellureTeMétalloïde≤ 1
53IodeIHalogène> 1 et < 100 000
54XénonXegaz rare≤ 1
55CésiumCsMétal alcalin> 1 et < 100 000
56BaryumBaMétal alcalino-terreux> 100000
57LanthaneLaLanthanide> 1 et < 100 000
58CériumCeLanthanide> 1 et < 100 000
59PraséodymePrLanthanide> 1 et < 100 000
60NéodymeNdLanthanide> 1 et < 100 000
61ProméthiumPmLanthanideTraces
62SamariumSmLanthanide> 1 et < 100 000
63EuropiumEuLanthanide> 1 et < 100 000
64GadoliniumGdLanthanide> 1 et < 100 000
65TerbiumTbLanthanide> 1 et < 100 000
66DysprosiumDyLanthanide> 1 et < 100 000
67HolmiumHoLanthanide> 1 et < 100 000
68ErbiumErLanthanide> 1 et < 100 000
69ThuliumTmLanthanide> 1 et < 100 000
70YtterbiumYbLanthanide> 1 et < 100 000
71LutéciumLuLanthanide> 1 et < 100 000
72HafniumHfMétal de transition> 1 et < 100 000
73TantaleTaMétal de transition> 1 et < 100 000
74TungstèneWMétal de transition> 1 et < 100 000
75RhéniumReMétal de transition≤ 1
76OsmiumOsMétal de transition> 1 et < 100 000
77IridiumIrMétal de transition≤ 1
78PlatinePtMétal de transition> 1 et < 100 000
79OrAuMétal de transition> 1 et < 100 000
80MercureHgMétal pauvre> 1 et < 100 000
81ThalliumTlMétal pauvre> 1 et < 100 000
82PlombPbMétal pauvre> 1 et < 100 000
83BismuthBiMétal pauvre> 1 et < 100 000
84PoloniumPoMétal pauvre≤ 1
85AstateAtMétalloïdeTraces
86RadonRnGaz noble≤ 1
87FranciumFrMétal alcalinTraces
88RadiumRaMétal alcalino-terreux≤ 1
89ActiniumAcActinide≤ 1
90ThoriumThActinide> 1 et < 100 000
91ProtactiniumPaActinide≤ 1
92UraniumUActinide> 1 et < 100 000
93NeptuniumNpActinideTraces
94PlutoniumPuActinideTraces
95AmériciumAmActinideInexistant
96CuriumCmActinideInexistant
97BerkéliumBkActinideInexistant
98CaliforniumCfActinideInexistant
99EinsteiniumEsActinideInexistant
100FermiumFmActinideInexistant
101MendéléviumMdActinideInexistant
102NobéliumNoActinideInexistant
103LawrenciumLrActinideInexistant
104RutherfordiumRfMétal de transitionInexistant
105DubniumDbMétal de transitionInexistant
106SeaborgiumSgMétal de transitionInexistant
107BohriumBhMétal de transitionInexistant
108HassiumHsMétal de transitionInexistant
109MeitnériumMtIndéfinieInexistant
110DarmstadtiumDsIndéfinieInexistant
111RoentgeniumRgIndéfinieInexistant
112CoperniciumCnMétal de transitionInexistant
113NihoniumNhIndéfinieInexistant
114FléroviumFlIndéfinieInexistant
115MoscoviumMcIndéfinieInexistant
116LivermoriumLvIndéfinieInexistant
117TennesseTsIndéfinieInexistant
118OganessonOgIndéfinieInexistant
', selector1HTML: '', selector2HTML: '', - datasHTMLForSelect1: '
', - datasHTMLForSelect2:'
', -} \ No newline at end of file + datasHTMLForSelect1: '
Z (numéro atomique)ÉlémentSymboleFamilleAbondance des éléments dans la croûte terrestre (μg/k)
109MeitnériumMtIndéfinieInexistant
110DarmstadtiumDsIndéfinieInexistant
111RoentgeniumRgIndéfinieInexistant
113NihoniumNhIndéfinieInexistant
114FléroviumFlIndéfinieInexistant
115MoscoviumMcIndéfinieInexistant
116LivermoriumLvIndéfinieInexistant
117TennesseTsIndéfinieInexistant
118OganessonOgIndéfinieInexistant
', + datasHTMLForSelect2:'
Z (numéro atomique)ÉlémentSymboleFamilleAbondance des éléments dans la croûte terrestre (μg/k)
43TechnétiumTcMétal de transitionTraces
61ProméthiumPmLanthanideTraces
85AstateAtMétalloïdeTraces
87FranciumFrMétal alcalinTraces
93NeptuniumNpActinideTraces
94PlutoniumPuActinideTraces
', + datasHTMLForSelect3:'
Z (numéro atomique)ÉlémentSymboleFamilleAbondance des éléments dans la croûte terrestre (μg/k)
2HéliumHeGaz noble> 1 et < 100 000
10NéonNeGaz noble> 1 et < 100 000
18ArgonArGaz noble> 1 et < 100 000
', + datasHTMLForSelect4:'
Z (numéro atomique)ÉlémentSymboleFamilleAbondance des éléments dans la croûte terrestre (μg/k)
', +} \ No newline at end of file diff --git a/tests/freeCSV2HTMLSpec.ts b/tests/freeCSV2HTMLSpec.ts index 3737123..9dcd517 100644 --- a/tests/freeCSV2HTMLSpec.ts +++ b/tests/freeCSV2HTMLSpec.ts @@ -138,8 +138,8 @@ describe("freeCSV2HTML", () => expect(document.getElementById("selector1").innerHTML).toEqual(fixtures.selector1HTML); expect(document.getElementById("selector2").innerHTML).toEqual(fixtures.selector2HTML); }); - - it("Le choix d'un option dans un des sélecteurs doit modifier le contenu du tableau pour ne garder que les données valides pour ce choix et afficher toutes les données si sélection 0.", async () => + + it("Le choix d'un option dans un des sélecteurs doit modifier le contenu du tableau pour ne garder que les données correspondantes ou les afficher toutes si sélection 0.", async () => { converter.datasViewElt={ id:"datas" }; converter.datasSourceUrl="http://localhost:9876/datas/elements-chimiques.csv"; @@ -158,7 +158,7 @@ describe("freeCSV2HTML", () => expect(txtDatasViewsElt).toEqual(fixtures.datasHTML); selectElement = document.getElementById("CSVDatasSelector1") as HTMLInputElement; - selectElement.value="1"; + selectElement.value="4"; selectElement.dispatchEvent(new Event('change')); txtDatasViewsElt=document.getElementById("datas").innerHTML; expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect2); @@ -168,7 +168,25 @@ describe("freeCSV2HTML", () => txtDatasViewsElt=document.getElementById("datas").innerHTML; expect(txtDatasViewsElt).toEqual(fixtures.datasHTML); }); - - + + it("Si plusieurs sélecteurs sont utilisés, seules les données correspondant aux différents choix sont affichées.", async () => + { + converter.datasViewElt={ id:"datas" }; + converter.datasSourceUrl="http://localhost:9876/datas/elements-chimiques.csv"; + converter.datasSelectors=[{ colCSV:3, id:"selector1"},{ colCSV:4, id:"selector2"}]; + await converter.run(); + + let selectElement = document.getElementById("CSVDatasSelector0") as HTMLInputElement; + selectElement.value="2"; + selectElement = document.getElementById("CSVDatasSelector1") as HTMLInputElement; + selectElement.value="1"; + selectElement.dispatchEvent(new Event('change')); + let txtDatasViewsElt=document.getElementById("datas").innerHTML; + expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect3); + selectElement.value="4"; + selectElement.dispatchEvent(new Event('change')); + txtDatasViewsElt=document.getElementById("datas").innerHTML; + expect(txtDatasViewsElt).toEqual(fixtures.datasHTMLForSelect4); + }); }); }); \ No newline at end of file