templates/default/restaurants.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block metas %}
  4.     <meta name="description" content="Encuentra los mejores menús cerca de ti.">
  5.     <meta property="og:title" content="Menu del dia"/>
  6.     <meta property="og:url" content="{{ url(app.request.attributes.get("_route"), app.request.attributes.get("_route_params")) }}"/>
  7.     <meta property="og:description" content="Encuentra los mejores menús cerca de ti.">
  8.     <meta property="og:image" itemprop="image" content="https://menusdeldia.com/uploads/menu.jpg">
  9. {% endblock %}
  10. {% block stylesheets %}
  11.     {{ parent() }}
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
  13. {% endblock %}
  14. {% block javascripts %}
  15.     {{ parent() }}
  16.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
  17. {% endblock %}
  19. {% block title %}Restaurantes
  20. {% endblock %}
  22. {% block body %}
  23.     <div class="container py-3">
  24.         <section class="pb-2 pt-2">
  25.             <form action="{{ path('restaurants') }}" method="post" role="form" enctype="multipart/form-data" class="w-100">
  26.                 <div class="row">
  27.                     <div class='col-md-6 text-center'>
  28.                         <h6>
  29.                             <small>Precio</small>
  30.                         </h6>
  31.                         <input type="text" class="js-range-precio" name="precioMax" value=""/>
  32.                     </div>
  33.                     <div class='col-md-6 text-center'>
  34.                         <h6>
  35.                             <small>Distancia</small>
  36.                         </h6>
  37.                         <input type="text" class="js-range-distancia" name="distanciaMax" value=""/>
  38.                     </div>
  39.                     <input name="latActual" type="hidden" value="{{ latActual }}">
  40.                     <input name="lngActual" type="hidden" value="{{ lngActual }}">
  41.                 </div>
  42.             </form>
  43.             <div class="row text-center mt-2">
  44.                 <p>
  45.                     <em>Se han encontrado
  46.                     </em>
  47.                     <strong>{{ restaurants|length }}</strong>
  48.                     <em>
  49.                         restaurantes cerca de ti.
  50.                     </em>
  51.                 </p>
  52.             </div>
  53.         </section>
  54.         <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 mt-1">
  55.             {% for restaurant in restaurants %}
  56.                 <div class="col my-4">
  57.                     <div class="card shadow-sm">
  58.                         <div class="card-header text-center py-1">
  59.                             <a class="text-decoration-none" href="{{ path('showrestaurant' , { 'restaurante': restaurant.nombre|replace({' ': '-'})|lower, 'id': restaurant.id }) }}" title="{{ restaurant.nombre }}" target="_blank">
  60.                                 <em class="fw-semibold text-dark-emphasis fs-6">{{ restaurant.nombre }}</em>
  61.                             </a>
  62.                         </div>
  63.                         <a class="text-decoration-none" href="{{ path('showrestaurant' , { 'restaurante': restaurant.nombre|replace({' ': '-'})|lower, 'id': restaurant.id }) }}" title="{{ restaurant.nombre }}" target="_blank">
  64.                             {% if restaurant.images|length  %}
  65.                                 <img class="bd-placeholder-img card-img-top" width="100%" height="200" src="/uploads/images/{{ restaurant.images[0].filePath }}" title="Menu diario de {{restaurant.nombre }}" alt="Menu diario de {{ restaurant.nombre }}" restaurante="{{restaurant.nombre}}">
  66.                             {% else %}
  67.                                 <img class="bd-placeholder-img card-img-top" width="100%" height="200" src="/img/default-restaurant.webp" title="Menu diario de {{restaurant.nombre }}" alt="Menu diario de {{restaurant.nombre }}" restaurante="{{restaurant.nombre}}">
  68.                             {% endif %}
  69.                         </a>
  70.                         {% if latActual and lngActual %}
  71.                             <div class="restaurant-km">
  72.                                 <small class="badge bg-success bg-gradient text-wrap fw-bolder fs-6">
  73.                                     <em>
  74.                                         {{ restaurant.distancia }}
  75.                                         Km
  76.                                     </em>
  77.                                 </small>
  78.                             </div>
  79.                         {% endif %}
  80.                         <div class="card-body text-center py-1">
  81.                             {% if restaurant.rating %}
  82.                                 <div class="col-12 text-center">
  83.                                     {% set rating = restaurant.rating|split('.') %}
  84.                                     {% for i in 1..rating[0] %}
  85.                                         <i class="text-warning fa fa-star"></i>
  86.                                     {% endfor %}
  87.                                     {% if rating[1] is defined %}
  88.                                         <i class="text-warning fa fa-star-half"></i>
  89.                                     {% endif  %}
  90.                                     {{ restaurant.rating }}
  91.                                 </div>
  92.                             {% else %}
  93.                                 <div class="col-12 text-center fw-lighter fst-italic">Sin puntuar</div>
  94.                             {% endif %}
  95.                         </div>
  96.                         <div class="card-footer d-flex justify-content-between align-items-center text-center">
  97.                             <a class="text-decoration-none" href="{{ path('showrestaurant' , { 'restaurante': restaurant.nombre|replace({' ': '-'})|lower, 'id': restaurant.id }) }}" title="Ver menus de {{ restaurant.nombre }}" target="_blank">
  98.                                 <i class="fas fa-file mx-3"></i>
  99.                             </a>
  100.                             <a href="whatsapp://send?text={{url('showrestaurant',{'restaurante' : restaurant.nombre|replace({' ': '-'})|lower, 'id' : restaurant.id})}}" data-action="share/whatsapp/share">
  101.                                 <i class="fas fa-share-alt mx-3"></i>
  102.                             </a>
  103.                             {% if restaurant.telefono %}
  104.                                 <a href="tel:{{ restaurant.telefono }}" title="{{ restaurant.telefono }}">
  105.                                     <i class="fa fa-phone mx-3"></i>
  106.                                 </a>
  107.                             {% endif %}
  108.                             {% if restaurant.lat and restaurant.lng %}
  109.                                 <a href="https://www.google.es/maps/dir//{{ restaurant.lat }}+{{ restaurant.lng }}" target="_blank">
  110.                                     <i class="fa fa-map-marker m-3" aria-hidden="true"></i>
  111.                                 </a>
  112.                             {% endif %}
  113.                         </div>
  114.                     </div>
  115.                 </div>
  116.             {% endfor %}
  117.         </div>
  118.     </div>    
  119. {% endblock %}
  120. {% block postjavascripts %}
  121.     {{ parent() }}
  122.     <!-- parse-ignore-start -->
  123.     <script>
  124.         $(document).ready(function () {
  126.             const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  127.             const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  129.             if (!$("input[name='latActual']").val() && !$("input[name='lngActual']").val()) {
  130.                 if (navigator.geolocation) {
  131.                     navigator.geolocation.getCurrentPosition(showPosition);
  132.                 } else {
  133.                     console.log("Geolocation is not supported by this browser.");
  134.                 }
  135.             }
  136.             
  137.             $(".js-range-precio").ionRangeSlider({
  138.                 skin: "round",
  139.                 step: 5,
  140.                 grid: true,
  141.                 min: 0,
  142.                 max: 50,
  143.                 from: {{ precioMax }},
  144.                 prefix: "€",
  145.                 onFinish: function (data) {
  146.                     $("form").submit();
  147.                 }
  148.             });
  150.             $(".js-range-distancia").ionRangeSlider({
  151.                 skin: "round",
  152.                   step: 5,
  153.                 grid: true,
  154.                 min: 0,
  155.                 max: 50,
  156.                 from: {{ distanciaMax }},
  157.                 prefix: "Km",
  158.                 onFinish: function (data) {
  159.                     $("form").submit();
  160.                 }
  161.             });
  163.             function showPosition(position) {
  164.                 $("input[name='latActual']").val(position.coords.latitude);
  165.                 $("input[name='lngActual']").val(position.coords.longitude);
  166.                 $("form").submit();
  167.             }
  168.         });
  169.     </script>
  170.     <!-- parse-ignore-end -->
  171. {% endblock %}