terminada la vista cubierta

This commit is contained in:
2024-10-08 13:20:22 +02:00
parent 2e2888ec26
commit 1d3f817709
9 changed files with 402 additions and 292 deletions

View File

@ -54,7 +54,6 @@ class DatosGenerales {
this.papelDiferente.on('change', this.#handlePapelDiferente.bind(this));
this.titulo.on('change', () => { $(".titulo").html(this.titulo.val()); });
this.papelDiferente.on('change', () => { $(".titulo").html(this.titulo.val()); });
}
initValidation() {

View File

@ -27,11 +27,22 @@ class DisenioCubierta {
this.divGramajeCubierta = this.domItem.find("#divGramajeCubierta");
this.gramaje170 = $(this.domItem.find("#divGramaje170Cubierta"));
this.gramaje240 = $(this.domItem.find("#divGramaje240Cubierta"));
this.gramaje250 = $(this.domItem.find("#divGramaje250Cubierta"));
this.gramaje270 = $(this.domItem.find("#divGramaje270Cubierta"));
this.gramaje300 = $(this.domItem.find("#divGramaje300Cubierta"));
this.gramaje350 = $(this.domItem.find("#divGramaje350Cubierta"));
this.checksGramaje = $('.check-gramaje-cubierta');
this.configuracionSobrecubierta = this.domItem.find(".config-sobrecubierta");
this.sobrecubierta = this.domItem.find("#addSobrecubierta");
this.configuracionFaja = this.domItem.find(".config-faja");
this.faja = this.domItem.find("#addFaja");
this.solapasSobrecubierta = this.domItem.find("#solapasSobrecubierta");
this.solapasFaja = this.domItem.find("#solapasFaja");
this.altoFaja = this.domItem.find("#altoFaja");
this.initValidation();
// Creamos un nuevo observador que detecta cambios en los atributos
@ -46,6 +57,9 @@ class DisenioCubierta {
else if (targetElement.classList.contains('solapas-cubierta')) {
this.#handleMenuSolapas();
}
else if (targetElement.classList.contains('papel-cubierta')) {
this.#handleMenuPapel();
}
}
});
});
@ -54,19 +68,41 @@ class DisenioCubierta {
init() {
const self = this;
// Eventos
this.disenioCubierta.on('click', this.#handleDisenioCubierta.bind(this));
this.solapasCubierta.on('click', this.#handleSolapasCubierta.bind(this));
this.papelCubierta.on('click', this.#handlePapelCubierta.bind(this));
this.tamanioSolapasCubierta.on('change', this.#handleTamanioSolapas.bind(this));
this.altoFaja.on('blur', this.#handleInputs);
this.solapasSobrecubierta.on('blur', this.#handleInputs);
this.solapasFaja.on('blur', this.#handleInputs);
this.sobrecubierta.on('change', () => {
this.sobrecubierta.is(":checked") ? this.configuracionSobrecubierta.removeClass("d-none") : this.configuracionSobrecubierta.addClass("d-none") }
);
this.faja.on('change', () => {
this.faja.is(":checked") ? this.configuracionFaja.removeClass("d-none") : this.configuracionFaja.addClass("d-none") }
);
// Observadores
this.observer.observe(this.tapaBlanda[0], { attributes: true });
this.observer.observe(this.tapaDuraLomoRecto[0], { attributes: true });
this.observer.observe(this.tapaDuraLomoRedondo[0], { attributes: true });
this.observer.observe(this.cartulinaEstucada[0], { attributes: true });
this.observer.observe(this.estucadoMate[0], { attributes: true });
this.observer.observe(this.conSolapas[0], { attributes: true });
this.observer.observe(this.sinSolapas[0], { attributes: true });
this.checksGramaje.each(function () {
const customOptionEL = $(this);
customOptionEL.on('click', function () {
self.#handleClickGramaje(customOptionEL);
});
});
}
initValidation() {
@ -75,21 +111,21 @@ class DisenioCubierta {
this.formValidation = FormValidation.formValidation(this.wizardStep, {
fields: {
div_impresion_interior: {
div_tipo_cubierta: {
validators: {
callback: {
callback: function (input) {
const divImpresionInterior = $('#divImpresionInterior'); // Selecciona el div
const div = $('#divTipoCubierta'); // Selecciona el div
divImpresionInterior.find('.fv-plugins-message-container').remove();
if ($('.disenio-interior.selected').length > 0) {
div.find('.fv-plugins-message-container').remove();
if ($('.tipo-cubierta.selected').length > 0) {
return true;
}
else {
divImpresionInterior.append(`
div.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].disenio_interior}
<div data-field="div_tipo_cubierta" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].tipo_cubierta}
</div>
</div>
`);
@ -99,20 +135,46 @@ class DisenioCubierta {
}
}
},
div_papel_interior: {
div_solapas_cubierta: {
validators: {
callback: {
callback: function (input) {
const divPapelInterior = $('#divPapelInterior'); // Selecciona el div
const div = $('#divSolapasCubierta');
if (div.hasClass("d-none")) return true;
divPapelInterior.find('.fv-plugins-message-container').remove();
if ($('.papel-interior.selected').length > 0) {
div.find('.fv-plugins-message-container').remove();
if ($('.solapas-cubierta.selected').length > 0) {
return true;
}
else {
divPapelInterior.append(`
div.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
<div data-field="div_solapas_cubierta" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].opcion_solapas}
</div>
</div>
`);
}
return false;
},
}
}
},
div_papel_cubierta: {
validators: {
callback: {
callback: function (input) {
const div = $('#divPapelCubierta');
if (div.hasClass("d-none")) return true;
div.find('.fv-plugins-message-container').remove();
if ($('.papel-cubierta.selected').length > 0) {
return true;
}
else {
div.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_papel_cubierta" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].papel_interior}
</div>
</div>
@ -123,96 +185,20 @@ class DisenioCubierta {
}
}
},
div_gramaje_interior: {
div_gramaje_cubierta: {
validators: {
callback: {
callback: function (input) {
const divGramajeInterior = $('#divGramajeInterior'); // Selecciona el div
if ($("#divGramajeInterior").hasClass("d-none")) return true;
divGramajeInterior.find('.fv-plugins-message-container').remove();
if ($('.check-interior-gramaje:checked').length > 0) {
const div = $('#divGramajeCubierta'); // Selecciona el div
div.find('.fv-plugins-message-container').remove();
if ($('.check-gramaje-cubierta:checked').length > 0) {
return true;
}
else {
divGramajeInterior.append(`
div.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].gramaje_interior}
</div>
</div>
`);
}
return false;
},
}
}
},
div_impresion_interior_color: {
validators: {
callback: {
callback: function (input) {
const divImpresionInterior = $('#divImpresionInteriorColor'); // Selecciona el div
if (divImpresionInterior.hasClass("d-none")) return true;
divImpresionInterior.find('.fv-plugins-message-container').remove();
if ($('.disenio-interior-color.selected').length > 0) {
return true;
}
else {
divImpresionInterior.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior_color" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].disenio_interior}
</div>
</div>
`);
}
return false;
},
}
}
},
div_papel_interior_color: {
validators: {
callback: {
callback: function (input) {
const divPapelInterior = $('#divPapelInteriorColor'); // Selecciona el div
if (divPapelInterior.hasClass("d-none")) return true;
divPapelInterior.find('.fv-plugins-message-container').remove();
if ($('.papel-interior.selected').length > 0) {
return true;
}
else {
divPapelInterior.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].papel_interior}
</div>
</div>
`);
}
return false;
},
}
}
},
div_gramaje_interior_color: {
validators: {
callback: {
callback: function (input) {
const divGramajeInterior = $('#divGramajeInteriorColor'); // Selecciona el div
if ($("#divGramajeInterior").hasClass("d-none")) return true;
divGramajeInterior.find('.fv-plugins-message-container').remove();
if ($('.check-interior-gramaje:checked').length > 0) {
return true;
}
else {
divGramajeInterior.append(`
<div class="fv-plugins-message-container invalid-feedback">
<div data-field="div_impresion_interior" data-validator="callback" style="margin-top: 50px;">
<div data-field="div_gramaje_cubierta" data-validator="callback" style="margin-top: 50px;">
${window.translations["validation"].gramaje_interior}
</div>
</div>
@ -234,12 +220,10 @@ class DisenioCubierta {
// field is the field name
// ele is the field element
switch (field) {
case 'div_impresion_interior':
case 'div_papel_interior':
case 'div_gramaje_interior':
case 'div_impresion_interior_color':
case 'div_papel_interior_color':
case 'div_gramaje_interior_color':
case 'div_tipo_cubierta':
case 'div_solapas_cubierta':
case 'div_papel_cubierta':
case 'div_gramaje_cubierta':
return '.col-sm-10';
default:
return '.col-sm-3';
@ -274,17 +258,17 @@ class DisenioCubierta {
$(".papel-cubierta").removeClass("selected");
if(this.tapaBlanda.hasClass("selected")){
if (this.tapaBlanda.hasClass("selected")) {
this.cartulinaEstucada.removeClass("d-none");
this.divGramajeCubierta.addClass("d-none");
}
else{
else {
this.cartulinaEstucada.addClass("d-none");
this.estucadoMate.addClass("selected");
this.divGramajeCubierta.removeClass("d-none");
this.gramaje170.removeClass("d-none");
this.gramaje170.closest(".checkbox-presupuesto-container").addClass("checked");
this.gramaje240.addClass("d-none");
this.gramaje250.addClass("d-none");
this.gramaje270.addClass("d-none");
this.gramaje300.addClass("d-none");
this.gramaje350.addClass("d-none");
@ -329,34 +313,78 @@ class DisenioCubierta {
element.closest('.image-presupuesto').toggleClass('selected');
}
#handleMenuTipoCubierta(){
#handleMenuTipoCubierta() {
if(this.tapaBlanda.hasClass("selected")){
if (this.tapaBlanda.hasClass("selected")) {
this.divSolapas.removeClass("d-none");
this.divConfigTapaDura.addClass("d-none");
}
else if(this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")){
else if (this.tapaDuraLomoRecto.hasClass("selected") || this.tapaDuraLomoRedondo.hasClass("selected")) {
this.solapasCubierta.removeClass("selected");
this.divSolapas.addClass("d-none");
this.divConfigTapaDura.removeClass("d-none");
this.#handleMenuPapel();
}
else{
else {
this.divSolapas.addClass("d-none");
this.divConfigTapaDura.addClass("d-none");
this.#handleMenuPapel();
}
}
#handleMenuSolapas(){
if(this.conSolapas.hasClass("selected")){
#handleMenuSolapas() {
if (this.conSolapas.hasClass("selected")) {
this.divTamanioSolapas.removeClass("d-none");
}
else{
else {
this.divTamanioSolapas.addClass("d-none");
}
}
#handleMenuPapel() {
$(".check-gramaje-cubierta").prop("checked", false);
if(!this.tapaBlanda.hasClass("selected") && !this.tapaDuraLomoRecto.hasClass("selected") && !this.tapaDuraLomoRedondo.hasClass("selected")) {
this.divGramajeCubierta.addClass("d-none");
this.estucadoMate.removeClass("selected");
this.cartulinaEstucada.removeClass("selected");
return;
}
if (this.cartulinaEstucada.hasClass("selected")) {
this.divGramajeCubierta.removeClass("d-none");
this.gramaje170.addClass("d-none");
this.gramaje250.removeClass("d-none");
this.gramaje270.removeClass("d-none");
this.gramaje300.removeClass("d-none");
this.gramaje350.removeClass("d-none");
}
else if(this.estucadoMate.hasClass("selected")) {
if(this.tapaBlanda.hasClass("selected")) {
this.divGramajeCubierta.removeClass("d-none");
this.gramaje170.addClass("d-none");
this.gramaje250.removeClass("d-none");
this.gramaje270.addClass("d-none");
this.gramaje300.removeClass("d-none");
this.gramaje350.removeClass("d-none");
}
else{
this.divGramajeCubierta.removeClass("d-none");
this.gramaje170.removeClass("d-none");
this.gramaje250.addClass("d-none");
this.gramaje270.addClass("d-none");
this.gramaje300.addClass("d-none");
this.gramaje350.addClass("d-none");
$('#gramaje170Cubierta').trigger("click");
}
}
}
#handleTamanioSolapas() {
@ -371,127 +399,37 @@ class DisenioCubierta {
this.tamanioSolapasCubierta.val(max);
}
#handleClickGramaje(customOption) {
#handleUpdateGramaje() {
const el = customOption[0];
let showGramaje = false;
$(".check-interior-gramaje ").prop("checked", false);
if (this.negroEstandar.hasClass("selected") || this.colorEstandar.hasClass("selected")) {
if (this.offsetBlanco.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.removeClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.removeClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
if (el.checked) {
// If custom option element is radio, remove checked from the siblings (closest `.row`)
if (el.type === 'radio') {
const customRadioOptionList = [].slice.call(el.closest('.row').querySelectorAll('.custom-option'))
customRadioOptionList.map(function (customRadioOptionEL) {
customRadioOptionEL.closest('.custom-option').classList.remove('checked')
})
}
else if (this.offsetAhuesado.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.removeClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
}
else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
this.gramaje70.removeClass("d-none");
this.gramaje80.addClass("d-none");
this.gramaje90.addClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
}
else if (this.estucadoMate.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.addClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.removeClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
}
}
else if (this.negroPremium.hasClass("selected") || this.colorPremium.hasClass("selected")) {
if (this.offsetBlanco.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.removeClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.removeClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.removeClass("d-none");
this.gramaje170.removeClass("d-none");
showGramaje = true;
}
else if (this.offsetAhuesado.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.removeClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.removeClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
}
else if (this.offsetAhuesadoVolumen.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.addClass("d-none");
this.gramaje90.addClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.addClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.addClass("d-none");
this.gramaje150.addClass("d-none");
this.gramaje170.addClass("d-none");
showGramaje = true;
}
else if (this.estucadoMate.hasClass("selected")) {
this.gramaje70.addClass("d-none");
this.gramaje80.addClass("d-none");
this.gramaje90.removeClass("d-none");
this.gramaje100.addClass("d-none");
this.gramaje115.removeClass("d-none");
this.gramaje120.addClass("d-none");
this.gramaje135.removeClass("d-none");
this.gramaje150.removeClass("d-none");
this.gramaje170.removeClass("d-none");
showGramaje = true;
}
}
if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
$("#divGramajeInterior").removeClass("d-none");
}
else if (!showGramaje) {
$("#divGramajeInterior").addClass("d-none");
el.closest('.custom-option').classList.add('checked')
} else {
el.closest('.custom-option').classList.remove('checked')
}
}
#handleInputs() {
const id = $(this).attr('id');
const min = parseInt($('#' + id).attr('min'));
const max = parseInt($('#' + id).attr('max'));
if ($('#' + id).val() < min || $('#' + id).val() == '' || isNaN($('#' + id).val())) {
$('#' + id).val(min);
}
else if ($('#' + id).val() > max)
$('#' + id).val(max);
}
}

View File

@ -50,7 +50,7 @@ class DisenioInterior {
this.gramaje150_color = this.domItem.find("#interiorGramaje150Color");
this.gramaje170_color = this.domItem.find("#interiorGramaje170Color");
this.checksGramaje = $('.custom-option .form-check-input');
this.checksGramaje = $('.gramaje-interior');
this.initValidation();
@ -98,10 +98,6 @@ class DisenioInterior {
this.checksGramaje.each(function () {
const customOptionEL = $(this);
// Update custom options check on page load
//self.#handleClickGramaje(customOptionEL);
// Update custom options check on click
customOptionEL.on('click', function () {
self.#handleClickGramaje(customOptionEL);
});
@ -371,7 +367,8 @@ class DisenioInterior {
let showGramaje = false;
$(".check-interior-gramaje ").prop("checked", false);
$(".check-interior-color-gramaje ").prop("checked", false);
if (this.negroEstandar.hasClass("selected") || this.colorEstandar.hasClass("selected")) {
if (this.offsetBlanco.hasClass("selected")) {

View File

@ -40,7 +40,7 @@ class PresupuestoCliente {
this.disenioInterior.init();
this.disenioCubierta.init();
this.RELLENAR_PRESUPUESTO();
//this.RELLENAR_PRESUPUESTO();
}
@ -104,12 +104,12 @@ class PresupuestoCliente {
case 1:
this.disenioInterior.formValidation.validate();
break;
/*
case 2:
FormValidation4.validate();
this.disenioCubierta.formValidation.validate();
break;
/*
case 3:
FormValidation5.validate();
break;