mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
problema muestra genericos que no
This commit is contained in:
8
httpdocs/assets/js/safekat/common/common.js
Normal file
8
httpdocs/assets/js/safekat/common/common.js
Normal file
@ -0,0 +1,8 @@
|
||||
export function getToken()
|
||||
{
|
||||
const scriptUrl = new URL(import.meta.url);
|
||||
const params = new URLSearchParams(scriptUrl.search);
|
||||
|
||||
const paramsObject = Object.fromEntries(params.entries());
|
||||
return paramsObject.token;
|
||||
}
|
||||
@ -1,14 +1,22 @@
|
||||
import { getToken } from '../../common/common.js';
|
||||
import Ajax from '../../components/ajax.js';
|
||||
|
||||
class DisenioInterior {
|
||||
|
||||
constructor(domItem, wizardForm, validatorStepper) {
|
||||
|
||||
this.domItem = domItem;
|
||||
|
||||
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.allowNext = true;
|
||||
|
||||
this.disenioInterior = this.domItem.find(".disenio-interior");
|
||||
this.divPapelInterior = this.domItem.find("#divPapelInterior");
|
||||
this.textoPapelInterior = this.domItem.find("#textoPapelInterior");
|
||||
this.divPapelInteriorColor = this.domItem.find("#divPapelInteriorColor");
|
||||
this.divGramajeInterior = this.domItem.find("#divGramajeInterior");
|
||||
this.papelInterior = this.domItem.find(".papel-interior");
|
||||
@ -18,11 +26,6 @@ class DisenioInterior {
|
||||
this.colorEstandar = this.domItem.find("#colorEstandar");
|
||||
this.colorPremium = this.domItem.find("#colorPremium");
|
||||
|
||||
this.offsetBlanco = this.domItem.find("#offsetBlanco");
|
||||
this.offsetAhuesado = this.domItem.find("#offsetAhuesado");
|
||||
this.offsetAhuesadoVolumen = this.domItem.find("#offsetAhuesadoVolumen");
|
||||
this.estucadoMate = this.domItem.find("#estucadoMate");
|
||||
|
||||
this.gramaje = this.domItem.find(".check-interior-gramaje");
|
||||
this.gramaje70 = this.domItem.find("#interiorGramaje70");
|
||||
this.gramaje80 = this.domItem.find("#interiorGramaje80");
|
||||
@ -41,11 +44,6 @@ class DisenioInterior {
|
||||
this.colorEstandar_color = this.domItem.find("#colorEstandarColor");
|
||||
this.colorPremium_color = this.domItem.find("#colorPremiumColor");
|
||||
|
||||
this.offsetBlanco_color = this.domItem.find("#offsetBlancoColor");
|
||||
this.offsetAhuesado_color = this.domItem.find("#offsetAhuesadoColor");
|
||||
this.offsetAhuesadoVolumen_color = this.domItem.find("#offsetAhuesadoVolumenColor");
|
||||
this.estucadoMate_color = this.domItem.find("#estucadoMateColor");
|
||||
|
||||
this.gramaje_color = this.domItem.find(".check-interior-color-gramaje");
|
||||
this.gramaje70_color = this.domItem.find("#interiorGramaje70Color");
|
||||
this.gramaje80_color = this.domItem.find("#interiorGramaje80Color");
|
||||
@ -66,6 +64,7 @@ class DisenioInterior {
|
||||
|
||||
this.initValidation();
|
||||
|
||||
|
||||
// Creamos un nuevo observador que detecta cambios en los atributos
|
||||
this.observer = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
@ -87,7 +86,6 @@ class DisenioInterior {
|
||||
|
||||
// Eventos
|
||||
this.disenioInterior.on('click', this.#handleDisenioInterior.bind(this));
|
||||
this.papelInterior.on('click', this.#handlePapelInterior.bind(this));
|
||||
this.disenioInterior_color.on('click', this.#handleDisenioInterior.bind(this));
|
||||
this.papelInterior_color.on('click', this.#handlePapelInterior.bind(this));
|
||||
|
||||
@ -96,17 +94,9 @@ class DisenioInterior {
|
||||
this.observer.observe(this.negroPremium[0], { attributes: true });
|
||||
this.observer.observe(this.colorEstandar[0], { attributes: true });
|
||||
this.observer.observe(this.colorPremium[0], { attributes: true });
|
||||
this.observer.observe(this.offsetBlanco[0], { attributes: true });
|
||||
this.observer.observe(this.offsetAhuesado[0], { attributes: true });
|
||||
this.observer.observe(this.offsetAhuesadoVolumen[0], { attributes: true });
|
||||
this.observer.observe(this.estucadoMate[0], { attributes: true });
|
||||
this.observer.observe(this.colorEstandar_color[0], { attributes: true });
|
||||
this.observer.observe(this.colorPremium_color[0], { attributes: true });
|
||||
this.observer.observe(this.offsetBlanco_color[0], { attributes: true });
|
||||
this.observer.observe(this.offsetAhuesado_color[0], { attributes: true });
|
||||
this.observer.observe(this.offsetAhuesadoVolumen_color[0], { attributes: true });
|
||||
this.observer.observe(this.estucadoMate_color[0], { attributes: true });
|
||||
|
||||
|
||||
this.checksGramaje.each(function () {
|
||||
|
||||
const customOptionEL = $(this);
|
||||
@ -114,10 +104,69 @@ class DisenioInterior {
|
||||
self.#handleClickGramaje(customOptionEL);
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
updatePapeles(papeles) {
|
||||
|
||||
const context = this;
|
||||
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';
|
||||
|
||||
new Ajax('/papelesgenericos/getpapelgenericocliente',
|
||||
{
|
||||
[this.csrf_token]: this.csrf_hash,
|
||||
tipo: tipo,
|
||||
cubierta: 0,
|
||||
},
|
||||
{},
|
||||
this.fillPapeles.bind(context),
|
||||
(response) => { console.log(response); }
|
||||
).get();
|
||||
}
|
||||
|
||||
fillPapeles(response) {
|
||||
|
||||
|
||||
this.divPapelInterior.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 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.id, // ID único
|
||||
value: 'option1' // Valor del radio button
|
||||
});
|
||||
|
||||
// Crear una etiqueta para el radio button
|
||||
var label = $('<label>', {
|
||||
for: papel.id,
|
||||
text: papel.nombre
|
||||
});
|
||||
|
||||
radioButton.on('click', this.#handlePapelInterior.bind(this));
|
||||
|
||||
container.append(radioButton).append(label);
|
||||
$('#divPapelInterior').append(container);
|
||||
});
|
||||
}
|
||||
|
||||
cargarDatos(datos, papelInteriorDiferente) {
|
||||
|
||||
if (papelInteriorDiferente) {
|
||||
@ -151,8 +200,6 @@ class DisenioInterior {
|
||||
$(`#divGramajeInteriorColor .gramaje-interior-color input[data-value="${datos.color.gramaje}"]`).trigger('click');
|
||||
}, 0);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
if (datos.color) {
|
||||
@ -182,9 +229,8 @@ class DisenioInterior {
|
||||
$(`#divGramajeInterior .gramaje-interior input[data-value="${datos.negro.gramaje}"]`).trigger('click');
|
||||
}, 0);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
this.updatePapeles();
|
||||
|
||||
}
|
||||
|
||||
@ -375,7 +421,7 @@ class DisenioInterior {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
getIsHq() {
|
||||
|
||||
try {
|
||||
@ -403,7 +449,7 @@ class DisenioInterior {
|
||||
this.rl_tipo_interior.removeClass('d-none');
|
||||
|
||||
const HQ = this.getIsHq();
|
||||
const color = $("#paginasColor").val()>0?true:false;
|
||||
const color = $("#paginasColor").val() > 0 ? true : false;
|
||||
const papelInterior = this.getPapel(true);
|
||||
const gramajeInterior = this.getGramaje();
|
||||
if (HQ != null && papelInterior != null && gramajeInterior != null) {
|
||||
@ -537,13 +583,40 @@ class DisenioInterior {
|
||||
|
||||
// Para recalcular el presupuesto
|
||||
element.trigger('change');
|
||||
|
||||
this.updatePapeles();
|
||||
}
|
||||
|
||||
|
||||
#handlePapelInterior(event) {
|
||||
const context = this;
|
||||
|
||||
// Accede al ID del elemento que disparó el evento
|
||||
const element = $(event.target);
|
||||
const papel = element[0].id;
|
||||
|
||||
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';
|
||||
|
||||
new Ajax('/papelesimpresion/getgramajecliente',
|
||||
{
|
||||
[this.csrf_token]: this.csrf_hash,
|
||||
papel: papel,
|
||||
tipo: tipo,
|
||||
cubierta: 0,
|
||||
},
|
||||
{},
|
||||
this.fillGramajes.bind(context),
|
||||
(response) => { console.log(response); }
|
||||
).get();
|
||||
|
||||
|
||||
/*
|
||||
let class2Find = '.papel-interior';
|
||||
if (element[0].closest('.image-container').id.includes('Color'))
|
||||
class2Find = '.papel-interior-color';
|
||||
@ -569,13 +642,56 @@ class DisenioInterior {
|
||||
}
|
||||
|
||||
// Para recalcular el presupuesto
|
||||
element.trigger('change');
|
||||
element.trigger('change');*/
|
||||
}
|
||||
|
||||
fillGramajes(response) {
|
||||
|
||||
|
||||
this.divGramajeInterior.empty()
|
||||
let showGramaje = false;
|
||||
|
||||
if(response.gramajes.length <= 0){
|
||||
return;
|
||||
}
|
||||
|
||||
response.gramajes.forEach(gramaje => {
|
||||
var container = $('<div>', {
|
||||
class: 'custom-selector d-flex flex-column align-items-center justify-content-center gramaje-interior'
|
||||
});
|
||||
|
||||
var radioButton = $('<input>', {
|
||||
type: 'radio', // Tipo de input
|
||||
name: 'calcular-presupuesto',
|
||||
id: 'gramaje_' + gramaje.id, // ID único
|
||||
value: 'option1' // Valor del radio button
|
||||
});
|
||||
|
||||
// Crear una etiqueta para el radio button
|
||||
var label = $('<label>', {
|
||||
for: "gramaje_" + gramaje.id,
|
||||
text: gramaje.text
|
||||
});
|
||||
|
||||
|
||||
container.append(radioButton).append(label);
|
||||
$('#divGramajeInterior').append(container);
|
||||
|
||||
showGramaje = true;
|
||||
});
|
||||
|
||||
if ($("#divGramajeInterior").hasClass("d-none") && showGramaje) {
|
||||
$("#divGramajeInterior").removeClass("d-none");
|
||||
}
|
||||
else if (!showGramaje) {
|
||||
$("#divGramajeInterior").addClass("d-none");
|
||||
}
|
||||
}
|
||||
|
||||
#handleUpdateGramaje() {
|
||||
|
||||
let showGramaje = false;
|
||||
|
||||
/*
|
||||
$(".check-interior-gramaje ").prop("checked", false);
|
||||
$(".check-interior-color-gramaje ").prop("checked", false);
|
||||
|
||||
@ -688,7 +804,7 @@ class DisenioInterior {
|
||||
}
|
||||
else if (!showGramaje) {
|
||||
$("#divGramajeInterior").addClass("d-none");
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -17,14 +17,17 @@
|
||||
|
||||
/* Pseudo-elemento que muestra el tick */
|
||||
.image-container.selected::after {
|
||||
content: '✔'; /* Símbolo de tick */
|
||||
content: '✔';
|
||||
/* Símbolo de tick */
|
||||
position: absolute;
|
||||
top: calc(50% + 5px);
|
||||
left: calc(100%/2 + 65px); /* Mueve 75px a la derecha fuera del contenedor */
|
||||
left: calc(100%/2 + 65px);
|
||||
/* Mueve 75px a la derecha fuera del contenedor */
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: green;
|
||||
background-color: rgba(255, 255, 255, 0); /* Fondo transparente */
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
/* Fondo transparente */
|
||||
border-radius: 100%;
|
||||
padding: 5px;
|
||||
}
|
||||
@ -474,14 +477,72 @@
|
||||
}
|
||||
}
|
||||
|
||||
.texto-resumen-lateral{
|
||||
.texto-resumen-lateral {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.num-input{
|
||||
.num-input {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.div-num-input{
|
||||
.div-num-input {
|
||||
min-width: 105px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.custom-selector{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
/* Asegurar el tamaño uniforme del contenedor */
|
||||
.custom-selector {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
width: 250px; /* Fija el ancho */
|
||||
height: 80px; /* Fija el alto */
|
||||
padding: 0.5em;
|
||||
box-sizing: border-box; /* Incluir padding en el tamaño total */
|
||||
border: 3px solid transparent; /* Evitar deformaciones por borde */
|
||||
}
|
||||
|
||||
/* Ocultar los radio buttons */
|
||||
.custom-selector input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Estilo para el label */
|
||||
.custom-selector label {
|
||||
position: relative;
|
||||
color: black;
|
||||
font-family: "Poppins", sans-serif;
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
width: 100%; /* Llenar todo el contenedor */
|
||||
height: 100%; /* Llenar todo el contenedor */
|
||||
flex: 1; /* Tomar el espacio disponible */
|
||||
gap: 0.8em;
|
||||
border: 1px solid #dbdade;
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0.5em;
|
||||
text-align: center; /* Texto alineado a la izquierda */
|
||||
}
|
||||
|
||||
|
||||
/* Cambiar el estilo del label cuando está seleccionado */
|
||||
.custom-selector input[type="radio"]:checked + label {
|
||||
background-color: #7367f0;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user