templates/default/menus.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 %}Menu del dia
  20. {% endblock %}
  22. {% block body %}
  23.     <div class="container py-3">
  24.         <section class="pb-2 pt-2">
  25.             <form action="{{ path('menus') }}" 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>{{ menus|length }}</strong>
  48.                     <em>
  49.                         menús 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 menu in menus %}
  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': menu.restaurante.nombre|replace({' ': '-'})|lower, 'id': menu.restaurante.id }) }}" title="{{ menu.restaurante.nombre }}" target="_blank">
  60.                                 <em class="fw-semibold text-dark-emphasis fs-6">{{ menu.restaurante.nombre }}</em>
  61.                             </a>
  62.                         </div>
  63.                         {{ include('default/partials/_carousel.html.twig', { 'images': menu.images , 'restaurant' : menu.restaurante}) }}
  65.                         {% if latActual and lngActual %}
  66.                             <div class="restaurant-km">
  67.                                 <small class="badge bg-success bg-gradient text-wrap fw-bolder fs-6">
  68.                                     <em>
  69.                                         {{ menu.restaurante.distancia }}
  70.                                         Km
  71.                                     </em>
  72.                                 </small>
  73.                             </div>
  74.                         {% endif %}
  75.                         <div class="card-body text-center py-1">
  76.                             {% if menu.restaurante.rating %}
  77.                                 <div class="col-12 text-center">
  78.                                     <div class="float-start badge bg-primary text-wrap fw-bold fs-6">
  79.                                         {{ menu.precio|number_format(1, '.', ',') }}€
  80.                                     </div>
  81.                                     <div class="float-end">
  82.                                         {% set rating = menu.restaurante.rating|split('.') %}
  83.                                         {% for i in 1..rating[0] %}
  84.                                             <i class="text-warning fa fa-star"></i>
  85.                                         {% endfor %}
  86.                                         {% if rating[1] is defined %}
  87.                                             <i class="text-warning fa fa-star-half"></i>
  88.                                         {% endif  %}
  89.                                         {{ menu.restaurante.rating }}
  90.                                     </div>
  91.                                 </div>
  92.                             {% else %}
  93.                                 <div class="col-12 text-center">
  94.                                     <div class="float-start badge bg-primary text-wrap fw-bold fs-6">
  95.                                         {{ menu.precio|number_format(1, '.', ',') }}€
  96.                                     </div>
  97.                                     <span class="float-end fw-lighter fst-italic">
  98.                                         Sin puntuar</span>
  99.                                 </div>
  100.                             {% endif %}
  101.                         </div>
  102.                         <div class="card-footer d-flex justify-content-between align-items-center text-center">
  103.                             <a href="whatsapp://send?text={{url('showrestaurant',{'restaurante' : menu.restaurante.nombre|replace({' ': '-'})|lower, 'id' : menu.restaurante.id})}}" data-action="share/whatsapp/share">
  104.                                 <i class="fas fa-share-alt mx-3"></i>
  105.                             </a>
  106.                             {% if menu.restaurante.telefono %}
  107.                                 <a href="tel:{{ menu.restaurante.telefono }}" title="{{ menu.restaurante.telefono }}">
  108.                                     <i class="fa fa-phone mx-3"></i>
  109.                                 </a>
  110.                             {% endif %}
  111.                             {% if menu.restaurante.lat and menu.restaurante.lng %}
  112.                                 <a href="https://www.google.es/maps/dir//{{ menu.restaurante.lat }}+{{ menu.restaurante.lng }}" target="_blank">
  113.                                     <i class="fa fa-map-marker m-3" aria-hidden="true"></i>
  114.                                 </a>
  115.                             {% endif %}
  116.                         </div>
  117.                     </div>
  118.                 </div>
  119.             {% endfor %}
  120.         </div>
  121.     </div>
  122.     <div class="modal" id="imagemodal" tabindex="-1">
  123.         <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
  124.             <div class="modal-content">
  125.                 <div class="modal-header">
  126.                     <h6 class="nombre"></h6>
  127.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  128.                 </div>
  129.                 <div class="modal-body">
  130.                     <img src="" class="imagepreview" style="width: 100%;">
  131.                 </div>
  132.             </div>
  133.         </div>
  134.     </div>
  135. {% endblock %}
  136. {% block postjavascripts %}
  137.     {{ parent() }}
  138.     <!-- parse-ignore-start -->
  139.     <script>
  140.         $(document).ready(function () {
  142.             $('.zoom').on('click', function () {
  143.                 $(".nombre").html($(this).attr('restaurante'));
  144.                 $('.imagepreview').attr('src', $(this).attr('src'));
  145.                 $('#imagemodal').modal('show');
  146.             });
  148.             const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  149.             const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
  152.             if (!$("input[name='latActual']").val() && !$("input[name='lngActual']").val()) {
  153.                 if (navigator.geolocation) {
  154.                     navigator.geolocation.getCurrentPosition(showPosition);
  155.                 } else {
  156.                     console.log("Geolocation is not supported by this browser.");
  157.                 }
  158.             }
  159.             
  160.             $(".js-range-precio").ionRangeSlider({
  161.                 skin: "round",
  162.                 step: 5,
  163.                 grid: true,
  164.                 min: 0,
  165.                 max: 50,
  166.                 from: {{ precioMax }},
  167.                 prefix: "€",
  168.                 onFinish: function (data) {
  169.                     $("form").submit();
  170.                 }
  171.             });
  173.             $(".js-range-distancia").ionRangeSlider({
  174.                 skin: "round",
  175.                   step: 5,
  176.                 grid: true,
  177.                 min: 0,
  178.                 max: 50,
  179.                 from: {{ distanciaMax }},
  180.                 prefix: "Km",
  181.                 onFinish: function (data) {
  182.                     $("form").submit();
  183.                 }
  184.             });
  186.             function showPosition(position) {
  187.                 $("input[name='latActual']").val(position.coords.latitude);
  188.                 $("input[name='lngActual']").val(position.coords.longitude);
  189.                 $("form").submit();
  190.             }
  191.         });
  192.     </script>
  193.     <!-- parse-ignore-end -->
  194. {% endblock %}