templates/base.html.twig line 1

Open in your IDE?
  1. {% set route_name = app.request.attributes.get('_route') %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <meta name="description" content="{{ 'header.headerDescription'|trans([],'header_page') }}">
  8.     <meta name="keywords" content="{{ 'header.headerKeyword'|trans([],'header_page') }}">
  9.     <meta name="author" content="Nkap Sarl">
  10.     <!-- Balise meta robots -->
  11.     <meta name="robots" content="index">
  12.     <!-- Balise meta revisit-after -->
  13.     <meta name="revisit-after" content="1 day">
  14.     <title>Ayila'a | {% block title %}{% endblock %}</title>
  15.     <link rel="icon" href="{{ asset('build/images/logo_LogoCercle.40dd8ea1.png') }}">
  16.         <!-- Google tag (gtag.js) -->
  17.     <script async src="https://www.googletagmanager.com/gtag/js?id=G-HB2H04MNE9"></script>
  18.     <script>
  19.         window.dataLayer = window.dataLayer || [];
  20.         function gtag() {
  21.             dataLayer.push(arguments);
  22.         }
  23.         gtag('js', new Date());
  24.         gtag('config', 'G-HB2H04MNE9');
  25.     </script>
  26.     <!-- Google Tag Manager -->
  27.     <script>(function (w, d, s, l, i) {
  28.             w[l] = w[l] || [];
  29.             w[l].push({'gtm.start':new Date().getTime(), event: 'gtm.js'});
  30.             var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
  31.             j.async = true;
  32.             j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
  33.             f.parentNode.insertBefore(j, f);
  34.         })(window, document, 'script', 'dataLayer', 'GTM-5W58P9R6');
  35.     </script>
  36.     <!-- End Google Tag Manager -->
  37.     <!-- GOOGLE WEB FONT -->
  38.     <link rel="preconnect" href="https://fonts.gstatic.com">
  39.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
  40.           rel="stylesheet">
  41.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  42.     <!-- BASE CSS -->
  43.     <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet">
  44.     <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
  45.     <link href="{{ asset('assets/css/vendors.css') }}" rel="stylesheet">
  46.     <link href="{{ asset('assets/css/header.css') }}" rel="stylesheet">
  47.     <link href="{{ asset('assets/css/custom.css') }}" rel="stylesheet">
  48.     <link href="{{ asset('assets/css/my-style/style.css') }}" rel="stylesheet">
  49.     <link href="{{ asset('assets/css/autocomplete-results-search.css') }}" rel="stylesheet">
  50.     <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.2/css/all.css">
  51. {#    <link href="{{ asset('assets/css/all.min.css') }}" rel="stylesheet">#}
  52. {#    <link href="{{ asset('assets/css/font-awesome.min.css') }}" rel="stylesheet">#}
  53.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
  54.     <!-- YOUR CUSTOM CSS -->
  55.     <style>
  56.         body{
  57.             width: 100%;
  58.             margin: 0 auto;
  59.             box-sizing: border-box;
  60.         }
  61.         .nav-class-elements {
  62.             color: black !important;
  63.         }
  64.         .icones-second-bar {
  65.             width: 35px;
  66.         }
  67.         @media (min-width: 1024px) {
  68.             .icones-second-bar {
  69.                 width: 25px;
  70.             }
  71.         }
  72.     </style>
  73.     {% block stylesheet %}
  74.     {% endblock %}
  75.     {% block javascripts %}
  76.         {{ encore_entry_script_tags('app') }}
  77.     {% endblock %}
  78. </head>
  79. <body>
  80. {% set user = AuthGuard() %}
  81. {% set isAuthenticated = isAuth() %}
  82. <!-- Google Tag Manager (noscript) -->
  83. <noscript>
  84.     <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5W58P9R6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  85. </noscript>
  86. <!-- End Google Tag Manager (noscript) -->
  87. <!-- Meta Pixel Code -->
  88. <script>
  89.     !function(f,b,e,v,n,t,s)
  90.     {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  91.         n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  92.         if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  93.         n.queue=[];t=b.createElement(e);t.async=!0;
  94.         t.src=v;s=b.getElementsByTagName(e)[0];
  95.         s.parentNode.insertBefore(t,s)}(window, document,'script',
  96.         'https://connect.facebook.net/en_US/fbevents.js');
  97.     fbq('init', '405729078674868');
  98.     fbq('track', 'PageView');
  99. </script>
  100. <noscript>
  101.     <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=405729078674868&ev=PageView&noscript=1" />
  102. </noscript>
  103. <!-- End Meta Pixel Code -->
  104. <div id="toast-container" class="toast-top-right"></div>
  105. <div id="page">
  106.     {% block header %}
  107.         {% include 'frontend/structure/header.html.twig' %}
  108.     {% endblock %}
  109.     <!-- /header -->
  110.     <main>
  111.         {% block body %}{% endblock %}
  112.     </main>
  113.     <!--/main-->
  114.     {% block footer %}
  115.         {% include 'frontend/structure/footer.html.twig' %}
  116.     {% endblock %}
  117.     <!--/footer-->
  118. </div>
  119. <!-- page -->
  120. <!-- Sign In Popup -->
  121. <div id="sign-in-dialog" class="zoom-anim-dialog mfp-hide">
  122.     <div class="small-dialog-header">
  123.         <h3>Sign In</h3>
  124.     </div>
  125.     <form>
  126.         <div class="sign-in-wrapper">
  127.             <a href="#0" class="social_bt facebook">Login with Facebook</a>
  128.             <a href="#0" class="social_bt google">Login with Google</a>
  129.             <div class="divider"><span>Or</span></div>
  130.             <div class="form-group">
  131.                 <label>Email</label>
  132.                 <input type="email" class="form-control" name="email" id="email">
  133.                 <i class="icon_mail_alt"></i>
  134.             </div>
  135.             <div class="form-group">
  136.                 <label>Password</label>
  137.                 <input type="password" class="form-control" name="password" id="password" value="">
  138.                 <i class="icon_lock_alt"></i>
  139.             </div>
  140.             <div class="clearfix add_bottom_15">
  141.                 <div class="checkboxes float-start">
  142.                     <label class="container_check">Remember me
  143.                         <input type="checkbox">
  144.                         <span class="checkmark"></span>
  145.                     </label>
  146.                 </div>
  147.                 <div class="float-end mt-1"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
  148.             </div>
  149.             <div class="text-center"><input type="submit" value="Log In" class="btn_1 full-width"></div>
  150.             <div class="text-center">
  151.                 Don’t have an account? <a href="register.html">Sign up</a>
  152.             </div>
  153.             <div id="forgot_pw">
  154.                 <div class="form-group">
  155.                     <label>Please confirm login email below</label>
  156.                     <input type="email" class="form-control" name="email_forgot" id="email_forgot">
  157.                     <i class="icon_mail_alt"></i>
  158.                 </div>
  159.                 <p>You will receive an email containing a link allowing you to reset your password to a new preferred
  160.                     one.</p>
  161.                 <div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
  162.             </div>
  163.         </div>
  164.     </form>
  165.     <!--form -->
  166. </div>
  167. <!-- /Sign In Popup -->
  168. <div id="toTop" onclick="scrollToTop()"></div>
  169. <script>
  170.     window.onscroll = function () {
  171.         scrollFunction();
  172.     };
  173.     function scrollFunction() {
  174.         if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
  175.             document.getElementById("toTop").style.display = "block";
  176.         } else {
  177.             document.getElementById("toTop").style.display = "none";
  178.         }
  179.     }
  180.     function scrollToTop() {
  181.         document.body.scrollTop = 0;
  182.         document.documentElement.scrollTop = 0;
  183.     }
  184. </script>
  185. <!-- Back to top button -->
  186. <!-- COMMON SCRIPTS -->
  187. <script src="{{ asset('assets/js/common_scripts.js') }}"></script>
  188. <script src="{{ asset('assets/js/main.js') }}"></script>
  189. <script src="{{ asset('assets/js/jquery-3.6.3.min.js') }}"></script>
  190. {#<script src="{{ asset('assets/js/bootstrap.bundle.js') }}"></script>#}
  191. {% block javascript %}
  192. {% endblock %}
  193. <script>
  194.     window.onscroll = function () {
  195.         scrollFunction()
  196.     };
  197.     function scrollFunction() {
  198.         var numero = document.getElementById("nav-numero")
  199.         var langue = document.getElementById("nav-langue")
  200.         if (numero === null || langue === null) {
  201.             return;
  202.         }
  203.         // Vérifie si l'utilisateur a fait défiler vers le bas
  204.         if (window.pageYOffset > 0) {
  205.             // Ajoute la classe "sticks" à la div
  206.             numero.classList.add("nav-class-elements");
  207.             langue.classList.add("nav-class-elements");
  208.         } else {
  209.             // Retire la classe "sticks" de la div
  210.             numero.classList.remove("nav-class-elements");
  211.             langue.classList.remove("nav-class-elements");
  212.         }
  213.     }
  214. </script>
  215. <script src="{{ asset('assets/js/header.js') }}"></script>
  216. <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
  217. <script src="{{ asset('assets/js/fontawesome.min.js') }}"></script>
  218. <script src="//code.tidio.co/s9ka0c7yvmz5hlz1gh0addn7u7xo3esb.js" async></script>
  219. <script>
  220.     $(document).ready(function () {
  221.         toastr.options = {
  222.             // "closeButton": true,          // Afficher le bouton de fermeture
  223.             "progressBar": true,          // Afficher une barre de progression
  224.             "positionClass": "toast-top-right", // Position des messages flash
  225.             "showDuration": "300",        // Durée d'affichage en millisecondes
  226.             "hideDuration": "1000",       // Durée de disparition en millisecondes
  227.             "timeOut": "5000",            // Temps d'affichage avant la disparition automatique en millisecondes
  228.             "extendedTimeOut": "1000",    // Temps d'affichage supplémentaire si l'utilisateur survole le message en millisecondes
  229.             "showEasing": "swing",        // Animation d'affichage du message
  230.             "hideEasing": "linear",       // Animation de disparition du message
  231.             "showMethod": "fadeIn",       // Méthode d'affichage du message
  232.             "hideMethod": "fadeOut"       // Méthode de disparition du message
  233.         };
  234.     });
  235. </script>
  236. {% for label, messages in app.flashes %}
  237.     {% for message in messages %}
  238.         {% if label == "success" %}
  239.             <script>
  240.                 toastr.success('{{ message }}');
  241.             </script>
  242.             {% elseif label == "danger" %}
  243.             <script>
  244.                 toastr.error('{{ message }}');
  245.             </script>
  246.         {% endif %}
  247.     {% endfor %}
  248. {% endfor %}
  249. {% block myscript %}
  250. {% endblock %}
  251. {#la section dedié à la recherche en utilisant autocomplete-results qui ne doit pas etre utiliser ailleur#}
  252. <script>
  253.     const nameInput = document.querySelector('input[name="name"]');
  254.     const autocompleteNameResults = nameInput.parentNode.querySelector('.autocomplete-results');
  255.     const defaultImageUrl = "{{ asset('build/images/autres/1-600.c14c1b04.jpg') }}";
  256.     const cityInput = document.querySelector('input[name="city"]');
  257.     const addressInput = document.querySelector('input[name="address"]');
  258.     const autocompleteCityResults = cityInput.parentNode.querySelector('.autocomplete-results');
  259.     const autocompleteAddressResults = addressInput.parentNode.querySelector('.autocomplete-results');
  260.     var formId =  document.getElementById("searchFormInput");
  261.     nameInput.addEventListener('input', function() {
  262.         const searchText = this.value;
  263.         if (searchText.length >= 3) {
  264.             fetch(search(searchText))
  265.                 .then(response => response.json())
  266.                 .then(data => {
  267.                     autocompleteNameResults.innerHTML = '';
  268.                     if (data['hydra:member']) {
  269.                         data['hydra:member'].forEach(item => {
  270.                             const li = document.createElement('li');
  271.                             const a = document.createElement('a'); // Création d'une balise a
  272.                             var REDIRECT_URL = "{{ path('app_services_attraction',{'id': 'attraction_id'})|escape('js') }}";
  273.                             REDIRECT_URL = REDIRECT_URL.replace("attraction_id", item.id);
  274.                             a.href = REDIRECT_URL; // Ajout de l'attribut href à la balise a
  275.                             a.style.color = "black";
  276.                             const imageUrl = item.url && item.url.length > 0 ? item.url : defaultImageUrl;
  277.                             // Création d'une balise image avec l'URL dynamique
  278.                             const image = document.createElement('img');
  279.                             image.src = imageUrl;
  280.                             image.alt = item.name;
  281.                             image.style.width = 'auto';
  282.                             image.style.borderRadius = '4px';
  283.                             image.style.verticalAlign = 'middle';
  284.                             image.style.maxHeight = '40px';
  285.                             // Ajout de l'image et du texte dans le li
  286.                             a.appendChild(image);
  287.                             a.insertAdjacentHTML('beforeend', `<span>${item.name}</span>`);
  288.                             li.appendChild(a);
  289.                             autocompleteNameResults.appendChild(li);
  290.                         });
  291.                         // Afficher le bloc d'autocomplétion
  292.                         autocompleteNameResults.style.display = 'block';
  293.                     }
  294.                 })
  295.                 .catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour le nom :', error));
  296.         } else {
  297.             // Cacher le bloc d'autocomplétion si la longueur de la saisie est inférieure à 5
  298.             autocompleteNameResults.style.display = 'none';
  299.         }
  300.     });
  301.     // Fonction pour gérer l'autocomplétion de la ville (city)
  302.     cityInput.addEventListener('input', function() {
  303.         const searchText = this.value;
  304.         let cities = []; // Réinitialise le tableau à chaque nouvelle saisie
  305.         if (searchText.length >= 3) {
  306.             fetch(addressSearch(null, searchText))
  307.                 .then(response => response.json())
  308.                 .then(data => {
  309.                     autocompleteCityResults.innerHTML = '';
  310.                     if (data['hydra:member']) {
  311.                         data['hydra:member'].forEach(item => {
  312.                             let stateInfo = item.state != null ? `${item.state}, ` : '';
  313.                             let city = `${stateInfo}${item.city}`;
  314.                             // Vérifie si la ville existe déjà dans le tableau
  315.                             if (!cities.includes(city)) {
  316.                                 const li = document.createElement('li');
  317.                                 li.textContent = city;
  318.                                 autocompleteCityResults.appendChild(li);
  319.                                 // Ajoute la ville au tableau
  320.                                 cities.push(city);
  321.                             }
  322.                         });
  323.                         autocompleteCityResults.style.display = 'block';
  324.                     }
  325.                 })
  326.                 .catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour la ville :', error));
  327.         } else {
  328.             autocompleteCityResults.style.display = 'none';
  329.         }
  330.     });
  331.     // Fonction pour gérer l'autocomplétion de l'adresse
  332.     addressInput.addEventListener('input', function() {
  333.         const searchText = this.value;
  334.         if (searchText.length >= 3) {
  335.             fetch(addressSearch(searchText))
  336.                 .then(response => response.json())
  337.                 .then(data => {
  338.                     autocompleteAddressResults.innerHTML = '';
  339.                     if (data['hydra:member']) {
  340.                         data['hydra:member'].forEach(item => {
  341.                             const li = document.createElement('li');
  342.                             let neighborhoodInfo = item.neighborhood != null ? `${item.neighborhood}, ` : '';
  343.                             li.textContent = `${neighborhoodInfo}${item.address}`;
  344.                             autocompleteAddressResults.appendChild(li);
  345.                         });
  346.                         autocompleteAddressResults.style.display = 'block';
  347.                     }
  348.                 })
  349.                 .catch(error => console.error('Erreur lors de la récupération des résultats d\'autocomplétion pour l\'adresse :', error));
  350.         } else {
  351.             autocompleteAddressResults.style.display = 'none';
  352.         }
  353.     });
  354.     // Event listener pour sélectionner une ville depuis les résultats d'autocomplétion
  355.     autocompleteCityResults.addEventListener('click', function(event) {
  356.         const clickedElement = event.target.closest('li');
  357.         if (clickedElement) {
  358.             cityInput.value = clickedElement.textContent;
  359.             autocompleteCityResults.innerHTML = '';
  360.             autocompleteCityResults.style.display = 'none';
  361.         }
  362.     });
  363.     // Event listener pour sélectionner une adresse depuis les résultats d'autocomplétion
  364.     autocompleteAddressResults.addEventListener('click', function(event) {
  365.         const clickedElement = event.target.closest('li');
  366.         if (clickedElement) {
  367.             addressInput.value = clickedElement.textContent;
  368.             autocompleteAddressResults.innerHTML = '';
  369.             autocompleteAddressResults.style.display = 'none';
  370.         }
  371.     });
  372.     autocompleteNameResults.addEventListener('click', function(event) {
  373.         const clickedElement = event.target.closest('li'); // Récupération de l'élément li le plus proche
  374.         if (clickedElement) {
  375.             const spanElement = clickedElement.querySelector('span'); // Sélection du span à l'intérieur de l'élément li
  376.             if (spanElement) {
  377.                 nameInput.value = spanElement.textContent; // Récupération du texte du span
  378.                 autocompleteNameResults.innerHTML = '';
  379.                 autocompleteNameResults.style.display = 'none';
  380.                 var newUrl = "{{ path('app_search_page') |escape('js') }}?name=" + encodeURIComponent(spanElement.textContent);
  381.                 // window.location.replace(newUrl);
  382.             }
  383.         }
  384.     });
  385.     function search(name = null) {
  386.         var BASE_PATH = "{{ path('search_attraction_with_api',{'name': 'name_id'})|escape('js') }}";
  387.         BASE_PATH = BASE_PATH.replace("name_id", name);
  388.         return BASE_PATH;
  389.     }
  390.     function addressSearch(address = null, city = null, page = 1) {
  391.         // Définition des paramètres de recherche
  392.         let BASE_PATH = "";
  393.         // Ajout des paramètres non nuls
  394.         if (city != null){
  395.             BASE_PATH = "{{ path('search_address_city_with_api',{'city': 'city_id'})|escape('js') }}";
  396.             BASE_PATH = BASE_PATH.replace("city_id", city);
  397.         }
  398.         if (address != null){
  399.             BASE_PATH = "{{ path('search_address_neighborhood_with_api',{'address': 'address_id'})|escape('js') }}";
  400.             BASE_PATH = BASE_PATH.replace("address_id", address);
  401.         }
  402.         return BASE_PATH;
  403.     }
  404.     formId.addEventListener("submit", function(event) {
  405.         event.preventDefault(); // Empêche l'envoi du formulaire par défaut
  406.         var name = document.querySelector('input[name="name"]').value;
  407.         var city = document.querySelector('input[name="city"]').value;
  408.         var state = document.querySelector('input[name="city"]').value;
  409.         var address = document.querySelector('input[name="address"]').value;
  410.         var neighborhood = document.querySelector('input[name="address"]').value;
  411.         // console.log(typeof name.length,typeof city.length,typeof address.length)
  412.         if(name !== "" || city !== "" || address !== ""){
  413.             // Construction de la nouvelle URL
  414.             var newUrl = "{{ path('app_search_page') |escape('js') }}?name=" + encodeURIComponent(name) + "&city=" + encodeURIComponent(city) + "&state=" + encodeURIComponent(state) + "&address=" + encodeURIComponent(address) + "&neighborhood=" + encodeURIComponent(neighborhood);
  415.             // Redirection vers la nouvelle URL
  416.             window.location.replace(newUrl);
  417.             // window.location.href = newUrl;
  418.         }
  419.     });
  420.     document.addEventListener('click', function(event) {
  421.         const isClickInsideAutocomplete = autocompleteNameResults.contains(event.target)
  422.             || autocompleteCityResults.contains(event.target)
  423.             || autocompleteAddressResults.contains(event.target);
  424.         if (!isClickInsideAutocomplete) {
  425.             autocompleteNameResults.style.display = 'none';
  426.             autocompleteCityResults.style.display = 'none';
  427.             autocompleteAddressResults.style.display = 'none';
  428.         }
  429.     });
  430. </script>
  431. </body>
  432. </html>