From b12ae3d8e33e92bd37c6e2f201e6452f004cfa26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Wed, 13 Oct 2021 12:46:50 +0200 Subject: [PATCH] Revue des pages d'exemple (suite). --- public/withCSV.html | 37 +++++++ src/build/freeDatas2HTML.js | 127 ++++++++++-------------- src/build/freeDatas2HTMLPagination.js | 11 +- src/build/freeDatas2HTMLRender.js | 20 ++-- src/build/freeDatas2HTMLSelector.js | 35 +++---- src/build/freeDatas2HTMLSortingField.js | 4 +- src/build/papaParseInterfaces.js | 0 src/exampleWithHTML.ts | 68 +++++++++++++ 8 files changed, 195 insertions(+), 107 deletions(-) create mode 100644 public/withCSV.html delete mode 100644 src/build/papaParseInterfaces.js create mode 100644 src/exampleWithHTML.ts diff --git a/public/withCSV.html b/public/withCSV.html new file mode 100644 index 0000000..ff83fc5 --- /dev/null +++ b/public/withCSV.html @@ -0,0 +1,37 @@ + + + + + + + + + + + freeDatas2HTML : démo d'affichage de données venant d'un fichier CSV + + +

freeDatas2HTML

+

Autre page d'exemple avec des données transmises en JSON.

+ +
+
+
+
+
+
+ +

Nombre total de résultats :

+
+

Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.

+
+

+ + + \ No newline at end of file diff --git a/src/build/freeDatas2HTML.js b/src/build/freeDatas2HTML.js index bc29d9e..69bce42 100644 --- a/src/build/freeDatas2HTML.js +++ b/src/build/freeDatas2HTML.js @@ -34,24 +34,38 @@ var __generator = (this && this.__generator) || function (thisArg, body) { if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; -var Papa = require("papaparse"); -var errors = require("./errors.js"); var compare = require('natural-orderby').compare; +var errors = require("./errors.js"); +import { ParserForCSV } from "./freeDatas2HTMLParserForCSV"; +import { ParserForHTML } from "./freeDatas2HTMLParserForHTML"; +import { ParserForJSON } from "./freeDatas2HTMLParserForJSON"; import { Render } from "./freeDatas2HTMLRender"; var FreeDatas2HTML = (function () { - function FreeDatas2HTML() { + function FreeDatas2HTML(datasType, datas2Parse, datasRemoteSource) { + if (datas2Parse === void 0) { datas2Parse = ""; } this._datasViewElt = undefined; this.datasHTML = ""; - this._datasSourceUrl = ""; - this.parseMetas = undefined; - this.parseDatas = []; - this.parseErrors = []; + this.fields = undefined; + this.datas = []; this.stopIfParseErrors = false; this._datasSortingFunctions = []; this.datasSelectors = []; this.datasSortingFields = []; this._datasCounter = {}; this.datasRender = new Render(this); + switch (datasType) { + case "CSV": + this.parser = new ParserForCSV(datasRemoteSource); + break; + case "HTML": + this.parser = new ParserForHTML(datasRemoteSource); + break; + case "JSON": + this.parser = new ParserForJSON(datasRemoteSource); + break; + } + if (datas2Parse !== "") + this.parser.datas2Parse = datas2Parse; } FreeDatas2HTML.checkInDOMById = function (checkedElt) { var searchEltInDOM = document.getElementById(checkedElt.id); @@ -63,7 +77,7 @@ var FreeDatas2HTML = (function () { } }; FreeDatas2HTML.prototype.checkFieldExist = function (nb) { - if (this.parseMetas === undefined || this.parseMetas.fields === undefined || this.parseMetas.fields[nb] === undefined) + if (this.fields === undefined || this.fields[nb] === undefined) return false; else return true; @@ -75,24 +89,15 @@ var FreeDatas2HTML = (function () { enumerable: true, configurable: true }); - Object.defineProperty(FreeDatas2HTML.prototype, "datasSourceUrl", { - set: function (url) { - if (url.trim().length === 0) - throw new Error(errors.parserNeedUrl); - else - this._datasSourceUrl = url.trim(); - }, - enumerable: true, - configurable: true - }); Object.defineProperty(FreeDatas2HTML.prototype, "datasSortingFunctions", { set: function (SortingFunctions) { this._datasSortingFunctions = []; - for (var i = 0; i < SortingFunctions.length; i++) { - if (!this.checkFieldExist(SortingFunctions[i].datasFieldNb)) + for (var _i = 0, SortingFunctions_1 = SortingFunctions; _i < SortingFunctions_1.length; _i++) { + var checkedFunction = SortingFunctions_1[_i]; + if (!this.checkFieldExist(checkedFunction.datasFieldNb)) throw new Error(errors.converterFieldNotFound); else - this._datasSortingFunctions.push(SortingFunctions[i]); + this._datasSortingFunctions.push(checkedFunction); } }, enumerable: true, @@ -112,64 +117,35 @@ var FreeDatas2HTML = (function () { return undefined; }; FreeDatas2HTML.prototype.getSortingFunctionForField = function (datasFieldNb) { - for (var i in this._datasSortingFunctions) { - if (this._datasSortingFunctions[i].datasFieldNb === datasFieldNb) - return this._datasSortingFunctions[i]; + for (var _i = 0, _a = this._datasSortingFunctions; _i < _a.length; _i++) { + var checkedFunction = _a[_i]; + if (checkedFunction.datasFieldNb === datasFieldNb) + return checkedFunction; } return undefined; }; - FreeDatas2HTML.prototype.parse = function () { - return __awaiter(this, void 0, void 0, function () { - var converter; - return __generator(this, function (_a) { - converter = this; - return [2, new Promise(function (resolve, reject) { - if (converter._datasSourceUrl !== "") { - Papa.parse(converter._datasSourceUrl, { - quoteChar: '"', - header: true, - complete: function (results) { - converter.parseErrors = results.errors; - converter.parseDatas = results.data; - var realFields = []; - for (var i in results.meta.fields) { - if (results.meta.fields[i].trim() !== "") - realFields.push(results.meta.fields[i]); - } - results.meta.fields = realFields; - converter.parseMetas = results.meta; - resolve(true); - }, - error: function (error) { - reject(new Error(errors.parserFail)); - }, - download: true, - skipEmptyLines: true, - }); - } - else - reject(new Error(errors.parserNeedUrl)); - })]; - }); - }); - }; FreeDatas2HTML.prototype.run = function () { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { switch (_a.label) { - case 0: - if (this._datasSourceUrl === "") - throw new Error(errors.parserNeedUrl); - return [4, this.parse()]; + case 0: return [4, this.parser.parse()]; case 1: _a.sent(); - if (this.parseDatas.length === 0 || this.parseMetas.fields === undefined) - throw new Error(errors.parserDatasNotFound); - else if (this.stopIfParseErrors && this.parseErrors.length !== 0) - console.error(this.parseErrors); + if (this.parser.parseResults === undefined) + throw new Error(errors.parserFail); else { - this.refreshView(); - return [2, true]; + if (this.parser.parseResults.fields === undefined) + throw new Error(errors.parserDatasNotFound); + else if (this.stopIfParseErrors && this.parser.parseResults.errors !== undefined) + throw new Error(errors.parserMeetErrors); + else { + this.fields = this.parser.parseResults.fields; + this.datas = this.parser.parseResults.datas; + this.parseErrors = this.parser.parseResults.errors; + if (this._datasViewElt !== undefined) + this.refreshView(); + return [2, true]; + } } return [2]; } @@ -177,14 +153,15 @@ var FreeDatas2HTML = (function () { }); }; FreeDatas2HTML.prototype.refreshView = function () { - if (this.parseMetas === undefined || this.parseMetas.fields === undefined) + if (this.fields === undefined || this._datasViewElt === undefined || this._datasViewElt.eltDOM === undefined) throw new Error(errors.converterRefreshFail); - this.datasHTML = this.createDatas2Display(this.parseMetas.fields, this.parseDatas); - if (this._datasViewElt !== undefined && this._datasViewElt.eltDOM !== undefined) + else { + this.datasHTML = this.createDatas2Display(this.fields, this.datas); this._datasViewElt.eltDOM.innerHTML = this.datasHTML; - for (var i in this.datasSortingFields) { - var field = this.datasSortingFields[i]; - field.field2HTML(); + for (var _i = 0, _a = this.datasSortingFields; _i < _a.length; _i++) { + var field = _a[_i]; + field.field2HTML(); + } } }; FreeDatas2HTML.prototype.createDatas2Display = function (fields, datas) { diff --git a/src/build/freeDatas2HTMLPagination.js b/src/build/freeDatas2HTMLPagination.js index a00fcfb..3277467 100644 --- a/src/build/freeDatas2HTMLPagination.js +++ b/src/build/freeDatas2HTMLPagination.js @@ -3,7 +3,7 @@ import { FreeDatas2HTML } from "./freeDatas2HTML"; var Pagination = (function () { function Pagination(converter, pagesElt, pagesName) { if (pagesName === void 0) { pagesName = "Pages"; } - if (converter.parseMetas === undefined || converter.parseMetas.fields === undefined) + if (converter.fields === undefined) throw new Error(errors.paginationNeedDatas); else { this._pages = { displayElement: FreeDatas2HTML.checkInDOMById(pagesElt), name: pagesName }; @@ -36,8 +36,9 @@ var Pagination = (function () { options.displayElement = FreeDatas2HTML.checkInDOMById(options.displayElement); if (options.values.length === 0) throw new Error(errors.paginationNeedOptionsValues); - for (var i in options.values) { - if (!Pagination.isPositiveInteger(options.values[i])) + for (var _i = 0, _a = options.values; _i < _a.length; _i++) { + var option = _a[_i]; + if (!Pagination.isPositiveInteger(option)) throw new Error(errors.needPositiveInteger); } if (this.selectedValue !== undefined && options.values.indexOf(this.selectedValue) === -1) @@ -61,8 +62,8 @@ var Pagination = (function () { throw new Error(errors.pagination2HTMLFail); else { var selectorsHTML = ""; this._options.displayElement.eltDOM.innerHTML = selectorsHTML; var selectElement_1 = document.getElementById("freeDatas2HTMLPaginationSelector"); diff --git a/src/build/freeDatas2HTMLRender.js b/src/build/freeDatas2HTMLRender.js index 4e81e4c..23a0be1 100644 --- a/src/build/freeDatas2HTMLRender.js +++ b/src/build/freeDatas2HTMLRender.js @@ -6,24 +6,28 @@ var Render = (function () { this.settings = settings; } Render.prototype.rend2HTML = function (datas) { - if (this._converter.parseMetas === undefined || this._converter.parseMetas.fields === undefined) + if (this._converter.fields === undefined) throw new Error(errors.renderNeedDatas); else { var datasHTML = this.settings.allBegining; if (this.settings.fieldsBegining !== undefined && this.settings.fieldDisplaying !== undefined && this.settings.fieldsEnding !== undefined) { datasHTML += this.settings.fieldsBegining; - for (var i in this._converter.parseMetas.fields) - datasHTML += this.settings.fieldDisplaying.replace("#FIELDNAME", this._converter.parseMetas.fields[Number(i)]); + for (var _i = 0, _a = this._converter.fields; _i < _a.length; _i++) { + var field = _a[_i]; + datasHTML += this.settings.fieldDisplaying.replace("#FIELDNAME", field); + } datasHTML += this.settings.fieldsEnding; } datasHTML += this.settings.linesBegining; - for (var row in datas) { + for (var _b = 0, datas_1 = datas; _b < datas_1.length; _b++) { + var row = datas_1[_b]; datasHTML += this.settings.lineBegining; - for (var field in datas[row]) { - if (this._converter.parseMetas.fields.indexOf(field) !== -1) - datasHTML += this.settings.dataDisplaying.replace("#VALUE", datas[row][field]).replace("#FIELDNAME", field); + for (var _c = 0, _d = this._converter.fields; _c < _d.length; _c++) { + var field = _d[_c]; + if (row[field] !== undefined) + datasHTML += this.settings.dataDisplaying.replace("#VALUE", row[field]).replace("#FIELDNAME", field); else - console.log(errors.renderUnknownField + field); + datasHTML += this.settings.dataDisplaying.replace("#VALUE", "").replace("#FIELDNAME", field); } datasHTML += this.settings.lineEnding; } diff --git a/src/build/freeDatas2HTMLSelector.js b/src/build/freeDatas2HTMLSelector.js index 8194dbc..4120656 100644 --- a/src/build/freeDatas2HTMLSelector.js +++ b/src/build/freeDatas2HTMLSelector.js @@ -6,7 +6,7 @@ var Selector = (function () { this._datasViewElt = { id: "", eltDOM: undefined }; this.name = ""; this.values = []; - if (converter.parseMetas === undefined || converter.parseMetas.fields === undefined || converter.parseDatas.length === 0) + if (converter.fields === undefined || converter.datas.length === 0) throw new Error(errors.selectorNeedDatas); else if (!converter.checkFieldExist(Number(datasFieldNb))) throw new Error(errors.selectorFieldNotFound); @@ -47,19 +47,19 @@ var Selector = (function () { if (this._converter === undefined || this._datasViewElt.eltDOM === undefined || this._datasFieldNb === undefined) throw new Error(errors.selector2HTMLFail); else { - this.name = this._converter.parseMetas.fields[this._datasFieldNb]; - for (var row in this._converter.parseDatas) { + this.name = this._converter.fields[this._datasFieldNb]; + for (var _i = 0, _a = this._converter.datas; _i < _a.length; _i++) { + var row = _a[_i]; if (this._separator === undefined) { - var checkedValue = String(this._converter.parseDatas[row][this.name]).trim(); - if (checkedValue !== "" && this.values.indexOf(checkedValue) === -1) - this.values.push(checkedValue); + if (row[this.name] !== "" && this.values.indexOf(row[this.name]) === -1) + this.values.push(row[this.name]); } else { - var checkedValues = String(this._converter.parseDatas[row][this.name]).split(this._separator); - for (var i in checkedValues) { - var checkedValue = checkedValues[i].trim(); - if (checkedValue !== "" && this.values.indexOf(checkedValue) === -1) - this.values.push(checkedValue); + var checkedValues = row[this.name].split(this._separator); + for (var _b = 0, checkedValues_1 = checkedValues; _b < checkedValues_1.length; _b++) { + var value = checkedValues_1[_b]; + if (value !== "" && this.values.indexOf(value) === -1) + this.values.push(value); } } } @@ -69,8 +69,8 @@ var Selector = (function () { else this.values.sort(compare()); var selectorsHTML = ""; this._datasViewElt.eltDOM.innerHTML = selectorsHTML; var selectElement = document.getElementById("freeDatas2HTML_" + this._datasViewElt.id), mySelector_1 = this; @@ -101,16 +101,17 @@ var Selector = (function () { return false; var selectedValueTxt = this.values[selectedValue]; if (this._separator === undefined) { - if (data[this.name].trim() !== selectedValueTxt) + if (data[this.name] !== selectedValueTxt) return false; else return true; } else { var find = false; - var checkedValues = String(data[this.name]).split(this._separator); - for (var j in checkedValues) { - if (checkedValues[j].trim() === selectedValueTxt) { + var checkedValues = data[this.name].split(this._separator); + for (var _i = 0, checkedValues_2 = checkedValues; _i < checkedValues_2.length; _i++) { + var value = checkedValues_2[_i]; + if (value === selectedValueTxt) { find = true; break; } diff --git a/src/build/freeDatas2HTMLSortingField.js b/src/build/freeDatas2HTMLSortingField.js index ba5279e..bd41260 100644 --- a/src/build/freeDatas2HTMLSortingField.js +++ b/src/build/freeDatas2HTMLSortingField.js @@ -4,7 +4,7 @@ var SortingField = (function () { function SortingField(converter, datasFieldNb, fieldsDOMSelector) { if (fieldsDOMSelector === void 0) { fieldsDOMSelector = "th"; } this._order = undefined; - if (converter.parseMetas === undefined || converter.parseMetas.fields === undefined) + if (converter.fields === undefined) throw new Error(errors.sortingFieldNeedDatas); else if (!converter.checkFieldExist(Number(datasFieldNb))) throw new Error(errors.sortingFieldFieldNotFound); @@ -12,7 +12,7 @@ var SortingField = (function () { var fields = document.querySelectorAll(fieldsDOMSelector); if (fields === undefined) throw new Error(errors.sortingFieldsNotInHTML); - else if (fields.length !== converter.parseMetas.fields.length) + else if (fields.length !== converter.fields.length) throw new Error(errors.sortingFieldsNbFail); else { this._converter = converter; diff --git a/src/build/papaParseInterfaces.js b/src/build/papaParseInterfaces.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/exampleWithHTML.ts b/src/exampleWithHTML.ts new file mode 100644 index 0000000..7a0cff7 --- /dev/null +++ b/src/exampleWithHTML.ts @@ -0,0 +1,68 @@ +import { FreeDatas2HTML, Pagination, Render, Selector, SortingField } from "./freeDatas2HTML"; + +const initialise = async () => +{ + try + { + // Création d'un convertisseur parsant des données transmises en HTML + let converter=new FreeDatas2HTML("HTML"); + // converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] }); + converter.datasViewElt={ id:"datas" }; + await converter.run(); + // Adaptation du rendu suivant la taille de l'écran + const myRender=new Render(converter); + if(window.innerWidth < 800) + { + myRender.settings= + { + allBegining:"

Affichage petits écrans !

", + allEnding:"", + linesBegining:"", + lineBegining:"
    • ", + dataDisplaying:"
  • #FIELDNAME : #VALUE
    • ", + }; + converter.datasRender=myRender; + } + else + { + myRender.settings.allBegining=""; + converter.datasRender=myRender; + } + + // Configuration de la pagination + const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :"); + pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50,100] , name: "Nombre de lignes par page :" }; + pagination.selectedValue=15; + converter.pagination=pagination; + pagination.rend2HTML(); + + // Affichage initial + converter.datasCounter={ id:"compteur" }; + await converter.run(); + + // Création d'un filtre par auteur : + let filtre1=new Selector(converter, 3, { id:"filtre1"} ); + filtre1.selector2HTML(); + converter.datasSelectors=[filtre1]; + + // Ajout de champs permettant de classer les données + // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires + if(window.innerWidth >= 800) + { + let sortingField1=new SortingField(converter, 2); + sortingField1.field2HTML(); + let sortingField2=new SortingField(converter, 3); + sortingField2.field2HTML(); + converter.datasSortingFields=[sortingField1,sortingField2]; + } + } + catch(e) + { + console.error(e); + if(document.getElementById("datas")!==null) + document.getElementById("datas")!.innerHTML="Désolé, mais un problème technique empêche l'affichage des données."; + } +} +initialise(); \ No newline at end of file