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

Revue des pages d'exemple (suite).

This commit is contained in:
Fabrice PENHOËT 2021-10-13 12:46:50 +02:00
parent 0b7ed284ae
commit b12ae3d8e3
8 changed files with 195 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
public/withCSV.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page d'exemple d'utilisation du script freeDatas2HTML pour visualiser des informations venant d'un fichier CSV.">
<meta name="robots" content="noindex">
<link rel="stylesheet" href="CSS/paper.min.css">
<link rel="stylesheet" href="CSS/fd2html.css">
<script src="JS/exampleWithCSV.app.js" defer></script>
<title>freeDatas2HTML : démo d'affichage de données venant d'un fichier CSV</title>
</head>
<body class="paper container">
<h1>freeDatas2HTML</h1>
<p><a href="./withJSON.html">Autre page d'exemple avec des données transmises en JSON</a>.</p>
<div class="row">
<div id="filtre1" class="sm-12 md-6 lg-4 col"></div>
<div id="filtre2" class="sm-12 md-6 lg-4 col"></div>
<div id="filtre3" class="sm-12 md-6 lg-4 col"></div>
<div id="paginationOptions" class="col-12 col"></div>
</div>
<h3>Nombre total de résultats : <span id="compteur"></span></h3>
<article id="datas">
<p>Si tout se passe bien, ce texte sera remplacé par un tableau de données extraites du fichier csv.</p>
</article>
<p id="pages"></p>
<aside><p>Les données affichées viennent d’<a href="datas/elements-chimiques.csv">un fichier CSV</a> reprenant une partie des informations trouvées <a href="https://fr.wikipedia.org/wiki/%C3%89l%C3%A9ment_chimique#Caract%C3%A9ristiques_des_diff%C3%A9rents_%C3%A9l%C3%A9ments" target="_blank">sur Wikipédia</a>.</p>
<p>Le dernier filtre (Mots-clés) permet de montrer la possibilité d’<b>extraire des données d’un champ ayant plusieurs valeurs par ligne</b>, ici séparées par une virgule, sachant que l’on peut désigner n’importe quel autre caractère séparateur.</p>
<p>Certains champs (=colonnes) peuvent être désignées comme devant permettre de <b>classer les données</b> : un 1ᵉʳ clic lance un classement par ordre croissant, le 2ᵉ pour ordre décroissant et ainsi de suite.</p>
<p>Il est également possible d’afficher le nombre total de résultats, avec prise en compte des éventuels filtres.</p>
<p>Une autre option permet de <b>paginer les résultats</b>.</p>
<p>Enfin il est possible d’<b>afficher les données autrement que sous forme de tableau HTML</b>. Si vous affichez cette page sur un écran large de moins de 800 px, les données seront simplement listées. Si vous avez un grand écran, vous pouvez visualiser cet affichage en faisant « Alt+Maj+M », puis « F5 ». Appuyez de nouveau sur « F5 », une fois de retour sur grand écran pour revoir le tableau.</p>
<p>Design basé sur <a href="https://www.getpapercss.com" target="_blank">PaperCSS</a></p></aside>
</body>
</html>

127
src/build/freeDatas2HTML.js
View File

@ -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) {

11
src/build/freeDatas2HTMLPagination.js
View File

@ -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 = "<label for='freeDatas2HTMLPaginationSelector'>" + this._options.name + " </label><select name='freeDatas2HTMLPaginationSelector' id='freeDatas2HTMLPaginationSelector'><option value='0'>----</option>";
for (var j in this._options.values)
selectorsHTML += "<option value='" + (Number(j) + 1) + "'>" + this._options.values[j] + "</option>";
for (var i = 0; i < this._options.values.length; i++)
selectorsHTML += "<option value='" + (i + 1) + "'>" + this._options.values[i] + "</option>";
selectorsHTML += "</select>";
this._options.displayElement.eltDOM.innerHTML = selectorsHTML;
var selectElement_1 = document.getElementById("freeDatas2HTMLPaginationSelector");

20
src/build/freeDatas2HTMLRender.js
View File

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

35
src/build/freeDatas2HTMLSelector.js
View File

@ -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 = "<label for='freeDatas2HTML_" + this._datasViewElt.id + "'>" + this.name + " : </label><select name='freeDatas2HTML_" + this._datasViewElt.id + "' id='freeDatas2HTML_" + this._datasViewElt.id + "'><option value='0'>----</option>";
for (var j in this.values)
selectorsHTML += "<option value='" + (Number(j) + 1) + "'>" + this.values[j] + "</option>";
for (var i = 0; i < this.values.length; i++)
selectorsHTML += "<option value='" + (i + 1) + "'>" + this.values[i] + "</option>";
selectorsHTML += "</select>";
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;
}

4
src/build/freeDatas2HTMLSortingField.js
View File

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

0
src/build/papaParseInterfaces.js
View File

68
src/exampleWithHTML.ts Normal file
View File

@ -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:"<h4>Affichage petits écrans !</h4>",
allEnding:"",
linesBegining:"<ul>",
linesEnding:"</ul>",
lineBegining:"<li><ul>",
lineEnding:"</ul></li>",
dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
};
converter.datasRender=myRender;
}
else
{
myRender.settings.allBegining="<table class='table-hover'>";
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="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
}
}
initialise();