Nouvelle version application avec ajout d'une extension créant des liens de classement stand alone (+ tests et build).
parent
d7ae990e07
commit
38637443e2
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,83 @@
|
||||
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
||||
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
||||
return new (P || (P = Promise))(function (resolve, reject) {
|
||||
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
||||
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
||||
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
||||
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
||||
});
|
||||
};
|
||||
var __generator = (this && this.__generator) || function (thisArg, body) {
|
||||
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
||||
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
||||
function verb(n) { return function (v) { return step([n, v]); }; }
|
||||
function step(op) {
|
||||
if (f) throw new TypeError("Generator is already executing.");
|
||||
while (_) try {
|
||||
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
||||
if (y = 0, t) op = [op[0] & 2, t.value];
|
||||
switch (op[0]) {
|
||||
case 0: case 1: t = op; break;
|
||||
case 4: _.label++; return { value: op[1], done: false };
|
||||
case 5: _.label++; y = op[1]; op = [0]; continue;
|
||||
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
||||
default:
|
||||
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
||||
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
||||
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
||||
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
||||
if (t[2]) _.ops.pop();
|
||||
_.trys.pop(); continue;
|
||||
}
|
||||
op = body.call(thisArg, _);
|
||||
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
||||
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
||||
}
|
||||
};
|
||||
import { FreeDatas2HTML, Render, SortingField } from "../FreeDatas2HTML";
|
||||
import { SortingFieldsStandAlone } from "../extensions/SortingFieldsStandAlone";
|
||||
var initialise = function () { return __awaiter(void 0, void 0, void 0, function () {
|
||||
var converter, myRender, sortingField1, sortingField2, sortingField3, allFields, e_1;
|
||||
return __generator(this, function (_a) {
|
||||
switch (_a.label) {
|
||||
case 0:
|
||||
_a.trys.push([0, 2, , 3]);
|
||||
converter = new FreeDatas2HTML("CSV");
|
||||
converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/elements-chimiques.csv" });
|
||||
return [4, converter.run()];
|
||||
case 1:
|
||||
_a.sent();
|
||||
converter.fields2Rend = [0, 1, 2, 3];
|
||||
myRender = new Render();
|
||||
myRender.settings =
|
||||
{
|
||||
allBegining: "<h4>Liste des éléments chimiques :</h4>",
|
||||
allEnding: "",
|
||||
linesBegining: "<ul>",
|
||||
linesEnding: "</ul>",
|
||||
lineBegining: "<li><ul>",
|
||||
lineEnding: "</ul></li>",
|
||||
dataDisplaying: "<li><b>#FIELDNAME :</b> #VALUE</li>",
|
||||
};
|
||||
converter.datasRender = myRender;
|
||||
sortingField1 = new SortingField(converter, 0);
|
||||
sortingField2 = new SortingField(converter, 1);
|
||||
sortingField3 = new SortingField(converter, 2);
|
||||
allFields = new SortingFieldsStandAlone(converter, { id: "classement" });
|
||||
allFields.datasSortingFields = [sortingField1, sortingField2, sortingField3];
|
||||
allFields.rendSettings.allBeginning = "<h4>#LABEL</h4><ul>";
|
||||
allFields.rend2HTML("Champ sur lequel classer les données :");
|
||||
converter.datasViewElt = { id: "datas" };
|
||||
converter.refreshView();
|
||||
return [3, 3];
|
||||
case 2:
|
||||
e_1 = _a.sent();
|
||||
console.error(e_1);
|
||||
document.getElementById("datas").innerHTML = "<div class=\"alert alert-warning\">D\u00E9sol\u00E9, mais un probl\u00E8me technique emp\u00EAche l'affichage des donn\u00E9es.</div>";
|
||||
return [3, 3];
|
||||
case 3: return [2];
|
||||
}
|
||||
});
|
||||
}); };
|
||||
console.log("Hello, ami développeur :-)\nLe code source TypeScript utilisé pour faire fonctionner cette page est lisible ici : :\nhttps://forge.chapril.org/Fab_Blab/freeDatas2HTML/src/branch/master/src/demo/exampleWithJSON.ts\nUn bug ? Une suggestion ? => fabrice@le-fab-lab.com");
|
||||
initialise();
|
||||
@ -0,0 +1,67 @@
|
||||
import { FreeDatas2HTML } from "../FreeDatas2HTML";
|
||||
var errors = require("../errors.js");
|
||||
errors.needSortingFields = "Vous devez fournir au moins un champ de classement valide.";
|
||||
var SortingFieldsStandAlone = (function () {
|
||||
function SortingFieldsStandAlone(converter, elt, settings) {
|
||||
if (settings === void 0) { settings = SortingFieldsStandAlone.defaultSettings; }
|
||||
this._datasViewElt = { id: "", eltDOM: undefined };
|
||||
this.datasSortingFields = [];
|
||||
if (converter.fields.length === 0)
|
||||
throw new Error(errors.sortingFieldNeedDatas);
|
||||
this._datasViewElt = FreeDatas2HTML.checkInDOMById(elt);
|
||||
this._converter = converter;
|
||||
this.rendSettings = settings;
|
||||
}
|
||||
Object.defineProperty(SortingFieldsStandAlone.prototype, "converter", {
|
||||
get: function () {
|
||||
return this._converter;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(SortingFieldsStandAlone.prototype, "datasViewElt", {
|
||||
get: function () {
|
||||
return this._datasViewElt;
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
SortingFieldsStandAlone.prototype.rend2HTML = function (label) {
|
||||
if (label === void 0) { label = ""; }
|
||||
if (this.datasSortingFields.length === 0)
|
||||
throw new Error(errors.needSortingFields);
|
||||
var htmlContent = this.rendSettings.allBeginning.replace("#LABEL", label);
|
||||
for (var _i = 0, _a = this.datasSortingFields; _i < _a.length; _i++) {
|
||||
var field = _a[_i];
|
||||
htmlContent += this.rendSettings.fieldBeginning + "<a href='#freeDatas2HTMLSorting" + field.datasFieldNb + "' id='freeDatas2HTMLSorting" + field.datasFieldNb + "'>" + this._converter.fields[field.datasFieldNb] + "</a>" + this.rendSettings.fieldEnding;
|
||||
}
|
||||
htmlContent += this.rendSettings.allEnding;
|
||||
this._datasViewElt.eltDOM.innerHTML = htmlContent;
|
||||
var _loop_1 = function (field) {
|
||||
var sortingLink = document.getElementById("freeDatas2HTMLSorting" + field.datasFieldNb);
|
||||
sortingLink.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
if (field.order === undefined || field.order === "desc")
|
||||
field.order = "asc";
|
||||
else
|
||||
field.order = "desc";
|
||||
field.converter.datasSortedField = field;
|
||||
field.converter.refreshView();
|
||||
});
|
||||
};
|
||||
for (var _b = 0, _c = this.datasSortingFields; _b < _c.length; _b++) {
|
||||
var field = _c[_b];
|
||||
_loop_1(field);
|
||||
}
|
||||
};
|
||||
SortingFieldsStandAlone.defaultSettings = {
|
||||
allBeginning: "<span>#LABEL</span><ul>",
|
||||
allEnding: "</ul>",
|
||||
fieldBeginning: "<li>",
|
||||
fieldEnding: "</li>",
|
||||
};
|
||||
return SortingFieldsStandAlone;
|
||||
}());
|
||||
export { SortingFieldsStandAlone };
|
||||
export { FreeDatas2HTML, SortingField } from "../FreeDatas2HTML";
|
||||
export { errors };
|
||||
@ -0,0 +1,108 @@
|
||||
import { errors, FreeDatas2HTML, SortingField, SortingFieldsStandAlone } from "../../src/extensions/SortingFieldsStandAlone";
|
||||
const fixtures=require("../fixtures.js");
|
||||
|
||||
describe("Test des liens de classement (hors données).", () =>
|
||||
{
|
||||
let converter: FreeDatas2HTML;
|
||||
let sortingFields: SortingFieldsStandAlone;
|
||||
|
||||
beforeEach( async () =>
|
||||
{
|
||||
document.body.insertAdjacentHTML("afterbegin", fixtures.datasViewEltHTML);
|
||||
converter=new FreeDatas2HTML("CSV");
|
||||
converter.parser.setRemoteSource({ url:"http://localhost:9876/datas/datas1.csv" });
|
||||
converter.datasViewElt={ id:"datas" };
|
||||
await converter.run(); // parsage + 1er affichage des données
|
||||
});
|
||||
|
||||
afterEach( () =>
|
||||
{
|
||||
document.body.removeChild(document.getElementById("fixture"));
|
||||
});
|
||||
|
||||
describe("Test des données reçues pour configurer les liens de classement.", () =>
|
||||
{
|
||||
it("Doit générer une erreur, si initialisé avant que les champs de données ne soient connus.", () =>
|
||||
{
|
||||
converter=new FreeDatas2HTML("CSV");
|
||||
// Pas lancé converter.run(), donc les données n'ont pas été parsées :
|
||||
expect(() => { return new SortingFieldsStandAlone(converter, { id:"selector1" }); }).toThrowError(errors.sortingFieldNeedDatas);
|
||||
});
|
||||
|
||||
it("Doit générer une erreur, si initialisé avec l'id d'un élément n'existant pas dans le DOM", () =>
|
||||
{
|
||||
expect(() => { return new SortingFieldsStandAlone(converter, { id:"dontExist" }); }).toThrowError(errors.converterElementNotFound+"dontExist");
|
||||
});
|
||||
|
||||
it("Si tous les paramètres sont ok, ils doivent être acceptés.", () =>
|
||||
{
|
||||
expect(() => { sortingFields=new SortingFieldsStandAlone(converter, { id:"selector1" }); }).not.toThrowError();
|
||||
expect(sortingFields.converter).toEqual(converter);
|
||||
expect(sortingFields.datasViewElt.id).toEqual("selector1");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Création et action des liens de classement", () =>
|
||||
{
|
||||
let sortingField1: SortingField, sortingField2: SortingField;
|
||||
|
||||
beforeEach(() =>
|
||||
{
|
||||
sortingFields=new SortingFieldsStandAlone(converter, { id:"selector1" });
|
||||
sortingField1=new SortingField(converter, 0);
|
||||
sortingField2=new SortingField(converter, 2);
|
||||
sortingFields.datasSortingFields=[sortingField1,sortingField2];
|
||||
});
|
||||
|
||||
it("Doit générer une erreur, si lancé avant d'avoir fourni au moins un champ de classement.", () =>
|
||||
{
|
||||
sortingFields=new SortingFieldsStandAlone(converter, { id:"selector1" });
|
||||
expect(() => { return sortingFields.rend2HTML() }).toThrowError(errors.needSortingFields);
|
||||
});
|
||||
|
||||
it("Doit générer une liste de liens correspondant aux champs fournis .", () =>
|
||||
{
|
||||
sortingFields.rend2HTML();
|
||||
let expectedHTML="<span></span><ul><li>"+fixtures.sortingColumn1HTML+"</li><li>"+fixtures.sortingColumn2HTML+"</li></ul>";
|
||||
expect(document.getElementById("selector1").innerHTML).toEqual(expectedHTML);
|
||||
// Idem avec des paramètres d'affichage :
|
||||
sortingFields.rendSettings=
|
||||
{
|
||||
allBeginning: "<h4>#LABEL</h4><p>",
|
||||
allEnding: "</p>",
|
||||
fieldBeginning: "",
|
||||
fieldEnding: " | ",
|
||||
};
|
||||
expectedHTML="<h4>Classer les données :</h4><p>"+fixtures.sortingColumn1HTML+" | "+fixtures.sortingColumn2HTML+" | </p>";
|
||||
sortingFields.rend2HTML("Classer les données :");
|
||||
expect(document.getElementById("selector1").innerHTML).toEqual(expectedHTML);
|
||||
});
|
||||
|
||||
it("Lorsqu'ils sont cliqués, les liens de classement doivent transmettre l'information au convertisseur + lui demander d'actualiser l'affichage.", () =>
|
||||
{
|
||||
sortingFields.rend2HTML();
|
||||
let getLinks=document.querySelectorAll("ul li a") as NodeListOf<HTMLElement>;
|
||||
|
||||
spyOn(converter, "refreshView");
|
||||
getLinks[0].click();// tri ascendant 1er champ
|
||||
expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
|
||||
expect(sortingField1.converter.datasSortedField.order).toEqual("asc");
|
||||
expect(converter.refreshView).toHaveBeenCalledTimes(1);
|
||||
|
||||
getLinks[1].click();// tri ascendant mais sur le second champ
|
||||
expect(sortingField2.converter.datasSortedField).toEqual(sortingField2);
|
||||
expect(sortingField2.converter.datasSortedField.order).toEqual("asc");
|
||||
expect(converter.refreshView).toHaveBeenCalledTimes(2);
|
||||
|
||||
getLinks[0].click();// tri descendant sur le 1er champ
|
||||
expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
|
||||
expect(sortingField1.converter.datasSortedField.order).toEqual("desc");
|
||||
expect(converter.refreshView).toHaveBeenCalledTimes(3);
|
||||
|
||||
getLinks[0].click();// de nouveau ascendant
|
||||
expect(sortingField1.converter.datasSortedField).toEqual(sortingField1);
|
||||
expect(sortingField1.converter.datasSortedField.order).toEqual("asc");
|
||||
expect(converter.refreshView).toHaveBeenCalledTimes(4);
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue