templates/front_otacos/map-index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{'map.0'|trans}}{% endblock %}
  5. {% block body %}
  6. <style>
  7.     .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
  8.     .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
  9.     .styledMap {
  10.         padding: 5px 10px;
  11.     }
  13.     .styledMap h1{
  14.         color: #dd7d17;
  15.         font-size: 1.3em;
  16.         text-transform: uppercase;
  17.     }
  18.     .styledMap p{
  19.         font-size: 1.1em;
  20.         margin:0;
  21.     }
  24. </style>
  27.     <div class="maptacos">
  28.         <div class="wrapper">
  29.             <ul class="breadcrumb">
  30.                 <li><a href="{{path('home')}}">{{'accueil'|trans}}</a></li>
  31.                 <li>{{'map.1'|trans}}</li>
  32.             </ul>
  34.             <h1 class="titreDualFont"><div>{{'map.2'|trans|raw}}</div></h1>
  36.             <div class="maptacosform">
  37.                 <form id="rechercheMap" action="#">
  38.                     <input type="text" name="recherche" id="recherche" placeholder="{{'map.5'|trans}}" />
  39.                     <input type="submit" value="GO !" />
  40.                 </form>
  41.             </div>
  42.         </div>
  43.     </div>
  45.     <div class="wrapper maptacos-content">
  46.         <div class="maptacos-content-listing">
  47.             <div class="maptacos-content-listing-header">
  48.                 {# <span id="filtrer">{{'map.4'|trans}}</span> #}
  49.                 <p id="restoCount">{{restos|length}} {{'map.3'|trans}}{{restos|length >1 ? 's'}}</p>
  50.                 {# <div id="filtres">
  51.                     <p>Voir uniquement les restaurants proposant :
  52.                     <ul>
  53.                         <li><label><input type="checkbox" name="boxDrive" class="boxfiltre" value="drive" /> Drive <img src="/img/map-drive.png" /></label></li>
  54.                         <li><label><input type="checkbox" name="boxDelivery" class="boxfiltre" value="delivery" /> {{'map.6'|trans}} <img src="/img/map-delivery.png" /></label></li>
  55.                         <li><label><input type="checkbox" name="boxCollect" class="boxfiltre" value="collect" /> Click &amp; Collect <img src="/img/map-collect.png" /></label></li>
  56.                         <li><label><input type="checkbox" name="boxKiosk" class="boxfiltre" value="kiosk" /> Bornes de commande <img src="/img/map-borne.png" /></label></li>
  57.                     </ul>
  58.                 </div> #}
  59.             </div>
  60.             <div class="maptacos-content-listing-restos">
  61.                 {% for resto in restos %}
  62.                 <div class="restoFiche" 
  63.                 style="display:block;" 
  64.                 data-geovalid="1" 
  65.                 data-lng="{{resto.lng}}" 
  66.                 data-lat="{{resto.lat}}"
  67.                 data-collect="{{resto.collect}}"
  68.                 data-kiosk="{{resto.kiosk}}"
  69.                 data-drive="{{resto.drive}}"
  70.                 data-delivery="{{resto.delivery}}" >
  71.                     <p class="titre">{{resto.name}}</p>
  72.                     <p>{{resto.address}}</p>
  73.                     {% if resto.address2 is not empty %}
  74.                     <p>{{resto.address2}}</p>
  75.                     {% endif %}
  76.                     <p>{{resto.zipcode}} {{resto.city}}</p>
  77.                     {% if resto.phone is not empty %}
  78.                     <p>T. {{resto.phone}}</p>
  79.                     {% endif %}
  80.                     <br/>
  81. {#                     
  82.                     {% if resto.mondayOpen is not null and resto.mondayClose is not null %}
  83.                         <p>{{'lundi'|trans}} : {{resto.mondayOpen|date('H')}}h{{resto.mondayOpen|date('i')}} - {{resto.mondayClose|date('H')}}h{{resto.mondayClose|date('i')}}</p>
  84.                     {% else %}
  85.                         <p>{{'lundi'|trans}} : {{'ferme'|trans}} </p>
  86.                     {% endif %}
  88.                     
  89.                     {% if resto.tuesdayOpen is not null and resto.tuesdayClose is not null %}
  90.                         <p>{{'mardi'|trans}} : {{resto.tuesdayOpen|date('H')}}h{{resto.tuesdayOpen|date('i')}} - {{resto.tuesdayClose|date('H')}}h{{resto.tuesdayClose|date('i')}}</p>
  91.                     {% else %}
  92.                         <p>{{'mardi'|trans}} : {{'ferme'|trans}}</p>
  93.                     {% endif %}
  95.                     {% if resto.wednesdayOpen is not null and resto.wednesdayClose is not null %}
  96.                         <p>{{'mercredi'|trans}} : {{resto.wednesdayOpen|date('H')}}h{{resto.wednesdayOpen|date('i')}} - {{resto.wednesdayClose|date('H')}}h{{resto.wednesdayClose|date('i')}}</p>
  97.                     {% else %}
  98.                         <p>{{'mercredi'|trans}} :  {{'ferme'|trans}}</p>
  99.                     {% endif %}
  101.                     {% if resto.thursdayOpen is not null and resto.thursdayClose is not null %}
  102.                         <p>{{'jeudi'|trans}} : {{resto.thursdayOpen|date('H')}}h{{resto.thursdayOpen|date('i')}} - {{resto.thursdayClose|date('H')}}h{{resto.thursdayClose|date('i')}}</p>
  103.                     {% else %}
  104.                         <p>{{'jeudi'|trans}} : {{'ferme'|trans}}</p>
  105.                     {% endif %}
  107.                     {% if resto.fridayOpen is not null and resto.fridayClose is not null %}
  108.                         <p>{{'vendredi'|trans}} : {{resto.fridayOpen|date('H')}}h{{resto.fridayOpen|date('i')}} - {{resto.fridayClose|date('H')}}h{{resto.fridayClose|date('i')}}</p>
  109.                     {% else %}
  110.                         <p>{{'vendredi'|trans}} : {{'ferme'|trans}}</p>
  111.                     {% endif %}
  113.                     {% if resto.saturdayOpen is not null and resto.saturdayClose is not null %}
  114.                         <p>{{'samedi'|trans}} : {{resto.saturdayOpen|date('H')}}h{{resto.saturdayOpen|date('i')}} - {{resto.saturdayClose|date('H')}}h{{resto.saturdayClose|date('i')}}</p>
  115.                     {% else %}
  116.                         <p>{{'samedi'|trans}} : {{'ferme'|trans}}</p>
  117.                     {% endif %}
  119.                     {% if resto.sundayOpen is not null and resto.sundayClose is not null %}
  120.                         <p>{{'dimanche'|trans}} : {{resto.sundayOpen|date('H')}}h{{resto.sundayOpen|date('i')}} - {{resto.sundayClose|date('H')}}h{{resto.sundayClose|date('i')}}</p>
  121.                     {% else %}
  122.                         <p>{{'dimanche'|trans}} : {{'ferme'|trans}}</p>
  123.                     {% endif %}
  125.                     <div>
  126.                         {% if resto.drive %}<img src="/img/map-drive.png" />{% endif %}
  127.                         {% if resto.delivery %}<img src="/img/map-delivery.png" />{% endif %}
  128.                         {% if resto.collect %}<img src="/img/map-collect.png" />{% endif %}
  129.                         {% if resto.kiosk %}<img src="/img/map-borne.png" />{% endif %}
  130.                     </div> #}
  131.                 </div>
  132.                 {% endfor %}
  133.             </div>
  135.         </div>
  136.         <div class="maptacos-content-map">
  137.             <div id="map" style="width:100%;height:100%;"></div>
  138.         </div>
  139.     </div>
  140.     
  141. {% endblock %}
  144. {% block javascripts_bottom %}
  145.     <script>
  146.         let map;
  147.         let geocoder;
  148.         const image = "{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}/img/markermap.svg";
  149.         let rechercheLocation;
  150.         let filters = [];
  152.         function initMap() {
  154.             geocoder = new google.maps.Geocoder();
  156.             map = new google.maps.Map(document.getElementById("map"), {
  157.                 mapId: "2262022a4ce1b38",
  159.                 {% if app.request.getLocale() == "be" or app.request.getLocale() == "nl" %}
  160.                     center: { lat: 50.8509848, lng: 4.352069 },
  161.                 {% elseif app.request.getLocale() == "it" %}
  162.                 
  163.                     {% if restos|length == 1 %}
  164.                     center: { lat: {{restos[0].lat}}, lng: {{restos[0].lng}} },
  165.                     {% else %}
  166.                     center: { lat: 41.903027, lng: 12.498918 }, 
  167.                     {% endif %}
  169.                 {% else %}
  171.                     {% if restos|length == 1 %}
  172.                     center: { lat: {{restos[0].lat}}, lng: {{restos[0].lng}} },
  173.                     {% else %}
  174.                     center: { lat: 48.85596, lng: 2.35452 },
  175.                     {% endif %}
  177.                 {% endif %}
  179.                 zoom: 14,
  180.             });
  181.             let infowindow;
  183.             {% for resto in restos %}
  184.                 let marker{{loop.index0}} = new google.maps.Marker({
  185.                     position: { lat: {{resto.lat}}, lng: {{resto.lng}}},
  186.                     map,
  187.                     title: '{{resto.name|escape('js')}}',
  188.                     icon: image,
  189.                 });
  192.                 marker{{loop.index0}}.addListener("click", () => {
  193.                     if(infowindow) infowindow.close();
  195.                     let contentInfo = "<div class=\"styledMap\">";
  196.                     contentInfo+= "<h1>{{resto.name|escape('js')}}</h1>";
  197.                     contentInfo+= "<p><b>{{resto.address|escape('js')}}</b></p>";
  198.                     {% if resto.address2 is not empty %}
  199.                     contentInfo+= "<p><b>{{resto.address2|escape('js')}}</b></p>";
  200.                     {% endif %}
  201.                     contentInfo+= "<p><b>{{resto.zipcode|escape('js')}} {{resto.city|escape('js')}}</b></p>";
  202.                     
  203.                     {#
  204.                     
  205.                     {% if resto.phone is not null %}
  206.                     contentInfo+= "<p>Tél. <a href=\"tel:{{resto.phone}}\">{{resto.phone}}</a></p>";
  207.                     {% endif %}
  208.                     
  209.                     contentInfo+= "<br/><p>{{'lundi'|trans}} : ";
  210.                     {% if resto.mondayOpen is not null and resto.mondayClose is not null %}
  211.                         contentInfo+= "{{resto.mondayOpen|date('H')}}h{{resto.mondayOpen|date('i')}} - {{resto.mondayClose|date('H')}}h{{resto.mondayClose|date('i')}}</p>"; 
  212.                     {% else %}
  213.                         contentInfo+= " {{'ferme'|trans}}";
  214.                     {% endif %}
  216.                     
  217.                     contentInfo+= "<p>{{'mardi'|trans}} : ";
  218.                     {% if resto.tuesdayOpen is not null and resto.tuesdayClose is not null %}
  219.                         contentInfo+= "{{resto.tuesdayOpen|date('H')}}h{{resto.tuesdayOpen|date('i')}} - {{resto.tuesdayClose|date('H')}}h{{resto.tuesdayClose|date('i')}}</p>"; 
  220.                     {% else %}
  221.                         contentInfo+= " {{'ferme'|trans}}";
  222.                     {% endif %}
  224.                     contentInfo+= "<p>{{'mercredi'|trans}} : ";
  225.                     {% if resto.wednesdayOpen is not null and resto.wednesdayClose is not null %}
  226.                         contentInfo+= "{{resto.wednesdayOpen|date('H')}}h{{resto.wednesdayOpen|date('i')}} - {{resto.wednesdayClose|date('H')}}h{{resto.wednesdayClose|date('i')}}</p>"; 
  227.                     {% else %}
  228.                         contentInfo+= " {{'ferme'|trans}}";
  229.                     {% endif %}
  231.                     contentInfo+= "<p>{{'jeudi'|trans}} : ";
  232.                     {% if resto.thursdayOpen is not null and resto.thursdayClose is not null %}
  233.                         contentInfo+= "{{resto.thursdayOpen|date('H')}}h{{resto.thursdayOpen|date('i')}} - {{resto.thursdayClose|date('H')}}h{{resto.thursdayClose|date('i')}}</p>"; 
  234.                     {% else %}
  235.                         contentInfo+= " {{'ferme'|trans}}";
  236.                     {% endif %}
  238.                     contentInfo+= "<p>{{'vendredi'|trans}} : ";
  239.                     {% if resto.fridayOpen is not null and resto.fridayClose is not null %}
  240.                         contentInfo+= "{{resto.fridayOpen|date('H')}}h{{resto.fridayOpen|date('i')}} - {{resto.fridayClose|date('H')}}h{{resto.fridayClose|date('i')}}</p>"; 
  241.                     {% else %}
  242.                         contentInfo+= " {{'ferme'|trans}}";
  243.                     {% endif %}
  245.                     contentInfo+= "<p>{{'samedi'|trans}} : ";
  246.                     {% if resto.saturdayOpen is not null and resto.saturdayClose is not null %}
  247.                         contentInfo+= "{{resto.saturdayOpen|date('H')}}h{{resto.saturdayOpen|date('i')}} - {{resto.saturdayClose|date('H')}}h{{resto.saturdayClose|date('i')}}</p>"; 
  248.                     {% else %}
  249.                         contentInfo+= " {{'ferme'|trans}}";
  250.                     {% endif %}
  252.                     contentInfo+= "<p>{{'dimanche'|trans}} : ";
  253.                     {% if resto.sundayOpen is not null and resto.sundayClose is not null %}
  254.                         contentInfo+= "{{resto.sundayOpen|date('H')}}h{{resto.sundayOpen|date('i')}} - {{resto.sundayClose|date('H')}}h{{resto.sundayClose|date('i')}}</p>"; 
  255.                     {% else %}
  256.                         contentInfo+= " {{'ferme'|trans}}";
  257.                     {% endif %}
  259.                     #}
  261.                     contentInfo+= "</div>";
  264.                     infowindow = new google.maps.InfoWindow({
  265.                         content: contentInfo,
  266.                     });
  268.                     infowindow.open({
  269.                     anchor: marker{{loop.index0}},
  270.                     map,
  271.                     shouldFocus: false,
  272.                     });
  273.                 });
  276.             {% endfor %}
  277.             
  278.         }
  281.         function getCoord(recherche) {
  282.             geocoder.geocode( { 'address': recherche}, function(results, status) {
  283.                 if (status == 'OK') {
  284.                     map.setCenter(results[0].geometry.location);
  285.                     map.setZoom(11);
  286.                     if(results[0].geometry.location_type =="APPROXIMATE" || results[0].geometry.location_type =="ROOFTOP") {
  288.                         let rechLat;
  289.                         let rechLong;
  290.                         if(results[0].geometry.location_type =="APPROXIMATE") {
  291.                             let bounds = results[0].geometry.bounds;
  292.                             let boundsLat = bounds[Object.keys(bounds)[0]];
  293.                             rechLat = (boundsLat[Object.keys(boundsLat)[0]] + boundsLat[Object.keys(boundsLat)[1]]) / 2;
  294.     
  295.                             let boundsLong = bounds[Object.keys(bounds)[1]];
  296.                             rechLong = (boundsLong[Object.keys(boundsLong)[0]] + boundsLong[Object.keys(boundsLong)[1]]) / 2;
  297.                         } else {
  298.                             if(results[0].geometry.viewport !== undefined) {
  299.                                 let viewport = results[0].geometry.viewport;
  300.                                 let viewportLat = viewport[Object.keys(viewport)[0]];
  301.                                 rechLat = (viewportLat[Object.keys(viewportLat)[0]] + viewportLat[Object.keys(viewportLat)[1]]) / 2;
  302.         
  303.                                 let viewportLong = viewport[Object.keys(viewport)[1]];
  304.                                 rechLong = (viewportLong[Object.keys(viewportLong)[0]] + viewportLong[Object.keys(viewportLong)[1]]) / 2;
  306.                             } else {
  307.                                 let bounds = results[0].geometry.bounds;
  308.                                 let boundsLat = bounds[Object.keys(bounds)[0]];
  309.                                 rechLat = (boundsLat[Object.keys(boundsLat)[0]] + boundsLat[Object.keys(boundsLat)[1]]) / 2;
  310.         
  311.                                 let boundsLong = bounds[Object.keys(bounds)[1]];
  312.                                 rechLong = (boundsLong[Object.keys(boundsLong)[0]] + boundsLong[Object.keys(boundsLong)[1]]) / 2;
  314.                             }
  315.                         }
  316.  
  317.                         // Affiche cache les resto
  318.                         const restos = document.getElementsByClassName('restoFiche');
  319.                         const distance = 0.2;    
  321.                         for (let fiche of restos) {
  322.                             if(
  323.                                 fiche.getAttribute('data-lat') > (rechLat-distance) 
  324.                                 && fiche.getAttribute('data-lat') < (rechLat+distance)
  325.                                 && fiche.getAttribute('data-lng') > (rechLong-distance) 
  326.                                 && fiche.getAttribute('data-lng') < (rechLong+distance)                                
  327.                             ) {
  328.                                 //fiche.style.display = "block";
  329.                                 fiche.setAttribute('data-geovalid', '1');
  330.                                 //fiche.style.order = Math.round( (Math.abs(rechLat-fiche.getAttribute('data-lat')) + Math.abs(rechLong-fiche.getAttribute('data-lng')) * 100));
  331.                                 var order = Math.round(Math.abs(rechLat*1000-fiche.getAttribute('data-lat')*1000) + Math.abs(rechLong*1000-fiche.getAttribute('data-lng')*1000));
  332.                                 fiche.style.order = order;
  334.                                 
  335.                             } else {
  336.                                 //fiche.style.display = "none";
  337.                                 fiche.setAttribute('data-geovalid', '0');
  338.                             }
  339.                         }
  340.                         activFilters();
  341.                         
  342.                     }
  343.                 } else {
  344.                     //alert('Geocode was not successful for the following reason: ' + status);
  345.                 }
  346.             });
  347.         }
  350.         function activFilters() {
  351.             filters = [];
  352.             for (let checkbox of document.getElementsByClassName('boxfiltre')) {
  353.                 if(checkbox.checked) {
  354.                     filters.push(checkbox.value);
  355.                 }
  356.             }
  358.             let countResto = 0;
  360.             const restos = document.getElementsByClassName('restoFiche');             
  361.             for (let fiche of restos) {
  362.                 if(
  363.                     //fiche.style.display == "block" &&
  364.                     fiche.getAttribute('data-geovalid') == "1" &&
  365.                     (   
  366.                         (filters.length &&
  367.                         (
  368.                             (fiche.getAttribute('data-collect') == 1 && filters.includes('collect'))
  369.                             || (fiche.getAttribute('data-delivery') == 1 && filters.includes('delivery'))
  370.                             || (fiche.getAttribute('data-kiosk') == 1 && filters.includes('kiosk'))
  371.                             || (fiche.getAttribute('data-drive') == 1 && filters.includes('drive'))
  372.                         ))
  373.                         || !filters.length
  374.                     )
  375.                 ) {
  376.                     // La fiche est déjà valide, et les filtres souhaités correspondent
  377.                     countResto++;
  378.                     fiche.style.display = "block";
  379.                 } else {
  380.                     // Les filtres ne correspondent pas à la fiche
  381.                     fiche.style.display = "none";
  382.                 }
  383.             }
  385.             // Mise à jour du compteur de resto
  386.             if(countResto) {
  387.                 document.getElementById('restoCount').innerHTML = countResto+" {{'map.3'|trans}}"+(countResto > 1 ? 's':'')+" à proximité";
  388.             } else {
  389.                 document.getElementById('restoCount').innerHTML = "Aucun restaurant à proximité";
  390.             }                
  391.         
  392.         }
  394.         
  395.         for (let checkbox of document.getElementsByClassName('boxfiltre')) {
  396.             checkbox.addEventListener('change', activFilters);
  397.         }
  399.        // var geocoder = new google.maps.Geocoder();
  400.         
  401.         document.getElementById("rechercheMap").addEventListener("submit", function(e) {
  402.             rechercheLocation = document.getElementById("recherche").value;
  403.             if(rechercheLocation != "" && rechercheLocation != undefined) {
  404.                 getCoord(rechercheLocation);
  405.             }
  406.             e.preventDefault();
  407.             return false;
  408.         });
  410.         // document.getElementById('filtrer').addEventListener("click", function(e) {
  411.         //     if(document.getElementById('filtrer').classList.contains("filtrerOn")) {
  412.         //         document.getElementById('filtrer').classList.remove("filtrerOn");
  413.         //         document.getElementById('filtres').style.display = "none";
  414.         //     } else {
  415.         //         document.getElementById('filtrer').classList.add("filtrerOn");
  416.         //         document.getElementById('filtres').style.display = "block";
  417.         //     }
  418.         // });
  421.     </script>
  422.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdDbL-0mCap-U8hE8UrIktLcvdxYOXWVg&callback=initMap&v=weekly"
  423.       async defer
  424.     ></script>
  425. {% endblock %}