terminado hasta gramaje de cubierta

This commit is contained in:
Jaime Jiménez
2025-08-05 10:06:41 +02:00
parent 29dbd21693
commit e7589de194
13 changed files with 648 additions and 235 deletions

View File

@ -92,4 +92,5 @@
.animate-fadeInUpBounce {
animation: fadeInUpBounce 0.6s ease-out both;
animation-delay: 0.1s;
will-change: transform;
}

View File

@ -26,7 +26,7 @@ class PresupuestoCliente {
interior: {
tipoImpresion: 'negro',
papelInteriorId: 3,
gramajeInterior: 9,
gramajeInterior: 80,
},
cubierta: {
tipoCubierta: 'tapaBlanda',
@ -86,6 +86,21 @@ class PresupuestoCliente {
this.#initInterior();
this.#initCubierta();
$(document).on('change', 'input[min][max]', function () {
const $input = $(this);
let valor = parseFloat($input.val());
const min = parseFloat($input.attr('min'));
const max = parseFloat($input.attr('max'));
if (isNaN(valor)) return;
if (valor < min) {
$input.val(min);
} else if (valor > max) {
$input.val(max);
}
});
const stored = sessionStorage.getItem("formData");
if (stored) {
this.formData = JSON.parse(stored);
@ -114,6 +129,7 @@ class PresupuestoCliente {
}
#addGramaje(contenedor, gramaje, name) {
const id = `gramaje-${gramaje}`;
// Crear input
@ -126,7 +142,7 @@ class PresupuestoCliente {
// Crear label
const label = document.createElement('label');
label.className = 'btn btn-outline-primary material-shadow gramaje-radio';
label.className = 'btn btn-outline-primary material-shadow gramaje-radio gramaje-interior';
label.setAttribute('for', id);
label.textContent = gramaje;
@ -383,28 +399,109 @@ class PresupuestoCliente {
this.#cacheFormData();
});
$(document).on('click', '.opcion-color', (e) => {
const data = this.#getPresupuestoData();
this.divPapelInterior.empty();
this.divGramajeInterior.empty();
this.divPapelInterior.removeClass('animate-fadeInUpBounce');
this.divGramajeInterior.removeClass('animate-fadeInUpBounce');
$.ajax({
url: '/presupuesto/public/get-papel-interior',
type: 'POST',
data: data,
success: (data) => {
this.divPapelInterior.addClass('animate-fadeInUpBounce');
this.divGramajeInterior.addClass('animate-fadeInUpBounce');
const opciones_papel_interior = data.opciones_papel_interior;
for (let i = 0; i < opciones_papel_interior.length; i++) {
const opcion = opciones_papel_interior[i];
const item = new imagen_presupuesto(opcion);
item.extraClass = 'interior-data papel-interior';
if (opcion.id === this.formData.interior.papelInteriorId) {
item.setSelected(true);
}
this.divPapelInterior.append(item.render());
}
const gramajes = data.opciones_gramaje_interior;
const maxSolapas = data.solapas ?? 120;
$('.solapas-presupuesto').attr('max', maxSolapas);
$('.max-solapa-text').text(function (_, textoActual) {
return textoActual.replace(/\d+/, maxSolapas);
});
this.#addGramajesInterior(gramajes);
},
error: (xhr, status, error) => {
console.error("Error al obtener los papeles de interior: ", xhr.responseText);
}
});
});
$(document).on('click', '.papel-interior', (e) => {
this.divGramajeInterior.removeClass('animate-fadeInUpBounce');
const data = this.#getPresupuestoData();
this.divGramajeInterior.removeClass('animate-fadeInUpBounce');
this.divGramajeInterior.empty();
$.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 maxSolapas = data.solapas ?? 120;
$('.solapas-presupuesto').attr('max', maxSolapas);
$('.max-solapa-text').text(function (_, textoActual) {
return textoActual.replace(/\d+/, maxSolapas);
});
const dataInterior = this.#getInteriorData();
this.#updateInteriorData(dataInterior);
this.#cacheFormData();
}).fail((xhr, status, error) => {
console.error("Error al obtener los gramajes de interior: ", xhr.responseText);
});
});
$(document).on('click', '.gramaje-interior', (e) => {
const inputId = $(e.currentTarget).attr('for');
const gramaje = parseInt($('#' + inputId).data('gramaje'));
this.formData.interior.gramajeInterior = gramaje;
this.#cacheFormData();
const data = this.#getPresupuestoData();
$.ajax({
url: '/presupuesto/public/get-max-solapas',
type: 'POST',
data: data,
}).done((data) => {
const maxSolapas = data.solapas ?? 120;
$('.solapas-presupuesto').attr('max', maxSolapas);
$('.max-solapa-text').text(function (_, textoActual) {
return textoActual.replace(/\d+/, maxSolapas);
});
}).fail((xhr, status, error) => {
console.error("Error al obtener los gramajes de interior: ", xhr.responseText);
});
});
@ -418,10 +515,15 @@ class PresupuestoCliente {
type: 'POST',
data: data,
success: (data) => {
if( id === 'btn-prev-interior') {
if (id === 'btn-prev-interior') {
this.#changeTab('pills-general-data');
} else {
const maxSolapas = data.solapas ?? 120;
$('.solapas-presupuesto').attr('max', maxSolapas);
$('.max-solapa-text').text(function (_, textoActual) {
return textoActual.replace(/\d+/, maxSolapas);
});
$('.tapa-cubierta.selected').trigger('click');
this.#changeTab('pills-cover');
}
@ -459,7 +561,7 @@ class PresupuestoCliente {
for (let i = 0; i < opciones_color.length; i++) {
const opcion = opciones_color[i];
const item = new imagen_presupuesto(opcion);
item.extraClass = 'interior-data';
item.extraClass = 'interior-data opcion-color';
if ((this.formData.interior.color === '' && i === 0) ||
this.formData.interior.color === opcion.id) {
item.setSelected(true);
@ -491,9 +593,9 @@ class PresupuestoCliente {
this.#addGramaje(this.divGramajeInterior, gramaje, 'gramaje-interior');
// Seleccionar el gramaje por defecto
if (this.formData.interior.gramaje === '' && i === 0) {
if (this.formData.interior.gramajeInterior === '' && i === 0) {
$(`#gramaje-${gramaje}`).prop('checked', true);
} else if (this.formData.interior.gramaje === gramaje) {
} else if (this.formData.interior.gramajeInterior == gramaje) {
$(`#gramaje-${gramaje}`).prop('checked', true);
}
}
@ -507,11 +609,11 @@ class PresupuestoCliente {
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;
const gramajeInterior = $('input[name="gramaje-interior"]:checked').data('gramaje') || 90;
return {
tipoImpresion: tipoImpresion,
papelInteriorId: papelInteriorId,
gramejeInterior: gramejeInterior
gramajeInterior: gramajeInterior
};
}
@ -519,7 +621,7 @@ class PresupuestoCliente {
this.formData.interior.tipoImpresion = data.tipoImpresion;
this.formData.interior.papelInteriorId = data.papelInteriorId;
this.formData.interior.gramejeInterior = data.gramejeInterior;
this.formData.interior.gramajeInterior = data.gramajeInterior;
}
@ -566,92 +668,147 @@ class PresupuestoCliente {
$(document).on('click', '.tapa-cubierta', (e) => {
const prevTargetisTapaDura = !$('.tapa-dura-options').hasClass('d-none');
$('.tapa-dura-options').eq(0).removeClass('animate-fadeInUpBounce');
$('.tapa-blanda-options').eq(0).removeClass('animate-fadeInUpBounce');
if(e.currentTarget.id === 'tapaBlanda') {
if (e.currentTarget.id === 'tapaBlanda') {
$('.tapa-blanda-options').eq(0).addClass('animate-fadeInUpBounce');
$('.tapa-dura-options').addClass('d-none');
$('.tapa-blanda-options').removeClass('d-none');
$('.tapa-blanda-options').eq(0).addClass('animate-fadeInUpBounce');
}
else{
else {
$('.tapa-dura-options').eq(0).addClass('animate-fadeInUpBounce');
$('.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);
if (!(e.currentTarget.id !== 'tapaBlanda' && prevTargetisTapaDura)) {
this.#getPapelesCubierta(e.currentTarget.id);
}
});
$(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();
});
$(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();
$(document).on('click', '.papel-cubierta', (e) => {
const data = this.#getPresupuestoData();
this.divGramajeCubierta.removeClass('animate-fadeInUpBounce');
this.divGramajeCubierta.empty();
$.ajax({
url: '/presupuesto/public/get-gramaje-cubierta',
type: 'POST',
data: data,
}).done((data) => {
const gramajes = data.opciones_gramaje_cubierta;
this.#addGramajesCubierta(gramajes);
this.divGramajeCubierta.addClass('animate-fadeInUpBounce');
const dataCubierta = this.#getCubiertaData();
this.#updateCubiertaData(dataCubierta);
this.#cacheFormData();
}).fail((xhr, status, error) => {
console.error("Error al obtener los gramajes de interior: ", xhr.responseText);
});
});
}
#getPapelesCubierta(tapa_id) {
this.divPapelCubierta.removeClass('animate-fadeInUpBounce');
new Promise((resolve) => {
this.divPapelCubierta.empty();
this.divGramajeCubierta.empty();
setTimeout(resolve, 250);
}).then(() => {
this.divPapelCubierta.removeClass('animate-fadeInUpBounce');
this.divGramajeCubierta.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) => {
$.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.addClass('animate-fadeInUpBounce');
this.divGramajeCubierta.addClass('animate-fadeInUpBounce');
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);
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 (item.extraData["sk-id"] == this.formData.cubierta.papelCubiertaId) {
item.setSelected(true);
}
this.divPapelCubierta.append(item.render());
}
this.divPapelCubierta.append(item.render());
if (this.divPapelCubierta.find('.image-container.selected').length === 0) {
this.divPapelCubierta.find('.image-container').first().addClass('selected');
this.formData.cubierta.papelCubiertaId =
this.divPapelCubierta.find('.image-container').first().data('sk-id') || 3;
}
const gramajesCubierta = data.opciones_gramaje_cubierta;
for (let i = 0; i < gramajesCubierta.length; i++) {
const gramaje = gramajesCubierta[i];
this.#addGramaje(this.divGramajeCubierta, gramaje, 'gramaje-cubierta');
if (this.formData.cubierta.gramajeCubierta === '' && i === 0) {
$(`#gramaje-${gramaje}`).prop('checked', true);
} else if (this.formData.cubierta.gramajeCubierta == gramaje) {
$(`#gramaje-${gramaje}`).prop('checked', true);
}
}
if (this.divGramajeCubierta.find('input[type="radio"]:checked').length === 0) {
this.divGramajeCubierta.find('input[type="radio"]').first().prop('checked', true);
}
const dataToStore = this.#getCubiertaData();
this.#updateCubiertaData(dataToStore);
this.#cacheFormData();
},
error: (xhr, status, error) => {
console.error("Error al obtener los papeles de cubierta: ", xhr.responseText);
$(window).scrollTop(0);
}
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 tipoCubierta = $('.tapa-cubierta.selected').attr('id') || 'tapaBlanda';
const solapas = $('.solapas-cubierta.selected').id == 'sin-solapas' ? 0 : 1 || 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;
const papelCubiertaId = $('#div-papel-cubierta .image-container.selected').data('sk-id') || 3;
const gramajeCubierta = $('input[name="gramaje-cubierta"]:checked').data('gramaje') || 240;
return {
tipoCubierta: tipoCubierta,
@ -680,6 +837,25 @@ class PresupuestoCliente {
this.formData.cubierta.papelCubiertaId = data.papelCubiertaId;
this.formData.cubierta.gramajeCubierta = data.gramajeCubierta;
}
#addGramajesCubierta(gramajes) {
for (let i = 0; i < gramajes.length; i++) {
const gramaje = gramajes[i];
this.#addGramaje(this.divGramajeCubierta, gramaje, 'gramaje-cubierta');
// Seleccionar el gramaje por defecto
if (this.formData.interior.gramajeCubierta === '' && i === 0) {
$(`#gramaje-${gramaje}`).prop('checked', true);
} else if (this.formData.interior.gramajeCubierta == gramaje) {
$(`#gramaje-${gramaje}`).prop('checked', true);
}
}
if (this.divGramajeCubierta.find('input[type="radio"]:checked').length === 0) {
// If not, select the first one by default
this.divGramajeCubierta.find('input[type="radio"]').first().prop('checked', true);
}
}
/******************************
* END CUBIERTA
******************************/