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.parseMeta.fields[i]+"
";
- 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.parseDatas[row][field]+"
";
- }
- this.datasHTML+="
";
- }
- this.datasHTML+="
";
+ 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+="
"+fields[i]+"
";
+ 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+="
"+datas[row][field]+"
";
+ }
+ datasHTML+="
";
+ }
+ }
+ datasHTML+="
";
+ 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ément
Symbole
Famille
Abondance des éléments dans la croûte terrestre (μg/k)
',
-}
\ No newline at end of file
+ datasHTMLForSelect1: '
Z (numéro atomique)
Élément
Symbole
Famille
Abondance des éléments dans la croûte terrestre (μg/k)
109
Meitnérium
Mt
Indéfinie
Inexistant
110
Darmstadtium
Ds
Indéfinie
Inexistant
111
Roentgenium
Rg
Indéfinie
Inexistant
113
Nihonium
Nh
Indéfinie
Inexistant
114
Flérovium
Fl
Indéfinie
Inexistant
115
Moscovium
Mc
Indéfinie
Inexistant
116
Livermorium
Lv
Indéfinie
Inexistant
117
Tennesse
Ts
Indéfinie
Inexistant
118
Oganesson
Og
Indéfinie
Inexistant
',
+ datasHTMLForSelect2:'
Z (numéro atomique)
Élément
Symbole
Famille
Abondance des éléments dans la croûte terrestre (μg/k)
43
Technétium
Tc
Métal de transition
Traces
61
Prométhium
Pm
Lanthanide
Traces
85
Astate
At
Métalloïde
Traces
87
Francium
Fr
Métal alcalin
Traces
93
Neptunium
Np
Actinide
Traces
94
Plutonium
Pu
Actinide
Traces
',
+ datasHTMLForSelect3:'
Z (numéro atomique)
Élément
Symbole
Famille
Abondance des éléments dans la croûte terrestre (μg/k)
2
Hélium
He
Gaz noble
> 1 et < 100 000
10
Néon
Ne
Gaz noble
> 1 et < 100 000
18
Argon
Ar
Gaz noble
> 1 et < 100 000
',
+ datasHTMLForSelect4:'
Z (numéro atomique)
Élément
Symbole
Famille
Abondance 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