Añadiendo preview thumbnail y detalles

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>

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

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/previews.js

@@ -5,14 +5,22 @@ $('#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');
 
-function previewEsquemaCubierta() {
+    portadaTapaDura(false);
+})
+
+
+
+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) -
+    // Definicion de los parametros del Esquema de Cubierta (EC)
-    anchoSangrado = 400;    // px
+    if (isThumbnail) {
-    altoSangrado = (anchoSangrado * 0.647 > 350) ? anchoSangrado * 0.647 : 350; // px
+        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,7 +120,9 @@ function portadaTapaDura() {
     lomo.fill = '#F4F8F2';
     lomo.linewidth = 1;
 
-    // Cotas
+    // Cotas y textos
+    if (!isThumbnail) {
+        // Cotas:
         var cotaAnchoCubierta = previewEC.makeDobleArrow(
             origenEC.x - (anchoSangrado / 2),
             origenEC.y + (altoLibro / 2) + 35,
@@ -170,6 +190,8 @@ function portadaTapaDura() {
             origenEC.y + (altoLibro / 2) + 50,
             styleCotas);
 
+    }
+
     previewEC.update();
 
 }
@@ -372,8 +394,7 @@ function portadaEspiral() {
         sangrado = anchoSangrado * 0.03;
         anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
         offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
-    }
+    } else {
-    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;
@@ -725,10 +746,10 @@ function getLomoLibro() {
 function getObjetoToPreview() {
 
     pvObj = {
-        lomoLibro: parseFloat('30.0'),
+        lomoLibro: 30,//parseFloat($('#lomo_cubierta').val()),
-        anchoSolapa: $('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
+        anchoSolapa: 0, //$('#solapasCubierta').is(':checked') ? parseFloat($('#anchoSolapasCubierta').val()) : parseFloat(0),
-        altoLibro: getDimensionLibro().alto,
+        altoLibro: 148, //getDimensionLibro().alto,
-        anchoLibro: getDimensionLibro().ancho
+        anchoLibro: 190, //getDimensionLibro().ancho
     };
     //console.log(pvObj);