diff --git a/src/freeCSV2HTML.ts b/src/freeCSV2HTML.ts index 5c9079a..b589b27 100644 --- a/src/freeCSV2HTML.ts +++ b/src/freeCSV2HTML.ts @@ -17,7 +17,6 @@ interface selectors extends domElement export class freeCSV2HTML { - // Configuration : private _datasViewElt: domElement = { id:"", eltDOM:undefined }; private _datasSourceUrl: string = ""; private _datasSelectors: selectors[] = []; @@ -25,7 +24,7 @@ export class freeCSV2HTML public parseMeta: papaParseMeta|undefined = undefined; public parseDatas: papaParseDatas[] = []; public parseErrors: papaParseErrors[] = []; - private datasHTML: string = ""; + public datasHTML: string = ""; set datasViewElt(elt: domElement) { @@ -39,7 +38,6 @@ export class freeCSV2HTML } } - // Pas plus de tests + poussés, car nombreux protocoles possibles pour l'url du fichier. À revoir. set datasSourceUrl(url: string) { if(url.trim().length === 0) @@ -47,7 +45,7 @@ export class freeCSV2HTML else this._datasSourceUrl=url.trim(); } - + set datasSelectors(selectionElts: selectors[]) { let checkContainerExist: HTMLElement|null; @@ -57,11 +55,11 @@ export class freeCSV2HTML if(checkContainerExist === null) throw new Error(errors.elementNotFound+selectionElts[i].id); else if(Number.isInteger( selectionElts[i].colCSV) === false || selectionElts[i].colCSV < 0) - throw new Error(errors.needNaturalNumber); // La validité réelle du numéro de colonne ne peut être vérifée qu'après le parsage. + throw new Error(errors.needNaturalNumber); else selectionElts[i].eltDOM=checkContainerExist; } - this._datasSelectors= selectionElts; + this._datasSelectors=selectionElts; } public async parse(): Promise @@ -78,7 +76,7 @@ export class freeCSV2HTML complete: function(results :any) { converter.parseMeta=results.meta; - converter.parseErrors=results.errors; // prévoir option bloquant la suite à la moindre erreur trouvée ? + converter.parseErrors=results.errors; converter.parseDatas=results.data; resolve(true); }, @@ -99,19 +97,18 @@ export class freeCSV2HTML { if (this._datasViewElt.eltDOM === undefined) throw new Error(errors.needDatasElt); - else if(this._datasSourceUrl === "" ) + if(this._datasSourceUrl === "" ) throw new Error(errors.needUrl); - await this.parse(); - if(this.parseDatas.length === 0 || this.parseMeta === undefined || this.parseMeta.fields === undefined) + if(this.parseDatas.length === 0 || this.parseMeta!.fields === undefined) // je force avec "!", car l'existence de parseMeta certaine après parse(). { this._datasViewElt.eltDOM.innerHTML=errors.datasNotFound; return false; } else { - let converter=this; // pour les situations ambigues + let converter=this; // Affichage initial des données du fichier this.datasHTML=this.createDatasHTML(this.parseMeta.fields, this.parseDatas); this._datasViewElt.eltDOM.innerHTML=this.datasHTML; @@ -130,20 +127,22 @@ export class freeCSV2HTML let values=[], colName=this.parseMeta.fields[this._datasSelectors[i].colCSV]; for (let row in this.parseDatas) { - if(values.indexOf(this.parseDatas[row][colName]) === -1) - values.push(this.parseDatas[row][colName]); + if(values.indexOf(this.parseDatas[row][colName].trim()) === -1) + values.push(this.parseDatas[row][colName].trim()); + // Des espaces gauche pourraient fausser le classement alphabétique. + // Donc réutiliser le trim() lorsque l'on filtre l'affichage des données. } if(values.length > 0) { - values.sort(); // revoir le problème des chiffres, dates, etc. https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/sort + values.sort(); this._datasSelectors[i].name = colName; this._datasSelectors[i].values=values; 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 + this._datasSelectors[i].eltDOM!.innerHTML=selectorsHTML[i]; + // On recharge l'affichage des données lors de chaque choix de l'utilisateur : let selectElement = document.getElementById("CSVDatasSelector"+i) as HTMLInputElement; selectElement.addEventListener('change', function(e) { @@ -160,37 +159,40 @@ export class freeCSV2HTML 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[] = []; + // Je vérifie si des valeurs ont été sélectionnées pour filter les données. + let checkSelectorExist: 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 ! - + // Attention : je peux avoir des _datasSelectors fournis, mais pas de liste dans le DOM si aucune donnée ou autre problème. + checkSelectorExist=document.querySelector("#"+ this._datasSelectors[i].id+" select"); + if(checkSelectorExist != null && checkSelectorExist.value != "0") + filters.push({ field: this._datasSelectors[i].name, value: this._datasSelectors[i].values![checkSelectorExist.selectedIndex-1] }); + // Attention : si on récupère innerHTML du select, certains caractères peuvent être modifiés ! + } + // Création du tableau de données : let datasHTML=""; for (let i in fields) datasHTML+=""; datasHTML+=""; for (let row in datas) { - let view=true; + let visible=true; if(filters.length !== 0) { for(let i in filters) { - if(datas[row][filters[i].field] != filters[i].value) - view=false; + if(datas[row][filters[i].field].trim() != filters[i].value) + visible=false; } } - if(view) + if(visible) { 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+=""; + // Attention : si les erreurs papaParse ne sont pas bloquantes, il peut y avoir des données en trop, avec comme nom de colonne : "__parsed_extra" + if(fields.indexOf(field) !== -1) + datasHTML+=""; } datasHTML+=""; } @@ -199,39 +201,4 @@ export class freeCSV2HTML return datasHTML; } -} -/* Exemple d'appelle complet à papaparse : - Papa.parse(url, { - delimiter :"", - newline: "", - quoteChar:'"',// à proposer en option - escapeChar:"",// idem - header:true, - transformHeader:"", - dynamicTyping:false, - preview:0, - encoding:"", - worker:true, - comments:"", - step:"",// prévoir en option pour très gros fichiers ? - complete: function(results :any) - { - console.log(results.meta); - console.log(results.data[35]); - console.log(results.errors); - }, - error:function(error :any) - { - console.log(error); - }, - download: true,// nécessaire pour un accès via "http..." - downloadRequestBody:false, - skipEmptyLines: true, - chunk:"", - fastMode:"", - beforeFirstChunk:"", - withCredentials:false, - transform: "", // à revoir - delimitersToGuess:"" - }); - * // https://www.papaparse.com/docs#config*/ \ No newline at end of file +} \ No newline at end of file
"+fields[i]+"
"+datas[row][field]+""+datas[row][field]+"