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

Open in your IDE?
  1. {% if app.user %}
  2. <span class="favorito curso-favorito {% if actividad.isFavorito is defined and actividad.isFavorito %}active{% endif %}"
  3. data-actividad-id="{{ actividad.id }}"
  4. data-actividad-tipo="{{ actividad.tipo }}">*</span>
  6. <script>
  7. document.addEventListener('DOMContentLoaded', function() {
  8. // Inicializar botón de favorito para la actividad {{ actividad.tipo }}-{{ actividad.id }}
  9. const favoritoBtn = document.querySelector('.curso-favorito[data-actividad-id="{{ actividad.id }}"][data-actividad-tipo="{{ actividad.tipo }}"]');
  11. if (favoritoBtn) {
  12. favoritoBtn.addEventListener('click', function(e) {
  13. e.preventDefault();
  14. toggleFavorito(favoritoBtn);
  15. });
  16. }
  18. /**
  19. * Función para alternar el estado de favorito de un curso
  20. *
  21. * @param {HTMLElement} button Botón de favorito
  22. */
  23. function toggleFavorito(button) {
  24. const actividadId = button.dataset.actividadId;
  25. const actividadTipo = button.dataset.actividadTipo;
  27. // URL del endpoint
  28. const url = `/${document.documentElement.lang}/courses/ajax/favorito/${actividadTipo}/${actividadId}`;
  30. // Petición AJAX
  31. fetch(url, {
  32. method: 'POST',
  33. headers: {
  34. 'X-Requested-With': 'XMLHttpRequest',
  35. 'Content-Type': 'application/json'
  36. },
  37. credentials: 'same-origin'
  38. })
  39. .then(response => {
  40. if (!response.ok) {
  41. if (response.status === 403) {
  42. // Redirigir al login si no está autenticado
  43. window.location.href = `/${document.documentElement.lang}/login`;
  44. return Promise.reject('Redirect to login');
  45. }
  46. return Promise.reject(`Error: ${response.status}`);
  47. }
  48. return response.json();
  49. })
  50. .then(data => {
  51. if (data.success) {
  52. // Cambiar la clase del botón según el nuevo estado
  53. if (data.isFavorito) {
  54. button.classList.add('active');
  55. } else {
  56. button.classList.remove('active');
  57. }
  58. }
  59. })
  60. .catch(error => {
  61. console.error('Error:', error);
  62. });
  63. }
  64. });
  65. </script>
  66. {% endif %}