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

Première version fonctionelle des filtres des données du fichier + tests.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-08-11 17:25:56 +02:00
parent 1cf6710c07
commit 733ba413dc
4 changed files with 81 additions and 28 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": "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": {

71
src/freeCSV2HTML.ts
View File

@ -111,22 +111,9 @@ export class freeCSV2HTML
}
else
{
let converter=this; // pour les situations ambigues
// Affichage initial des données du fichier
this.datasHTML="<table><thead>";
for (let i in this.parseMeta.fields)
this.datasHTML+="<th>"+this.parseMeta.fields[i]+"</th>";
this.datasHTML+="</thead><tbody>";
for (let row in this.parseDatas)
{
this.datasHTML+="<tr>";
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+="<td>"+this.parseDatas[row][field]+"</td>";
}
this.datasHTML+="</tr>";
}
this.datasHTML+="</tbody></table>";
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]+="<option value='"+(Number(j)+1)+"'>"+values[j]+"</option>";
selectorsHTML[i]+="</select>";
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="<table><thead>";
for (let i in fields)
datasHTML+="<th>"+fields[i]+"</th>";
datasHTML+="</thead><tbody>";
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+="<tr>";
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+="<td>"+datas[row][field]+"</td>";
}
datasHTML+="</tr>";
}
}
datasHTML+="</tbody></table>";
return datasHTML;
}
}
/* Exemple d'appelle complet à papaparse :
Papa.parse(url, {

8
tests/fixtures.js
View File

File diff suppressed because one or more lines are too long

28
tests/freeCSV2HTMLSpec.ts
View File

@ -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);
});
});
});