templates/homepage/dealer.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}Autobazary {% if activePlace %}{{ activePlace.name|trans }}{%  else %} celá ČR {%  endif %} | Autanet.cz {% endblock %}
  5. {% block desc  %}Autobazary a autosalony {% if activePlace %}  {{ activePlace.name|trans }} {%  else %}celá ČR{%  endif %}. Seznam prodejců s aktuální nabídkou vozidel.{% endblock %}
  7.         {% block stylesheets %}
  8.             {{ encore_entry_link_tags('app') }}
  9.         {% endblock %}
  10.         {% block javascripts %}
  11.             {{ encore_entry_script_tags('app') }}
  12.            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  13.             <script
  14.                     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMvCFLEp2JWA1HQ5riIBgtCn8Hy5bS9nw&callback=initMap&v=weekly"
  15.                     defer
  16.             ></script>
  17.             <script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
  18.         {% endblock %}
  20. {% block body %}
  23.     <section  class="grid grid--gap40 grid--padding40">
  24.         <div>
  25.             <h1>Seznam prodejců vozidel - autobazary a autosalony</h1>
  27.             <div id="map" style="height: 400px" ></div>
  29.             <script>
  31.                 function initMap() {
  32.                     const map = new google.maps.Map(document.getElementById("map"), {
  33.                         zoom: 7,
  34.                         center: {lat: 49.7887636, lng: 15.6634697},
  35.                     });
  37.                     setMarkers(map);
  38.                 }
  41.                 function setMarkers(map) {
  43.                     const image = {
  44.                         url: "{{ asset('img/icon-dealer.png') }}",
  45.                         // This marker is 20 pixels wide by 32 pixels high.
  46.                         size: new google.maps.Size(40, 40),
  47.                         // The origin for this image is (0, 0).
  48.                         origin: new google.maps.Point(0, 0),
  49.                         // The anchor for this image is the base of the flagpole at (0, 32).
  50.                         anchor: new google.maps.Point(0, 40),
  51.                     };
  53.                     const dealers = {{ dealerMap|json_encode|raw }};
  55.                     const markers = [];
  57.                     for (let i = 0; i < dealers.length; i++) {
  59.                         const dealer = dealers[i];
  61.                         const marker = new google.maps.Marker({
  62.                             position: {lat: dealer.lat, lng: dealer.lng},
  63.                             map,
  64.                             icon: image,
  65.                             title: dealer.name + ' ' + dealer.city,
  66.                             zIndex: dealer.id,
  67.                         });
  69.                         marker.addListener("click", () => {
  70.                             const infowindow = new google.maps.InfoWindow({
  71.                                 content: '<div style="width: 350px; overflow: hidden">' +
  72.                                     '<b>'+dealer.name+'</b><br>'+dealer.city+', '+dealer.street+'<br>Počet vozů: '+dealer.countVehicle+' ' +
  73.                                     '<br> <a  href="'+dealer.link+'">Zobrazit kartu prodejce >></a> </div>',
  74.                             });
  75.                             google.maps.event.addListener(map, 'click', function() {
  76.                                 infowindow.close();
  77.                             });
  78.                             infowindow.open({
  79.                                 anchor: marker,
  80.                                 map,
  81.                             });
  82.                         });
  84.                         markers.push(marker);
  86.                     }
  88.                 }
  90.                 window.initMap = initMap;
  92.             </script>
  95.             <h2 id="search-dealer">Hledat prodejce</h2>
  98.                 <div class="form__columns">
  99.                     <fieldset>
  100.                         <div class="form__input-group">
  101.                             <div class="form__group">
  102.                                 <label>Hledat podle regionu</label>
  103.                                 <select   id="select-place" name="place">
  104.                                     <option value=""  >Česká republika </option>
  105.                                     {% for s in selectPlaceValues %}
  106.                                         <option {% if   app.request.get('urlPlace')  ==  s.url   %} selected {%  endif  %} value="{{ s.url }}">{{ s.name }}</option>
  107.                                     {% endfor %}
  108.                                 </select>
  109.                             </div>
  110.                         </div>
  111.                     </fieldset>
  112.                     <fieldset>
  113.                         <div class="form__group">
  114.                             <label>Hledat podle názvu</label>
  115.                             <input id="typeahead" type="search" placeholder="Název prodejce">
  116.                         </div>
  117.                     </fieldset>
  118.                 </div>
  121.             <hr>
  122.             <h2>Autobazary a autosalony
  123.                 {% if activePlace %}
  124.                 {{ activePlace.name|trans }}
  125.                 {%  else %}
  126.                     celá ČR
  127.                 {%  endif %}
  128.             </h2>
  131.             {% for d in dealers %}
  133.             <article class="basic-3">
  134.                 <figure class="basic-3__image">
  135.                     <a class="basic-3__image-img" href="{{ path('page_dealer_detail' ,{ url: d.url   }) }}">
  136.                         {% if d.dealerImages|length > 0  %}
  137.                         <img
  138.                                 src="{{ asset('img-dealer/') ~ d.dealerImages.first.name }}"
  139.                                 {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  140.                                     src: asset('img-dealer/')~d.dealerImages.first.name
  141.                                 }) }}
  142.                                 width="200"
  143.                         >
  144.                         {% endif  %}
  145.                     </a>
  146.                 </figure>
  148.                 <div class="basic-3__text">
  149.                     <div class="basic-3__row">
  150.                         <div>
  151.                             <h4 class="basic-3__title"><a href="{{ path('page_dealer_detail' ,{ url: d.url   }) }}">{{ d.name }}</a></h4>
  152.                         </div>
  153.                         <figure class="basic-3__logo">
  154.                             {% if d.logo %}
  155.                             <img
  156.                                     src="{{ asset('img-dealer/')~d.logo    }}"
  157.                                     {{ stimulus_controller('symfony/ux-lazy-image/lazy-image', {
  158.                                         src: asset('img-dealer/')~d.logo
  159.                                     }) }}
  160.                                     width="200"
  161.                             >
  162.                             {% endif  %}
  163.                         </figure>
  164.                     </div>
  165.                     <p>
  166.                         {{ d.street }}, {{ d.city }}<br>  {{ d.district.region.name }}
  167.                     <p><strong>   {{ d.description|slice(0, 150) }} {% if d.description|length > 0  %}...   {% endif %} </strong></p>
  168.                     {% if d.nameImportVehicle is not same as null and d.idImportVehicle is not empty %}
  169.                     <div class="basic-3__footer">
  170.                         <a class="button" href="{{ path('page_dealer_vehicle' ,{ url: d.url   }) }}">
  171.                             <i class="icon icon-car"></i>
  172.                             Nabídka vozidel
  173.                             <span class="button__number">
  174.                                 {{ render(controller( 'App\\Controller\\DealerController::countVehicle', { dealer: d } )) }} </span>
  175.                         </a>
  176.                     </div>
  177.                     {% endif %}
  178.                 </div>
  179.             </article>
  181.                 {% if loop.index == 3 %}
  182.                     <div id="banner-mobile-container" class="banner-mobile"></div>
  183.                 {%  endif %}
  185.                 {% if loop.index == 1 %}
  186.                     <div id="adform_squarem"></div>
  187.                 {%  endif %}
  190.                 {% if loop.index == 5 %}
  191.                     <div id="AdTrackGenericInterscrollerMobile"></div>
  192.                 {%  endif %}
  194.                 {% if loop.index == 9 %}
  195.                     <div id="adform_squarem2"></div>
  196.                 {%  endif %}
  198.             {% endfor %}
  200.                 <div class="navigation">
  201.                     {{ knp_pagination_render(dealers) }}
  202.                 </div>
  204.         </div>
  205.         <div>
  206.             <div id="adform_halfpage"></div>
  207.             <br>
  209.             <div id="banner-container" class="banner"></div>
  211.             {{ render(controller( 'App\\Controller\\VehicleTipController::tip' )) }}
  213.             <div id="adform_halfpage2"></div>
  215.         </div>
  216.     </section>
  219.     <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.3/typeahead.bundle.min.js" integrity="sha512-E4rXB8fOORHVM/jZYNCX2rIY+FOvmTsWJ7OKZOG9x/0RmMAGyyzBqZG0OGKMpTyyuXVVoJsKKWYwbm7OU2klxA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  220.     <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.3/bloodhound.js" integrity="sha512-MUXDwKJLicyKwyUPcOd9hAyGHWVtyY0jOcRXWpiM4pnzaLy+OFP8gvKUphO0kIBP73zdH7uFVYmFRkbFkRbe7w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  221.     <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  222.     <script>
  224.         $("#select-place").select2({
  225.             language: "cs",
  226.             width: "100%",
  227.         });
  228.         $('#select-place').on("select2:select", function(e) {
  229.             window.location.replace("{{ path('page_dealer') }}/"+e.target.value+"#search-dealer");
  230.         });
  233.         let links = {{ dealerMap|json_encode|raw }};
  235.         let source = new Bloodhound({
  236.             datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  237.             queryTokenizer: Bloodhound.tokenizers.whitespace,
  238.             local: links
  239.         });
  241.         source.initialize();
  243.         $('#typeahead').typeahead(null, {
  244.             name: 'matched-links',
  245.             displayKey: 'name',
  246.             source: source.ttAdapter(),
  247.             templates: {
  248.                 empty: [
  249.                     '<div class="empty-message">',
  250.                     'unable to find any company that match current query',
  251.                     '</div>'
  252.                 ].join('\n'),
  254.                 suggestion: Handlebars.compile(' <div class="select-link"><a  class="select-link" href=" {{ '{{' }}link{{ '}}' }}"><b> {{ '{{' }}name{{ '}}' }}</b> <br>' +
  255.                     ' {{ '{{' }}street{{ '}}' }},  {{ '{{' }}city{{ '}}' }},  {{ '{{' }}region{{ '}}' }} </a></div>')
  257.             }
  258.         });
  260.     </script>
  262. {% endblock %}