Relecture du code
This commit is contained in:
parent
cf4802c9d2
commit
f5a4c7ba72
|
|
@ -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<any>
|
||||
|
|
@ -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]="<label for='CSVDatasSelector"+i+"'>"+colName+" : </label><select name='CSVDatasSelector"+i+"' id='CSVDatasSelector"+i+"'><option value='0'>----</option>";
|
||||
for(let j in values)
|
||||
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
|
||||
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="<table><thead>";
|
||||
for (let i in fields)
|
||||
datasHTML+="<th>"+fields[i]+"</th>";
|
||||
datasHTML+="</thead><tbody>";
|
||||
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+="<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>";
|
||||
// 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+="<td>"+datas[row][field]+"</td>";
|
||||
}
|
||||
datasHTML+="</tr>";
|
||||
}
|
||||
|
|
@ -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*/
|
||||
}
|
||||
Loading…
Reference in New Issue