2021-09-29 17:56:10 +02:00
|
|
|
const { compare }=require('natural-orderby');
|
|
|
|
const errors=require("./errors.js");
|
2021-08-10 15:56:53 +02:00
|
|
|
|
2021-10-18 10:37:44 +02:00
|
|
|
import { Counter, Datas, DatasRenders, DOMElement, Paginations, Parsers, ParseErrors, RemoteSources, Selectors, SortingFields, SortingFunctions } from "./interfaces";
|
2021-10-19 15:40:47 +02:00
|
|
|
import { Pagination} from "./Pagination";
|
2021-10-13 18:20:53 +02:00
|
|
|
import { ParserForCSV} from "./ParserForCSV";
|
2021-10-18 17:32:54 +02:00
|
|
|
import { ParserForHTML} from "./ParserForHTML";
|
2021-10-18 11:40:21 +02:00
|
|
|
import { ParserForJSON} from "./ParserForJSON";
|
2021-10-20 12:43:49 +02:00
|
|
|
import { Render} from "./Render";
|
2021-09-17 18:02:45 +02:00
|
|
|
import { Selector } from "./freeDatas2HTMLSelector";
|
2021-10-19 11:54:11 +02:00
|
|
|
import { SortingField } from "./SortingField";
|
2021-08-05 18:24:37 +02:00
|
|
|
|
2021-09-17 18:02:45 +02:00
|
|
|
export class FreeDatas2HTML
|
2021-08-05 18:24:37 +02:00
|
|
|
{
|
2021-09-23 17:19:31 +02:00
|
|
|
// L'élément HTML où afficher les données. Laisser à undefined si non affichées :
|
2021-09-29 17:56:10 +02:00
|
|
|
private _datasViewElt: DOMElement|undefined=undefined;
|
2021-09-23 17:19:31 +02:00
|
|
|
// Le moteur de rendu pour préparer l'affichage des données
|
|
|
|
public datasRender: DatasRenders;
|
|
|
|
// Le code HTML résultant :
|
2021-09-29 17:56:10 +02:00
|
|
|
public datasHTML: string = "";
|
|
|
|
// Le parseur :
|
|
|
|
public parser: Parsers; // public pour permettre de charger un parseur tiers après instanciation
|
2021-10-13 17:22:02 +02:00
|
|
|
// Type de données à traiter
|
2021-09-29 17:56:10 +02:00
|
|
|
public datasType: "CSV"|"HTML"|"JSON"|undefined;
|
|
|
|
|
|
|
|
// Le nom des champs trouvés dans les données :
|
2021-10-13 18:20:53 +02:00
|
|
|
public fields: string[]|undefined=undefined;
|
2021-09-17 18:02:45 +02:00
|
|
|
// Les données à proprement parler :
|
2021-10-06 16:54:20 +02:00
|
|
|
public datas: {[index: string]:any}[]=[];
|
2021-09-29 17:56:10 +02:00
|
|
|
// Les erreurs rencontrées durant le traitement des données reçues :
|
|
|
|
public parseErrors: ParseErrors[]|undefined;
|
|
|
|
// Doit-on tout arrêter si une erreur est rencontrée durant le traitement ?
|
2021-08-30 17:42:09 +02:00
|
|
|
public stopIfParseErrors: boolean = false;
|
2021-09-17 18:02:45 +02:00
|
|
|
|
2021-09-22 11:41:22 +02:00
|
|
|
// Les fonctions spécifiques de classement pour certains champs :
|
|
|
|
private _datasSortingFunctions: SortingFunctions[] = [];
|
2021-09-29 17:56:10 +02:00
|
|
|
// Les filtres possible sur certains champs :
|
2021-09-17 18:02:45 +02:00
|
|
|
datasSelectors: Selectors[] = [];
|
2021-09-29 17:56:10 +02:00
|
|
|
// Les champs pouvant être classés :
|
2021-09-20 18:01:09 +02:00
|
|
|
datasSortingFields: SortingFields[] = [];
|
2021-09-29 17:56:10 +02:00
|
|
|
// La dernier champ pour lequel le classement a été demandé :
|
2021-09-20 18:01:09 +02:00
|
|
|
datasSortedField: SortingFields|undefined;
|
2021-09-29 17:56:10 +02:00
|
|
|
// Éventuelle pagination :
|
2021-09-21 17:46:04 +02:00
|
|
|
pagination: Paginations|undefined;
|
2021-09-23 11:28:27 +02:00
|
|
|
// Affichage du nombre total de lignes de données (optionnel) :
|
|
|
|
private _datasCounter: Counter = {};
|
2021-09-22 12:29:43 +02:00
|
|
|
|
2021-09-23 17:19:31 +02:00
|
|
|
// J'initialiser avec des valeurs par défaut pouvant être surchargées par les setters
|
2021-10-11 16:44:20 +02:00
|
|
|
// Attention, si je transmets datasRemoteSource ici, il ne passera pas par un new RemoteSources()
|
|
|
|
// Il doit donc déjà avoir été testé
|
2021-10-13 17:22:02 +02:00
|
|
|
constructor(datasType:"CSV"|"HTML"|"JSON", datas2Parse="", datasRemoteSource?:RemoteSources)
|
2021-09-23 17:19:31 +02:00
|
|
|
{
|
|
|
|
this.datasRender=new Render(this);
|
2021-09-29 17:56:10 +02:00
|
|
|
switch (datasType)
|
|
|
|
{
|
|
|
|
case "CSV":
|
2021-10-11 16:44:20 +02:00
|
|
|
this.parser=new ParserForCSV(datasRemoteSource);
|
2021-09-29 17:56:10 +02:00
|
|
|
break;
|
|
|
|
case "HTML":
|
2021-10-13 12:41:34 +02:00
|
|
|
this.parser=new ParserForHTML(datasRemoteSource);
|
2021-09-29 17:56:10 +02:00
|
|
|
break;
|
|
|
|
case "JSON":
|
2021-10-11 16:44:20 +02:00
|
|
|
this.parser=new ParserForJSON(datasRemoteSource);
|
2021-09-29 17:56:10 +02:00
|
|
|
break;
|
|
|
|
}
|
|
|
|
if(datas2Parse !== "")
|
|
|
|
this.parser.datas2Parse=datas2Parse;
|
2021-09-23 17:19:31 +02:00
|
|
|
}
|
|
|
|
|
2021-09-22 12:29:43 +02:00
|
|
|
// Vérifie s'il y a bien un élément dans le DOM pour l'id fourni
|
|
|
|
public static checkInDOMById(checkedElt: DOMElement) : DOMElement
|
2021-08-05 18:24:37 +02:00
|
|
|
{
|
2021-09-22 12:29:43 +02:00
|
|
|
let searchEltInDOM=document.getElementById(checkedElt.id);
|
|
|
|
if(searchEltInDOM === null)
|
|
|
|
throw new Error(errors.converterElementNotFound+checkedElt.id);
|
2021-08-10 15:56:53 +02:00
|
|
|
else
|
|
|
|
{
|
2021-09-22 12:29:43 +02:00
|
|
|
checkedElt.eltDOM=searchEltInDOM;
|
|
|
|
return checkedElt;
|
2021-08-10 15:56:53 +02:00
|
|
|
}
|
2021-08-05 18:24:37 +02:00
|
|
|
}
|
2021-09-22 12:29:43 +02:00
|
|
|
|
2021-09-22 16:25:10 +02:00
|
|
|
// Vérifie qu'un champ existe bien dans les données
|
|
|
|
public checkFieldExist(nb: number) : boolean
|
|
|
|
{
|
2021-09-29 17:56:10 +02:00
|
|
|
if(this.fields === undefined || this.fields[nb] === undefined)
|
2021-09-22 16:25:10 +02:00
|
|
|
return false;
|
|
|
|
else
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
2021-09-22 12:29:43 +02:00
|
|
|
// Vérifie que l'élément devant afficher les données existe dans le DOM :
|
|
|
|
set datasViewElt(elt: DOMElement)
|
|
|
|
{
|
|
|
|
this._datasViewElt=FreeDatas2HTML.checkInDOMById(elt);
|
|
|
|
}
|
2021-08-05 18:24:37 +02:00
|
|
|
|
2021-09-17 18:02:45 +02:00
|
|
|
// Vérifie que les numéros de champs pour lesquels il y a des fonctions de classement spécifiques sont cohérents
|
2021-09-22 16:25:10 +02:00
|
|
|
// ! Ne peut être testé qu'après avoir reçu les données
|
2021-09-17 18:02:45 +02:00
|
|
|
set datasSortingFunctions(SortingFunctions: SortingFunctions[])
|
2021-09-06 17:25:30 +02:00
|
|
|
{
|
|
|
|
this._datasSortingFunctions=[];
|
2021-10-07 17:15:35 +02:00
|
|
|
for(let checkedFunction of SortingFunctions)
|
2021-09-06 17:25:30 +02:00
|
|
|
{
|
2021-10-07 17:15:35 +02:00
|
|
|
if(! this.checkFieldExist(checkedFunction.datasFieldNb))
|
2021-09-22 16:25:10 +02:00
|
|
|
throw new Error(errors.converterFieldNotFound);
|
|
|
|
else
|
2021-10-07 17:15:35 +02:00
|
|
|
this._datasSortingFunctions.push(checkedFunction);
|
2021-09-06 17:25:30 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-23 11:28:27 +02:00
|
|
|
// On teste l'id de l'élément du DOM où afficher le compteur s'il est fourni
|
|
|
|
set datasCounter(counterDisplayElement: DOMElement)
|
|
|
|
{
|
|
|
|
this._datasCounter={ displayElement: FreeDatas2HTML.checkInDOMById(counterDisplayElement), value: undefined };
|
|
|
|
}
|
|
|
|
|
|
|
|
// Retourne la valeur du compteur de lignes (sans l'élément DOM)
|
|
|
|
public getDatasCounterValue(): number|undefined
|
|
|
|
{
|
|
|
|
if(this._datasCounter !== undefined && this._datasCounter.value != undefined)
|
|
|
|
return this._datasCounter.value;
|
|
|
|
else
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
2021-09-20 18:01:09 +02:00
|
|
|
// Retourne l'éventuelle fonction spécifique de classement associée à un champ
|
2021-09-17 18:02:45 +02:00
|
|
|
public getSortingFunctionForField(datasFieldNb: number): SortingFunctions|undefined
|
2021-09-06 17:25:30 +02:00
|
|
|
{
|
2021-10-07 17:15:35 +02:00
|
|
|
for(let checkedFunction of this._datasSortingFunctions)
|
2021-09-06 17:25:30 +02:00
|
|
|
{
|
2021-10-07 17:15:35 +02:00
|
|
|
if(checkedFunction.datasFieldNb === datasFieldNb)
|
|
|
|
return checkedFunction;
|
2021-09-06 17:25:30 +02:00
|
|
|
}
|
|
|
|
return undefined;
|
|
|
|
}
|
2021-09-09 12:57:23 +02:00
|
|
|
|
2021-09-30 12:52:33 +02:00
|
|
|
// Traite les données fournies via le parseur adhoc
|
|
|
|
// Si un élément du DOM est fourni, appelle la fonction affichant les données
|
2021-08-10 15:56:53 +02:00
|
|
|
public async run(): Promise<any>
|
2021-10-11 16:44:20 +02:00
|
|
|
{
|
2021-09-29 17:56:10 +02:00
|
|
|
await this.parser.parse();
|
|
|
|
if(this.parser.parseResults === undefined)
|
|
|
|
throw new Error(errors.parserFail);
|
2021-08-11 15:24:00 +02:00
|
|
|
else
|
2021-09-29 17:56:10 +02:00
|
|
|
{
|
2021-09-30 12:52:33 +02:00
|
|
|
if(this.parser.parseResults.fields === undefined)
|
2021-09-29 17:56:10 +02:00
|
|
|
throw new Error(errors.parserDatasNotFound);
|
2021-09-30 12:52:33 +02:00
|
|
|
else if(this.stopIfParseErrors && this.parser.parseResults.errors !== undefined)
|
|
|
|
throw new Error(errors.parserMeetErrors);
|
2021-09-29 17:56:10 +02:00
|
|
|
else
|
|
|
|
{
|
2021-09-30 12:52:33 +02:00
|
|
|
// revoir l'intérêt de copier ces 3 attributs ?
|
|
|
|
this.fields=this.parser.parseResults.fields;
|
|
|
|
this.datas=this.parser.parseResults.datas;
|
|
|
|
this.parseErrors=this.parser.parseResults.errors;
|
|
|
|
if(this._datasViewElt !== undefined)
|
|
|
|
this.refreshView();
|
2021-09-29 17:56:10 +02:00
|
|
|
return true;
|
|
|
|
}
|
2021-08-11 17:25:56 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-09-30 12:52:33 +02:00
|
|
|
public refreshView() : void
|
2021-09-02 18:15:15 +02:00
|
|
|
{
|
2021-09-30 12:52:33 +02:00
|
|
|
if(this.fields === undefined || this._datasViewElt === undefined || this._datasViewElt.eltDOM === undefined)
|
2021-09-23 17:19:31 +02:00
|
|
|
throw new Error(errors.converterRefreshFail);
|
2021-09-30 12:52:33 +02:00
|
|
|
else
|
2021-09-02 18:15:15 +02:00
|
|
|
{
|
2021-09-30 12:52:33 +02:00
|
|
|
this.datasHTML=this.createDatas2Display(this.fields, this.datas);
|
|
|
|
this._datasViewElt.eltDOM.innerHTML=this.datasHTML;
|
|
|
|
// On réactive les éventuels champs de classement qui ont été écrasés
|
2021-10-07 17:15:35 +02:00
|
|
|
for(let field of this.datasSortingFields)
|
2021-09-30 12:52:33 +02:00
|
|
|
field.field2HTML();
|
2021-09-02 18:15:15 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-07 12:43:29 +02:00
|
|
|
private createDatas2Display(fields: string[], datas: any[]) : string
|
2021-08-11 17:25:56 +02:00
|
|
|
{
|
2021-09-20 18:01:09 +02:00
|
|
|
// Dois-je classer les données par rapport à un champ ?
|
|
|
|
if(this.datasSortedField !== undefined && this.datasSortedField.datasFieldNb !==undefined)
|
2021-09-02 18:15:15 +02:00
|
|
|
{
|
2021-09-20 18:01:09 +02:00
|
|
|
const field=fields[this.datasSortedField.datasFieldNb];
|
|
|
|
const fieldOrder=this.datasSortedField.order;
|
2021-09-06 17:25:30 +02:00
|
|
|
// Une fonction spécifique de classement a-t-elle été définie ?
|
2021-09-20 18:01:09 +02:00
|
|
|
if(this.getSortingFunctionForField(this.datasSortedField.datasFieldNb) !== undefined)
|
2021-09-06 17:25:30 +02:00
|
|
|
{
|
2021-09-20 18:01:09 +02:00
|
|
|
let myFunction=this.getSortingFunctionForField(this.datasSortedField.datasFieldNb);
|
|
|
|
datas.sort( (a, b) => { return myFunction!.sort(a[field], b[field], fieldOrder); });
|
2021-09-06 17:25:30 +02:00
|
|
|
}
|
|
|
|
else
|
2021-09-20 18:01:09 +02:00
|
|
|
datas.sort( (a, b) => compare( {order: fieldOrder} )(a[field], b[field]));
|
2021-09-02 18:15:15 +02:00
|
|
|
}
|
2021-09-21 17:46:04 +02:00
|
|
|
|
|
|
|
// Dois-je prendre en compte une pagination ?
|
2021-09-09 12:57:23 +02:00
|
|
|
let firstData=0;
|
2021-09-21 17:46:04 +02:00
|
|
|
if (this.pagination !== undefined && this.pagination.selectedValue !== undefined && this.pagination.pages !== undefined && this.pagination.pages.selectedValue !== undefined)
|
|
|
|
firstData=this.pagination.selectedValue*(this.pagination.pages.selectedValue-1);
|
|
|
|
let maxData = (this.pagination !== undefined && this.pagination.selectedValue !== undefined) ? this.pagination.selectedValue : datas.length+1;
|
2021-09-02 18:15:15 +02:00
|
|
|
|
2021-09-23 17:19:31 +02:00
|
|
|
// Création du tableau des données à afficher :
|
|
|
|
const datas2Display=[];
|
2021-09-09 12:57:23 +02:00
|
|
|
let nbVisible=0, nbTotal=0;
|
2021-08-11 17:25:56 +02:00
|
|
|
for (let row in datas)
|
|
|
|
{
|
2021-08-12 16:05:12 +02:00
|
|
|
let visible=true;
|
2021-09-17 18:02:45 +02:00
|
|
|
if(this.datasSelectors.length !== 0)
|
2021-08-11 17:25:56 +02:00
|
|
|
{
|
2021-09-09 12:57:23 +02:00
|
|
|
let i=0;
|
2021-09-17 18:02:45 +02:00
|
|
|
while(this.datasSelectors[i] !== undefined && visible===true)
|
2021-08-11 17:25:56 +02:00
|
|
|
{
|
2021-09-21 17:46:04 +02:00
|
|
|
visible=this.datasSelectors[i].dataIsOk(datas[row]);
|
2021-09-09 12:57:23 +02:00
|
|
|
i++;
|
2021-08-11 17:25:56 +02:00
|
|
|
}
|
|
|
|
}
|
2021-09-09 12:57:23 +02:00
|
|
|
if(visible && nbTotal >= firstData && nbVisible < maxData)
|
2021-08-11 17:25:56 +02:00
|
|
|
{
|
2021-09-23 17:19:31 +02:00
|
|
|
datas2Display.push(datas[row]);
|
2021-09-09 12:57:23 +02:00
|
|
|
nbVisible++;
|
|
|
|
nbTotal++;
|
2021-08-11 17:25:56 +02:00
|
|
|
}
|
2021-09-09 12:57:23 +02:00
|
|
|
else if(visible)
|
|
|
|
nbTotal++;
|
2021-08-11 17:25:56 +02:00
|
|
|
}
|
2021-09-23 11:28:27 +02:00
|
|
|
if(this._datasCounter !== undefined && this._datasCounter.displayElement !== undefined)
|
|
|
|
{
|
|
|
|
this._datasCounter.value=nbTotal;
|
|
|
|
this._datasCounter.displayElement.eltDOM!.innerHTML=""+nbTotal; // eltDOM ne peut être undefined (cf setter)
|
|
|
|
}
|
2021-09-21 17:46:04 +02:00
|
|
|
// Tout réaffichage peut entraîner une modification du nombre de pages (évolution filtres, etc.)
|
|
|
|
if(this.pagination !== undefined)
|
2021-10-20 12:36:09 +02:00
|
|
|
this.pagination.pages2HTML(nbTotal);
|
2021-09-23 17:19:31 +02:00
|
|
|
return this.datasRender.rend2HTML(datas2Display);
|
2021-08-10 15:56:53 +02:00
|
|
|
}
|
2021-09-20 18:01:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
// Permet l'appel des dépendances via un seul script
|
2021-10-19 15:40:47 +02:00
|
|
|
export { Pagination } from "./Pagination";
|
2021-10-20 12:43:49 +02:00
|
|
|
export { Render} from "./Render";
|
2021-09-20 18:01:09 +02:00
|
|
|
export { Selector } from "./freeDatas2HTMLSelector";
|
2021-10-19 11:54:11 +02:00
|
|
|
export { SortingField } from "./SortingField";
|