mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-24 09:40:21 +00:00
trabajando en interior
This commit is contained in:
Jaime Jiménez
@ -1,23 +1,65 @@
|
||||
$(() => {
|
||||
$('.imagen-container-group').on('click', '.imagen-selector', function () {
|
||||
const clicked = $(this);
|
||||
const group = clicked.closest('.imagen-container-group');
|
||||
class imagen_presupuesto {
|
||||
|
||||
// Limpiar selección anterior
|
||||
group.find('.imagen-selector').removeClass('selected preselected')
|
||||
.find('.image-presupuesto').removeClass('selected');
|
||||
constructor(data) {
|
||||
this.id = data.id;
|
||||
this.imagen = data.imagen;
|
||||
this.alt = data.alt || "";
|
||||
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.extraData = data.extra_data || {}; // Datos extra opcionales
|
||||
}
|
||||
|
||||
// Marcar nuevo seleccionado
|
||||
clicked.addClass('selected');
|
||||
const img = clicked.find('.image-presupuesto');
|
||||
img.addClass('selected');
|
||||
render() {
|
||||
const contenedor = $('<div>', {
|
||||
id: this.id,
|
||||
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)) {
|
||||
contenedor.attr(`data-${key}`, value);
|
||||
}
|
||||
|
||||
// Aplicar animación (reset antes para que se repita)
|
||||
img.removeClass('zoom-anim');
|
||||
void img[0].offsetWidth; // "reflow" para reiniciar animación
|
||||
img.addClass('zoom-anim');
|
||||
const input = $('<input>', {
|
||||
type: 'radio',
|
||||
name: this.group,
|
||||
value: this.id,
|
||||
hidden: true
|
||||
});
|
||||
|
||||
// Guardar ID en hidden si lo necesitas
|
||||
$('#tipoEncuadernacionSeleccionada').val(clicked.attr('id'));
|
||||
});
|
||||
});
|
||||
|
||||
const imagen = $('<img>', {
|
||||
class: 'image-presupuesto',
|
||||
id: this.id + '-img',
|
||||
src: this.imagen,
|
||||
alt: this.alt
|
||||
});
|
||||
|
||||
const etiqueta = $('<label>', {
|
||||
for: this.id + '-img',
|
||||
class: 'form-label',
|
||||
text: this.texto
|
||||
});
|
||||
|
||||
contenedor.append(imagen, etiqueta);
|
||||
return contenedor;
|
||||
}
|
||||
|
||||
setSelected(selected) {
|
||||
|
||||
this.selected = selected;
|
||||
const contenedor = $(`#${this.id}`);
|
||||
const radio = contenedor.find('input[type="radio"]');
|
||||
|
||||
if (selected) {
|
||||
contenedor.addClass('selected');
|
||||
radio.prop('checked', true).trigger('change'); // <-- esto actualiza el input y lanza evento
|
||||
} else {
|
||||
contenedor.removeClass('selected');
|
||||
radio.prop('checked', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default imagen_presupuesto;
|
||||
|
||||
@ -0,0 +1,22 @@
|
||||
|
||||
$('.imagen-container-group').on('click', '.image-container', function () {
|
||||
const clicked = $(this);
|
||||
const group = clicked.closest('.imagen-container-group');
|
||||
|
||||
// Limpiar selección anterior
|
||||
group.find('.image-container').removeClass('selected')
|
||||
.find('.image-presupuesto').removeClass('zoom-anim');
|
||||
|
||||
// Marcar nuevo seleccionado
|
||||
clicked.addClass('selected');
|
||||
|
||||
// Aplicar animación de zoom
|
||||
const img = clicked.find('.image-presupuesto');
|
||||
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');
|
||||
});
|
||||
@ -1,8 +1,38 @@
|
||||
import imagen_presupuesto from "./imagen-presupuesto.js";
|
||||
|
||||
class PresupuestoCliente {
|
||||
|
||||
constructor() {
|
||||
|
||||
this.DEBUG = true; // Activar o desactivar el modo de depuración
|
||||
|
||||
this.formData = {
|
||||
datosGenerales: {
|
||||
titulo: '',
|
||||
autor: '',
|
||||
isbn: '',
|
||||
tirada1: '',
|
||||
tirada2: '',
|
||||
tirada3: '',
|
||||
tirada4: '',
|
||||
ancho: '',
|
||||
alto: '',
|
||||
formatoPersonalizado: false,
|
||||
paginasNegro: '',
|
||||
paginasColor: '',
|
||||
posicionPaginasColor: '',
|
||||
tipoImpresion: 'fresado',
|
||||
},
|
||||
interior: {
|
||||
color: '',
|
||||
papel: '',
|
||||
gramaje: '',
|
||||
},/*
|
||||
cubierta: {},*/
|
||||
}
|
||||
|
||||
// pestaña datos generales
|
||||
this.divContentDatosGenerales = $('#content-datos-generales');
|
||||
this.titulo = $('#titulo');
|
||||
this.autor = $('#autor');
|
||||
this.isbn = $('#isbn');
|
||||
@ -10,25 +40,318 @@ class PresupuestoCliente {
|
||||
this.tirada2 = $('#tirada2');
|
||||
this.tirada3 = $('#tirada3');
|
||||
this.tirada4 = $('#tirada4');
|
||||
this.formatoPersonalizado = $('#formato-personalizado');
|
||||
this.divFormato = $('.div-formato');
|
||||
this.divFormatoPersonalizado = $('.div-formato-personalizado');
|
||||
this.formato = $('#formato');
|
||||
this.ancho = $('#ancho');
|
||||
this.alto = $('#alto');
|
||||
this.paginasNegro = $('#paginas-negro');
|
||||
this.paginasColor = $('#paginas-color')
|
||||
this.paginasColor = $('#paginas-color');
|
||||
this.divPosicionPaginasColor = $('#div-posicion-paginas-color');
|
||||
this.posicionPaginasColor = $('#posicionPaginasColor');
|
||||
this.paginas = $('#paginas');
|
||||
this.btn_next_datos_generales = $('#next-datos-generales');
|
||||
this.datos_generales_alert = $('#datos-generales-alert');
|
||||
|
||||
// pestaña interior
|
||||
this.divContentInterior = $('#content-interior');
|
||||
this.divOpcionesColor = $('#div-opciones-color');
|
||||
this.divPapelInterior = $('#div-papel-interior');
|
||||
|
||||
// pestaña cubierta
|
||||
this.btn_plantilla_cubierta = $('#btn-plantilla-cubierta');
|
||||
this.btn_impresion_cubierta_help = $('#impresion-cubierta-help');
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
init() {
|
||||
|
||||
this.initButtonsEventListeners();
|
||||
this.#initDatosGenerales();
|
||||
this.#initCubierta();
|
||||
|
||||
const stored = sessionStorage.getItem("formData");
|
||||
if (stored) {
|
||||
this.formData = JSON.parse(stored);
|
||||
this.#loadDatosGeneralesData();
|
||||
}
|
||||
}
|
||||
|
||||
initButtonsEventListeners() {
|
||||
#cacheFormData() {
|
||||
sessionStorage.setItem("formData", JSON.stringify(this.formData));
|
||||
}
|
||||
|
||||
#changeTab(idContenidoTab) {
|
||||
const tabButton = document.querySelector(`[data-bs-target="#${idContenidoTab}"]`);
|
||||
if (tabButton) {
|
||||
const tab = new bootstrap.Tab(tabButton);
|
||||
tab.show();
|
||||
}
|
||||
}
|
||||
|
||||
/******************************
|
||||
* END OF DATOS GENERALES
|
||||
******************************/
|
||||
#initDatosGenerales() {
|
||||
|
||||
$('.datos-generales-data').on('change', () => {
|
||||
const dataToStore = this.#getDatosGeneralesData();
|
||||
this.#updateDatosGeneralesData(dataToStore);
|
||||
this.#cacheFormData();
|
||||
});
|
||||
|
||||
$('.paginas').on('change', () => {
|
||||
this.paginas.val(parseInt(this.paginasNegro.val()) + parseInt(this.paginasColor.val()));
|
||||
if (parseInt(this.paginasColor.val()) == 0) {
|
||||
this.divPosicionPaginasColor.addClass('d-none');
|
||||
this.posicionPaginasColor.val("");
|
||||
}
|
||||
else {
|
||||
this.divPosicionPaginasColor.removeClass('d-none');
|
||||
}
|
||||
this.#updateTipoImpresion();
|
||||
});
|
||||
|
||||
this.formatoPersonalizado.on('change', () => {
|
||||
if (this.formatoPersonalizado.is(':checked')) {
|
||||
this.divFormato.addClass('d-none');
|
||||
this.divFormatoPersonalizado.removeClass('d-none');
|
||||
}
|
||||
else {
|
||||
this.divFormatoPersonalizado.addClass('d-none');
|
||||
this.divFormato.removeClass('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
this.btn_next_datos_generales.on('click', () => {
|
||||
this.#nextDatosGenerales();
|
||||
});
|
||||
}
|
||||
|
||||
#nextDatosGenerales() {
|
||||
|
||||
const data = this.#getDatosGeneralesData();
|
||||
|
||||
$.ajax({
|
||||
url: '/presupuesto/validar/datos-generales',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (data) => {
|
||||
this.#processDatosGenerales(data);
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
|
||||
this.datos_generales_alert.removeClass('d-none');
|
||||
this.datos_generales_alert.find('#datos-generales-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.datos_generales_alert.find('#datos-generales-alert-list').append(`<li>${errorMsg}</li>`);
|
||||
});
|
||||
} else {
|
||||
this.datos_generales_alert.find('#datos-generales-alert-list').append('<li>Error desconocido. Por favor, inténtelo de nuevo más tarde.</li>');
|
||||
}
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
#processDatosGenerales(data) {
|
||||
|
||||
this.datos_generales_alert.addClass('d-none');
|
||||
|
||||
this.#loadInteriorData(data);
|
||||
|
||||
this.#changeTab('pills-inside');
|
||||
|
||||
this.divContentInterior.addClass('animate-fadeInUpBounce');
|
||||
}
|
||||
|
||||
#getDatosGeneralesData() {
|
||||
|
||||
const tamanio = this.#getTamanio();
|
||||
|
||||
return {
|
||||
titulo: this.titulo.val(),
|
||||
autor: this.autor.val(),
|
||||
isbn: this.isbn.val(),
|
||||
tirada1: this.tirada1.val(),
|
||||
tirada2: this.tirada2.val(),
|
||||
tirada3: this.tirada3.val(),
|
||||
tirada4: this.tirada4.val(),
|
||||
formatoPersonalizado: this.formatoPersonalizado.is(':checked'),
|
||||
ancho: parseInt(tamanio.ancho),
|
||||
alto: parseInt(tamanio.alto),
|
||||
paginasNegro: this.paginasNegro.val(),
|
||||
paginasColor: this.paginasColor.val(),
|
||||
posicionPaginasColor: this.posicionPaginasColor.val(),
|
||||
tipoImpresion: ($('.tipo-libro.selected').length > 0) ? $('.tipo-libro.selected').attr('id') : 'fresado',
|
||||
};
|
||||
}
|
||||
|
||||
#updateDatosGeneralesData(data) {
|
||||
|
||||
this.formData.datosGenerales = {
|
||||
titulo: data.titulo,
|
||||
autor: data.autor,
|
||||
isbn: data.isbn,
|
||||
tirada1: data.tirada1,
|
||||
tirada2: data.tirada2,
|
||||
tirada3: data.tirada3,
|
||||
tirada4: data.tirada4,
|
||||
formatoPersonalizado: data.formatoPersonalizado,
|
||||
ancho: parseInt(data.ancho),
|
||||
alto: parseInt(data.alto),
|
||||
paginasNegro: data.paginasNegro,
|
||||
paginasColor: data.paginasColor,
|
||||
posicionPaginasColor: data.posicionPaginasColor,
|
||||
tipoImpresion: data.tipoImpresion,
|
||||
};
|
||||
}
|
||||
|
||||
#loadDatosGeneralesData() {
|
||||
|
||||
this.titulo.val(this.formData.datosGenerales.titulo);
|
||||
this.autor.val(this.formData.datosGenerales.autor);
|
||||
this.isbn.val(this.formData.datosGenerales.isbn);
|
||||
this.tirada1.val(this.formData.datosGenerales.tirada1);
|
||||
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();
|
||||
|
||||
this.formatoPersonalizado.prop('checked', this.formData.datosGenerales.formatoPersonalizado).trigger('change');
|
||||
|
||||
$('.paginas').trigger('change');
|
||||
|
||||
if (this.formatoPersonalizado.is(':checked')) {
|
||||
this.ancho.val(this.formData.datosGenerales.ancho);
|
||||
this.alto.val(this.formData.datosGenerales.alto);
|
||||
} else {
|
||||
const option = this.formato.find('option').filter(() => {
|
||||
return $(this).data('ancho') == this.formData.datosGenerales.ancho &&
|
||||
$(this).data('alto') == this.formData.datosGenerales.alto;
|
||||
});
|
||||
|
||||
if (option.length) {
|
||||
this.formato.val(option.val()).trigger('change');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#getTamanio() {
|
||||
|
||||
if (this.formatoPersonalizado.is(':checked')) {
|
||||
return {
|
||||
ancho: this.ancho.val(),
|
||||
alto: this.alto.val()
|
||||
};
|
||||
}
|
||||
else {
|
||||
const opcionSeleccionada = $('#formato option:selected');
|
||||
const ancho = opcionSeleccionada.data('ancho');
|
||||
const alto = opcionSeleccionada.data('alto');
|
||||
return {
|
||||
ancho: ancho,
|
||||
alto: alto
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
#updateTipoImpresion() {
|
||||
|
||||
const paginas = parseInt(this.paginas.val());
|
||||
const selectedTipo = $('.tipo-libro.selected').attr('id');
|
||||
$('.tipo-libro').removeClass('selected');
|
||||
|
||||
if (paginas < 32) {
|
||||
$('.tipo-libro#fresado').addClass('d-none');
|
||||
$('.tipo-libro#cosido').addClass('d-none');
|
||||
}
|
||||
if (paginas < 20) {
|
||||
$('.tipo-libro#espiral').addClass('d-none');
|
||||
$('.tipo-libro#wireo').addClass('d-none');
|
||||
}
|
||||
if (paginas < 12 || paginas > 40) {
|
||||
$('.tipo-libro#grapado').addClass('d-none');
|
||||
}
|
||||
|
||||
if (selectedTipo && $('.tipo-libro#' + selectedTipo).length > 0 && !$('.tipo-libro#' + selectedTipo).hasClass('d-none')) {
|
||||
$('.tipo-libro#' + selectedTipo).addClass('selected');
|
||||
}
|
||||
else {
|
||||
let firstVisible = $('.tipo-libro').not('.d-none').first();
|
||||
|
||||
if (firstVisible.length) {
|
||||
firstVisible.addClass('selected');
|
||||
}
|
||||
}
|
||||
|
||||
if ($('.tipo-libro.selected').length > 0) {
|
||||
this.formData.datosGenerales.tipoImpresion = $('.tipo-libro.selected').attr('id');
|
||||
}
|
||||
else {
|
||||
this.formData.datosGenerales.tipoImpresion = '';
|
||||
}
|
||||
}
|
||||
/******************************
|
||||
* END OF DATOS GENERALES
|
||||
******************************/
|
||||
|
||||
|
||||
/******************************
|
||||
* INTERIOR
|
||||
******************************/
|
||||
#loadInteriorData(data) {
|
||||
|
||||
this.divOpcionesColor.empty();
|
||||
this.divPapelInterior.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);
|
||||
if ((this.formData.interior.color === '' && i === 0) ||
|
||||
this.formData.interior.color === opcion.color) {
|
||||
item.setSelected(true);
|
||||
}
|
||||
this.divOpcionesColor.append(item.render());
|
||||
}
|
||||
|
||||
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);
|
||||
if ((this.formData.interior.papel === '' && i === 0) ||
|
||||
this.formData.interior.papel === opcion.papel) {
|
||||
item.setSelected(true);
|
||||
}
|
||||
this.divPapelInterior.append(item.render());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************************
|
||||
* END INTERIOR
|
||||
******************************/
|
||||
|
||||
|
||||
/******************************
|
||||
* CUBIERTA
|
||||
******************************/
|
||||
#initCubierta() {
|
||||
|
||||
this.btn_plantilla_cubierta.on('click', () => {
|
||||
Swal.fire({
|
||||
@ -60,48 +383,10 @@ class PresupuestoCliente {
|
||||
showCloseButton: true
|
||||
});
|
||||
});
|
||||
|
||||
this.btn_next_datos_generales.on('click', () => {
|
||||
this.nextDatosGenerales();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
nextDatosGenerales() {
|
||||
const data = {
|
||||
titulo: this.titulo.val(),
|
||||
autor: this.autor.val(),
|
||||
isbn: this.isbn.val(),
|
||||
tirada1: this.tirada1.val(),
|
||||
tirada2: this.tirada2.val(),
|
||||
tirada3: this.tirada3.val(),
|
||||
tirada4: this.tirada4.val(),
|
||||
paginasNegro: this.paginasNegro.val(),
|
||||
paginasColor: this.paginasColor.val()
|
||||
}
|
||||
$.ajax({
|
||||
url: '/presupuesto/validar/datos-generales',
|
||||
type: 'POST',
|
||||
data: data,
|
||||
success: (response) => {
|
||||
this.datos_generales_alert.addClass('d-none');
|
||||
},
|
||||
error: (xhr, status, error) => {
|
||||
this.datos_generales_alert.removeClass('d-none');
|
||||
this.datos_generales_alert.find('#datos-generales-alert-list').empty();
|
||||
const errors = xhr.responseJSON;
|
||||
if (errors && typeof errors === 'object') {
|
||||
Object.values(errors).forEach(errorMsg => {
|
||||
this.datos_generales_alert.find('#datos-generales-alert-list').append(`<li>${errorMsg}</li>`);
|
||||
});
|
||||
} else {
|
||||
this.datos_generales_alert.find('#datos-generales-alert-list').append('<li>Error desconocido. Por favor, inténtelo de nuevo más tarde.</li>');
|
||||
}
|
||||
$(window).scrollTop(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/******************************
|
||||
* END CUBIERTA
|
||||
******************************/
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user