templates/front/agents/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %} - Des conseillers de proximité{% endblock %}
  4. {% block meta_description %}Les conseillers sont des experts du marché local. Ils vous apporteront une estimation précise et les outils de mise en valeur indispensable telle la visite virtuelle{% endblock %}
  5. {% block content %}
  6. <section id="agents" class="container-fluid">
  7.     <div class="row">
  8.         <div class="order-1 order-md-2 col-md-6  col-xl-7 col-xxl-8 p-0">            
  9.             <div class="map_full bg-light col p-0">   
  10.                 <form id="search_agent" class="filter" style="background-color: #f3f3f3;">
  11.                     <div class="row m-0 pt-3">
  12.                         <div  class="col-xl-6 px-3 px-xl-2 pb-3 pl-xl-3">
  13.                             <div class="auto-search">
  14.                                 <input
  15.                                 type="text"
  16.                                 autocomplete="off"
  17.                                 id="geosearch"
  18.                                 class="full-width form-control"
  19.                                 placeholder="Recherche par Ville"
  20.                                 />
  21.                             </div>
  22.                         </div>
  23.                         <div class="col-xl-6 px-3 px-xl-2 pr-xl-3">
  24.                             <div id="search_agent_name" class="form-group position-relative">
  25.                                 <label class="sr-only required" for="contact_form_nom">Nom</label>
  26.                                 <input id="autoComplete_name" class="form-control" type="text">
  28.                                 <button class="auto-clear hidden" type="button" aria-label="clear text from input"></button>
  29.                             </div>
  30.                         </div>
  31.                     </div>
  32.                 </form>   
  34.                 <div id="agents_map" class="map_container"></div>
  35.             </div>
  36.         </div>    
  37.         <div class="order-2 order-md-1 col-md-6  col-xl-5 col-xxl-4 px-3 px-md-4 px-lg-5 mt-3 mt-md-5">
  38.             <h2 class="section_title" style="font-size:20px">Trouvez le conseiller proche de chez vous !</h2>
  39.             {# <hr class="separateur-rouge" /> #}
  41.             {#
  42.             <img class="img-fluid d-block mb-3 shadow" src="{{ asset('assets/media/agents/G.-Terrin-1024x683.jpg') }}" >
  43.             <p class="px-3">Nos conseillers sont sélectionnés et formés pour vous apporter un maximum de services et de conseils. Un maillage local leur permet d'être encore plus performants. Des outils , des savoirs et une motivation à toutes épreuves composent notre ADN.<br>Contacter votre conseiller local sans aucune hésitation !</p>
  44.             <p class="px-3"><b>Gregory TERRIN, Manager Départemental</b></p> 
  45.             #}
  46.             <div class="owl-carousel my-3" id="list_agents">
  47.                 {% for agent in agents %}
  48.                     {%if agent.rating > 4.5  %}
  49.                     {# {%if agent.id ==  12 %} #}
  50.                     <div class="px-1">
  51.                         <div class="card border-0 bg-dark" data-id="{{ agent.id }}">
  52.                             <a href="{{ path( 'show_agent' , {slug:agent.slug}) }}">
  53.                                 <img class="card-img-top" src="{{ vich_uploader_asset(agent, 'imageFile')|imagine_filter('agent_thumb') }}">
  54.                             </a>
  55.  
  56.                             <div class="card-body p-3 row text-white">
  57.                                 <div class="col-sm-7 col-md-12 col-lg-7 mb-3 mb-sm-0 mb-md-3 mb-lg-0 mb-lg-0 pr-0">
  58.                                     <h5 class="card-title font-weight-bold"><a class="text-white" href="{{ path( 'show_agent' , {slug:agent.slug}) }}">{{ agent }}</a></h5>
  59.                                     <h6 class="card-subtitle text-white d-flex">
  60.                                     <i class="icon-location"></i><span>{{ agent.secteur }}</span>
  61.                                     </h6>
  62.                                 </div>
  63.                                 <div class="col-sm-5 col-md-12 col-lg-5 pl-0">
  64.                                     <div class="text-white text-sm-right  text-md-left text-lg-right pl-3 pl-sm-0 pl-md-3 pl-lg-0">
  65.                                         <span class="d-inline"><img class="" src="{{ asset('assets/img/OS_isotype.svg') }}"  width="20" /></span>
  66.                                         <span class="d-inline">{{ agent.rating|stars('', agent.countReviews) }}</span>
  67.                                     </div>
  68.                                 </div>
  69.                             </div>
  72.                         </div>
  73.                     </div>
  74.                     {% endif %}
  75.                 {% endfor %}    
  76.             </div>
  78.             <div class="px-0 px-md-4">
  79.                 {{ render(controller('App\\Controller\\Front\\HomeController::osKpis')) }}
  80.             </div>
  81.             <div class="text-center mb-5">
  82.                 <img class="img-fluid" src="{{ asset('assets/media/agents/logo_opinion_system.png' ) | imagine_filter('runtime',  {"thumbnail": {"size": [250],  'mode': 'outbound'  }}) }}" />
  83.             </div>
  84.         </div>
  86.     </div>
  87. </section>
  89. {{ source('front/agents/agent-infobox-template.html') }}
  90. {% endblock %}
  92. {% block footer %}
  93. {% endblock %}
  95. {% block stylesheets %}
  96.     {{ parent() }}
  97.     <link rel="stylesheet" href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css') }}"/>
  98.     <link rel="stylesheet" href="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css') }}"/>
  99.     {#<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" />#}
  100.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
  101.     <link rel="stylesheet" href="{{ asset('assets/vendor/leaflet-control-geocoder/Control.Geocoder.css') }}"/>
  102.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tomik23/autocomplete@1.6.8/dist/css/autocomplete.min.css"/>
  103. {% endblock %}
  105. {% block javascripts %}
  106.     {{ parent() }}
  107.     <script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
  108.     <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
  109.     <script src="{{ asset('assets/vendor/OwlCarousel2-2.3.4/dist/owl.carousel.min.js') }}"></script>
  110.     <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@8.3.0/dist/js/autoComplete.min.js"></script>
  111.     <script src="{{ asset('assets/vendor/swag.min.js') }}"></script>
  112.     <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
  113.     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  114.     <script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
  115.     <script src="{{ asset('assets/vendor/Leaflet.SmoothMarkerBouncing.js') }}"></script>
  116.     {# <script src="{{ asset('assets/js/Control.Geocoder.js') }}"></script> #}
  117.     <script src="{{ asset('assets/js/autocomplete.js') }}"></script>
  119.     <script src="{{ asset('assets/js/base_map.js?v1.0') }}"></script>
  120.     <script src="{{ asset('assets/js/rrose.js') }}"></script>
  121.     <script src="{{ asset('assets/js/auto_complete_geosearch.js') }}"></script>
  123.     <script>
  124.         var datas  = {{ datas|json_encode()|raw }};
  125.         var source_infobox;
  126.         var template_infobox;
  127.         
  128.         jQuery(document).ready(function(){ 
  130.             initHandlebars();
  131.             source_infobox   = $("#infobox-template").html();
  132.             template_infobox  = Handlebars.compile(source_infobox);
  135.             $('#search_agent').trigger("reset");
  136.             // $('#search_agent select').select2({
  137.             //     allowClear: true
  138.             // });
  140.             clusterMarkers.options.disableClusteringAtZoom = 8;
  142.             setMap('agents_map', 8, 8, 16 );
  144.             geoSearch('geosearch', map);
  146.             // map.touchZoom.disable();
  147.             // map.doubleClickZoom.disable();
  148.             // map.boxZoom.disable();
  149.             // map.keyboard.disable();
  151.             map.scrollWheelZoom.disable();
  152.             // map.zoomControl.remove();
  153.             // map.dragging.disable();
  155.             addMarkers(datas, true, false);
  156.             var first_agent_id = $('#list_agents .card').first().data('id');
  157.             bounceMarker(first_agent_id);
  158.             var owl = $("#list_agents").owlCarousel({
  159.                 loop:true,
  160.                 autoplay:true,
  161.                 autoplayTimeout: owl_speed / 2,
  162.                 autoplayHoverPause:true,
  163.                 smartSpeed: 1000,
  164.                 margin:30,
  165.                 nav:false,
  166.                 dots:false,
  167.                 items:1
  169.             });
  171.             owl.on('translated.owl.carousel', function(event) {
  172.                 if($('#geosearch').val() == '' && $('#autoComplete_name').val() == '' ){
  173.                     var current_agent_id = $('#list_agents').find('.active .card').data('id');
  174.                     bounceMarker(current_agent_id);
  175.                 }
  176.             });
  178.             $('#search_agent_name').find('.auto-clear').click(function(){
  179.                 if( $('#search_agent_name').find('ul').length > 0){
  180.                     $('#search_agent_name').find('ul').remove();
  181.                 }
  183.                 $('#autoComplete_name').val('').trigger('change');
  184.                 $('#search_agent_name').find('.auto-clear').addClass('hidden');
  185.             });
  187.             $('#autoComplete_name').change(function(){
  188.                 if($(this).val() == ''){
  189.                     map.closePopup();
  190.                     map.fitBounds(clusterMarkers.getBounds());
  191.                 }
  192.                 else{
  193.                     $('#search_agent_name').find('.auto-clear').removeClass('hidden');
  194.                 }
  195.             });
  197.         });
  199.         function centerMe(e) {
  200.             // retusrn;
  201.             if($('body').width() < 768 ){
  202.                 var pixelPosition = map.latLngToLayerPoint(e.target.getLatLng());
  203.                 var new_y = $('#agents_map').height() /2;
  204.                 pixelPosition.y =  pixelPosition.y -  new_y  + 50 ;
  206.                 var new_latlng  = map.layerPointToLatLng(pixelPosition);
  207.                 map.setView(new_latlng);
  208.             }
  209.             else{
  210.                 map.setView(e.target.getLatLng());
  211.             }
  213.         }
  215.         function geoSearchOnSearch(map) {
  216.             L.Marker.stopAllBouncingMarkers();L.Marker.stopAllBouncingMarkers();
  217.             map.closePopup();
  218.             // $('#autoComplete_name').val('').trigger('change');
  219.             $("#search_agent_name .auto-clear").trigger('click');
  220.         }
  222.         function geoSearchOnSubmit(map, object ) {
  223.             map.closePopup();
  224.         }
  225.         function geoSearchOnReset(map, element) {
  226.             map.fitBounds(clusterMarkers.getBounds());
  227.         } 
  229.         const autoCompleteJS = new autoComplete({
  230.             data: {                              // Data src [Array, Function, Async] | (REQUIRED)
  231.               src: datas,
  232.               key: ["name"],
  233.               cache: false
  234.             },
  236.             sort: (a, b) => {                    // Sort rendered results ascendingly | (Optional)
  237.                 if (a.match < b.match) return -1;
  238.                 if (a.match > b.match) return 1;
  239.                 return 0;
  240.             },
  241.             trigger: {event: ["input", "focus"]},
  242.             placeHolder: "Recherche par nom ou prénom du conseiller",     // Place Holder text                 | (Optional)
  243.             selector: "#autoComplete_name",           // Input field selector              | (Optional)
  244.             observer: true,                      // Input field observer | (Optional)
  245.             threshold: 2,                        // Min. Chars length to start Engine | (Optional)
  246.             debounce: 300,                       // Post duration for engine to start | (Optional)
  247.             searchEngine: "strict",              // Search Engine type/mode           | (Optional)
  248.             diacritics: true,
  249.             resultsList: {                       // Rendered results list object      | (Optional)
  250.                 container: element => {
  251.                     element.setAttribute("id", "autoComplete_list");
  252.                     element.setAttribute("class", "list-unstyled autoComplete_list");
  253.                 },
  254.                 destination: "#autoComplete_name",
  255.                 position: "afterend",
  256.                 element: "ul"
  257.             },
  258.             maxResults: 5,                         // Max. number of rendered results | (Optional)
  259.             highlight: false,                       // Highlight matching results      | (Optional)
  260.             resultItem: {                          // Rendered result item            | (Optional)
  261.                 content: (data, element) => {
  262.                     item = data.value;
  263.                     element.innerHTML = data.match +' ('+item.secteur+')';
  264.                 },
  265.                 element: "li"
  266.             },
  267.             noResults: (dataFeedback, generateList) => {
  269.                 // Generate autoComplete List
  270.                 generateList(autoCompleteJS, dataFeedback, dataFeedback.results);
  271.                 // No Results List Item
  272.                 const result = document.createElement("li");
  273.                 result.setAttribute("class", "no_result");
  274.                 result.setAttribute("tabindex", "1");
  275.                 result.innerHTML = `Pas de résultat pour "${dataFeedback.query}"`;
  276.                 document.querySelector(`#${autoCompleteJS.resultsList.idName}`).appendChild(result);
  277.             },
  278.             onSelection: feedback => {             // Action script onSelection event | (Optional)
  279.                 $(".auto-search .auto-clear").trigger('click');
  280.                 // $('#geosearch').val('').trigger('change');
  281.                 $('#geosearch').blur();
  282.                 document.querySelector("#autoComplete_name").blur();
  283.                 // Prepare User's Selected Value
  284.                 const selection = feedback.selection.value[feedback.selection.key];
  285.                 // Replace Input value with the selected value
  286.                 document.querySelector("#autoComplete_name").value = selection;
  287.                 // Console log autoComplete data feedback
  288.                 // console.log(feedback.selection.value);
  290.                 flyAndOpenPopupMarker(feedback.selection.value.id);
  292.             }
  293.         });
  294.     </script>
  295. {% endblock %}