Files
safekat/httpdocs/assets/js/safekat/pages/presupuestoCliente/disenioInterior.js

1093 lines
39 KiB
JavaScript

import { getToken } from '../../common/common.js';
import { capitalizeFirstLetter } from '../../common/common.js';
import Ajax from '../../components/ajax.js';
import ClassSelect from '../../components/select2.js';
class DisenioInterior {
constructor(domItem, wizardForm, validatorStepper, presupuestoCliente) {
this.domItem = domItem;
this.presupuestoCliente = presupuestoCliente;
this.csrf_token = getToken();
this.csrf_hash = $('#mainContainer').find('input[name="' + this.csrf_token + '"]').val();
this.wizardStep = wizardForm.querySelector('#interior-libro');
this.validatorStepper = validatorStepper;
this.disenioInterior = this.domItem.find(".disenio-interior");
this.divPapelInterior = this.domItem.find("#divPapelInterior");
this.textoPapelInterior = this.domItem.find("#textoPapelInterior");
this.textoPapelInteriorColor = this.domItem.find("#textoPapelInteriorColor");
this.divPapelInteriorColor = this.domItem.find("#divPapelInteriorColor");
this.divPapelEspecialInterior = this.domItem.find("#divPapelEspecialInterior");
this.divPapelEspecialInteriorColor = this.domItem.find("#divPapelEspecialInteriorColor");
this.papelEspecialInterior = this.domItem.find("#papelEspecialInterior");
this.divGramajeInterior = this.domItem.find("#divGramajeInterior");
this.divGramajeInteriorColor = this.domItem.find("#divGramajeInteriorColor");
this.negroEstandar = this.domItem.find("#negroEstandar");
this.negroPremium = this.domItem.find("#negroPremium");
this.colorEstandar = this.domItem.find("#colorEstandar");
this.colorPremium = this.domItem.find("#colorPremium");
this.interiorColor = this.domItem.find(".interior-color");
this.disenioInterior_color = this.domItem.find(".disenio-interior-color");
this.papelInterior_color = this.domItem.find(".papel-interior-color");
this.colorEstandar_color = this.domItem.find("#colorEstandarColor");
this.colorPremium_color = this.domItem.find("#colorPremiumColor");
this.gramaje_color = this.domItem.find(".check-interior-color-gramaje");
this.checksGramaje = $('.gramaje-interior');
this.rl_interior = $(".rl-interior");
this.rl_tipo_interior = $("#rl_tipo_interior");
this.rl_papel_interior = $("#rl_papel_interior");
this.rl_papel_interior_color = $("#rl_papel_interior_color");
this.papelEspecial = new ClassSelect($("#papelEspecialInterior"),
'/configuracion/papelesgenericos/selectpapelespecial',
window.translations["selectPapel"],
false,
{
[this.csrf_token]: this.csrf_hash,
tipo: () => { return this.getTipoImpresion() },
tirada: () => { { return this.presupuestoCliente.datosGenerales.getTiradas()[0] } },
ancho: () => { return this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho },
alto: () => { return this.presupuestoCliente.datosGenerales.getDimensionLibro().alto },
solapas: 0,
lomo: 0,
cubierta: 0,
}
);
this.papelEspecialColor = new ClassSelect($("#papelEspecialInteriorColor"),
'/configuracion/papelesgenericos/selectpapelespecial',
window.translations["selectPapel"],
false,
{
[this.csrf_token]: this.csrf_hash,
tipo: () => { return this.getTipoImpresion() },
tirada: () => { { return this.presupuestoCliente.datosGenerales.getTiradas()[0] } },
ancho: () => { return this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho },
alto: () => { return this.presupuestoCliente.datosGenerales.getDimensionLibro().alto },
solapas: 0,
lomo: 0,
cubierta: 0,
}
);
this.papelInteriorDiferente = false;
this.papelInterior = null;
this.gramaje = null;
this.papelInteriorColor = null;
this.gramajeColor = null;
this.cargando = true;
this.presupuestoConfirmado = false;
this.papelNegroForResumen = "";
this.gramajeNegroForResumen = "";
this.papelColorForResumen = "";
this.gramajeColorForResumen = "";
this.errores = [];
}
init() {
const self = this;
this.papelEspecial.init();
$('#papelEspecialInterior').on("change", this.#handlePapelInteriorEspecial.bind(this));
this.papelEspecialColor.init();
$('#papelEspecialInteriorColor').on("change", this.#handlePapelInteriorEspecialColor.bind(this));
// Eventos
this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));
}
updatePapeles(papeles = null) {
const context = this;
if (papeles == 'color') {
this.divGramajeInteriorColor.empty();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
tipo: () => this.getTipoImpresion(),
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
(response) => { this.fillPapelesColor(response); },
(response) => { console.log(response); }
).get();
}
if (papeles == 'negro' || papeles == null) {
this.divGramajeInterior.empty();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
tipo: () => this.getTipoImpresion(),
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
(response) => { this.fillPapeles(response); },
(response) => { console.log(response); }
).get();
}
}
fillPapeles(response) {
this.divPapelInterior.empty();
this.divGramajeInterior.empty();
if (response.papeles.length > 0) {
this.textoPapelInterior.removeClass('d-none');
}
else {
this.textoPapelInterior.addClass("d-none");
}
response.papeles.forEach(papel => {
var container = $('<div>', {
class: 'custom-selector custom-selector-papel d-flex flex-column align-items-center justify-content-center'
});
var radioButton = $('<input>', {
type: 'radio', // Tipo de input
name: 'calcular-presupuesto papel-interior',
id: 'papel_' + papel.id, // ID único
value: 'option1' // Valor del radio button
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: 'papel_' + papel.id,
text: papel.nombre
});
radioButton.on('click', this.#handlePapelInterior.bind(this));
container.append(radioButton).append(label);
$('#divPapelInterior').append(container);
if (this.papelInterior == papel.id) {
radioButton.prop('checked', true);
radioButton.trigger('click');
}
});
if (response.papeles_especiales.length > 0) {
this.divPapelInterior.removeClass('d-none');
var container = $('<div>', {
class: 'custom-selector custom-selector-papel d-flex flex-column align-items-center justify-content-center'
});
var radioButton = $('<input>', {
type: 'radio',
name: 'calcular-presupuesto papel-interior',
id: 'papelEspecialInterior',
value: 'option1'
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: 'papelEspecialInterior',
text: 'PAPEL ESPECIAL'
});
radioButton.on('click', this.#handlePapelInterior.bind(this));
response.papeles_especiales.forEach(papel => {
if (papel.id == this.papelInterior) {
radioButton.prop('checked', true);
radioButton.trigger('click');
this.papelEspecial.setOption(papel.id, papel.nombre);
}
});
container.append(radioButton).append(label);
$('#divPapelInterior').append(container);
}
}
fillPapelesColor(response) {
this.divPapelInteriorColor.empty()
this.divGramajeInteriorColor.empty();
if (response.papeles.length > 0) {
this.textoPapelInteriorColor.removeClass('d-none');
}
else {
this.textoPapelInteriorColor.addClass("d-none");
}
response.papeles.forEach(papel => {
var container = $('<div>', {
class: 'custom-selector custom-selector-papel-color d-flex flex-column align-items-center justify-content-center'
});
var radioButton = $('<input>', {
type: 'radio', // Tipo de input
name: 'calcular-presupuesto papel-interior-color',
id: 'papelColor_' + papel.id, // ID único
value: 'option1' // Valor del radio button
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: 'papelColor_' + papel.id,
text: papel.nombre
});
radioButton.on('click', this.#handlePapelInteriorColor.bind(this));
container.append(radioButton).append(label);
$('#divPapelInteriorColor').append(container);
if (this.papelInteriorColor == papel.id) {
radioButton.prop('checked', true);
radioButton.trigger('click');
}
});
if (response.papeles_especiales.length > 0) {
this.divPapelInterior.removeClass('d-none');
var container = $('<div>', {
class: 'custom-selector custom-selector-papel-color d-flex flex-column align-items-center justify-content-center'
});
var radioButton = $('<input>', {
type: 'radio',
name: 'calcular-presupuesto papel-interior-color',
id: 'papelEspecialInterior',
value: 'option1'
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: 'papelEspecialInterior',
text: 'PAPEL ESPECIAL'
});
radioButton.on('click', this.#handlePapelInteriorColor.bind(this));
response.papeles_especiales.forEach(papel => {
if (papel.id == this.papelInteriorColor) {
radioButton.prop('checked', true);
radioButton.trigger('click');
this.papelEspecialColor.setOption(papel.id, papel.nombre);
}
});
container.append(radioButton).append(label);
$('#divPapelInteriorColor').append(container);
}
}
cargarDatos(datos, papelInteriorDiferente) {
this.papelInteriorDiferente = papelInteriorDiferente;
if (papelInteriorDiferente) {
if (datos.negro) {
if (datos.negro.tipo.includes("Premium")) {
this.negroPremium.addClass('selected');
}
else {
this.negroEstandar.addClass('selected');
}
this.papelInterior = datos.negro.papel.id;
this.gramaje = datos.negro.gramaje;
}
if (datos.color) {
if (datos.color.tipo.includes("Premium")) {
this.colorPremium_color.addClass('selected');
}
else {
this.colorEstandar_color.addClass('selected');
}
this.papelInteriorColor = datos.color.papel.id;
this.gramajeColor = datos.color.gramaje;
}
}
else {
this.papelInteriorColor = null;
this.gramajeColor = null;
if (datos.color) {
if (datos.color.tipo.includes("Premium")) {
this.colorPremium.addClass('selected');
}
else {
this.colorEstandar.addClass('selected');
}
this.papelInterior = datos.color.papel.id;
this.gramaje = datos.color.gramaje;
}
else {
if (datos.negro.tipo.includes("Premium")) {
this.negroPremium.addClass('selected');
}
else {
this.negroEstandar.addClass('selected');
}
this.papelInterior = datos.negro.papel.id;
this.gramaje = datos.negro.gramaje;
}
}
if (datos.paginasColorConsecutivas)
this.updatePapeles();
else
this.updatePapeles('negro');
}
validate(goToNext = true) {
this.errores = [];
// impresion interior
let continueCheck = this.validateDisenioInterior();
// papel interior
if (continueCheck) {
continueCheck = this.validatePapelInterior();
}
// gramaje interior
if (continueCheck) {
this.validateGramajeInterior();
}
const skAlert = document.getElementById('sk-alert');
skAlert.innerHTML = '';
this.errores = [...new Set(this.errores)];
if (this.errores.length > 0) {
const message = window.translations["validation"].fix_errors +
`<ul class="mb-0">
${this.errores.map(err => `<li>${err}</li>`).join('')}
</ul>`;
popErrorAlert(message, 'sk-alert', false);
return false;
}
else {
document.getElementById('sk-alert').innerHTML = '';
this.errores = [];
if (goToNext)
this.validatorStepper.next();
else
return true;
}
}
validateDisenioInterior() {
if ($('.disenio-interior.selected').length > 0) {
$('#divImpresionInterior').removeClass('is-invalid');
return true;
}
else {
this.errores.push(window.translations["validation"].disenio_interior);
$('#divImpresionInterior').addClass('is-invalid');
return false;
}
}
validatePapelInterior() {
const papelSeleccionado = $('.custom-selector-papel input[type="radio"]:checked');
if (papelSeleccionado.length > 0) {
if (!$('#divPapelEspecialInterior').hasClass("d-none")) {
if ($('#papelEspecialInterior').select2('data').length == 0) {
$('#divPapelInterior').addClass('is-invalid');
this.errores.push(window.translations["validation"].papel_interior_especial);
return false;
}
else {
$('#divPapelInterior').removeClass('is-invalid');
return true;
}
}
else {
$('#divPapelInterior').removeClass('is-invalid');
return true;
}
} else {
$('#divPapelInterior').addClass('is-invalid');
this.errores.push(window.translations["validation"].papel_interior);
return false;
}
}
validateGramajeInterior() {
const gramajeSeleccionado = $('.custom-selector-gramaje input[type="radio"]:checked');
if (gramajeSeleccionado.length > 0) {
$('#divGramajeInterior').removeClass('is-invalid');
return true;
}
else {
$('#divGramajeInterior').addClass('is-invalid');
this.errores.push(window.translations["validation"].gramaje_interior);
return false;
}
}
getTipoImpresion() {
let tipo = 'negro';
if (this.colorEstandar.hasClass('selected'))
tipo = 'color';
else if (this.negroPremium.hasClass('selected'))
tipo = 'negrohq';
else if (this.colorPremium.hasClass('selected'))
tipo = 'colorhq';
return tipo;
}
getTipoImpresionColor() {
let tipo = 'colorhq';
if (this.colorEstandar_color.hasClass('selected'))
tipo = 'color';
return tipo;
}
getIsHq() {
try {
if (this.interiorColor.filter('.d-none').length > 0) {
return this.disenioInterior.filter('.selected').attr('id').includes('Premium');
}
else if (this.disenioInterior_color.filter('.selected').length > 0) {
return {
negro: this.disenioInterior.filter('.selected').attr('id').includes('Premium'),
color: this.disenioInterior_color.filter('.selected').attr('id').includes('Premium')
}
}
return null;
} catch (e) {
return null;
}
}
processMenuLateral() {
let menu_off = true;
this.rl_tipo_interior.removeClass('d-none');
const HQ = this.getIsHq();
const color = $("#paginasColor").val() > 0 ? true : false;
const papelInterior = this.getPapel(true);
const gramajeInterior = this.getGramaje();
if (HQ != null && papelInterior != null && gramajeInterior != null) {
menu_off = false;
if ($(".interior-color").hasClass('d-none')) {
if (!this.rl_papel_interior_color.hasClass('d-none')) {
this.rl_papel_interior_color.addClass('d-none');
}
const impInterior = (color ? "Color " : "Blanco y Negro ") + (HQ ? "Premium" : "Estándar");
this.rl_tipo_interior.text(impInterior);
this.rl_papel_interior.text(papelInterior + " " + gramajeInterior + " gr");
}
else {
this.rl_papel_interior_color.removeClass('d-none');
const impInterior = ("Negro " + (HQ.negro ? "Premium" : "Estándar") + " / Color " + (HQ.color ? "Premium" : "Estándar"));
this.rl_tipo_interior.text(impInterior);
this.rl_papel_interior.text(papelInterior.negro + " " + gramajeInterior.negro + " gr");
this.rl_papel_interior_color.text(papelInterior.color + " " + gramajeInterior.color + " gr");
}
}
if (!menu_off)
this.rl_interior.removeClass('d-none');
else
this.rl_interior.addClass('d-none');
}
getPapel(forResumen = false) {
try {
if (this.presupuestoConfirmado) {
if (this.papelColorForResumen.length > 0 && this.papelNegroForResumen.length > 0)
return {
negro: this.papelNegroForResumen,
color: this.papelColorForResumen
}
else if (this.papelColorForResumen.length > 0) {
return this.papelColorForResumen;
}
else {
return this.papelNegroForResumen;
}
}
let checkedPapel = $('.custom-selector-papel input[type="radio"]:checked');
if (this.papelInterior != null && checkedPapel != null && checkedPapel.length > 0) {
if (this.divPapelInteriorColor.hasClass('d-none')) {
if (forResumen) {
if (checkedPapel.length == 0)
return null;
let radioButtonId = checkedPapel[0].id;
if (radioButtonId == 'papelEspecialInterior')
return capitalizeFirstLetter(this.papelEspecial.getText());
else {
let associatedLabel = $('label[for="' + radioButtonId + '"]');
return capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
}
}
else {
if (this.divPapelEspecialInterior.hasClass('d-none'))
return this.papelInterior;
else {
return this.papelEspecial.getVal();
}
}
}
else {
let checkedPapelColor = $('.custom-selector-papel-color input[type="radio"]:checked');
if (checkedPapelColor == null || checkedPapelColor.length == 0 || checkedPapel == null || checkedPapel.length == 0)
return null;
let papelNegro = 0;
let papelColor = 0;
if (forResumen) {
let radioButtonIdNegro = checkedPapel[0].id;
if (radioButtonIdNegro == 'papelEspecialInterior')
papelNegro = capitalizeFirstLetter(this.papelEspecial.getText());
else {
let associatedLabel = $('label[for="' + radioButtonIdNegro + '"]');
papelNegro = capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
}
let radioButtonIdColor = checkedPapelColor[0].id;
if (radioButtonIdColor == 'papelEspecialInteriorColor')
papelColor = capitalizeFirstLetter(this.papelEspecialColor.getText());
else {
let associatedLabel = $('label[for="' + radioButtonIdColor + '"]');
papelColor = capitalizeFirstLetter($(associatedLabel[0]).text().toLocaleLowerCase());
}
}
else {
if (this.divPapelEspecialInterior.hasClass('d-none'))
papelNegro = this.papelInterior;
else {
papelNegro = this.papelEspecial.getVal();
}
if (this.divPapelEspecialInteriorColor.hasClass('d-none'))
papelColor = this.papelInteriorColor;
else {
papelColor = this.papelEspecialColor.getVal();
}
}
return {
negro: papelNegro,
color: papelColor,
}
}
}
return null;
}
catch (e) {
return null;
}
}
getGramaje() {
try {
if (this.presupuestoConfirmado) {
if (this.gramajeColorForResumen.length > 0 && this.gramajeNegroForResumen.length > 0)
return {
negro: this.gramajeNegroForResumen,
color: this.gramajeColorForResumen
}
else if (this.gramajeColorForResumen.length > 0) {
return this.gramajeColorForResumen;
}
else {
return this.gramajeNegroForResumen;
}
}
let checkedGramaje = $('.custom-selector-gramaje input[type="radio"]:checked');
if (this.interiorColor.filter('.d-none').length == 0) {
let checkedGramajeColor = $('.custom-selector-gramaje-color input[type="radio"]:checked');
if (checkedGramaje.length == 0 || checkedGramajeColor.length == 0)
return null
let values = {
negro: checkedGramaje[0].id.split('_')[1],
color: checkedGramajeColor[0].id.split('_')[1]
}
if (values.negro && values.color) {
return values;
}
else return null;
}
else {
if (checkedGramaje.length == 0)
return null;
return checkedGramaje[0].id.split('_')[1];
}
} catch (e) {
return null;
}
}
#handleDisenioInterior(event) {
// Accede al ID del elemento que disparó el evento
const element = $(event.target);
$('#divImpresionInterior').removeClass('is-invalid');
$('#divPapelInterior').removeClass('is-invalid');
$('#divGramajeInterior').removeClass('is-invalid');
let class2Find = '.disenio-interior';
if (element[0].closest('.image-container').id.includes('Color')) {
this.divGramajeInteriorColor.empty();
this.divPapelEspecialInteriorColor.addClass("d-none");
$('#papelEspecialInteriorColor').off("change");
this.papelEspecialColor.empty();
$('#papelEspecialInteriorColor').on("change", this.#handlePapelInteriorEspecialColor.bind(this));
this.papelInteriorColor = null;
this.gramajeColor = null;
class2Find = '.disenio-interior-color';
this.divPapelInteriorColor.empty();
}
else {
this.divGramajeInterior.empty();
this.divPapelEspecialInterior.addClass("d-none");
$('#papelEspecialInterior').off("change");
this.papelEspecial.empty();
$('#papelEspecialInterior').on("change", this.#handlePapelInteriorEspecial.bind(this));
this.papelInterior = null;
this.gramaje = null;
this.divPapelInterior.empty();
}
let containers = element.closest(class2Find).parent().find(class2Find);
for (let container of containers) {
if (container != element.closest(class2Find)[0]) {
$(container).removeClass('selected');
$(container).find('.image-presupuesto').removeClass('selected');
}
}
element.closest(class2Find).toggleClass('selected');
element.closest('.image-presupuesto').toggleClass('selected');
// Para recalcular el presupuesto
element.trigger('change');
if ($('.disenio-interior.selected').length != 0) {
if (class2Find == '.disenio-interior-color')
this.updatePapeles('color');
else
this.updatePapeles();
}
if (this.validateDisenioInterior()) {
const hasError = this.errores.filter(err => err === window.translations["validation"].disenio_interior).length > 0;
if (hasError) {
// remove the item from this.errores
this.errores = this.errores.filter(err => err !== window.translations["validation"].disenio_interior);
}
if (this.errores.length == 0) {
document.getElementById('sk-alert').innerHTML = '';
}
else {
document.getElementById('sk-alert').innerHTML = document.getElementById('sk-alert').innerHTML.
replace(window.translations["validation"].disenio_interior, '');
}
}
}
#handlePapelInterior(event) {
const context = this;
$('#divPapelInterior').removeClass('is-invalid');
$('#divGramajeInterior').removeClass('is-invalid');
// Accede al ID del elemento que disparó el evento
const element = $(event.target);
const papel = element[0].id.split('_')[1];
this.papelInterior = papel;
$('#' + papel).prop('checked', true);
let tipo = this.getTipoImpresion();
if (element[0].id == 'papelEspecialInterior') {
if (!this.cargando)
this.gramaje = null;
this.divGramajeInterior.empty();
this.divPapelEspecialInterior.removeClass("d-none");
this.papelEspecialInterior.empty();
}
else {
this.divPapelEspecialInterior.addClass("d-none");
this.papelEspecialInterior.empty();
this.divGramajeInterior.empty();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
papel: papel,
tipo: tipo,
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
this.fillGramajes.bind(context),
(response) => { console.log(response); }
).get();
}
if (!this.cargando) {
this.gramaje = null;
if (this.validatePapelInterior()) {
const hasError = this.errores.filter(err => err === window.translations["validation"].papel_interior).length > 0;
if (hasError) {
// remove the item from this.errores
this.errores = this.errores.filter(err => err !== window.translations["validation"].papel_interior);
}
if (this.errores.length == 0) {
document.getElementById('sk-alert').innerHTML = '';
}
else {
document.getElementById('sk-alert').innerHTML = document.getElementById('sk-alert').innerHTML.
replace(window.translations["validation"].papel_interior, '');
}
}
}
else {
this.cargando = false;
}
}
#handlePapelInteriorEspecial() {
const context = this;
$('#divPapelInterior').removeClass('is-invalid');
$('#divGramajeInterior').removeClass('is-invalid');
this.papelInterior = this.papelEspecial.getVal();
let tipo = this.getTipoImpresion();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
papel: this.papelInterior,
tipo: tipo,
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
this.fillGramajes.bind(context),
(response) => { console.log(response); }
).get();
}
#handlePapelInteriorColor(event) {
const context = this;
$('#divPapelInterior').removeClass('is-invalid');
$('#divGramajeInterior').removeClass('is-invalid');
// Accede al ID del elemento que disparó el evento
const element = $(event.target);
const papel = element[0].id.split('_')[1];
this.papelInteriorColor = papel;
if (!this.cargando)
this.gramajeColor = null;
else {
this.cargandoColor = false;
}
$('#' + papel).prop('checked', true);
let tipo = this.getTipoImpresionColor();
if (element[0].id == 'papelEspecialInteriorColor') {
this.gramajeColor = null;
this.divGramajeInteriorColor.empty();
this.divPapelEspecialInteriorColor.removeClass("d-none");
this.divPapelEspecialInteriorColor.empty();
}
else {
this.divPapelEspecialInteriorColor.addClass("d-none");
this.divPapelEspecialInteriorColor.empty();
this.divGramajeInteriorColor.empty();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
papel: papel,
tipo: tipo,
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
this.fillGramajesColor.bind(context),
(response) => { console.log(response); }
).get();
}
}
#handlePapelInteriorEspecialColor() {
const context = this;
$('#divPapelInterior').removeClass('is-invalid');
$('#divGramajeInterior').removeClass('is-invalid');
this.papelInteriorColor = this.papelEspecialColor.getVal();
let tipo = this.getTipoImpresionColor();
new Ajax('/configuracion/papelesgenericos/getpapelcliente',
{
[this.csrf_token]: this.csrf_hash,
tirada: $('#tirada').val(),
papel: this.papelInterior,
tipo: tipo,
ancho: this.presupuestoCliente.datosGenerales.getDimensionLibro().ancho,
alto: this.presupuestoCliente.datosGenerales.getDimensionLibro().alto,
solapas: 0,
lomo: 0,
cubierta: 0,
},
{},
this.fillGramajesColor.bind(context),
(response) => { console.log(response); }
).get();
}
fillGramajes(response) {
$('#divGramajeInterior').removeClass('is-invalid');
this.divGramajeInterior.empty()
let showGramaje = false;
if (response.papeles.length <= 0 && response.papeles_especiales.length <= 0) {
return;
}
let papel = response.papeles.length > 0 ? response.papeles : response.papeles_especiales;
papel.forEach(valor => {
var container = $('<div>', {
class: 'custom-selector custom-selector-gramaje d-flex flex-column align-items-center justify-content-center gramaje-interior',
});
var radioButton = $('<input>', {
type: 'radio', // Tipo de input
name: ' calcular-solapas calcular-presupuesto gramaje-interior',
id: 'gramaje_' + valor.gramaje, // ID único
value: 'option1' // Valor del radio button
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: "gramaje_" + valor.gramaje,
text: valor.gramaje + " gr"
});
radioButton.on('click', (event) => {
const element = $(event.target);
const gramaje = element[0].id;
if (this.validateGramajeInterior()) {
const hasError = this.errores.filter(err => err === window.translations["validation"].gramaje_interior).length > 0;
if (hasError) {
// remove the item from this.errores
this.errores = this.errores.filter(err => err !== window.translations["validation"].gramaje_interior);
}
if (this.errores.length == 0) {
document.getElementById('sk-alert').innerHTML = '';
}
else {
document.getElementById('sk-alert').innerHTML = document.getElementById('sk-alert').innerHTML.
replace(window.translations["validation"].gramaje_interior, '');
}
this.presupuestoCliente.calcularSolapas(event);
this.presupuestoCliente.checkLomoInterior(event);
this.presupuestoCliente.checkForm(event);
};
});
container.append(radioButton).append(label);
$('#divGramajeInterior').append(container);
if (this.gramaje != null) {
if (this.gramaje == valor.gramaje) {
radioButton.prop('checked', true);
radioButton.trigger('click');
}
}
showGramaje = true;
});
if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
$("#divGramajeInterior").removeClass("d-none");
}
else if (!showGramaje) {
$("#divGramajeInterior").addClass("d-none");
}
}
fillGramajesColor(response) {
$('#divGramajeInterior').removeClass('is-invalid');
this.divGramajeInteriorColor.empty()
let showGramaje = false;
if (response.papeles.length <= 0) {
return;
}
response.papeles.forEach(valor => {
var container = $('<div>', {
class: 'custom-selector custom-selector-gramaje-color d-flex flex-column align-items-center justify-content-center gramaje-interior',
});
var radioButton = $('<input>', {
type: 'radio', // Tipo de input
name: ' calcular-solapas calcular-presupuesto gramaje-interior-color',
id: 'gramajeColor_' + valor.gramaje, // ID único
value: 'option1' // Valor del radio button
});
// Crear una etiqueta para el radio button
var label = $('<label>', {
for: "gramajeColor_" + valor.gramaje,
text: valor.gramaje + " gr"
});
radioButton.on('click', (event) => {
const element = $(event.target);
const gramaje = element[0].id;
this.presupuestoCliente.calcularSolapas(event);
this.presupuestoCliente.checkForm(event);
});
container.append(radioButton).append(label);
$('#divGramajeInteriorColor').append(container);
if (this.gramaje != null) {
if (this.gramaje == valor.gramaje) {
radioButton.prop('checked', true);
radioButton.trigger('click');
}
}
showGramaje = true;
});
if ($("#divGramajeInteriorColor").hasClass("d-none") && showGramaje) {
$("#divGramajeInteriorColor").removeClass("d-none");
}
else if (!showGramaje) {
$("#divGramajeInteriorColor").addClass("d-none");
}
}
}
export default DisenioInterior;