templates/front/page/event/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base-front.html.twig' %}
  3. {% block title %}Evenement{% endblock %}
  5. {% block inner_body %}
  6.     <section class="container-fluid ">
  7.         <div class="row header-event">
  8.             <div class="col m-0 d-flex flex-column justify-content-center align-items-center">
  9.             </div>
  10.         </div>
  11.     </section>
  13.     <section class="container my-5">
  14.         <div class="row">
  15.             <div class="col-lg-6 col-12 event-description">
  16.                 <h2 class=""><span class="underline">{{ event.title|capitalize }} </span></h2>
  17.                 <div class="alert alert-danger rounded-0 mt-3 py-1 fw-bold" role="alert">
  18.                     <i class="fas fa-birthday-cake me-3"></i> Course interdite au moins de 18 ans !
  19.                 </div>
  20.                 <p class="">{{ event.description|raw }}</p>
  21.             </div>
  22.             <div class="col-lg-6 col-12">
  23.                 <div class="scroller-sticky">
  24.                     <div class="scroller">
  25.                         <ul class="list-group">
  26.                             {% for ticket in event.tickets %}
  27.                                 {% if (ticket.maxCapacity - ticket.currentOrdersCount) > 0 %}
  28.                                     {% if ticket.salableFrom < date('now') %}
  29.                                     <table class="table-cart-ticket mb-1 scrollbar-custom ">
  30.                                         <tr>
  31.                                             <th class="table-th-1">{{ ticket.title|capitalize }}</th>
  32.                                             <th class="table-th-2 text-center">Prix à l'unité</th>
  33.                                             <th class="table-th-3 text-center">Disponible</th>
  34.                                             <th class="table-th-4 text-center">Quantité</th>
  35.                                         </tr>
  36.                                         <tr>
  37.                                             <td class="table-td-1">{{ ticket.description|capitalize }}</td>
  38.                                             <td class="table-td-2 text-center">{{ (ticket.getCalculatedPrice/100)|number_format(2, ',', ' ') }}€</td>
  39.                                             <td class="table-td-3 text-center">{{ ticket.maxCapacity - (ticket.currentOrdersCount ?? 0) }}</td>
  40.                                             <td class="table-td-4 text-center">
  41.                                                 <div class="d-flex justify-content-center align-items-center " data-counter
  42.                                                     data-ticket-id="{{ ticket.id }}">
  43.                                                     <i class="fa-solid fa-circle-minus fa-2xl" data-minus data-min="0"></i>
  44.                                                     <span class="px-2" data-tickets>0</span>
  45.                                                     <i class="fa-solid fa-circle-plus fa-2xl" data-plus
  46.                                                         data-max="{{ ticket.maxCapacity - ticket.currentOrdersCount }}">
  47.                                                     </i>
  48.                                                 </div>
  49.                                             </td>
  50.                                         </tr>
  51.                                     </table>
  52.                                     {% else %}
  53.                                         <table class="table-cart-ticket mb-1 scrollbar-custom table-muted">
  54.                                             <tr class="">
  55.                                                 <th class="table-th-1-complete">{{ ticket.title|capitalize }}</th>
  56.                                                 <th class="table-th-3-complete text-center text-danger">Pas disponible</th>
  57.                                             </tr>
  58.                                         </table>
  59.                                     {% endif %}
  60.                                 {% else %}
  61.                                     <table class="table-cart-ticket mb-1 scrollbar-custom table-muted">
  62.                                         <tr class="">
  63.                                             <th class="table-th-1-complete">{{ ticket.title|capitalize }}</th>
  64.                                             <th class="table-th-3-complete text-center text-danger">Complet</th>
  65.                                         </tr>
  66.                                     </table>
  67.                                 {% endif %}
  68.                                 
  69.                             {% endfor %}
  70.                         </ul>
  71.                     </div>
  72.                     <div class="d-flex justify-content-center mt-3 mb-5">
  73.                         <button class="btn btn-primary text-uppercase mt-4 mb-4" id="btnReserve" role="button">
  74.                             réserver
  75.                         </button>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.     </section>
  82.     <section class="container my-4">
  83.         <div class="row">
  84.             <div class="col">
  85.                 <h2 class="title-map">Se rendre sur place</h2>
  86.             </div>
  87.         </div>
  88.     </section>
  90.     <section class="container-fluid p-0">
  91.         <div class="row">
  92.             <div class="col-12">
  93.                 <div id="map"></div>
  94.             </div>
  95.         </div>
  96.     </section>
  98.     <script>
  99.         let latitude = 45.66545;
  100.         let longitude = 4.172202
  101.         var map = L.map('map').setView([latitude, longitude], 12);
  102.         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  103.             maxZoom: 19,
  104.             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  105.         }).addTo(map);
  106.         var marker = L.marker([latitude, longitude], {iconSize: [100, 100]}).addTo(map);
  108.     </script>
  110. {% endblock %}