Commit ef14e1ff by Luciano Barletta

no errors with divtree method

1 parent f16fe041
...@@ -5,8 +5,10 @@ from flask import Flask, render_template, request, url_for ...@@ -5,8 +5,10 @@ from flask import Flask, render_template, request, url_for
app = Flask(__name__) app = Flask(__name__)
data = { data = {
"header" : {
"dominio" : "dom", "dominio" : "dom",
"fecha" : "07-01-2019", "fecha" : "07-01-2019",
},
"alineador" : { "alineador" : {
"eje_delan" : "0.000" "eje_delan" : "0.000"
}, },
......
const Position = { "use strict";
"beggining" : 0,
"beggining_margin" : 5,
"quarter" : 25,
"third" : 33.33,
"middle" : 50,
"two_thirds" : 66.67,
"three_quarters" : 75,
"end_margin" : 95,
"end" : 100
}
/** Coordinate container that occupies the whole page **/ /** Coordinate container that occupies the whole page **/
const A4 = new Div( const A4 = new Div(
new Vector(0,0), new Vector(0, 0),
new Vector(210,297) new Vector(595, 842)
); );
function divToPDF(div) { const Position = {
let pdf = new jsPDF('portrait', 'mm', 'a4'); "beggining": 0,
pdf.setFont("courier", "normal"); "beggining_margin": 5,
pdf.setFontSize(10); "quarter": 25,
"third": 33.33,
"middle": 50,
"two_thirds": 66.67,
"three_quarters": 75,
"end_margin": 95,
"end": 100
};
function generateDivTree(data) {
/** /**
* The lambdas serve as "apply" functions * The lambdas serve as "apply" functions
* Each function processes an element, executed in order of appeareance in HTML. * Each function processes an element, executed in order of appeareance in HTML.
* They all return a coordinate "pointer" to draw. * They all return a coordinate "pointer" to draw.
*/ */
functionMapping = [ const functionMapping = [
(pointer, div, pdf) => headerToPDF(pointer, div, pdf), (pointer, data) => headerToPDF(pointer, data['header']),
(pointer, div, pdf) => alineadorToPDF(pointer, div, pdf), (pointer, data) => alineadorToPDF(pointer, data['alineador']),
(pointer, div, pdf) => suspensionToPDF(pointer, div, pdf), (pointer, data) => suspensionToPDF(pointer, data['suspension']),
(pointer, div, pdf) => frenosToPDF(pointer, div, pdf), (pointer, data) => frenosToPDF(pointer, data['frenos']),
(pointer, div, pdf) => traseroToPDF(pointer, div, pdf), (pointer, data) => traseroToPDF(pointer, data['trasero']),
(pointer, div, pdf) => gaseshumosToPDF(pointer, div, pdf), (pointer, data) => gaseshumosToPDF(pointer, data['gaseshumos'])
]; ];
/** /**
* We pass the pointer to each function, which then modify it and passes it to the next, * We pass the pointer to each function, which then modify it and passes it to the next,
* We start with (20,20) * We start with (0%,0%)
* f_it is a function iterator
*/ */
Array.from(div.children).reduce( functionMapping.reduce(
(pointer, child) => { (pointer, treeMaker) => treeMaker(pointer, data),
if (child.nodeName == "DIV") { A4.position
n_pointer = functionMapping[ pointer.f_it ](
/** Remove the function index **/
new Vector(pointer.x, pointer.y),
child,
pdf
)
/** Add it and add 1 to it **/
n_pointer.f_it = pointer.f_it + 1;
return n_pointer;
}
return pointer;
},
{"x" : 0, "y" : 0, "f_it" : 0}
); );
window.open(pdf.output('bloburl')); return A4;
} }
function headerToPDF(pointer, div, pdf) { function headerToPDF(pointer, data) {
/** Header goes from pointer to 100% width and 5% heigth **/
header = A4.addChild("header", pointer, new Vector(Position.end, 3));
/** First part of the text goes 5% to the right and in the middle vertically. no size provided **/
dom = header.addChild("dominio", new Vector(Position.beggining_margin, Position.two_thirds), new Vector(0,0))
/** Second part of the text goes a third to the right and in the middle vertically. no size provided **/ const header = A4.addChild(pointer, new Vector(Position.end, 3));
fecha = header.addChild("fecha", new Vector(Position.third, Position.two_thirds), new Vector(0,0))
/** Get the first row that you find **/ header.addText(
tr = getDescendantByTag(div, "tr"); "Dominio: " + data['dominio'],
pdf.text( new Vector(Position.beggining_margin, Position.two_thirds)
tr.children[0].innerText, );
dom.position.x,
dom.position.y,
{"align" : "left"}
)
pdf.text(
tr.children[1].innerText,
fecha.position.x,
fecha.position.y,
{"align" : "left"}
)
//header.drawDivBox(pdf); header.addText(
"Fecha: " + data['fecha'],
new Vector(Position.third, Position.two_thirds)
);
/** Next safe position to draw (in percentage). same x, next available y **/
return new Vector(pointer.x, pointer.y + 3); return new Vector(pointer.x, pointer.y + 3);
} }
function alineadorToPDF(pointer, div, pdf) { function alineadorToPDF(pointer, data) {
/** Alineador goes from pointer to 100% width and 10% heigth **/
A4.addChild("alineador", pointer, new Vector(Position.end, 7));
/** Title goes to the left and up **/
title = A4.children.alineador.addChild("title", new Vector(Position.beggining_margin + 2, Position.third), new Vector(0,0))
/** Subtitle goes left and down **/ const alineador = A4.addChild(pointer, new Vector(Position.end, 5));
subtitle = A4.children.alineador.addChild("subtitle", new Vector(Position.beggining_margin + 2, Position.two_thirds), new Vector(0,0))
/** Value goes a little to the right and down **/ const title = alineador.addText(
value = A4.children.alineador.addChild("value", new Vector(Position.quarter, Position.two_thirds), new Vector(0,0)) "Resultado Pruebas en Banco de Alineador al Paso",
new Vector(Position.beggining_margin + 2, Position.third)
pdf.text( );
"Resultado Pruebas de Alineador al Paso",
title.position.x,
title.position.y,
{"align" : "left"}
)
pdf.text( const subtitle = alineador.addText(
"Eje Delantero", "Eje Delantero",
subtitle.position.x, new Vector(Position.beggining_margin + 2, Position.two_thirds)
subtitle.position.y, );
{"align" : "left"}
)
n = div.innerText // take the whole text
.replace(/[\n]/g, "") // remove the new lines
.split(" ") // make array of words
.pop() // take the last one
pdf.text(
n,
value.position.x,
value.position.y,
{"align" : "left"}
)
//A4.children.alineador.drawDivBox(pdf);
return new Vector(pointer.x, pointer.y + 7);
}
function suspensionToPDF(pointer, div, pdf) {
suspension = A4.addChild("suspension", pointer, new Vector(100, 15));
eje1 = suspension.addChild("eje1", new Vector(Position.beggining_margin + 2, 0), new Vector(90,50)) const value = alineador.addText(
eje2 = suspension.addChild("eje2", new Vector(Position.beggining_margin + 2, 50), new Vector(90,50)) data['eje_delan'],
new Vector(Position.quarter, Position.two_thirds)
);
table = (container, pdf, eje, RI, p, RD) => { return new Vector(pointer.x, pointer.y + 5);
}
title = container.addChild("title", new Vector(0, Position.third), new Vector(0,0)) function suspensionToPDF(pointer, data) {
ri = container.addChild("ri", new Vector(0, Position.two_thirds), new Vector(0,0)) const suspension = A4.addChild(pointer, new Vector(Position.end, 15));
ri_value = container.addChild("ri_value", new Vector(10, Position.end), new Vector(0,0))
peso = container.addChild("peso", new Vector(37, Position.two_thirds), new Vector(0,0)) const eje1 = suspension.addChild(new Vector(Position.beggining_margin + 2, 0), new Vector(86, 50))
peso_value = container.addChild("peso_value", new Vector(45, Position.end), new Vector(0,0)) const eje2 = suspension.addChild(new Vector(Position.beggining_margin + 2, 50), new Vector(86, 50))
rd = container.addChild("rd", new Vector(Position.three_quarters - 7, Position.two_thirds), new Vector(0,0)) const table = (container, eje, RI, peso, RD) => {
rd_value = container.addChild("rd_value", new Vector(Position.three_quarters, Position.end), new Vector(0,0))
pdf.text( container.addText(
`Resultado Pruebas en Banco de Suspensión - Eje ${eje}`, `Resultado Pruebas en Banco de Suspensión - Eje ${eje}`,
title.position.x, new Vector(0, Position.third)
title.position.y,
{"align" : "left"}
); );
pdf.text(
`Rendimiento Izquierdo`, container.addText(
ri.position.x, "Rendimiento Izquierdo",
ri.position.y, new Vector(0, Position.two_thirds)
{"align" : "left"}
); );
pdf.text(
container.addText(
RI, RI,
ri_value.position.x, new Vector(0, Position.end)
ri_value.position.y,
{"align" : "left"}
); );
pdf.text(
`Peso Total del Eje`, container.addText(
peso.position.x, "Peso Total del Eje",
peso.position.y, new Vector(37, Position.two_thirds)
{"align" : "left"}
); );
pdf.text(
p, container.addText(
peso_value.position.x, peso,
peso_value.position.y, new Vector(45, Position.end)
{"align" : "left"}
); );
pdf.text(
`Rendimiento Derecho`, container.addText(
rd.position.x, "Rendimiento Derecho",
rd.position.y, new Vector(80, Position.two_thirds)
{"align" : "left"}
); );
pdf.text(
container.addText(
RD, RD,
rd_value.position.x, new Vector(90, Position.end)
rd_value.position.y,
{"align" : "left"}
); );
}; };
table(eje1, pdf, 1, "0.000", "0.000", "0.000") table(eje1, 1, data[0]["ren_izq"], data[0]["peso"], data[0]["ren_der"])
table(eje2, pdf, 2, "0.000", "0.000", "0.000") table(eje2, 2, data[1]["ren_izq"], data[1]["peso"], data[1]["ren_der"])
//A4.children.suspension.drawDivBox(pdf);
return new Vector(pointer.x, pointer.y + 15); return new Vector(pointer.x, pointer.y + 15);
} }
function frenosToPDF(pointer, div, pdf) { function frenosToPDF(pointer, data) {
A4.addChild("frenos", pointer, new Vector(Position.end, 57)); A4.addChild("frenos", pointer, new Vector(Position.end, 60));
//A4.children.frenos.drawDivBox(pdf); return new Vector(pointer.x, pointer.y + 60);
return new Vector(pointer.x, pointer.y + 57);
} }
function traseroToPDF(pointer, div, pdf) { function traseroToPDF(pointer, data) {
A4.addChild("trasero", pointer, new Vector(Position.end, 9)); A4.addChild("trasero", pointer, new Vector(Position.end, 9));
//A4.children.trasero.drawDivBox(pdf);
return new Vector(pointer.x, pointer.y + 9); return new Vector(pointer.x, pointer.y + 9);
} }
function gaseshumosToPDF(pointer, div, pdf) { function gaseshumosToPDF(pointer, data) {
A4.addChild("gaseshumos", pointer, new Vector(Position.end, 9)); A4.addChild("gaseshumos", pointer, new Vector(Position.end, 9));
//A4.children.gaseshumos.drawDivBox(pdf);
return new Vector(pointer.x, pointer.y + 9); return new Vector(pointer.x, pointer.y + 9);
} }
function compile(tree, pdf) {
tree.children.forEach( child => {
switch (child.constructor.name) {
case "Text":
pdf.text(child.text, child.position.x, child.position.y);
break;
case "Div":
compile(child, pdf);
break;
}
});
}
\ No newline at end of file \ No newline at end of file
...@@ -53,10 +53,10 @@ class Div { ...@@ -53,10 +53,10 @@ class Div {
constructor(position, size) { constructor(position, size) {
this.position = position; this.position = position;
this.size = size; this.size = size;
this.children = {}; this.children = [];
} }
addChild(id, position, size) { addChild(position, size) {
if (position.x < 0 || position.x > 100) if (position.x < 0 || position.x > 100)
console.error("position.x has to be an int between 0 and 100"); console.error("position.x has to be an int between 0 and 100");
if (position.y < 0 || position.y > 100) if (position.y < 0 || position.y > 100)
...@@ -66,21 +66,21 @@ class Div { ...@@ -66,21 +66,21 @@ class Div {
if (size.y < 0 || size.y > 100) if (size.y < 0 || size.y > 100)
console.error("size.y has to be an int between 0 and 100"); console.error("size.y has to be an int between 0 and 100");
this.children[id] = new Div ( let div = new Div(
this.getDrawCoordinates(position), this.getDrawCoordinates(position),
this.getSize(size) this.getSize(size)
); );
this.children.push(div);
return this.children[id]; return div;
} }
addText(id, position) { addText(text, position) {
if (position.x < 0 || position.x > 100) if (position.x < 0 || position.x > 100)
console.error("position.x has to be an int between 0 and 100"); console.error("position.x has to be an int between 0 and 100");
if (position.y < 0 || position.y > 100) if (position.y < 0 || position.y > 100)
console.error("position.y has to be an int between 0 and 100"); console.error("position.y has to be an int between 0 and 100");
this.children[id] = new Text(position); this.children.push(new Text(text, position));
} }
/** /**
......
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/cmu-typewriter" type="text/css" /> <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/cmu-typewriter" type="text/css" />
<title>Pruebas de Alineamiento</title> <title>Pruebas de Alineamiento</title>
</head> </head>
<!--<body onload="generateDivTree( {{ data }} )">-->
<body> <body>
<div id = "pdf"> <div id = "pdf">
...@@ -90,7 +89,7 @@ ...@@ -90,7 +89,7 @@
</div> </div>
<div class="PDFButtonContainer"> <div class="PDFButtonContainer">
<button class="PDFButton" onclick="divToPDF(document.getElementById('pdf'))"> <button class="PDFButton" onclick="compile(generateDivTree( {{ data }} ), new jsPDF('portrait', 'pt', 'a4'))">
Convertir a PDF Convertir a PDF
</button> </button>
</div> </div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!