mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-21 16:20:22 +00:00
trabajando en la pestaña cubierta
This commit is contained in:
Jaime Jiménez
@ -7,14 +7,14 @@ class imagen_presupuesto {
|
||||
this.group = data.group || ""; // Grupo al que pertenece el radio
|
||||
this.texto = data.texto || ""; // Texto de la etiqueta
|
||||
this.selected = data.selected || false;
|
||||
this.extraClass = data.extraClass + " " || "";
|
||||
this.extraClass = (data.extraClass && !(data.extraClass===undefined))? (data.extraClass + ' ') : '';
|
||||
this.extraData = data.extra_data || {}; // Datos extra opcionales
|
||||
}
|
||||
|
||||
render() {
|
||||
const contenedor = $('<div>', {
|
||||
id: this.id,
|
||||
class: `${this.extraClass}image-container imagen-selector${this.selected ? ' selected' : ''}`
|
||||
class: `${this.extraClass + ' '}image-container imagen-selector${this.selected ? ' selected' : ''}`
|
||||
});
|
||||
// Añadir atributos extra al contenedor
|
||||
for (const [key, value] of Object.entries(this.extraData)) {
|
||||
|
||||
@ -15,8 +15,6 @@ $('.imagen-container-group').on('click', '.image-container', function () {
|
||||
void img[0].offsetWidth; // Forzar reflow
|
||||
img.addClass('zoom-anim');
|
||||
|
||||
// Guardar selección en hidden
|
||||
$('#tipoEncuadernacionSeleccionada').val(clicked.attr('id'));
|
||||
|
||||
clicked.find('input[type="radio"]').prop('checked', true).trigger('change');
|
||||
});
|
||||
|
||||
@ -21,14 +21,25 @@ class PresupuestoCliente {
|
||||
paginasNegro: '',
|
||||
paginasColor: '',
|
||||
posicionPaginasColor: '',
|
||||
tipoImpresion: 'fresado',
|
||||
tipoEncuadernacion: 'fresado',
|
||||
},
|
||||
interior: {
|
||||
color: '',
|
||||
papel: '',
|
||||
gramaje: '',
|
||||
},/*
|
||||
cubierta: {},*/
|
||||
tipoImpresion: 'negro',
|
||||
papelInteriorId: 3,
|
||||
gramajeInterior: 9,
|
||||
},
|
||||
cubierta: {
|
||||
tipoCubierta: 'tapaBlanda',
|
||||
solapasCubierta: 0,
|
||||
tamanioSolapasCubierta: '80',
|
||||
cubiertaCaras: 2,
|
||||
papelGuardasId: 3,
|
||||
gramajeGuardas: 170,
|
||||
guardasImpresas: 0,
|
||||
cabezada: 'WHI',
|
||||
papelCubiertaId: 3,
|
||||
gramajeCubierta: 170,
|
||||
}
|
||||
}
|
||||
|
||||
// pestaña datos generales
|
||||
@ -58,16 +69,21 @@ class PresupuestoCliente {
|
||||
this.divContentInterior = $('#content-interior');
|
||||
this.divOpcionesColor = $('#div-opciones-color');
|
||||
this.divPapelInterior = $('#div-papel-interior');
|
||||
this.divGramajeInterior = $("#div-gramaje-interior");
|
||||
this.interior_alert = $('#interior-alert');
|
||||
|
||||
// pestaña cubierta
|
||||
this.divSolapasCubierta = $('#div-solapas-cubierta');
|
||||
this.divPapelCubierta = $('#div-papel-cubierta');
|
||||
this.divGramajeCubierta = $("#div-gramaje-cubierta");
|
||||
this.btn_plantilla_cubierta = $('#btn-plantilla-cubierta');
|
||||
this.btn_impresion_cubierta_help = $('#impresion-cubierta-help');
|
||||
|
||||
}
|
||||
|
||||
init() {
|
||||
|
||||
this.#initDatosGenerales();
|
||||
this.#initInterior();
|
||||
this.#initCubierta();
|
||||
|
||||
const stored = sessionStorage.getItem("formData");
|
||||
@ -89,6 +105,36 @@ class PresupuestoCliente {
|
||||
}
|
||||
}
|
||||
|
||||
#getPresupuestoData() {
|
||||
return {
|
||||
...this.#getDatosGeneralesData(),
|
||||
...this.#getInteriorData(),
|
||||
...this.#getCubiertaData()
|
||||
};
|
||||
}
|
||||
|
||||
#addGramaje(contenedor, gramaje, name) {
|
||||
const id = `gramaje-${gramaje}`;
|
||||
|
||||
// Crear input
|
||||
const input = document.createElement('input');
|
||||
input.type = 'radio';
|
||||
input.className = 'btn-check';
|
||||
input.dataset.gramaje = gramaje;
|
||||
input.id = id;
|
||||
input.name = name;
|
||||
|
||||
// Crear label
|
||||
const label = document.createElement('label');
|
||||
label.className = 'btn btn-outline-primary material-shadow gramaje-radio';
|
||||
label.setAttribute('for', id);
|
||||
label.textContent = gramaje;
|
||||
|
||||
// Añadir al contenedor
|
||||
contenedor.append(input);
|
||||
contenedor.append(label);
|
||||
}
|
||||
|
||||
/******************************
|
||||
* END OF DATOS GENERALES
|
||||
******************************/
|
||||
@ -109,7 +155,7 @@ class PresupuestoCliente {
|
||||
else {
|
||||
this.divPosicionPaginasColor.removeClass('d-none');
|
||||
}
|
||||
this.#updateTipoImpresion();
|
||||
this.#updateTipoEncuadernacion();
|
||||
});
|
||||
|
||||
this.formatoPersonalizado.on('change', () => {
|
||||
@ -130,10 +176,10 @@ class PresupuestoCliente {
|
||||
|
||||
#nextDatosGenerales() {
|
||||
|
||||
const data = this.#getDatosGeneralesData();
|
||||
let data = this.#getPresupuestoData();
|
||||
|
||||
$.ajax({
|
||||
url: '/presupuesto/validar/datos-generales',
|
||||
url: '/presupuesto/public/validar/datos-generales',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (data) => {
|
||||
@ -166,6 +212,9 @@ class PresupuestoCliente {
|
||||
|
||||
this.#loadInteriorData(data);
|
||||
|
||||
const interiorData = this.#getInteriorData();
|
||||
this.#updateInteriorData(interiorData);
|
||||
|
||||
this.#changeTab('pills-inside');
|
||||
|
||||
this.divContentInterior.addClass('animate-fadeInUpBounce');
|
||||
@ -189,7 +238,7 @@ class PresupuestoCliente {
|
||||
paginasNegro: this.paginasNegro.val(),
|
||||
paginasColor: this.paginasColor.val(),
|
||||
posicionPaginasColor: this.posicionPaginasColor.val(),
|
||||
tipoImpresion: ($('.tipo-libro.selected').length > 0) ? $('.tipo-libro.selected').attr('id') : 'fresado',
|
||||
tipoEncuadernacion: ($('.tipo-libro.selected').length > 0) ? $('.tipo-libro.selected').attr('id') : 'fresado',
|
||||
};
|
||||
}
|
||||
|
||||
@ -209,7 +258,7 @@ class PresupuestoCliente {
|
||||
paginasNegro: data.paginasNegro,
|
||||
paginasColor: data.paginasColor,
|
||||
posicionPaginasColor: data.posicionPaginasColor,
|
||||
tipoImpresion: data.tipoImpresion,
|
||||
tipoEncuadernacion: data.tipoEncuadernacion,
|
||||
};
|
||||
}
|
||||
|
||||
@ -222,18 +271,18 @@ class PresupuestoCliente {
|
||||
this.tirada2.val(this.formData.datosGenerales.tirada2);
|
||||
this.tirada3.val(this.formData.datosGenerales.tirada3);
|
||||
this.tirada4.val(this.formData.datosGenerales.tirada4);
|
||||
|
||||
|
||||
this.paginasNegro.val(this.formData.datosGenerales.paginasNegro);
|
||||
this.paginasColor.val(this.formData.datosGenerales.paginasColor);
|
||||
|
||||
this.posicionPaginasColor.val(this.formData.datosGenerales.posicionPaginasColor);
|
||||
|
||||
$('.tipo-libro').removeClass('selected');
|
||||
$('.image-container#' + this.formData.datosGenerales.tipoImpresion).trigger('click');
|
||||
this.#updateTipoImpresion();
|
||||
$('.image-container#' + this.formData.datosGenerales.tipoEncuadernacion).trigger('click');
|
||||
this.#updateTipoEncuadernacion();
|
||||
|
||||
this.formatoPersonalizado.prop('checked', this.formData.datosGenerales.formatoPersonalizado).trigger('change');
|
||||
|
||||
|
||||
$('.paginas').trigger('change');
|
||||
|
||||
if (this.formatoPersonalizado.is(':checked')) {
|
||||
@ -270,7 +319,7 @@ class PresupuestoCliente {
|
||||
}
|
||||
}
|
||||
|
||||
#updateTipoImpresion() {
|
||||
#updateTipoEncuadernacion() {
|
||||
|
||||
const paginas = parseInt(this.paginas.val());
|
||||
const selectedTipo = $('.tipo-libro.selected').attr('id');
|
||||
@ -280,13 +329,24 @@ class PresupuestoCliente {
|
||||
$('.tipo-libro#fresado').addClass('d-none');
|
||||
$('.tipo-libro#cosido').addClass('d-none');
|
||||
}
|
||||
else {
|
||||
$('.tipo-libro#fresado').removeClass('d-none');
|
||||
$('.tipo-libro#cosido').removeClass('d-none');
|
||||
}
|
||||
if (paginas < 20) {
|
||||
$('.tipo-libro#espiral').addClass('d-none');
|
||||
$('.tipo-libro#wireo').addClass('d-none');
|
||||
}
|
||||
else {
|
||||
$('.tipo-libro#espiral').removeClass('d-none');
|
||||
$('.tipo-libro#wireo').removeClass('d-none');
|
||||
}
|
||||
if (paginas < 12 || paginas > 40) {
|
||||
$('.tipo-libro#grapado').addClass('d-none');
|
||||
}
|
||||
else {
|
||||
$('.tipo-libro#grapado').removeClass('d-none');
|
||||
}
|
||||
|
||||
if (selectedTipo && $('.tipo-libro#' + selectedTipo).length > 0 && !$('.tipo-libro#' + selectedTipo).hasClass('d-none')) {
|
||||
$('.tipo-libro#' + selectedTipo).addClass('selected');
|
||||
@ -300,10 +360,10 @@ class PresupuestoCliente {
|
||||
}
|
||||
|
||||
if ($('.tipo-libro.selected').length > 0) {
|
||||
this.formData.datosGenerales.tipoImpresion = $('.tipo-libro.selected').attr('id');
|
||||
this.formData.datosGenerales.tipoEncuadernacion = $('.tipo-libro.selected').attr('id');
|
||||
}
|
||||
else {
|
||||
this.formData.datosGenerales.tipoImpresion = '';
|
||||
this.formData.datosGenerales.tipoEncuadernacion = '';
|
||||
}
|
||||
}
|
||||
/******************************
|
||||
@ -314,17 +374,94 @@ class PresupuestoCliente {
|
||||
/******************************
|
||||
* INTERIOR
|
||||
******************************/
|
||||
|
||||
#initInterior() {
|
||||
|
||||
$(document).on('click', '.interior-data', (e) => {
|
||||
const dataToStore = this.#getInteriorData();
|
||||
this.#updateInteriorData(dataToStore);
|
||||
this.#cacheFormData();
|
||||
});
|
||||
|
||||
$(document).on('click', '.papel-interior', (e) => {
|
||||
|
||||
this.divGramajeInterior.removeClass('animate-fadeInUpBounce');
|
||||
|
||||
const data = this.#getPresupuestoData();
|
||||
$.ajax({
|
||||
url: '/presupuesto/public/get-gramaje-interior',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
}).done((data) => {
|
||||
|
||||
this.divGramajeInterior.empty();
|
||||
const gramajes = data.opciones_gramaje_interior;
|
||||
this.#addGramajesInterior(gramajes);
|
||||
this.divGramajeInterior.addClass('animate-fadeInUpBounce');
|
||||
|
||||
const dataInterior = this.#getInteriorData();
|
||||
this.#updateInteriorData(dataInterior);
|
||||
this.#cacheFormData();
|
||||
|
||||
}).fail((xhr, status, error) => {
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$('.btn-change-tab-interior').on('click', (e) => {
|
||||
|
||||
let data = this.#getPresupuestoData();
|
||||
const id = e.currentTarget.id;
|
||||
|
||||
$.ajax({
|
||||
url: '/presupuesto/public/validar/interior',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (data) => {
|
||||
if( id === 'btn-prev-interior') {
|
||||
|
||||
this.#changeTab('pills-general-data');
|
||||
} else {
|
||||
$('.tapa-cubierta.selected').trigger('click');
|
||||
this.#changeTab('pills-cover');
|
||||
}
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
|
||||
this.interior_alert.removeClass('d-none');
|
||||
this.interior_alert.find('#inside-alert-list').empty();
|
||||
const errors = xhr.responseJSON;
|
||||
if (errors && typeof errors === 'object') {
|
||||
if (!this.DEBUG && xhr.responseJSON.error && xhr.responseJSON.error == 'Internal Server Error') {
|
||||
console.error("Error al validar los datos generales. Internal Server Error");
|
||||
return;
|
||||
}
|
||||
Object.values(errors).forEach(errorMsg => {
|
||||
this.interior_alert.find('#inside-alert-list').append(`<li>${errorMsg}</li>`);
|
||||
});
|
||||
} else {
|
||||
this.interior_alert.find('#inside-alert-list').append('<li>Error desconocido. Por favor, inténtelo de nuevo más tarde.</li>');
|
||||
}
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
#loadInteriorData(data) {
|
||||
|
||||
|
||||
this.divOpcionesColor.empty();
|
||||
this.divPapelInterior.empty();
|
||||
this.divGramajeInterior.empty();
|
||||
|
||||
const opciones_color = data.opciones_color;
|
||||
|
||||
for (let i = 0; i < opciones_color.length; i++) {
|
||||
const opcion = opciones_color[i];
|
||||
const item = new imagen_presupuesto(opcion);
|
||||
item.extraClass = 'interior-data';
|
||||
if ((this.formData.interior.color === '' && i === 0) ||
|
||||
this.formData.interior.color === opcion.color) {
|
||||
this.formData.interior.color === opcion.id) {
|
||||
item.setSelected(true);
|
||||
}
|
||||
this.divOpcionesColor.append(item.render());
|
||||
@ -334,12 +471,55 @@ class PresupuestoCliente {
|
||||
for (let i = 0; i < opciones_papel_interior.length; i++) {
|
||||
const opcion = opciones_papel_interior[i];
|
||||
const item = new imagen_presupuesto(opcion);
|
||||
if ((this.formData.interior.papel === '' && i === 0) ||
|
||||
this.formData.interior.papel === opcion.papel) {
|
||||
item.setSelected(true);
|
||||
}
|
||||
item.extraClass = 'interior-data papel-interior';
|
||||
|
||||
this.divPapelInterior.append(item.render());
|
||||
}
|
||||
|
||||
const gramajes = data.opciones_gramaje_interior;
|
||||
this.#addGramajesInterior(gramajes);
|
||||
|
||||
const dataInterior = this.#getInteriorData();
|
||||
this.#updateInteriorData(dataInterior);
|
||||
this.#cacheFormData();
|
||||
}
|
||||
|
||||
#addGramajesInterior(gramajes) {
|
||||
|
||||
for (let i = 0; i < gramajes.length; i++) {
|
||||
const gramaje = gramajes[i];
|
||||
this.#addGramaje(this.divGramajeInterior, gramaje, 'gramaje-interior');
|
||||
|
||||
// Seleccionar el gramaje por defecto
|
||||
if (this.formData.interior.gramaje === '' && i === 0) {
|
||||
$(`#gramaje-${gramaje}`).prop('checked', true);
|
||||
} else if (this.formData.interior.gramaje === gramaje) {
|
||||
$(`#gramaje-${gramaje}`).prop('checked', true);
|
||||
}
|
||||
}
|
||||
if (this.divGramajeInterior.find('input[type="radio"]:checked').length === 0) {
|
||||
// If not, select the first one by default
|
||||
this.divGramajeInterior.find('input[type="radio"]').first().prop('checked', true);
|
||||
}
|
||||
}
|
||||
|
||||
#getInteriorData() {
|
||||
|
||||
const tipoImpresion = $('#div-opciones-color .image-container.selected').attr('id') || 'negro';
|
||||
const papelInteriorId = $('#div-papel-interior .image-container.selected').data('sk-id') || 3;
|
||||
const gramejeInterior = $('input[name="gramaje-interior"]:checked').data('gramaje') || 90;
|
||||
return {
|
||||
tipoImpresion: tipoImpresion,
|
||||
papelInteriorId: papelInteriorId,
|
||||
gramejeInterior: gramejeInterior
|
||||
};
|
||||
}
|
||||
|
||||
#updateInteriorData(data) {
|
||||
|
||||
this.formData.interior.tipoImpresion = data.tipoImpresion;
|
||||
this.formData.interior.papelInteriorId = data.papelInteriorId;
|
||||
this.formData.interior.gramejeInterior = data.gramejeInterior;
|
||||
}
|
||||
|
||||
|
||||
@ -383,6 +563,122 @@ class PresupuestoCliente {
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.tapa-cubierta', (e) => {
|
||||
|
||||
$('.tapa-dura-options').eq(0).removeClass('animate-fadeInUpBounce');
|
||||
$('.tapa-blanda-options').eq(0).removeClass('animate-fadeInUpBounce');
|
||||
|
||||
if(e.currentTarget.id === 'tapaBlanda') {
|
||||
$('.tapa-dura-options').addClass('d-none');
|
||||
$('.tapa-blanda-options').removeClass('d-none');
|
||||
$('.tapa-blanda-options').eq(0).addClass('animate-fadeInUpBounce');
|
||||
}
|
||||
else{
|
||||
$('.tapa-blanda-options').addClass('d-none');
|
||||
$('.tapa-dura-options').removeClass('d-none');
|
||||
$('.tapa-dura-options').eq(0).addClass('animate-fadeInUpBounce');
|
||||
}
|
||||
|
||||
this.#getPapelesCubierta(e.currentTarget.id);
|
||||
|
||||
const dataToStore = this.#getCubiertaData();
|
||||
this.#updateCubiertaData(dataToStore);
|
||||
this.#cacheFormData();
|
||||
});
|
||||
|
||||
$(document).on('click', '.solapas-cubierta', (e) => {
|
||||
|
||||
if(e.currentTarget.id === 'sin-solapas') {
|
||||
this.divSolapasCubierta.addClass('d-none');
|
||||
}
|
||||
else{
|
||||
this.divSolapasCubierta.removeClass('d-none');
|
||||
}
|
||||
|
||||
const dataToStore = this.#getCubiertaData();
|
||||
this.#updateCubiertaData(dataToStore);
|
||||
this.#cacheFormData();
|
||||
});
|
||||
}
|
||||
|
||||
#getPapelesCubierta(tapa_id) {
|
||||
|
||||
this.divPapelCubierta.removeClass('animate-fadeInUpBounce');
|
||||
|
||||
return $.ajax({
|
||||
url: '/presupuesto/public/get-papel-cubierta',
|
||||
type: 'POST',
|
||||
data: {
|
||||
tipoCubierta: tapa_id,
|
||||
papelCubiertaId: this.formData.cubierta.papelCubiertaId,
|
||||
gramajeCubierta: this.formData.cubierta.gramajeCubierta,
|
||||
},
|
||||
success: (data) => {
|
||||
|
||||
this.divPapelCubierta.empty();
|
||||
this.divGramajeCubierta.empty();
|
||||
|
||||
const papelesCubierta = data.opciones_papel_cubierta;
|
||||
for (let i = 0; i < papelesCubierta.length; i++) {
|
||||
const papel = papelesCubierta[i];
|
||||
const item = new imagen_presupuesto(papel);
|
||||
item.extraClass = 'cubierta-data papel-cubierta';
|
||||
if (papel.id === this.formData.cubierta.papelCubiertaId) {
|
||||
item.setSelected(true);
|
||||
}
|
||||
this.divPapelCubierta.append(item.render());
|
||||
}
|
||||
|
||||
this.divPapelCubierta.addClass('animate-fadeInUpBounce');
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
|
||||
console.error("Error al obtener los papeles de cubierta: ", xhr.responseText);
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#getCubiertaData() {
|
||||
|
||||
const tipoCubierta = $('.cubierta-data.tapa.selected').attr('id') || 'tapaBlanda';
|
||||
const solapas = parseInt($('#div-solapas-cubierta input[type="radio"]:checked').val()) || 0;
|
||||
const tamanioSolapas = $('#tamanio-solapas-cubierta').val() || '80';
|
||||
const cubiertaCaras = parseInt($('#cubierta-caras').val()) || 2;
|
||||
const guardasPapel = parseInt($('#guardas-papel').val()) || 3;
|
||||
const guardasGramaje = parseInt($('#guardas-gramaje').val()) || 170;
|
||||
const guardasImpresas = parseInt($('#guardas-impresas').val()) || 0;
|
||||
const cabezada = $('#cabezada').val() || 'WHI';
|
||||
const papelCubiertaId = $('#papel-cubierta-id').val() || 3;
|
||||
const gramajeCubierta = $('#gramaje-cubierta').val() || 170;
|
||||
|
||||
return {
|
||||
tipoCubierta: tipoCubierta,
|
||||
solapas: solapas,
|
||||
tamanioSolapas: tamanioSolapas,
|
||||
cubiertaCaras: cubiertaCaras,
|
||||
guardasPapel: guardasPapel,
|
||||
guardasGramaje: guardasGramaje,
|
||||
guardasImpresas: guardasImpresas,
|
||||
cabezada: cabezada,
|
||||
papelCubiertaId: papelCubiertaId,
|
||||
gramajeCubierta: gramajeCubierta
|
||||
};
|
||||
}
|
||||
|
||||
#updateCubiertaData(data) {
|
||||
|
||||
this.formData.cubierta.tipoCubierta = data.tipoCubierta;
|
||||
this.formData.cubierta.solapas = data.solapas;
|
||||
this.formData.cubierta.tamanioSolapas = data.tamanioSolapas;
|
||||
this.formData.cubierta.cubiertaCaras = data.cubiertaCaras;
|
||||
this.formData.cubierta.guardasPapel = data.guardasPapel;
|
||||
this.formData.cubierta.guardasGramaje = data.guardasGramaje;
|
||||
this.formData.cubierta.guardasImpresas = data.guardasImpresas;
|
||||
this.formData.cubierta.cabezada = data.cabezada;
|
||||
this.formData.cubierta.papelCubiertaId = data.papelCubiertaId;
|
||||
this.formData.cubierta.gramajeCubierta = data.gramajeCubierta;
|
||||
}
|
||||
/******************************
|
||||
* END CUBIERTA
|
||||
|
||||
Reference in New Issue
Block a user