templates/front_otacos/promo.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{'menu.promodumoment'|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.     }
  12.     .gm-style-iw  {
  13.         border: 2px solid #ff7200;
  14.     }
  16.     .styledMap h1{
  17.         color: #ff7200;
  18.         font-size: 1.4em;
  19.         text-transform: uppercase;
  20.         font-family: 'heavitas';
  21.         font-weight:normal;
  22.     }
  23.     .styledMap p{
  24.         font-size: 1.2em;
  25.         margin:0;
  26.         font-family: 'Josefin Sans',sans-serif;
  28.     }
  31. </style>
  33.     <div class="promo">
  34.         <div class="wrapper">
  35.             <ul class="breadcrumb">
  36.                 <li><a href="{{path('home')}}">{{'accueil'|trans}}</a></li>
  37.                 <li>{{'menu.promodumoment'|trans}}</li>
  38.             </ul>
  40.             <h1 class="titreDualFont"><div><span>Promo</span> du moment</div></h1>
  42.             <p class="chapo">
  43.                 <b>{{promo.titre}}</b>
  44.             </p>
  46.             <div class="stand2col">
  47.                 <div class="promo-visuel">
  48.                     <img src="/img/promo-moment.png" />
  49.                 </div>
  50.                 <div class="promo-description">
  51.                     <p>{{promo.chapo|nl2br}}</p>
  53.                     <h3>{{'promo.1'|trans}} :</h3>
  54.                     {{promo.texte|raw}}
  56.                     <p class="promo-description-mentions">
  57.                         {{promo.mentions|nl2br}}
  58.                     </p>
  59.                 </div>
  60.             </div>
  63.             <h2>{{'promo.2'|trans}}</h2>
  65.             <div class="map">
  66.                 <div id="map" style="width:100%;height:100%;"></div>
  67.             </div>
  70.         </div>
  72.         
  73.     </div>
  74.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDdDbL-0mCap-U8hE8UrIktLcvdxYOXWVg&callback=initMap&v=weekly"
  75.       async
  76.     ></script>
  79. {% endblock %}
  82. {% block javascripts %}
  83.     <script>
  84.         let map;
  85.         const image = "{{ app.request.schemeAndHttpHost ~ app.request.baseUrl }}/img/markermap.svg";
  88.         function initMap() {
  89.             map = new google.maps.Map(document.getElementById("map"), {
  90.                 mapId: "2262022a4ce1b38",
  91.                 center: { lat: 48.85596, lng: 2.35452 },
  92.                 zoom: 14,
  93.             });
  94.             let infowindow;
  96.             {% for resto in restos %}
  97.                 let marker{{loop.index0}} = new google.maps.Marker({
  98.                     position: { lat: {{resto.lat}}, lng: {{resto.lng}}},
  99.                     map,
  100.                     title: '{{resto.name|escape('js')}}',
  101.                     icon: image,
  102.                 });
  105.                 marker{{loop.index0}}.addListener("click", () => {
  106.                     if(infowindow) infowindow.close();
  108.                     let contentInfo = "<div class=\"styledMap\">";
  109.                     contentInfo+= "<h1>{{resto.name|escape('js')}}</h1>";
  110.                     contentInfo+= "<p><b>{{resto.address|escape('js')}}</b></p>";
  111.                     {% if resto.address2 is not empty %}
  112.                     contentInfo+= "<p><b>{{resto.address2|escape('js')}}</b></p>";
  113.                     {% endif %}
  114.                     contentInfo+= "<p><b>{{resto.zipcode|escape('js')}} {{resto.city|escape('js')}}</b></p>";
  115.                     
  116.                     {% if resto.phone is not null %}
  117.                     contentInfo+= "<p>Tél. <a href=\"tel:{{resto.phone}}\">{{resto.phone}}</a></p>";
  118.                     {% endif %}
  119.                     
  120.                     contentInfo+= "<br/><p>Lundi : ";
  121.                     {% if resto.mondayOpen is not null and resto.mondayClose is not null %}
  122.                         contentInfo+= "{{resto.mondayOpen|date('H')}}h{{resto.mondayOpen|date('i')}} - {{resto.mondayClose|date('H')}}h{{resto.mondayClose|date('i')}}</p>"; 
  123.                     {% else %}
  124.                         contentInfo+= " FERMÉ";
  125.                     {% endif %}
  127.                     
  128.                     contentInfo+= "<p>Mardi : ";
  129.                     {% if resto.tuesdayOpen is not null and resto.tuesdayClose is not null %}
  130.                         contentInfo+= "{{resto.tuesdayOpen|date('H')}}h{{resto.tuesdayOpen|date('i')}} - {{resto.tuesdayClose|date('H')}}h{{resto.tuesdayClose|date('i')}}</p>"; 
  131.                     {% else %}
  132.                         contentInfo+= " FERMÉ";
  133.                     {% endif %}
  135.                     contentInfo+= "<p>Mercredi : ";
  136.                     {% if resto.wednesdayOpen is not null and resto.wednesdayClose is not null %}
  137.                         contentInfo+= "{{resto.wednesdayOpen|date('H')}}h{{resto.wednesdayOpen|date('i')}} - {{resto.wednesdayClose|date('H')}}h{{resto.wednesdayClose|date('i')}}</p>"; 
  138.                     {% else %}
  139.                         contentInfo+= " FERMÉ";
  140.                     {% endif %}
  142.                     contentInfo+= "<p>Jeudi : ";
  143.                     {% if resto.thursdayOpen is not null and resto.thursdayClose is not null %}
  144.                         contentInfo+= "{{resto.thursdayOpen|date('H')}}h{{resto.thursdayOpen|date('i')}} - {{resto.thursdayClose|date('H')}}h{{resto.thursdayClose|date('i')}}</p>"; 
  145.                     {% else %}
  146.                         contentInfo+= " FERMÉ";
  147.                     {% endif %}
  149.                     contentInfo+= "<p>Vendredi : ";
  150.                     {% if resto.fridayOpen is not null and resto.fridayClose is not null %}
  151.                         contentInfo+= "{{resto.fridayOpen|date('H')}}h{{resto.fridayOpen|date('i')}} - {{resto.fridayClose|date('H')}}h{{resto.fridayClose|date('i')}}</p>"; 
  152.                     {% else %}
  153.                         contentInfo+= " FERMÉ";
  154.                     {% endif %}
  156.                     contentInfo+= "<p>Samedi : ";
  157.                     {% if resto.saturdayOpen is not null and resto.saturdayClose is not null %}
  158.                         contentInfo+= "{{resto.saturdayOpen|date('H')}}h{{resto.saturdayOpen|date('i')}} - {{resto.saturdayClose|date('H')}}h{{resto.saturdayClose|date('i')}}</p>"; 
  159.                     {% else %}
  160.                         contentInfo+= " FERMÉ";
  161.                     {% endif %}
  163.                     contentInfo+= "<p>Dimanche : ";
  164.                     {% if resto.sundayOpen is not null and resto.sundayClose is not null %}
  165.                         contentInfo+= "{{resto.sundayOpen|date('H')}}h{{resto.sundayOpen|date('i')}} - {{resto.sundayClose|date('H')}}h{{resto.sundayClose|date('i')}}</p>"; 
  166.                     {% else %}
  167.                         contentInfo+= " FERMÉ";
  168.                     {% endif %}
  170.                     contentInfo+= "</div>";
  173.                     infowindow = new google.maps.InfoWindow({
  174.                         content: contentInfo,
  175.                     });
  177.                     infowindow.open({
  178.                     anchor: marker{{loop.index0}},
  179.                     map,
  180.                     shouldFocus: false,
  181.                     });
  182.                 });
  185.             {% endfor %}
  186.             
  187.         }
  188.     </script>
  189. {% endblock %}