jjimenez/safekat
1
0
Fork 0
mirror of https://git.imnavajas.es/jjimenez/safekat.git synced 2025-07-25 22:52:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/screenshot-forma' into 'mod/presupuesto_admin'

Browse Source 
add downloadPreviewImage function to download image as png from the current shape selected

See merge request jjimenez/safekat!468
This commit is contained in:
Jaime Jimenez Ortega
2025-01-09 17:47:58 +00:00
parent 130457f0ef 5edc85c9f7
commit 5d4e59acd5
2 changed files with 157 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php
View File

@ -171,7 +171,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -206,6 +206,9 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container"> <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 id="pv_bn_shape" class="draw-shapes"></div>
</div> </div>
@ -249,7 +252,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -284,6 +287,9 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container"> <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 id="pv_bnhq_shape" class="draw-shapes"></div>
</div> </div>
@ -327,7 +333,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -362,6 +368,9 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container"> <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 id="pv_color_shape" class="draw-shapes"></div>
</div> </div>
@ -405,7 +414,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -440,6 +449,10 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container"> <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 id="pv_colorhq_shape" class="draw-shapes"></div>
</div> </div>
@ -483,7 +496,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -516,6 +529,9 @@
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
<div id="shape-container"> <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 id="pv_rot_bn_shape" class="draw-rot-shapes"></div>
</div> </div>
@ -560,7 +576,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -593,6 +609,9 @@
<h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
<div id="shape-container"> <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 id="pv_rot_color_shape" class="draw-rot-shapes"></div>
</div> </div>
@ -636,7 +655,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -671,6 +690,9 @@
<h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6> <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
<div id="shape-container"> <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 id="pv_guardas_shape" class="draw-shapes"></div>
</div> </div>
@ -714,7 +736,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -752,6 +774,9 @@
<h6><?= lang("Presupuestos.previewCubierta") ?></h6> <h6><?= lang("Presupuestos.previewCubierta") ?></h6>
<div id="pv-cubierta-container"> <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 id="pv_cubierta_shape" class="draw-shapes"></div>
</div> </div>
@ -795,7 +820,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -817,6 +842,9 @@
<h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6> <h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6>
<div id="shape-container"> <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 id="pv_ec_shape" class="draw-shapes"></div>
</div> </div>
@ -860,7 +888,7 @@
</div> </div>
</div> </div>
<hr class="mx-n4"/> <hr class="mx-n4" />
<!-- Detalles del presupuesto --> <!-- Detalles del presupuesto -->
<h6><?= lang("Presupuestos.previewDetalles") ?></h6> <h6><?= lang("Presupuestos.previewDetalles") ?></h6>
@ -922,66 +950,64 @@
$('#tab-pv-bn').on( "click", function() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() { $('#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() ?>

32
httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js
View File

@ -93,6 +93,7 @@ class PresupuestoAdminEdit {
sessionStorage.removeItem('message'); sessionStorage.removeItem('message');
} }
} }
this.downloadPreviewImage();
} }
#cargarPresupuesto() { #cargarPresupuesto() {
@ -257,6 +258,37 @@ class PresupuestoAdminEdit {
showBreadCrumbSaveButton(true); 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;
})
}
} }