From 3cb756a42fbfcf1ecf72fa52c44cd82341c2d299 Mon Sep 17 00:00:00 2001
From: imnavajas <imnavajas@coit.es>
Date: Mon, 20 May 2024 22:45:11 +0200
Subject: [PATCH 1/4] =?UTF-8?q?A=C3=B1adiendo=20preview=20thumbnail=20y=20?=
 =?UTF-8?q?detalles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../presupuestos/cliente/_resumenItems.php    |  36 ++-
 .../cliente/presupuestoCliente.js             |   5 +-
 .../form/presupuestos/cliente/previews.js     | 211 ++++++++++--------
 3 files changed, 151 insertions(+), 101 deletions(-)

diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
index b70b5fc2..f3d1ea6b 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
@@ -12,7 +12,8 @@
 
             <h5 class="mb-1">Interior</h5>
             <p class="mb-0"><small id="tipoImpresion">Impresion: Negro premium</small></p>
-            <p id="pResumenPaginasColor" class="mb-0" style="display:none"><small id="resumenPaginasColor">Páginas a color: 100</small></p>
+            <p id="pResumenPaginasColor" class="mb-0" style="display:none"><small id="resumenPaginasColor">Páginas a
+                    color: 100</small></p>
             <p class="mb-3"><small id="resumenPapelInterior">Papel: Blanco Offset 70gr/m²</small></p>
 
             <h5 class="mb-1">Cubierta</h5>
@@ -22,7 +23,8 @@
             <p class="mb-3"><small id="resumenAcabadoCubierta">Acabado: Ninguno</small></p>
 
             <h5 class="mb-1 resumen-sobrecubierta">Sobrecubierta</h5>
-            <p class="mb-0 resumen-sobrecubierta"><small id="resumenPapelSobrecubierta">Papel: Blanco Offset 70gr/m²</small></p>
+            <p class="mb-0 resumen-sobrecubierta"><small id="resumenPapelSobrecubierta">Papel: Blanco Offset
+                    70gr/m²</small></p>
             <p class="mb-0 resumen-sobrecubierta"><small id="resumenSolapasCubierta">Ancho solapas: 25mm</small></p>
             <p class="mb-3 resumen-sobrecubierta"><small id="resumenAcabadoCubierta">Acabado: Ninguno</small></p>
 
@@ -40,7 +42,33 @@
             <h4 id="resumenTotalIVA" class="mb-1">Total: 100€</h4>
             <h6 id="resumenPrecioU" class="mb-0">10.4€/ud</h6>
             <div id="shape-container">
-                <div id="pv_ec_shape" style="width:95%;height:550px;margin:2.5% auto;"></div>
+                <div title="Pulsar para ver esquema de cubierta" id="thumbnail_ec_shape"
+                     style="width:350px;height:300px;margin:2.5% auto;"></div>
+                <div class="d-flex justify-content-center">
+                    <button type="button" id="pv_details" class="btn btn-primary align-content-center"
+                            data-bs-toggle="modal" data-bs-target="#pv_ec_modal">
+                        Previsualizar detalles de cubierta
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal -->
+<div class="modal fade" id="pv_ec_modal" tabindex="-1">
+    <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content" style="width:850px;height:700px;margin:2.5% auto;">
+            <div class="modal-header">
+                <h5 class="modal-title">Esquema de cubierta</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+                </button>
+            </div>
+            <div class="modal-body" >
+                <div id="pv_ec_shape" style="width:700px;height:500px;margin:2.5% auto;"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
             </div>
         </div>
     </div>
@@ -50,6 +78,6 @@
 <?= $this->section("additionalInlineJs") ?>
 
 window.routes_resumen = {
-    guardarPresupuesto: "<?= route_to('guardarPresupuesto') ?>",
+guardarPresupuesto: "<?= route_to('guardarPresupuesto') ?>",
 }
 <?= $this->endSection() ?>
\ No newline at end of file
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
index 8931667f..ace8796f 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
@@ -279,7 +279,7 @@
       item.addEventListener('click', event => {
         // When click the Next button, we will validate the current step
         switch (validationStepper._currentIndex) {
-          case 0:
+          /*case 0:
             FormValidation2.validate();
             break;
 
@@ -293,9 +293,10 @@
 
           case 3:
             FormValidation5.validate();
-            break;
+            break;*/
 
           default:
+            validationStepper.next();
             break;
         }
       });
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
index 0a0d202c..aa59fb4f 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
@@ -1,18 +1,26 @@
 // Global parameters
 var pvObj;
 
-$('#toReview').on( "click", function() {
+$('#toReview').on("click", function () {
 
     console.log('ec draw');
 
-    portadaTapaDura();
+    portadaTapaDura(true);
 
     //previewEsquemaCubierta('ec', '','');
 
-} );
+});
+
+$(document).on('shown.bs.modal', function (e) {
+    // do cool stuff here all day… no need to change bootstrap
+    console.log('eooo');
+
+    portadaTapaDura(false);
+})
 
 
-function previewEsquemaCubierta() {
+
+function previewEsquemaCubierta(isThumbnail) {
 
     /*let tipoImpresion;
 
@@ -44,7 +52,7 @@ function previewEsquemaCubierta() {
 
 }
 
-function portadaTapaDura() {
+function portadaTapaDura(isThumbnail = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
@@ -55,22 +63,32 @@ function portadaTapaDura() {
     let altoPliegue = parseFloat(7);  // mm
     let anchoCarton = parseFloat(7); // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
-    // Definicion de los parametros del Esquema de Cubierta (EC) -
-    anchoSangrado = 400;    // px
-    altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+    // Definicion de los parametros del Esquema de Cubierta (EC)
+    if (isThumbnail) {
+        anchoSangrado = 350;    // px
+        altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+    } else {
+        anchoSangrado = 700;    // px
+        altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+    }
     altoLibro = altoSangrado * 0.88;
     anchoLibro = anchoSangrado * 0.39;
     lomoLibro = anchoSangrado * 0.133;
     anchoCubierta = (2 * anchoLibro) + lomoLibro;
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     var previewEC = new Two({fitted: true}).appendTo(divEC);
+    //previewEC.width = 700;
+    //previewEC.height = 650;
+
     // Calculate the center of the canvas element
     var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
 
@@ -102,73 +120,77 @@ function portadaTapaDura() {
     lomo.fill = '#F4F8F2';
     lomo.linewidth = 1;
 
-    // Cotas
-    var cotaAnchoCubierta = previewEC.makeDobleArrow(
-        origenEC.x - (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        origenEC.x + (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        10);
-    cotaAnchoCubierta.linewidth = 2;
-    var cotaAltoCubierta = previewEC.makeDobleArrow(
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y + (altoSangrado / 2),
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y - (altoSangrado / 2),
-        10);
-    cotaAltoCubierta.linewidth = 2;
-    var cotaAltoLibro = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y + (altoLibro / 2),
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y - (altoLibro / 2),
-        10);
-    cotaAltoLibro.linewidth = 2;
-    var cotaLomo = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        10);
-    cotaLomo.linewidth = 2;
-    var cotaContraportada = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaContraportada.linewidth = 2;
-    var cotaPortada = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaPortada.linewidth = 2;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // Cotas:
+        var cotaAnchoCubierta = previewEC.makeDobleArrow(
+            origenEC.x - (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            origenEC.x + (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            10);
+        cotaAnchoCubierta.linewidth = 2;
+        var cotaAltoCubierta = previewEC.makeDobleArrow(
+            origenEC.x + (anchoCubierta / 2) + 35,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoCubierta / 2) + 35,
+            origenEC.y - (altoSangrado / 2),
+            10);
+        cotaAltoCubierta.linewidth = 2;
+        var cotaAltoLibro = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y + (altoLibro / 2),
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y - (altoLibro / 2),
+            10);
+        cotaAltoLibro.linewidth = 2;
+        var cotaLomo = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            10);
+        cotaLomo.linewidth = 2;
+        var cotaContraportada = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaContraportada.linewidth = 2;
+        var cotaPortada = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaPortada.linewidth = 2;
 
 
-    // Textos:
-    // Titulos generales
-    let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
-    previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
+        // Textos:
+        // Titulos generales
+        let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+        previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+
+    }
 
     previewEC.update();
 
@@ -363,24 +385,23 @@ function portadaEspiral() {
     // Definicion de los parametros del Esquema de Cubierta (EC)
     anchoSangrado = 600;    // px
 
-    if((pvObj.anchoSolapa !== 0) && (isTapaDura === 0)){
+    if ((pvObj.anchoSolapa !== 0) && (isTapaDura === 0)) {
         altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.28;
         anchoCalle = anchoSangrado * 0.02;
         anchoSolapa = anchoSangrado * 0.163;
         sangrado = anchoSangrado * 0.03;
-        anchoCubierta = 2 * (anchoLibro + anchoSolapa+ sangrado) + anchoCalle;
-        offsetCubierta = anchoLibro/2 + anchoCalle/2 + anchoSolapa/2 + sangrado;
-    }
-    else {
+        anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
+        offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
+    } else {
         altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
         altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
         anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
         anchoCalle = anchoSangrado * 0.02;
         anchoSolapa = 0;
         anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
-        offsetCubierta = anchoLibro/2 + anchoCalle/2 + anchoSolapa + sangradoValor;
+        offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
     }
 
     // Clear the canvas element
@@ -404,7 +425,7 @@ function portadaEspiral() {
 
     if (pvObj.anchoSolapa != 0) {
         var solapa1 = previewEC.makeRectangle(
-            origenEC.x + (anchoLibro + anchoCalle/2 + anchoSolapa/2 + sangradoValor),
+            origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
             origenEC.y,
             anchoSolapa,
             altoLibro);
@@ -412,7 +433,7 @@ function portadaEspiral() {
         solapa1.linewidth = 1;
 
         var solapa2 = previewEC.makeRectangle(
-            origenEC.x - (anchoLibro + anchoCalle/2 + anchoSolapa/2 + sangradoValor),
+            origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
             origenEC.y,
             anchoSolapa,
             altoLibro);
@@ -421,14 +442,14 @@ function portadaEspiral() {
 
         // Cotas Solapas
         var cotaSolapa2 = previewEC.makeDobleArrow(
-            origenEC.x - (anchoCalle/2 + sangradoValor + anchoLibro + anchoSolapa),
+            origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
             origenEC.y - (altoLibro / 3),
             origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
             origenEC.y - (altoLibro / 3),
             10);
         cotaSolapa2.linewidth = 2;
         var cotaSolapa1 = previewEC.makeDobleArrow(
-            origenEC.x + (anchoCalle/2 + sangradoValor + anchoLibro + anchoSolapa),
+            origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
             origenEC.y - (altoLibro / 3),
             origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
             origenEC.y - (altoLibro / 3),
@@ -446,7 +467,7 @@ function portadaEspiral() {
     }
 
     var portada = previewEC.makeRectangle(
-        origenEC.x + (anchoLibro/2 + anchoCalle/2 + sangradoValor),
+        origenEC.x + (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
         origenEC.y,
         anchoLibro,
         altoLibro);
@@ -454,7 +475,7 @@ function portadaEspiral() {
     portada.linewidth = 1;
 
     var contraportada = previewEC.makeRectangle(
-        origenEC.x - (anchoLibro/2 + anchoCalle/2 + sangradoValor),
+        origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
         origenEC.y,
         anchoLibro,
         altoLibro);
@@ -513,12 +534,12 @@ function portadaEspiral() {
     // Titulos generales
     let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
     previewEC.makeText("Portada",
-        origenEC.x + anchoLibro/2 + anchoCalle/2 + sangradoValor + 15,
+        origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
         origenEC.y,
         stylesEC
     );
     previewEC.makeText("Contraportada",
-        origenEC.x - (anchoLibro/2 + anchoCalle/2 + sangradoValor),
+        origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
         origenEC.y,
         stylesEC
     );
@@ -531,8 +552,8 @@ function portadaEspiral() {
     previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
     previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
     // Cotas
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa/2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa/2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
     previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
     previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
         origenEC.x + (anchoSangrado / 2) + 30,
@@ -725,10 +746,10 @@ function getLomoLibro() {
 function getObjetoToPreview() {
 
     pvObj = {
-        lomoLibro: parseFloat('30.0'),
-        anchoSolapa: $('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
-        altoLibro: getDimensionLibro().alto,
-        anchoLibro: getDimensionLibro().ancho
+        lomoLibro: 30,//parseFloat($('#lomo_cubierta').val()),
+        anchoSolapa: 0, //$('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
+        altoLibro: 148, //getDimensionLibro().alto,
+        anchoLibro: 190, //getDimensionLibro().ancho
     };
     //console.log(pvObj);
 

From 2364edb684b9b391a05161cf36829a4da35dbab8 Mon Sep 17 00:00:00 2001
From: imnavajas <imnavajas@coit.es>
Date: Tue, 21 May 2024 15:49:11 +0200
Subject: [PATCH 2/4] Actualizacion automatica: 2024-05-21 15:49:10

---
 .../presupuestos/cliente/_resumenItems.php    |   9 +-
 .../form/presupuestos/cliente/previews.js     | 804 +++++++++---------
 2 files changed, 424 insertions(+), 389 deletions(-)

diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
index f3d1ea6b..bd041192 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/_resumenItems.php
@@ -42,8 +42,7 @@
             <h4 id="resumenTotalIVA" class="mb-1">Total: 100€</h4>
             <h6 id="resumenPrecioU" class="mb-0">10.4€/ud</h6>
             <div id="shape-container">
-                <div title="Pulsar para ver esquema de cubierta" id="thumbnail_ec_shape"
-                     style="width:350px;height:300px;margin:2.5% auto;"></div>
+                <div id="thumbnail_ec_shape" style="width:350px;height:300px;margin:2.5% auto;"></div>
                 <div class="d-flex justify-content-center">
                     <button type="button" id="pv_details" class="btn btn-primary align-content-center"
                             data-bs-toggle="modal" data-bs-target="#pv_ec_modal">
@@ -57,15 +56,15 @@
 
 <!-- Modal -->
 <div class="modal fade" id="pv_ec_modal" tabindex="-1">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-        <div class="modal-content" style="width:850px;height:700px;margin:2.5% auto;">
+    <div class="modal-dialog  modal-xl modal-dialog-centered" role="document">
+        <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title">Esquema de cubierta</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                 </button>
             </div>
             <div class="modal-body" >
-                <div id="pv_ec_shape" style="width:700px;height:500px;margin:2.5% auto;"></div>
+                <div id="pv_ec_shape" style="width:850px;height:600px;margin:2.5% auto;"></div>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
index aa59fb4f..37f8a881 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
@@ -3,19 +3,15 @@ var pvObj;
 
 $('#toReview').on("click", function () {
 
-    console.log('ec draw');
-
-    portadaTapaDura(true);
+    portadaEspiral(true, false);
 
     //previewEsquemaCubierta('ec', '','');
 
 });
 
 $(document).on('shown.bs.modal', function (e) {
-    // do cool stuff here all day… no need to change bootstrap
-    console.log('eooo');
 
-    portadaTapaDura(false);
+    portadaEspiral(false, false);
 })
 
 
@@ -73,7 +69,7 @@ function portadaTapaDura(isThumbnail = false) {
         anchoSangrado = 350;    // px
         altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
     } else {
-        anchoSangrado = 700;    // px
+        anchoSangrado = 800;    // px
         altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
     }
     altoLibro = altoSangrado * 0.88;
@@ -86,8 +82,6 @@ function portadaTapaDura(isThumbnail = false) {
     // Get the element for placing the graphical elements
     var divEC = document.getElementById(divIdName);
     var previewEC = new Two({fitted: true}).appendTo(divEC);
-    //previewEC.width = 700;
-    //previewEC.height = 650;
 
     // Calculate the center of the canvas element
     var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
@@ -120,6 +114,202 @@ function portadaTapaDura(isThumbnail = false) {
     lomo.fill = '#F4F8F2';
     lomo.linewidth = 1;
 
+    // Cotas y textos
+    if (!isThumbnail) {
+        // Cotas:
+        var cotaAnchoCubierta = previewEC.makeDobleArrow(
+            origenEC.x - (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            origenEC.x + (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            10);
+        cotaAnchoCubierta.linewidth = 2;
+        var cotaAltoCubierta = previewEC.makeDobleArrow(
+            origenEC.x + (anchoCubierta / 2) + 40,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoCubierta / 2) + 40,
+            origenEC.y - (altoSangrado / 2),
+            10);
+        cotaAltoCubierta.linewidth = 2;
+        var cotaAltoLibro = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y + (altoLibro / 2),
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y - (altoLibro / 2),
+            10);
+        cotaAltoLibro.linewidth = 2;
+        var cotaLomo = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y + (altoLibro / 3),
+            10);
+        cotaLomo.linewidth = 2;
+        var cotaContraportada = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaContraportada.linewidth = 2;
+        var cotaPortada = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaPortada.linewidth = 2;
+
+
+        // Textos:
+        // Titulos generales
+        let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+        previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55  , origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+
+    }
+
+    previewEC.update();
+
+}
+
+function portadaTapaBlanda(isThumbnail = false) {
+
+    // Variables locales
+    let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
+    let styleCotas = {size: 12, family: 'Public Sans'};
+    let sangradoTexto = "Sangrado 5 mm";
+    let sangradoValor = parseFloat(5);  // mm
+    let offsetSolapaValor = parseFloat(0);  // mm
+
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
+    // Get the preview Object parameters
+    getObjetoToPreview();
+
+
+
+    // Definicion de los parametros del Esquema de Cubierta (EC)
+    if (pvObj.anchoSolapa == 0) {
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 800;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
+
+        altoLibro = altoSangrado * 0.97;
+        anchoLibro = anchoSangrado * 0.419;
+        anchoSolapa = 0;
+        lomoLibro = anchoSangrado * 0.133;
+        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+    } else {
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
+        altoLibro = altoSangrado * 0.95;
+        anchoLibro = anchoSangrado * 0.28;
+        anchoSolapa = anchoSangrado * 0.163;
+        lomoLibro = anchoSangrado * 0.09;
+        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+    }
+
+    // Clear the canvas element
+    $(`#${divIdName}`).empty();
+    // Get the element for placing the graphical elements
+    var divEC = document.getElementById(divIdName);
+    var previewEC = new Two({fitted: true}).appendTo(divEC);
+    // Calculate the center of the canvas element
+    var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+    var sangrado = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        anchoSangrado,
+        altoSangrado
+    );
+    sangrado.stroke = 'black';
+    sangrado.dashes = [5, 5];
+    sangrado.fill = '#FCEAF1';
+    sangrado.linewidth = 1;
+
+    if (pvObj.anchoSolapa != 0) {
+        var solapas = previewEC.makeRectangle(
+            origenEC.x,
+            origenEC.y,
+            anchoCubierta,
+            altoLibro);
+        solapas.stroke = 'black';
+        solapas.linewidth = 1;
+
+        // Cotas Solapas
+        if (!isThumbnail) {
+            var cotaSolapa2 = previewEC.makeDobleArrow(
+                origenEC.x - anchoCubierta / 2,
+                origenEC.y - (altoLibro / 3),
+                origenEC.x - anchoLibro - lomoLibro / 2,
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa2.linewidth = 2;
+            var cotaSolapa1 = previewEC.makeDobleArrow(
+                origenEC.x + anchoCubierta / 2,
+                origenEC.y - (altoLibro / 3),
+                origenEC.x + anchoLibro + lomoLibro / 2,
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa1.linewidth = 2;
+
+            // Textos Solapas
+            let stylesSolapa = {size: 18, family: 'Public Sans'};
+            previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            // Textos Cotas Solapas
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        }
+
+    }
+
+    var libro = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        ((2 * anchoLibro) + lomoLibro),
+        altoLibro);
+    libro.stroke = 'black';
+    libro.linewidth = 1;
+
+    var lomo = previewEC.makeRectangle(
+        origenEC.x,
+        origenEC.y,
+        lomoLibro,
+        altoLibro);
+    lomo.stroke = 'black';
+    lomo.fill = '#F4F8F2';
+    lomo.linewidth = 1;
+
     // Cotas y textos
     if (!isThumbnail) {
         // Cotas:
@@ -172,20 +362,20 @@ function portadaTapaDura(isThumbnail = false) {
         let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
         previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
         previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-        previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+        let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
         // Sangrados
         let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
         // Cotas
-        previewEC.makeText(pvObj.lomoLibro + anchoCarton + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+        previewEC.makeText(pvObj.lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
             origenEC.x,
             origenEC.y + (altoLibro / 2) + 50,
             styleCotas);
@@ -196,182 +386,7 @@ function portadaTapaDura(isThumbnail = false) {
 
 }
 
-function portadaTapaBlanda() {
-
-    // Variables locales
-    let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
-    let styleCotas = {size: 12, family: 'Public Sans'};
-    let sangradoTexto = "Sangrado 5 mm";
-    let sangradoValor = parseFloat(5);  // mm
-    let offsetSolapaValor = parseFloat(0);  // mm
-
-    // Get the preview Object parameters
-    getObjetoToPreview();
-
-    // Definicion de los parametros del Esquema de Cubierta (EC)
-    if (pvObj.anchoSolapa == 0) {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
-        altoLibro = altoSangrado * 0.97;
-        anchoLibro = anchoSangrado * 0.419;
-        anchoSolapa = 0;
-        lomoLibro = anchoSangrado * 0.133;
-        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
-
-    } else {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
-        altoLibro = altoSangrado * 0.95;
-        anchoLibro = anchoSangrado * 0.28;
-        anchoSolapa = anchoSangrado * 0.163;
-        lomoLibro = anchoSangrado * 0.09;
-        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
-    }
-
-    // Clear the canvas element
-    $('#pv_ec_shape').empty();
-    // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
-    var previewEC = new Two({fitted: true}).appendTo(divEC);
-    // Calculate the center of the canvas element
-    var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
-
-    var sangrado = previewEC.makeRectangle(
-        origenEC.x,
-        origenEC.y,
-        anchoSangrado,
-        altoSangrado
-    );
-    sangrado.stroke = 'black';
-    sangrado.dashes = [5, 5];
-    sangrado.fill = '#FCEAF1';
-    sangrado.linewidth = 1;
-
-    if (pvObj.anchoSolapa != 0) {
-        var solapas = previewEC.makeRectangle(
-            origenEC.x,
-            origenEC.y,
-            anchoCubierta,
-            altoLibro);
-        solapas.stroke = 'black';
-        solapas.linewidth = 1;
-
-        // Cotas Solapas
-        var cotaSolapa2 = previewEC.makeDobleArrow(
-            origenEC.x - anchoCubierta / 2,
-            origenEC.y - (altoLibro / 3),
-            origenEC.x - anchoLibro - lomoLibro / 2,
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa2.linewidth = 2;
-        var cotaSolapa1 = previewEC.makeDobleArrow(
-            origenEC.x + anchoCubierta / 2,
-            origenEC.y - (altoLibro / 3),
-            origenEC.x + anchoLibro + lomoLibro / 2,
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa1.linewidth = 2;
-
-        // Textos Solapas
-        let stylesSolapa = {size: 18, family: 'Public Sans'};
-        previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        // Textos Cotas Solapas
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-
-    }
-
-    var libro = previewEC.makeRectangle(
-        origenEC.x,
-        origenEC.y,
-        ((2 * anchoLibro) + lomoLibro),
-        altoLibro);
-    libro.stroke = 'black';
-    libro.linewidth = 1;
-
-    var lomo = previewEC.makeRectangle(
-        origenEC.x,
-        origenEC.y,
-        lomoLibro,
-        altoLibro);
-    lomo.stroke = 'black';
-    lomo.fill = '#F4F8F2';
-    lomo.linewidth = 1;
-
-    // Cotas
-    var cotaAnchoCubierta = previewEC.makeDobleArrow(
-        origenEC.x - (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        origenEC.x + (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        10);
-    cotaAnchoCubierta.linewidth = 2;
-    var cotaAltoCubierta = previewEC.makeDobleArrow(
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y + (altoSangrado / 2),
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y - (altoSangrado / 2),
-        10);
-    cotaAltoCubierta.linewidth = 2;
-    var cotaAltoLibro = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y + (altoLibro / 2),
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y - (altoLibro / 2),
-        10);
-    cotaAltoLibro.linewidth = 2;
-    var cotaLomo = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y + (altoLibro / 3),
-        10);
-    cotaLomo.linewidth = 2;
-    var cotaContraportada = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaContraportada.linewidth = 2;
-    var cotaPortada = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaPortada.linewidth = 2;
-
-
-    // Textos:
-    // Titulos generales
-    let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
-    previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
-
-    previewEC.update();
-
-}
-
-function portadaEspiral() {
+function portadaEspiral(isThumbnail = false, isTapaDura = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, anchoCalle, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa, offsetCubierta;
@@ -379,14 +394,21 @@ function portadaEspiral() {
     let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
     let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5);  // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
     // Definicion de los parametros del Esquema de Cubierta (EC)
-    anchoSangrado = 600;    // px
-
-    if ((pvObj.anchoSolapa !== 0) && (isTapaDura === 0)) {
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+    if ((pvObj.anchoSolapa !== 0) && (!isTapaDura)) {
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
+        //altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.28;
         anchoCalle = anchoSangrado * 0.02;
@@ -395,7 +417,14 @@ function portadaEspiral() {
         anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
         offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
     } else {
-        altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
+        //altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
         altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
         anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
         anchoCalle = anchoSangrado * 0.02;
@@ -405,9 +434,9 @@ function portadaEspiral() {
     }
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     var previewEC = new Two({fitted: true}).appendTo(divEC);
     // Calculate the center of the canvas element
     var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
@@ -423,7 +452,7 @@ function portadaEspiral() {
     sangrado.fill = '#FCEAF1';
     sangrado.linewidth = 1;
 
-    if (pvObj.anchoSolapa != 0) {
+    if ((pvObj.anchoSolapa != 0) && (!isTapaDura)) {
         var solapa1 = previewEC.makeRectangle(
             origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
             origenEC.y,
@@ -440,29 +469,32 @@ function portadaEspiral() {
         solapa2.stroke = 'black';
         solapa2.linewidth = 1;
 
-        // Cotas Solapas
-        var cotaSolapa2 = previewEC.makeDobleArrow(
-            origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
-            origenEC.y - (altoLibro / 3),
-            origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa2.linewidth = 2;
-        var cotaSolapa1 = previewEC.makeDobleArrow(
-            origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
-            origenEC.y - (altoLibro / 3),
-            origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa1.linewidth = 2;
+        // Cotas y textos
+        if (!isThumbnail) {
+            // Cotas
+            var cotaSolapa2 = previewEC.makeDobleArrow(
+                origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+                origenEC.y - (altoLibro / 3),
+                origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa2.linewidth = 2;
+            var cotaSolapa1 = previewEC.makeDobleArrow(
+                origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+                origenEC.y - (altoLibro / 3),
+                origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa1.linewidth = 2;
 
-        // Textos Solapas
-        let stylesSolapa = {size: 18, family: 'Public Sans'};
-        previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        // Textos Cotas Solapas
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            // Textos Solapas
+            let stylesSolapa = {size: 18, family: 'Public Sans'};
+            previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            // Textos Cotas Solapas
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        }
 
     }
 
@@ -492,84 +524,87 @@ function portadaEspiral() {
     calle.fill = '#F4F8F2';
     calle.linewidth = 1;
 
-    // Cotas
-    var cotaAnchoCubierta = previewEC.makeDobleArrow(
-        origenEC.x - (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        origenEC.x + (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        10);
-    cotaAnchoCubierta.linewidth = 2;
-    var cotaAltoCubierta = previewEC.makeDobleArrow(
-        origenEC.x + (anchoSangrado / 2) + 15,
-        origenEC.y + (altoSangrado / 2),
-        origenEC.x + (anchoSangrado / 2) + 15,
-        origenEC.y - (altoSangrado / 2),
-        10);
-    cotaAltoCubierta.linewidth = 2;
-    var cotaAltoLibro = previewEC.makeDobleArrow(
-        origenEC.x + (anchoCalle / 2) + 35,
-        origenEC.y + (altoLibro / 2),
-        origenEC.x + (anchoCalle / 2) + 35,
-        origenEC.y - (altoLibro / 2),
-        10);
-    cotaAltoLibro.linewidth = 2;
-    var cotaContraportada = previewEC.makeDobleArrow(
-        origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x - ((anchoCalle / 2) + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaContraportada.linewidth = 2;
-    var cotaPortada = previewEC.makeDobleArrow(
-        origenEC.x + ((anchoCalle / 2) + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaPortada.linewidth = 2;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // Cotas:
+        var cotaAnchoCubierta = previewEC.makeDobleArrow(
+            origenEC.x - (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            origenEC.x + (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            10);
+        cotaAnchoCubierta.linewidth = 2;
+        var cotaAltoCubierta = previewEC.makeDobleArrow(
+            origenEC.x + (anchoSangrado / 2) + 15,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoSangrado / 2) + 15,
+            origenEC.y - (altoSangrado / 2),
+            10);
+        cotaAltoCubierta.linewidth = 2;
+        var cotaAltoLibro = previewEC.makeDobleArrow(
+            origenEC.x + (anchoCalle / 2) + 35,
+            origenEC.y + (altoLibro / 2),
+            origenEC.x + (anchoCalle / 2) + 35,
+            origenEC.y - (altoLibro / 2),
+            10);
+        cotaAltoLibro.linewidth = 2;
+        var cotaContraportada = previewEC.makeDobleArrow(
+            origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - ((anchoCalle / 2) + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaContraportada.linewidth = 2;
+        var cotaPortada = previewEC.makeDobleArrow(
+            origenEC.x + ((anchoCalle / 2) + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaPortada.linewidth = 2;
 
 
-    // Textos:
-    // Titulos generales
-    let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
-    previewEC.makeText("Portada",
-        origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
-        origenEC.y,
-        stylesEC
-    );
-    previewEC.makeText("Contraportada",
-        origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
-        origenEC.y,
-        stylesEC
-    );
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x + (anchoSangrado / 2) + 30,
-        origenEC.y,
-        styleCotas
-    ).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
+        // Textos:
+        // Titulos generales
+        let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+        previewEC.makeText("Portada",
+            origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
+            origenEC.y,
+            stylesEC
+        );
+        previewEC.makeText("Contraportada",
+            origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+            origenEC.y,
+            stylesEC
+        );
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
+            origenEC.x + (anchoSangrado / 2) + 30,
+            origenEC.y,
+            styleCotas
+        ).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+    }
 
     previewEC.update();
 
 }
 
-function portadaGrapado() {
+function portadaGrapado(isThumbnail = false, isTapaDura = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
@@ -578,6 +613,8 @@ function portadaGrapado() {
     let sangradoValor = parseFloat(5);  // mm
     let offsetSolapaValor = parseFloat(0);  // mm
 
+    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
+
     // Get the preview Object parameters
     getObjetoToPreview();
 
@@ -602,9 +639,9 @@ function portadaGrapado() {
     }
 
     // Clear the canvas element
-    $('#pv_ec_shape').empty();
+    $(`#${divIdName}`).empty();
     // Get the element for placing the graphical elements
-    var divEC = document.getElementById('pv_ec_shape');
+    var divEC = document.getElementById(divIdName);
     var previewEC = new Two({fitted: true}).appendTo(divEC);
     // Calculate the center of the canvas element
     var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
@@ -629,29 +666,32 @@ function portadaGrapado() {
         solapas.stroke = 'black';
         solapas.linewidth = 1;
 
-        // Cotas Solapas
-        var cotaSolapa2 = previewEC.makeDobleArrow(
-            origenEC.x - anchoCubierta / 2,
-            origenEC.y - (altoLibro / 3),
-            origenEC.x - anchoLibro - lomoLibro / 2,
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa2.linewidth = 2;
-        var cotaSolapa1 = previewEC.makeDobleArrow(
-            origenEC.x + anchoCubierta / 2,
-            origenEC.y - (altoLibro / 3),
-            origenEC.x + anchoLibro + lomoLibro / 2,
-            origenEC.y - (altoLibro / 3),
-            10);
-        cotaSolapa1.linewidth = 2;
+        // Cotas y textos
+        if (!isThumbnail) {
+            // Cotas
+            var cotaSolapa2 = previewEC.makeDobleArrow(
+                origenEC.x - anchoCubierta / 2,
+                origenEC.y - (altoLibro / 3),
+                origenEC.x - anchoLibro - lomoLibro / 2,
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa2.linewidth = 2;
+            var cotaSolapa1 = previewEC.makeDobleArrow(
+                origenEC.x + anchoCubierta / 2,
+                origenEC.y - (altoLibro / 3),
+                origenEC.x + anchoLibro + lomoLibro / 2,
+                origenEC.y - (altoLibro / 3),
+                10);
+            cotaSolapa1.linewidth = 2;
 
-        // Textos Solapas
-        let stylesSolapa = {size: 18, family: 'Public Sans'};
-        previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
-        // Textos Cotas Solapas
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            // Textos Solapas
+            let stylesSolapa = {size: 18, family: 'Public Sans'};
+            previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+            // Textos Cotas Solapas
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        }
 
     }
 
@@ -672,76 +712,72 @@ function portadaGrapado() {
     lomo.fill = '#F4F8F2';
     lomo.linewidth = 1;
 
-    // Cotas
-    var cotaAnchoCubierta = previewEC.makeDobleArrow(
-        origenEC.x - (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        origenEC.x + (anchoSangrado / 2),
-        origenEC.y + (altoLibro / 2) + 35,
-        10);
-    cotaAnchoCubierta.linewidth = 2;
-    var cotaAltoCubierta = previewEC.makeDobleArrow(
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y + (altoSangrado / 2),
-        origenEC.x + (anchoCubierta / 2) + 35,
-        origenEC.y - (altoSangrado / 2),
-        10);
-    cotaAltoCubierta.linewidth = 2;
-    var cotaAltoLibro = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y + (altoLibro / 2),
-        origenEC.x + (lomoLibro / 2) + 35,
-        origenEC.y - (altoLibro / 2),
-        10);
-    cotaAltoLibro.linewidth = 2;
-    var cotaContraportada = previewEC.makeDobleArrow(
-        origenEC.x - (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x - (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaContraportada.linewidth = 2;
-    var cotaPortada = previewEC.makeDobleArrow(
-        origenEC.x + (lomoLibro / 2),
-        origenEC.y - (altoLibro / 3),
-        origenEC.x + (lomoLibro / 2 + anchoLibro),
-        origenEC.y - (altoLibro / 3),
-        10);
-    cotaPortada.linewidth = 2;
+    // Cotas y textos
+    if (!isThumbnail) {
+        // Cotas:
+        var cotaAnchoCubierta = previewEC.makeDobleArrow(
+            origenEC.x - (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            origenEC.x + (anchoSangrado / 2),
+            origenEC.y + (altoLibro / 2) + 35,
+            10);
+        cotaAnchoCubierta.linewidth = 2;
+        var cotaAltoCubierta = previewEC.makeDobleArrow(
+            origenEC.x + (anchoCubierta / 2) + 35,
+            origenEC.y + (altoSangrado / 2),
+            origenEC.x + (anchoCubierta / 2) + 35,
+            origenEC.y - (altoSangrado / 2),
+            10);
+        cotaAltoCubierta.linewidth = 2;
+        var cotaAltoLibro = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y + (altoLibro / 2),
+            origenEC.x + (lomoLibro / 2) + 35,
+            origenEC.y - (altoLibro / 2),
+            10);
+        cotaAltoLibro.linewidth = 2;
+        var cotaContraportada = previewEC.makeDobleArrow(
+            origenEC.x - (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x - (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaContraportada.linewidth = 2;
+        var cotaPortada = previewEC.makeDobleArrow(
+            origenEC.x + (lomoLibro / 2),
+            origenEC.y - (altoLibro / 3),
+            origenEC.x + (lomoLibro / 2 + anchoLibro),
+            origenEC.y - (altoLibro / 3),
+            10);
+        cotaPortada.linewidth = 2;
 
 
-    // Textos:
-    // Titulos generales
-    let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
-    previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
-    // Sangrados
-    let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
-    previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
-    // Cotas
-    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-    previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-    previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
-        origenEC.x,
-        origenEC.y + (altoLibro / 2) + 50,
-        styleCotas);
+        // Textos:
+        // Titulos generales
+        let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};
+        previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+        // Sangrados
+        let styleSangrado = {size: 10, family: 'Public Sans', style: 'italic', fill: 'red'};
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+        previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+        // Cotas
+        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+            origenEC.x,
+            origenEC.y + (altoLibro / 2) + 50,
+            styleCotas);
+    }
 
     previewEC.update();
 
 }
 
-function getLomoLibro() {
-    const anchoLomoInputs = $("#tableLineasPresupuesto tbody tr:visible td input[id*='_lomo']");
-    const anchoLomo = Array.from(anchoLomoInputs).reduce((sum, input) => sum + parseFloat($(input).val()), 0);
-
-    return parseFloat(anchoLomo.toFixed(2));
-}
-
 
 function getObjetoToPreview() {
 

From 889ad57adc567db133cf93ed14182fb4413d64ce Mon Sep 17 00:00:00 2001
From: imnavajas <imnavajas@coit.es>
Date: Wed, 22 May 2024 09:24:57 +0200
Subject: [PATCH 3/4] Actualizacion automatica: 2024-05-22 09:24:56

---
 .../form/presupuestos/cliente/previews.js     | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
index 37f8a881..74c0f872 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
@@ -3,7 +3,7 @@ var pvObj;
 
 $('#toReview').on("click", function () {
 
-    portadaEspiral(true, false);
+    portadaGrapado(true);
 
     //previewEsquemaCubierta('ec', '','');
 
@@ -11,7 +11,7 @@ $('#toReview').on("click", function () {
 
 $(document).on('shown.bs.modal', function (e) {
 
-    portadaEspiral(false, false);
+    portadaGrapado(false);
 })
 
 
@@ -408,7 +408,6 @@ function portadaEspiral(isThumbnail = false, isTapaDura = false) {
             anchoSangrado = 750;    // px
             altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
         }
-        //altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.28;
         anchoCalle = anchoSangrado * 0.02;
@@ -424,7 +423,6 @@ function portadaEspiral(isThumbnail = false, isTapaDura = false) {
             anchoSangrado = 750;    // px
             altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
         }
-        //altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
         altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
         anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
         anchoCalle = anchoSangrado * 0.02;
@@ -604,7 +602,7 @@ function portadaEspiral(isThumbnail = false, isTapaDura = false) {
 
 }
 
-function portadaGrapado(isThumbnail = false, isTapaDura = false) {
+function portadaGrapado(isThumbnail = false) {
 
     // Variables locales
     let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
@@ -620,8 +618,13 @@ function portadaGrapado(isThumbnail = false, isTapaDura = false) {
 
     // Definicion de los parametros del Esquema de Cubierta (EC)
     if (pvObj.anchoSolapa == 0) {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.97;
         anchoLibro = anchoSangrado * 0.48;
         anchoSolapa = 0;
@@ -629,8 +632,13 @@ function portadaGrapado(isThumbnail = false, isTapaDura = false) {
         anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
 
     } else {
-        anchoSangrado = 600;    // px
-        altoSangrado = (anchoSangrado * 0.418 > 350) ? anchoSangrado * 0.418 : 350; // px
+        if (isThumbnail) {
+            anchoSangrado = 350;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+        } else {
+            anchoSangrado = 750;    // px
+            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+        }
         altoLibro = altoSangrado * 0.95;
         anchoLibro = anchoSangrado * 0.3;
         anchoSolapa = anchoSangrado * 0.18;
@@ -751,7 +759,6 @@ function portadaGrapado(isThumbnail = false, isTapaDura = false) {
             10);
         cotaPortada.linewidth = 2;
 
-
         // Textos:
         // Titulos generales
         let stylesEC = {size: 22, weight: 'bold', family: 'Public Sans'};

From 7ad551238d6a42f9bf11875e5e071b0033077e91 Mon Sep 17 00:00:00 2001
From: imnavajas <imnavajas@coit.es>
Date: Wed, 22 May 2024 11:28:56 +0200
Subject: [PATCH 4/4] Terminado previews listos para verificar por cliente

---
 .../cliente/presupuestoCliente.js             |  4 +-
 .../form/presupuestos/cliente/previews.js     | 66 +++++++------------
 2 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
index ace8796f..ba7b9585 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/presupuestoCliente.js
@@ -279,7 +279,7 @@
       item.addEventListener('click', event => {
         // When click the Next button, we will validate the current step
         switch (validationStepper._currentIndex) {
-          /*case 0:
+          case 0:
             FormValidation2.validate();
             break;
 
@@ -293,7 +293,7 @@
 
           case 3:
             FormValidation5.validate();
-            break;*/
+            break;
 
           default:
             validationStepper.next();
diff --git a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
index 74c0f872..a8b2c8f1 100644
--- a/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
+++ b/ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js
@@ -2,49 +2,34 @@
 var pvObj;
 
 $('#toReview').on("click", function () {
-
-    portadaGrapado(true);
-
-    //previewEsquemaCubierta('ec', '','');
-
+    previewEsquemaCubierta(true);
 });
 
 $(document).on('shown.bs.modal', function (e) {
-
-    portadaGrapado(false);
+    previewEsquemaCubierta(false);
 })
 
 
+function previewEsquemaCubierta(isThumbnail = false) {
 
-function previewEsquemaCubierta(isThumbnail) {
-
-    /*let tipoImpresion;
-
-    if ($("#tipoCosido").is(":checked")) {
-        tipoImpresion = parseInt()
+    if ($('#cosidoDiv').hasClass('checked') || $("#fresadoDiv").hasClass('checked')) {
+        console.log("Cosido/Fresado");
+        if ($("#tapaBlanda").is(":checked")) {
+            portadaTapaBlanda(isThumbnail);
+        } else if ($("#tapaDura").is(":checked")) {
+            portadaTapaDura(isThumbnail);3
+        }
+    } else if ($('#espiralDiv').hasClass('checked') || $('#wireoDiv').hasClass('checked')) {
+        console.log("Espiral/Wireo");
+        if ($("#tapaBlanda").is(":checked")) {
+            portadaEspiral(isThumbnail, false);
+        } else if ($("#tapaDura").is(":checked")) {
+            portadaEspiral(isThumbnail, true);
+        }
+    } else if ($('#grapadoDiv').hasClass('checked')) {
+        portadaGrapado(isThumbnail);
     }
 
-    let tipoImpresion = parseInt($('#tipo_impresion_id').val());
-
-    // Fresado TD y Cosido TD
-    if (tipoImpresion === 1 || tipoImpresion === 3) {
-        portadaTapaDura();
-    }
-    // Fresado TB y Cosido TB
-    else if (tipoImpresion === 2 || tipoImpresion === 4) {
-        portadaTapaBlanda();
-    }
-    // Espiral TD y TB, Wire-o TD y TB
-    else if (tipoImpresion === 5 || tipoImpresion === 6 ||
-        tipoImpresion === 7 || tipoImpresion === 8) {
-        portadaEspiral();
-    }
-    else if (tipoImpresion === 21) {
-        portadaGrapado();
-    }
-    else {
-        // ?
-    }*/
 
 }
 
@@ -178,7 +163,7 @@ function portadaTapaDura(isThumbnail = false) {
         previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
         previewEC.makeText(pvObj.anchoLibro + anchoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
         previewEC.makeText(pvObj.altoLibro + altoPliegue + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55  , origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + altoPliegue + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
         previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
             origenEC.x,
             origenEC.y + (altoLibro / 2) + 50,
@@ -205,7 +190,6 @@ function portadaTapaBlanda(isThumbnail = false) {
     getObjetoToPreview();
 
 
-
     // Definicion de los parametros del Esquema de Cubierta (EC)
     if (pvObj.anchoSolapa == 0) {
         if (isThumbnail) {
@@ -789,11 +773,11 @@ function portadaGrapado(isThumbnail = false) {
 function getObjetoToPreview() {
 
     pvObj = {
-        lomoLibro: 30,//parseFloat($('#lomo_cubierta').val()),
-        anchoSolapa: 0, //$('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
-        altoLibro: 148, //getDimensionLibro().alto,
-        anchoLibro: 190, //getDimensionLibro().ancho
+        lomoLibro: $('#lomo_cubierta').val() === '' ? parseFloat('0.0') : parseFloat($('#lomo_cubierta').val()),
+        anchoSolapa: $('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
+        altoLibro: getDimensionLibro().alto,
+        anchoLibro: getDimensionLibro().ancho
     };
-    //console.log(pvObj);
+    console.log(pvObj);
 
 }