templates/default/menus.html.twig line 47

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