Symfony Profiler

{% trans_default_domain "intereses" %}
{% if mostrar_boton is defined and mostrar_boton %}
{% set btnColor = actividad.tieneInteres | default(false) ? 'btn-primary' : 'btn-secondary' %}
{% if app.user and constant('App\\Enum\\RolEnum::EMPRESA') in app.user.roles %}
{% if nombreCurso is not defined %}
{% set nombreCurso = nombre[app.request.locale] | default(nombre | first) %}
{% endif %}
<button class="btn {{ btnColor }} mostrar-interes-empresa"
data-actividad-id="{{ actividad.id }}"
data-actividad-tipo="{{ actividad.tipo }}"
data-curso-nombre="{{ nombreCurso }}">
Mostrar interés
</button>
{% else %}
<button class="btn {{ btnColor }} mostrar-interes"
data-actividad-id="{{ actividad.id }}"
data-actividad-tipo="{{ actividad.tipo }}">
{{ "course.action.show_interest"|trans({}, "courses") }}
</button>
{% endif %}
{% endif %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Inicializar botón de interés para la actividad {{ actividad.tipo }}-{{ actividad.id }}
const interesBtn = document.querySelector('[data-actividad-id="{{ actividad.id }}"][data-actividad-tipo="{{ actividad.tipo }}"].curso-interes, [data-actividad-id="{{ actividad.id }}"][data-actividad-tipo="{{ actividad.tipo }}"].mostrar-interes');
const interesEmpresaBtn = document.querySelector('[data-actividad-id="{{ actividad.id }}"][data-actividad-tipo="{{ actividad.tipo }}"].mostrar-interes-empresa');
if (interesBtn) {
interesBtn.addEventListener('click', function(e) {
e.preventDefault();
{% if app.user %}
// Usuario registrado: manejar con AJAX
toggleInteres(interesBtn);
{% else %}
// Usuario no registrado: mostrar modal para recoger datos
mostrarModalRegistroInteres(interesBtn);
{% endif %}
});
}
if (interesEmpresaBtn) {
interesEmpresaBtn.addEventListener('click', function(e) {
e.preventDefault();
mostrarModalSeleccionEmpleados(interesEmpresaBtn, 'mostrarInteres');
});
}
/**
* Función para alternar el estado de interés de un curso (usuario registrado)
*
* @param {HTMLElement} button Botón de interés
*/
function toggleInteres(button) {
const actividadId = button.dataset.actividadId;
const actividadTipo = button.dataset.actividadTipo;
// URL del endpoint
const url = `/${document.documentElement.lang}/courses/ajax/interes/${actividadTipo}/${actividadId}`;
// Petición AJAX
fetch(url, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
},
credentials: 'same-origin'
})
.then(response => {
if (!response.ok) {
if (response.status === 403) {
// Redirigir al login si no está autenticado
window.location.href = `/${document.documentElement.lang}/login`;
return Promise.reject('Redirect to login');
}
return Promise.reject(`Error: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.success) {
// Cambiar la clase del botón según el nuevo estado
if (data.tieneInteres) {
button.classList.add('active');
// Si es un botón de "Mostrar interés", cambiar su clase
if (button.classList.contains('mostrar-interes')) {
button.classList.remove('btn-secondary');
button.classList.add('btn-primary');
}
AlertUtils.success("{{ 'title.alert.interes' | trans }}", "{{ 'message.alert.interes_checked' | trans }}");
} else {
button.classList.remove('active');
// Si es un botón de "Mostrar interés", cambiar su clase
if (button.classList.contains('mostrar-interes')) {
button.classList.remove('btn-primary');
button.classList.add('btn-secondary');
}
AlertUtils.success("{{ 'title.alert.interes' | trans }}", "{{ 'message.alert.interes_unchecked' | trans }}");
}
}
})
.catch(error => {
console.error('Error:', error);
});
}
/**
* Función para mostrar modal de registro de interés (usuario no registrado)
*
* @param {HTMLElement} button Botón de interés
*/
function mostrarModalRegistroInteres(button) {
const actividadId = button.dataset.actividadId;
const actividadTipo = button.dataset.actividadTipo;
var lang = `${document.documentElement.lang}`;
// Comprobar si ya existe un modal o crearlo
let modalId = 'modalInteres' + actividadTipo + actividadId;
let modal = document.getElementById(modalId);
if (!modal) {
// Crear el modal si no existe
modal = document.createElement('div');
modal.id = modalId;
modal.className = 'modal';
modal.setAttribute('role', 'dialog');
if(lang === "ca"){
modal.innerHTML = `
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mostrar interès en aquesta activitat.</h5>
<button type="button" class="close action-close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formInteres${actividadTipo}${actividadId}">
<div class="form-group">
<label for="nombre">Nom complet</label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="email">Correu electrònic</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telefono">Telèfon</label>
<input type="tel" class="form-control" id="telefono" name="telefono" required>
</div>
<div class="form-group">
<label for="dni">DNI</label>
<input type="text" class="form-control" id="dni" name="dni" required>
</div>
<div class="form-group">
<label for="comentario">Comentari (opcional)</label>
<textarea class="form-control" id="comentario" name="comentario" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel-modal">Cancelar</button>
<button type="button" class="btn btn-primary action-save btnEnviarInteres" data-form="formInteres${actividadTipo}${actividadId}" data-actividad-id="${actividadId}" data-actividad-tipo="${actividadTipo}">Enviar</button>
</div>
</div>
</div>
`;
}
if(lang === "es"){
modal.innerHTML = `
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Mostrar interés en esta actividad</h5>
<button type="button" class="close action-close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="formInteres${actividadTipo}${actividadId}">
<div class="form-group">
<label for="nombre">Nombre completo</label>
<input type="text" class="form-control" id="nombre" name="nombre" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="telefono">Teléfono</label>
<input type="tel" class="form-control" id="telefono" name="telefono" required>
</div>
<div class="form-group">
<label for="dni">DNI</label>
<input type="text" class="form-control" id="dni" name="dni" required>
</div>
<div class="form-group">
<label for="comentario">Comentario (opcional)</label>
<textarea class="form-control" id="comentario" name="comentario" rows="3"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary cancel-modal">Cancelar</button>
<button type="button" class="btn btn-primary action-save btnEnviarInteres" data-form="formInteres${actividadTipo}${actividadId}" data-actividad-id="${actividadId}" data-actividad-tipo="${actividadTipo}">Enviar</button>
</div>
</div>
</div>
`;
}
document.body.appendChild(modal);
// Agregar evento al botón de enviar del modal
const btnEnviar = modal.querySelector('.btnEnviarInteres');
btnEnviar.addEventListener('click', function() {
enviarInteresNoRegistrado(this);
});
// Agregar evento al botón de cancelar y cerrar del modal
const btnCerrar = modal.querySelector('.close');
btnCerrar.addEventListener('click', function() {
modal.style.display = 'none';
document.body.classList.remove('modal-open');
// Eliminar cualquier backdrop que pudiera haber
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
backdrop.parentNode.removeChild(backdrop);
}
});
const btnCancelar = modal.querySelector('.cancel-modal');
btnCancelar.addEventListener('click', function() {
modal.style.display = 'none';
document.body.classList.remove('modal-open');
// Eliminar cualquier backdrop que pudiera haber
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
backdrop.parentNode.removeChild(backdrop);
}
});
}
// Mostrar el modal manualmente sin Bootstrap
modal.style.display = 'block';
document.body.classList.add('modal-open');
// Crear backdrop manualmente
let backdrop = document.querySelector('.modal-backdrop');
if (!backdrop) {
backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop in';
document.body.appendChild(backdrop);
}
// Añadir clase para que la animación funcione
setTimeout(() => {
modal.classList.add('in');
}, 50);
}
/**
* Función para enviar interés de usuario no registrado
*
* @param {HTMLElement} button Botón de enviar interés
*/
function enviarInteresNoRegistrado(button) {
const actividadId = button.dataset.actividadId;
const actividadTipo = button.dataset.actividadTipo;
const formId = button.dataset.form;
const form = document.getElementById(formId);
// Validar el formulario
if (!form.checkValidity()) {
form.reportValidity();
return;
}
// Recoger datos del formulario
const formData = {
nombre: form.querySelector('#nombre').value,
email: form.querySelector('#email').value,
telefono: form.querySelector('#telefono').value,
dni: form.querySelector('#dni').value,
comentario: form.querySelector('#comentario').value
};
// URL del endpoint para usuarios no registrados
const url = `/${document.documentElement.lang}/courses/ajax/interes-no-registrado/${actividadTipo}/${actividadId}`;
// Petición AJAX
fetch(url, {
method: 'POST',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
},
body: JSON.stringify(formData),
credentials: 'same-origin'
})
.then(response => {
if (!response.ok) {
return Promise.reject(`Error: ${response.status}`);
}
return response.json();
})
.then(data => {
if (data.success) {
// Ocultar modal manualmente
const modal = document.getElementById(`modalInteres${actividadTipo}${actividadId}`);
if (modal) {
modal.style.display = 'none';
modal.classList.remove('in');
document.body.classList.remove('modal-open');
// Eliminar backdrop
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
backdrop.parentNode.removeChild(backdrop);
}
}
// Si es una solicitud, actualizar el botón
const interesBtn = document.querySelector('.mostrar-interes[data-actividad-id="' + actividadId + '"][data-actividad-tipo="' + actividadTipo + '"]');
if (interesBtn) {
interesBtn.classList.remove('btn-secondary');
interesBtn.classList.add('btn-primary');
}
// Mostrar mensaje de éxito
alert('Gracias por mostrar tu interés. Te contactaremos pronto.');
}
})
.catch(error => {
console.error('Error:', error);
alert('Ha ocurrido un error al registrar tu interés. Por favor, inténtalo de nuevo.');
});
}
});
</script>

templates/_partials/courses/_interes.html.twig line 1