templates/FrontCommun/javascript-base.html.twig line 1

Open in your IDE?
  1. <script src="{{ asset("assets-commun/js/vue-#{app.environment}.min.js") }}"></script>
  2. {% if app.session.get('ROLE_SUPPER_ADMIN') %}
  3.     {# Panneau de visualisation des erreurs Vue.js #}
  4.     {% include 'FrontCommun/error-logger-panel.html.twig' %}
  6.     {# Système de journalisation des erreurs Vue.js - À charger EN DERNIER #}
  7.     <script src="{{ asset('assets-commun/js/error-logger/error-logger.js') }}"></script>
  8.     <script src="{{ asset('assets-commun/js/error-logger/error-handler-init.js') }}"></script>
  9. {% endif %}
  11. {#<script type="module">
  12.     import * as Turbo from 'https://cdn.skypack.dev/@hotwired/turbo';
  13. </script>#}
  14. <style>
  15.     /* Cœur rempli */
  16.     .heart-button .bi-heart-fill {
  17.         color: red;
  18.     }
  20.     /* Indicateur de chargement (spinner) */
  21.     .heart-button .loading-spinner {
  22.         display: none; /* Caché par défaut */
  23.         position: absolute;
  24.         top: 50%;
  25.         left: 50%;
  26.         transform: translate(-50%, -50%);
  27.         width: 20px;
  28.         height: 20px;
  29.         border: 2px solid #ccc;
  30.         border-top: 2px solid red;
  31.         border-radius: 50%;
  32.         animation: spin 1s linear infinite;
  33.     }
  35.     @keyframes spin {
  36.         0% {
  37.             transform: translate(-50%, -50%) rotate(0deg);
  38.         }
  39.         100% {
  40.             transform: translate(-50%, -50%) rotate(360deg);
  41.         }
  42.     }
  43. </style>
  45. <link rel="stylesheet" type="text/css" href="{{ asset('assets-commun/css/daterangepicker.css') }}"/>
  46. <script type="text/javascript" src="{{ asset('assets-commun/js/daterangepicker.min.js') }}"></script>
  47. <script type="text/javascript" src="{{ asset("assets-commun/js/jquery.number.js") }}"></script>
  48. <script type="text/javascript" src="{{ asset("assets-commun/js/autoNumeric.min.js") }}"></script>
  50. <link rel="stylesheet" href="{{ asset('assets-commun/css/jquery-confirm.min.css') }}">
  51. <script src="{{ asset('assets-commun/js/jquery-confirm.min.js') }}"></script>
  53. <script>
  54.     window.enabledHotelStayWorldwide = {{ app.request.server.get('ENABLED_HOTEL_STAY_WORLDWIDE') }};
  56.     if (typeof Vue != 'undefined')
  57.         Vue.options.delimiters = ['${', '}'];
  59.         {% if app.environment == 'prod' %}
  60.             Vue.config.devtools = false;
  61.             Vue.config.productionTip = false;
  62.         {% endif %}
  64.     /*Vue.config.errorHandler = (err, vm, info) => {
  65.         // err: error trace
  66.         // vm: component in which error occured
  67.         // info: Vue specific error information such as lifecycle hooks, events etc.
  69.         // TODO: Perform any custom logic or log to server
  70.     };*/
  72.     function flip(o) {
  73.         var newObj = {}
  74.         Object.keys(o).forEach((el, i) => {
  75.             newObj[o[el]] = el;
  76.         });
  77.         return newObj;
  78.     }
  80.     function autoNumeric(selector, options, version = 1) {
  82.         if ($(`${selector}:not(.formatted)`).length == 0)
  83.             return;
  85.         if (version == 1)
  86.             $(`${selector}:not(.formatted)`).number(true, options.decimalPlaces, options.decimalCharacter, options.digitGroupSeparator).addClass('formatted');
  87.         else if (version == 2)
  88.             document.querySelectorAll(`${selector}:not(.formatted)`).forEach(el => {
  89.                 let _options = Object.assign({}, options);
  91.                 if (el.dataset.currencySymbol !== undefined) {
  92.                     _options.currencySymbol = el.dataset.currencySymbol
  93.                     _options.currencySymbolPlacement = AutoNumeric.options.currencySymbolPlacement.suffix
  94.                 }
  95.                 if (el.dataset.unformatOnSubmit !== undefined) _options.unformatOnSubmit = (el.dataset.unformatOnSubmit == 'true' ? true : false)
  96.                 if (el.dataset.digitGroupSeparator !== undefined) _options.digitGroupSeparator = el.dataset.digitGroupSeparator
  97.                 if (el.dataset.decimalCharacter !== undefined) _options.decimalCharacter = el.dataset.decimalCharacter
  98.                 if (el.dataset.decimalPlaces !== undefined) _options.decimalPlaces = el.dataset.decimalPlaces
  99.                 if (el.dataset.minimumValue !== undefined) _options.minimumValue = el.dataset.minimumValue
  100.                 if (el.dataset.maximumValue !== undefined) _options.maximumValue = el.dataset.maximumValue
  102.                 new AutoNumeric(el, _options)
  103.                 el.classList.add("formatted")
  104.             })
  105.     }
  107.     defaultOptionsMoney = {
  108.         digitGroupSeparator: '',
  109.         decimalCharacter: '.',
  110.         decimalPlaces:{{ deviseAgence().scale }},
  111.         unformatOnSubmit: true
  112.     }
  114.     defaultOptionsPercent = {
  115.         digitGroupSeparator: '',
  116.         decimalCharacter: '.',
  117.         decimalPlaces: 2
  118.     }
  120.     $(document).ready(function () {
  121.         autoNumeric('input.money', defaultOptionsMoney);
  122.         autoNumeric('input.percent', defaultOptionsPercent);
  124.         autoNumeric('input.money-v2', defaultOptionsMoney, 2);
  125.         autoNumeric('input.percent-v2', defaultOptionsPercent, 2);
  127.         $('input.money').attr('maxlength', 11);
  128.         $('input.percent').attr('maxlength', 6);
  130.         // Récupérer la liste de souhaits depuis la session Symfony
  131.         window.wishlist = {{ app.session.get('wishlist', []) | json_encode | raw }};
  133.         // Attacher l'événement à un parent existant
  134.         if (document.getElementById('vjs-list-hotels') != null) {
  135.             document.getElementById('vjs-list-hotels').addEventListener('click', function (event) {
  136.                 // Vérifier si l'élément cliqué est un bouton "Like"
  137.                 if (event.target.closest('.heart-button')) {
  138.                     const heartButton = event.target.closest('.heart-button');
  139.                     const hotelId = parseInt(heartButton.getAttribute('data-hotel-id'));
  140.                     const heartIcon = heartButton.querySelector('.bi');
  141.                     const spinner = heartButton.querySelector('.loading-spinner');
  143.                     // Afficher le spinner et cacher l'icône de cœur
  144.                     heartIcon.style.display = 'none';
  145.                     spinner.style.display = 'block';
  147.                     // Envoyer une requête AJAX pour ajouter/retirer de la liste de souhaits
  148.                     fetch(`{{ path('wishlist_toggle',{hotelId:'_hotelId_'}) }}`.replace('_hotelId_', hotelId), {
  149.                         method: 'POST',
  150.                         headers: {
  151.                             'Content-Type': 'application/json',
  152.                             'X-Requested-With': 'XMLHttpRequest',
  153.                         },
  154.                     })
  155.                         .then(response => {
  156.                             if (!response.ok) {
  157.                                 throw new Error('Erreur lors de la requête');
  158.                             }
  159.                             return response.json();
  160.                         })
  162.                         .then(data => {
  163.                             if (data.success) {
  164.                                 // Mettre à jour l'icône du bouton
  165.                                 if (data.isInWishlist) {
  166.                                     heartIcon.classList.remove('bi-heart');
  167.                                     heartIcon.classList.add('bi-heart-fill');
  168.                                     // Ajouter l'hôtel à la liste de souhaits
  169.                                     wishlist.push(hotelId);
  170.                                 } else {
  171.                                     heartIcon.classList.remove('bi-heart-fill');
  172.                                     heartIcon.classList.add('bi-heart');
  173.                                     // Retirer l'hôtel de la liste de souhaits
  174.                                     wishlist.splice(wishlist.indexOf(hotelId), 1);
  175.                                 }
  176.                             } else {
  177.                                 throw new Error(data.message || 'Erreur inconnue');
  178.                             }
  179.                         })
  180.                         .catch(error => {
  181.                             console.error('Erreur:', error);
  182.                             // Afficher un message d'erreur à l'utilisateur
  183.                             alert('Une erreur est survenue : ' + error.message);
  184.                         })
  185.                         .finally(() => {
  186.                             // Cacher le spinner et réafficher l'icône de cœur
  187.                             spinner.style.display = 'none';
  188.                             heartIcon.style.display = 'block';
  189.                         });
  190.                 }
  191.             });
  192.         }
  193.     });
  194.     //================== Text Crope ==========================================
  195.     $.fn.extend({
  196.         toggleHtml: function (a, b) {
  197.             return this.html(this.html() == b ? a : b);
  198.         }
  199.     });
  201.     function checkEllipsisActive(div) {
  202.         var a = `<a href="javascript:void(0)" class="lire-la-suite" onclick="$(this).toggleHtml('Suite','Moins'); $(this).prev().toggleClass('text-crope')"><i>Suite</i></a>`
  203.         setTimeout(function () {
  204.             $(`${div} .text-crope`).each(function (i) {
  205.                 if ($(this).innerHeight() < $(this)[0].scrollHeight && $(this).parent().find('.lire-la-suite').length == 0)
  206.                     $(a).insertAfter($(this));
  207.             });
  208.             $(`${div} .text-crope`).each(function (i) {
  209.                 if ($(this).innerWidth() < $(this)[0].scrollWidth && $(this).parent().find('.lire-la-suite').length == 0)
  210.                     $(this).attr('title', $(this).html())
  211.             });
  212.         }, 500)
  213.     }
  215.     //checkEllipsisActive()
  216.     //================================================================================
  218.     {% if app.request.get('mdl') %}
  219.     $('#modal-login-register').modal()
  220.     $('#modal-login-register input.{{ app.request.get('mdl') }}').click()
  221.     {% endif %}
  223.     const slugify = str =>
  224.         str
  225.             .toLowerCase()
  226.             .trim()
  227.             .replace(/[^\w\s-]/g, '')
  228.             .replace(/[\s_-]+/g, '-')
  229.             .replace(/^-+|-+$/g, '');
  231.     function viewAlert(msg, tag, autoClose, fntAction, titre, _options) {
  232.         var color = 'dark';
  233.         var icon = '';
  234.         var title = '';
  235.         var animation = 'zoom';
  236.         var closeAnimation = 'scale';
  238.         if (tag == 'success') {
  239.             color = 'green';
  240.             icon = 'icon-checkmark4';
  241.             title = 'Succès';
  242.             animation = 'scale';
  243.             closeAnimation = 'scale';
  244.         } else if (tag == 'danger') {
  245.             color = 'red';
  246.             icon = 'icon-blocked';
  247.             title = 'Alert!';
  248.             animation = 'rotateY';
  249.             closeAnimation = 'rotateY';
  250.         } else if (tag == 'warning') {
  251.             color = 'orange';
  252.             icon = 'icon-warning';
  253.             title = 'Attention';
  254.             animation = 'rotateYR';
  255.             closeAnimation = 'rotateYR';
  256.         } else if (tag == 'info') {
  257.             color = 'blue';
  258.             icon = 'icon-info3';
  259.             title = 'Info';
  260.             animation = 'rotateX';
  261.             closeAnimation = 'rotateX';
  262.         } else if (tag == 'primary') {
  263.             color = 'purple';
  264.         }
  266.         if (titre !== undefined && titre != null)
  267.             title = titre;
  269.         var options = {
  270.             icon: icon,
  271.             closeIcon: true,
  272.             type: color,
  273.             title: title,
  274.             content: msg,
  275.             animationBounce: 2.5,
  276.             closeAnimation: closeAnimation,
  277.             animation: animation,
  278.             buttons: {
  279.                 btnOk: {
  280.                     text: 'OK',
  281.                     btnClass: 'btn-default',
  282.                     keys: ['enter', 'echap'],
  283.                 }
  284.             }
  285.         };
  286.         if (autoClose !== undefined && autoClose != null)
  287.             options.autoClose = 'btnOk|' + autoClose;
  289.         if (fntAction !== undefined && fntAction != null)
  290.             options.buttons.btnOk.action = fntAction;
  292.         if (_options !== undefined && _options != null)
  293.             $.each(_options, function (index, value) {
  294.                 options[value.key] = value.val;
  295.             });
  297.         $.alert(options);
  298.     }
  300.     function demandConfirm(title, content, txtConfirm, fntAction) {
  301.         $.confirm({
  302.             title: title,
  303.             content: content,
  304.             icon: 'icon-question3',
  305.             closeIcon: true,
  306.             type: 'blue',
  307.             buttons: {
  308.                 confirm: {
  309.                     text: txtConfirm,
  310.                     btnClass: 'btn-danger',
  311.                     keys: ['enter'],
  312.                     action: fntAction
  313.                 },
  314.                 cancel: {
  315.                     text: 'Non',
  316.                     btnClass: 'btn-default',
  317.                     keys: ['echap'],
  318.                 },
  319.             }
  320.         });
  321.     }
  323.     //================== Forcer le submit du formulaire une seul fois ==============================================
  324.     $(document).on('submit', 'form', function () {
  325.         form = $(this);
  326.         form.addClass('form-submitted');
  327.         setTimeout(function () {
  328.             form.removeClass('form-submitted');
  329.         }, 500);
  330.     })
  331.     $(window).on('beforeunload', function () {
  332.         $('.form-submitted').each(function () {
  333.             $(this).find('input').blur();
  334.             $(this).css('pointer-events', 'none');
  335.             btn = $(this).find('[type=submit]')
  336.             btn.prop('disabled', true)
  337.             btn.html('<i class="fa fa-spinner fa-spin"></i> <span class="text-loading">Veuillez patienter </span>')
  339.         })
  340.     });
  342.     //==============================================================================================================
  344.     function utf8_to_b64(str) {
  345.         return window.btoa(unescape(encodeURIComponent(str)));
  346.     }
  348.     function b64_to_utf8(str) {
  349.         return decodeURIComponent(escape(window.atob(str)));
  350.     }
  352.     Date.prototype.addDays = function (days) {
  353.         var date = new Date(this.valueOf());
  354.         date.setDate(date.getDate() + days);
  355.         return date;
  356.     }
  358.     String.prototype.removeSizeStyles = function () {
  359.         // Supprime tous les attributs class
  360.         let result = this.replace(/\s*class\s*=\s*["'][^"']*["']/gi, '');
  362.         // Supprime les propriétés de taille dans les attributs style
  363.         return result.replace(
  364.             /style\s*=\s*["'][^"']*?(width|height|min-width|min-height|max-width|max-height)\s*:\s*[^;"']+;?\s*[^"']*?["']/gi,
  365.             (match, p1) => {
  366.                 // Supprime les propriétés de taille tout en préservant les autres styles
  367.                 return match.replace(
  368.                     /(width|height|min-width|min-height|max-width|max-height)\s*:\s*[^;"']+;?\s*/gi,
  369.                     ''
  370.                 ).replace(/\s*style\s*=\s*["']\s*["']/i, ''); // Supprime style vide
  371.             }
  372.         );
  373.     };
  375.     Number.prototype.formatMoney = function (decimals = 3, decimal_separator = ".", thousands_separator = " ", round = false, devise = true) {
  376.         {% set coursEchange = getCoursEchange() %}
  377.         let montant = {{ coursEchange.montant }}
  378.         if (!devise)
  379.             montant = 1
  381.         decimals ={{ coursEchange.scale }}
  382.         if (round)
  383.             decimals = 0
  385.         var n = this {{ coursEchange.operation }} montant,
  386.             decimals = isNaN(decimals = Math.abs(decimals)) ? 2 : decimals,
  387.             decimal_separator = decimal_separator == undefined ? "." : decimal_separator,
  388.             thousands_separator = thousands_separator == undefined ? " " : thousands_separator,
  389.             s = n < 0 ? "-" : "",
  390.             i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(decimals))),
  391.             j = (j = i.length) > 3 ? j % 3 : 0;
  392.         return s + (j ? i.substr(0, j) + thousands_separator : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands_separator) + (decimals ? decimal_separator + Math.abs(n - i).toFixed(decimals).slice(2) : "");
  393.     };
  395.     $("form#newsletter").submit(function (event) {
  396.         event.preventDefault();
  397.         $('i#load-newsletter').toggleClass('hidden')
  398.         $.ajax({
  399.             type: "POST",
  400.             url: "{{ path('newsletter') }}",
  401.             data: $(this).serialize(),
  402.         }).done(function (data) {
  403.             $('i#load-newsletter').toggleClass('hidden')
  404.             $("form#newsletter").get(0).reset()
  405.             viewAlert('Merci beaucoup ! Nous vous enverrons chaque mois les meilleures offres ', 'success')
  406.         });
  407.     });
  409.     {% for type,flash in app.session.flashbag.all %}
  410.     {% for msg in flash %}
  411.     viewAlert(`{{ msg|raw }}`, '{{ type }}');
  412.     {% endfor %}
  413.     {% endfor %}
  415.     {% for flashError in app.flashes('verify_email_error') %}
  416.     viewAlert("{{ flashError }}", 'danger');
  417.     {% endfor %}
  419.     $('.logo').on({
  420.         mousedown: function () {
  421.             $(this).data('timer', setTimeout(function () {
  422.                 window.location.href = '{{ path('redirect_dev_route') }}'
  423.             }, 3000));
  424.         },
  425.         mouseup: function () {
  426.             clearTimeout($(this).data('timer'));
  427.         }
  428.     });
  430.     function validatePassword() {
  431.         if (plain_password.value != confirm_password.value) {
  432.             confirm_password.setCustomValidity("Les mots de passe ne correspondent pas");
  433.             confirm_password.setAttribute('class', 'not_confirm_password form-control')
  434.         } else {
  435.             confirm_password.setCustomValidity('');
  436.             confirm_password.setAttribute('class', 'confirm_password form-control')
  437.         }
  438.     }
  440.     if ($('#plainPassword').length > 0 && $('#confirm_password').length > 0) {
  441.         var plain_password = document.getElementById("plainPassword")
  442.             , confirm_password = document.getElementById("confirm_password");
  444.         plain_password.onchange = validatePassword;
  445.         confirm_password.onkeyup = validatePassword;
  446.     }
  448.     const scrollSmoothToBottom = (id) => {
  449.         const element = $(`div#${id}`);
  450.         element.animate({
  451.             scrollTop: element.prop("scrollHeight")
  452.         }, 1000);
  453.     }
  454.     const scrollToBottom = (id) => {
  455.         const element = document.getElementById(id);
  456.         element.scrollTop = element.scrollHeight;
  457.     }
  459.     /**
  460.      * Fonction externe pour afficher la pile d'appels de manière simplifiée
  461.      * @param {string} functionName - Nom de la fonction d'où l'appel provient
  462.      * @param {string} customMessage - Message personnalisé optionnel
  463.      */
  464.     function logStackTrace(functionName = 'Unknown', customMessage = '') {
  465.         // Récupérer la pile d'appels
  466.         const stack = new Error().stack.split('\n');
  468.         // Filtrer et simplifier les appels (ignorer les appels Vue internes, webpack, etc.)
  469.         const relevantCalls = stack
  470.             .slice(2) // Ignorer Error et logStackTrace
  471.             .filter(line => {
  472.                 const ignored = ['vue-dev', 'webpack', 'installHook', 'evaluate', 'overrideMethod',
  473.                     'computedGetter', 'renderList', 'eval', 'Vue._render', 'vm9708'];
  474.                 return !ignored.some(term => line.includes(term));
  475.             })
  476.             .slice(0, 8) // Limiter à 8 appels pertinents
  477.             .map(line => {
  478.                 // Extraire et nettoyer les informations
  479.                 const match = line.match(/at\s+(.+?)\s+\((.+?):(\d+):(\d+)\)/);
  480.                 if (match) {
  481.                     const [, func, file, line, col] = match;
  482.                     const fileName = file.split('/').pop();
  483.                     return { func: func.trim(), file: fileName, line, col };
  484.                 }
  485.                 return null;
  486.             })
  487.             .filter(Boolean);
  489.         // Afficher le schéma simplifié
  490.         console.group(`%c🔍 Call Stack - ${functionName}`, 'color: #ff6b35; font-weight: bold; font-size: 13px;');
  492.         if (customMessage) {
  493.             console.log(`%c💬 ${customMessage}`, 'color: #004e89; font-style: italic; font-size: 11px;');
  494.         }
  496.         console.log('%c' + getStackDiagram(relevantCalls), 'font-family: monospace; color: #333; font-size: 11px; white-space: pre;');
  498.         // Afficher la pile complète dans un groupe collapsé
  499.         console.groupCollapsed('%c📋 Full Stack Trace', 'color: #666; font-size: 11px;');
  500.         console.trace(`Full trace from ${functionName}`);
  501.         console.groupEnd();
  503.         console.groupEnd();
  504.     }
  506.     /**
  507.      * Génère un schéma visuel de la pile d'appels
  508.      */
  509.     function getStackDiagram(calls) {
  510.         let diagram = '\n';
  511.         calls.forEach((call, index) => {
  512.             const isLast = index === calls.length - 1;
  513.             const prefix = isLast ? '└─' : '├─';
  514.             const connector = isLast ? '  ' : '│ ';
  516.             diagram += `${prefix} ${call.func} (${call.file}:${call.line})\n`;
  517.             if (index < calls.length - 1) {
  518.                 diagram += `${connector}\n`;
  519.             }
  520.         });
  521.         return diagram;
  522.     }
  523. </script>