templates/homesearch.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}- Recherche{% endblock %}
  5. {% block headersection %}
  6. <div class="fixed-top">
  7.     {{ include('flashmessages/flashmessages.html.twig') }}
  8. </div>
  9. <section class="section section-xl bg-primary overlay-dark text-white rounded covernorepeat" data-background="{{ asset('assets/img/cards-3662554_1920.jpg') }}">
  10.     <div class="container">
  11.         <div class="row justify-content-center">
  12.             <div class="col-12">
  13.                 <nav aria-label="breadcrumb">
  14.                     <ol class="breadcrumb breadcrumb-transparent">
  15.                         <li class="breadcrumb-item"><a href="{{ path('home', {}, relative = false) }}">Accueil</a></li>
  16.                         <li class="breadcrumb-item active">Recherche</li>
  17.                     </ol>
  18.                 </nav>
  19.                 <!-- Heading -->
  20.                 <h1 class="display-2">
  21.                     <i class="fab fa-searchengin mr-2"></i><span class="font-weight-light">Trouvez votre</span> tournoi ou festival
  22.                 </h1>
  23.                 <!-- Text -->
  24.                 <p class="lead text-muted mt-4">
  25.                     Recherchez parmi tous les tournois et festivals de notre site.
  26.                 </p>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </section>
  31. {%endblock%}
  33. {%block body%}
  34. <main>
  35.     <div class="section pt-5 pt-lg-6" style="min-height: 50vh;">
  36.         <div id="spaces-container" class="container">
  37.             <div class="row justify-content-center mb-3">
  38.                 <div class="col-12">
  39.                     {{ form_start(formsearch, { 'attr': {'class': 'row justify-content-center'} }) }}
  40.                     <div class="col-12 col-lg-4">
  41.                         <div class="form-group mb-lg-0">
  42.                             <div class="input-group input-group-lg mb-lg-0">
  43.                                 <div class="input-group-prepend">
  44.                                     <span class="input-group-text"><i class="fas fa-search-location"></i></span>
  45.                                 </div>
  46.                                 {{ form_widget(formsearch.location, {'attr': {'class': 'form-control autocomplete', 'placeholder': 'Ville', 'onFocus' : 'geolocate()' }}) }}
  48.                             </div>
  49.                             {{ form_widget(formsearch.locationhidden)}}
  50.                             {{ form_widget(formsearch.placeid)}}
  51.                         </div>
  52.                     </div>
  53.                     <div class="col-12 col-lg-3">
  54.                         <div class="input-group input-group-lg mb-3 mb-lg-0">
  55.                             <div class="input-group-prepend">
  56.                                 <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
  57.                             </div>
  58.                             {{ form_widget(formsearch.date, {'attr': {'class': 'form-control datepicker', 'placeholder': 'Date', 'data-date-format':'dd/mm/yyyy'}}) }}
  59.                             <!--<input class="form-control datepicker" placeholder="Select date" type="text" required>-->
  60.                         </div>
  61.                     </div>
  62.                     <div class="col-12 col-lg-2">
  63.                         {{ form_widget(formsearch.search, {'attr': {'class': 'btn btn-lg btn-primary btn-block mt-3 mt-md-0 animate-up-2' }} ) }}
  64.                         <!--<button class="btn btn-lg btn-primary btn-block mt-3 mt-md-0 animate-up-2" type="submit">Find a desk</button>-->
  65.                     </div>
  67.                 </div>
  68.             </div>
  69.             <div class="row justify-content-center">
  70.                 <div class="col-12 col-lg-9 order-lg-1">
  71.                     <div class="justify-content-between align-items-center d-flex">
  72.                         <div class="mr-3">
  73.                             <p class="mb-0 font-small">
  74.                                 Nombre de résultats : {{ pagination.getTotalItemCount }}
  75.                             </p>
  76.                         </div>
  77.                         <div class="">
  78.                             <div class="input-group input-group-sm">
  79.                                 <div class="input-group-prepend form-control-sm">
  80.                                     <span class="input-group-text form-control-sm"><i class="fas fa-route"></i></span>
  81.                                     {{ form_widget(formsearch.distance, {'attr': {'class': 'form-control-sm font-small', 'onchange':'this.form.submit()'}}) }}
  82.                                 </div>
  83.                             </div>
  84.                         </div>    
  85.                     </div>
  86.                     {{form_end(formsearch)}}
  87.                     <div class="tab-content mt-4 mt-lg-4 " id="tabcontentexample-5">
  88.                         <div class="tab-pane fade show active" id="link-example-13" role="tabpanel" aria-labelledby="tab-link-example-13">
  89.                             {% for bfedition in pagination %}
  90.                             {{ render(controller('App\\Controller\\BFEditionController::ShowListView', {id:bfedition.id})) }}
  91.                             {%endfor%}
  92.                         </div>
  93.                     </div>
  94.                     {{ knp_pagination_render(pagination) }}
  95.                 </div>
  96.             </div>
  97.         </div>
  98.     </div>
  99. </main>
  101. <script>
  102.     var placeSearch, autocompleteinput;
  103.     var input = document.getElementById('festival_search_with_distance_location');
  104.     var componentForm = {
  105.         street_number: 'short_name',
  106.         route: 'long_name',
  107.         locality: 'long_name',
  108.         administrative_area_level_1: 'short_name',
  109.         country: 'long_name',
  110.         postal_code: 'short_name'
  111.     };
  115.     function initAutocomplete() {
  117.         google.maps.event.addDomListener(input, 'blur', function() {
  118.             if (jQuery('.pac-item:hover').length === 0) {
  119.                 google.maps.event.trigger(this, 'focus', {});
  120.                 google.maps.event.trigger(this, 'keydown', {
  121.                     keyCode: 13
  122.                 });
  123.             }
  124.         })
  126.         // Create the autocomplete object, restricting the search to geographical
  127.         // location types.
  128.         autocompleteinput = new google.maps.places.Autocomplete(
  129.             /** @type {!HTMLInputElement} */
  130.             (input), {
  131.                 types: ['geocode']
  132.             });
  136.         // When the user selects an address from the dropdown, populate the address
  137.         // fields in the form.
  138.         autocompleteinput.addListener('place_changed', fillInAddress);
  141.     }
  143.     function fillInAddress() {
  144.         // Get the place details from the autocomplete object.
  145.         var place = autocompleteinput.getPlace();
  147.         if (place != null && place.place_id) {
  148.             //fill the hidden data
  149.             document.getElementById('festival_search_with_distance_locationhidden').setAttribute('value', document.getElementById('festival_search_with_distance_location').value)
  150.             document.getElementById('festival_search_with_distance_placeid').setAttribute('value', place.place_id)
  151.         }
  153.     }
  155. </script>
  156. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyArRqV6iNkruffZtVT2G0iX4kfemd1SQD4&libraries=places&callback=initAutocomplete&sessiontoken={{uuid}}" async defer></script>
  157. {%endblock%}