mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
Merge branch 'feat/screenshot-forma' into 'mod/presupuesto_admin'
add downloadPreviewImage function to download image as png from the current shape selected See merge request jjimenez/safekat!468
This commit is contained in:
@ -2,134 +2,134 @@
|
||||
<div class="card accordion-item active">
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button type="button" class="accordion-button" data-bs-toggle="collapse"
|
||||
data-bs-target="#accordionPreviewTip" aria-expanded="false"
|
||||
aria-controls="accordionPreviewTip">
|
||||
data-bs-target="#accordionPreviewTip" aria-expanded="false"
|
||||
aria-controls="accordionPreviewTip">
|
||||
<h4><?= lang("Presupuestos.preview") ?></h4>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<div id="accordionPreviewTip" class="accordion-collapse collapse show"
|
||||
data-bs-parent="#accordionPreview">
|
||||
data-bs-parent="#accordionPreview">
|
||||
<div class="accordion-body">
|
||||
<div class="nav-align-top mb-4">
|
||||
<ul class="nav nav-pills mb-3" role="tablist">
|
||||
<li id="tab-pv-bn" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_bn"
|
||||
aria-controls="pv_bn"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_bn"
|
||||
aria-controls="pv_bn"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-bn") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-bnhq" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_bnhq"
|
||||
aria-controls="pv_bnhq"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_bnhq"
|
||||
aria-controls="pv_bnhq"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-bn-hq") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-color" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_color"
|
||||
aria-controls="pv_color"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_color"
|
||||
aria-controls="pv_color"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-color") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-colorhq" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_colorhq"
|
||||
aria-controls="pv_colorhq"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_colorhq"
|
||||
aria-controls="pv_colorhq"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-color-hq") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-rot-bn" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_rot_bn"
|
||||
aria-controls="pv_rot_bn"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_rot_bn"
|
||||
aria-controls="pv_rot_bn"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-rot-bn") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-rot-color" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_rot_color"
|
||||
aria-controls="pv_rot_color"
|
||||
aria-selected="true">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_rot_color"
|
||||
aria-controls="pv_rot_color"
|
||||
aria-selected="true">
|
||||
<?= lang("Presupuestos.preview-conf-rot-color") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-guardas" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_guardas"
|
||||
aria-controls="pv_guardas"
|
||||
aria-selected="false">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_guardas"
|
||||
aria-controls="pv_guardas"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewConfiguracionGuardas") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-cubierta" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_cubierta"
|
||||
aria-controls="pv_cubierta"
|
||||
aria-selected="false">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_cubierta"
|
||||
aria-controls="pv_cubierta"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewConfiguracionCubierta") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-esquema-cubierta" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_esquema_cubierta"
|
||||
aria-controls="pv_esquema_cubierta"
|
||||
aria-selected="false">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_esquema_cubierta"
|
||||
aria-controls="pv_esquema_cubierta"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewEsquemaCubierta") ?>
|
||||
</button>
|
||||
</li>
|
||||
<li id="tab-pv-sobrecubierta" class="nav-item" style="display: none">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_sobrecubierta"
|
||||
aria-controls="pv_sobrecubierta"
|
||||
aria-selected="false">
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#pv_sobrecubierta"
|
||||
aria-controls="pv_sobrecubierta"
|
||||
aria-selected="false">
|
||||
<?= lang("Presupuestos.previewConfiguracionSobrecubierta") ?>
|
||||
</button>
|
||||
</li>
|
||||
@ -171,7 +171,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -206,6 +206,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_bn_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -249,7 +252,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -284,6 +287,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_bnhq_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -327,7 +333,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -362,6 +368,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_color_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -375,7 +384,7 @@
|
||||
<div class="col-3">
|
||||
<div class="p-4 mb-3 pb-3">
|
||||
<!-- Configuraciones -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-12">
|
||||
<a id="pv_colorhq_pg" href="#" sk-url="<?= site_url('configuracion/papelesgenericos/edit/'); ?>" target="_blank">
|
||||
<div class="d-grid">
|
||||
@ -405,7 +414,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -440,6 +449,10 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
|
||||
<div id="pv_colorhq_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -483,7 +496,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -516,6 +529,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_rot_bn_shape" class="draw-rot-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -552,7 +568,7 @@
|
||||
<a id="pv_rot_color_mi" href="#" sk-url="<?= site_url('configuracion/maquinas/edit/'); ?>" target="_blank">
|
||||
<div class="d-grid">
|
||||
<button type="button"
|
||||
class="btn btn-label-primary">
|
||||
class="btn btn-label-primary">
|
||||
<?= lang("Presupuestos.previewAreaImpresion") ?>
|
||||
</button>
|
||||
</div>
|
||||
@ -560,7 +576,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -593,6 +609,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_rot_color_shape" class="draw-rot-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -636,7 +655,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -671,6 +690,9 @@
|
||||
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_guardas_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -714,7 +736,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -752,6 +774,9 @@
|
||||
<h6><?= lang("Presupuestos.previewCubierta") ?></h6>
|
||||
|
||||
<div id="pv-cubierta-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_cubierta_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -795,7 +820,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -817,6 +842,9 @@
|
||||
<h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6>
|
||||
|
||||
<div id="shape-container">
|
||||
<div class="d-flex align-items-stretch justify-content-end">
|
||||
<button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
|
||||
</div>
|
||||
<div id="pv_ec_shape" class="draw-shapes"></div>
|
||||
</div>
|
||||
|
||||
@ -860,7 +888,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="mx-n4"/>
|
||||
<hr class="mx-n4" />
|
||||
|
||||
<!-- Detalles del presupuesto -->
|
||||
<h6><?= lang("Presupuestos.previewDetalles") ?></h6>
|
||||
@ -922,66 +950,64 @@
|
||||
|
||||
$('#tab-pv-bn').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('bn', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('bn', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-bnhq').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('bnhq', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('bnhq', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-color').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('color', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('color', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-colorhq').on( "click", function() {
|
||||
|
||||
|
||||
previewInteriorPlana('colorhq', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('colorhq', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-rot-bn').on( "click", function() {
|
||||
|
||||
previewRotativa('rot_bn', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewRotativa('rot_bn', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-rot-color').on( "click", function() {
|
||||
|
||||
previewRotativa('rot_color', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewRotativa('rot_color', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-guardas').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('guardas', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('guardas', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-cubierta').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('cubierta', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('cubierta', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-esquema-cubierta').on( "click", function() {
|
||||
|
||||
previewEsquemaCubierta('ec', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewEsquemaCubierta('ec', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
|
||||
$('#tab-pv-sobrecubierta').on( "click", function() {
|
||||
|
||||
previewInteriorPlana('sobrecubierta', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
previewInteriorPlana('sobrecubierta', <?php echo $isCosido; ?>, <?php echo $isTapaDura; ?>);
|
||||
|
||||
} );
|
||||
*/
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
|
||||
|
||||
<?= $this->endSection() ?>
|
||||
@ -67,7 +67,7 @@ class PresupuestoAdminEdit {
|
||||
this.datosLibro.init();
|
||||
this.comparador.init();
|
||||
this.lineasPresupuesto.init();
|
||||
|
||||
|
||||
this.previewFormasAdmin = new PreviewFormasAdmin(tipoLibro, this.tipoTapa,
|
||||
{
|
||||
ancho: () => this.getDimensionLibro().ancho,
|
||||
@ -93,6 +93,7 @@ class PresupuestoAdminEdit {
|
||||
sessionStorage.removeItem('message');
|
||||
}
|
||||
}
|
||||
this.downloadPreviewImage();
|
||||
}
|
||||
|
||||
#cargarPresupuesto() {
|
||||
@ -257,6 +258,37 @@ class PresupuestoAdminEdit {
|
||||
showBreadCrumbSaveButton(true);
|
||||
});
|
||||
}
|
||||
downloadPreviewImage() {
|
||||
$(document).on("click", ".download-shape", (event) => {
|
||||
let parentDiv = $(event.currentTarget).parent().parent();
|
||||
let shapeSvgElQuery = $(parentDiv).find("svg");
|
||||
let shapeSvgEl = shapeSvgElQuery[0];
|
||||
const filename = shapeSvgElQuery.parent().attr("id") ?? "image"
|
||||
const serializer = new XMLSerializer();
|
||||
const svgData = serializer.serializeToString(shapeSvgEl);
|
||||
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
|
||||
const svgUrl = URL.createObjectURL(svgBlob);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(img, 0, 0);
|
||||
const pngUrl = canvas.toDataURL('image/png');
|
||||
const downloadLink = document.createElement('a');
|
||||
downloadLink.href = pngUrl;
|
||||
downloadLink.download = filename ?? '.png';
|
||||
document.body.appendChild(downloadLink);
|
||||
downloadLink.click();
|
||||
document.body.removeChild(downloadLink);
|
||||
|
||||
URL.revokeObjectURL(svgUrl);
|
||||
};
|
||||
|
||||
img.src = svgUrl;
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user