templates/FrontCommun/SejourHotel/availability/vuejs-components/item-hotel.html.twig line 1

Open in your IDE?
  1. {% if app.request.get('product') =="appartement" %}
  2.     {% include checkCustomTemplate("SejourAppartement/availability/vuejs-components/item-hotel-content.html.twig") %}
  3. {% else %}
  4.     {% include checkCustomTemplate("SejourHotel/availability/vuejs-components/item-hotel-content.html.twig") %}
  6. {% endif %}
  7. {{ macro('sejour-hotel.availability').jsComponentSupplement() }}
  9. {% include checkCustomTemplate("SejourHotel/availability/vuejs-components/item-pension-room/#{resultView}.html.twig") %}
  11. <script>
  12.     let allHotels = {{ getAllHotels(null, false, app.request.get('product') == "appartement")|json_encode|raw }};
  14.     var globalState = Vue.observable({
  15.         minPrix2Loading: true
  16.     });
  18.     function showBtnReserver(StopReservation) {
  19.         if (StopReservation instanceof Array) {
  20.             if (StopReservation.filter(i => i).length > 0)
  21.                 return false
  22.         } else {
  23.             if (StopReservation)
  24.                 return false
  25.         }
  26.         return true
  27.     }
  29.     let itemHotel = {
  30.         template: "#item-hotel",
  31.         props: ['response', 'index_hotel'],
  32.         data: function () {
  33.             return {
  34.                 pricesLoaded: false,
  35.                 loadingPrices: false
  36.             }
  37.         },
  38.         computed: {
  39.             minPrix2Loading: function () {
  40.                 return globalState.minPrix2Loading
  41.             },
  42.             isInWishlist() {
  43.                 var idH = (this.response.Hotel.IdLocal !== undefined ? this.response.Hotel.IdLocal : this.response.Hotel.Id)
  44.                 return wishlist.includes(idH);
  45.             },
  46.             hotel: function () {
  47.                 if (this.response == null)
  48.                     return null
  50.                 {% if hotelSearchOnlyDetails|default('false') == 'true' %}
  51.                 if (!this.pricesLoaded) {
  52.                     {% if resultView == 'room-pension' %}
  53.                     this.response.Price = {BoardingByRooms: []};
  54.                     {% elseif resultView == 'pension-room' %}
  55.                     this.response.Price = {Boarding: []};
  56.                     {% elseif resultView == 'pension-combin-room' %}
  57.                     this.response.Price = {Boarding: []};
  58.                     {% elseif resultView == 'combin-room-pension' %}
  59.                     this.response.Price = {BoardingByRooms: [{Rooms: []}]};
  60.                     {% endif %}
  61.                 }
  62.                 {% endif %}
  64.                 var photo = this.response.Hotel.Image;
  65.                 if (photo == null || photo.indexOf('https://via.placeholder.com') > -1)
  66.                     photo = '{{ asset('assets-commun/images/img_placeholder.jpg') }}'
  68.                 var ville = this.response.Hotel.City.Name
  70.                 if (this.response.Hotel.City.Region !== undefined && this.response.Hotel.City.Region != '')
  71.                     ville += ', ' + this.response.Hotel.City.Region
  73.                 if (this.response.Hotel.City.Zone != '')
  74.                     ville += ', ' + this.response.Hotel.City.Zone
  76.                 {% if enabled_hotel_stay_worldwide == 'true' %}
  77.                 if (this.response.Hotel.Adress != '')
  78.                     ville += "\n" + this.response.Hotel.Adress
  79.                 {% endif %}
  81.                 var nombreEtoiles = parseInt(this.response.Hotel.Category.Star)
  83.                 {% if app.request.get('product') == "appartement" %}
  84.                 var idH = this.response.Hotel.Id
  85.                 {% else %}
  86.                 var idH = (this.response.Hotel.IdLocal !== undefined ? this.response.Hotel.IdLocal : this.response.Hotel.Id)
  87.                 {% endif %}
  89.                 var paramsRouteDetails = {
  90.                     // id: this.response.Hotel.SourceDetails.Hotel,
  91.                     id: idH,
  92.                     checkin: window.checkin_en,
  93.                     nuitees: window.nuitees,
  94.                     rooms: window.rooms,
  95.                     slug: this.response.Hotel.Slug,
  96.                     // source: this.response.Hotel.SourceDetails.Source,
  97.                     {% if app.request.get('product') == "appartement" %}
  98.                     source: this.response.Source,
  99.                     {% else %}
  100.                     source: (this.response.Hotel.IdLocal !== undefined || this.response.Source == 'local-2') ? 'all' : this.response.Source,
  101.                     {% endif %}
  102.                     // city: this.response.Hotel.SourceDetails.City
  103.                     city: this.response.Hotel.City.Id
  104.                 };
  106.                 let nbrChambresPromo = []
  108.                 {% if resultView == 'room-pension' %}
  109.                 this.response.Price.BoardingByRooms.map((pax, idx) => {
  110.                     pax.Rooms.map((room, idx) => {
  111.                         room.Boarding.map(arr => {
  112.                             if (!arr.surDemande && arr.BasePrice > arr.Price && (nbrChambresPromo[arr.IdRoom] === undefined || arr.disponible > nbrChambresPromo[arr.IdRoom]))
  113.                                 nbrChambresPromo[arr.IdRoom] = arr.disponible
  114.                         })
  115.                     });
  116.                 });
  117.                 {% elseif resultView == 'pension-room' %}
  118.                 this.response.Price.Boarding.map((arr, idx) => {
  119.                     arr.Pax.map((occp, idx) => {
  120.                         occp.Rooms.map(function (room) {
  121.                             if (!room.surDemande && room.BasePrice > room.Price && (nbrChambresPromo[room.Id] === undefined || room.disponible > nbrChambresPromo[room.Id]))
  122.                                 nbrChambresPromo[room.Id] = room.disponible
  123.                         })
  124.                     })
  125.                 });
  126.                 {% elseif resultView == 'pension-combin-room' %}
  127.                 this.response.Price.Boarding.map((arr, idx_arr) => {
  128.                     arr.Pax[0].Rooms.map((room, idx_room) => {
  129.                         if (!room.surDemande && room.BasePrice > room.Price && (nbrChambresPromo[room.Id] === undefined || room.disponible > nbrChambresPromo[room.Id]))
  130.                             nbrChambresPromo[room.Id] = room.Quantity
  131.                     })
  132.                 });
  133.                 {% elseif resultView == 'combin-room-pension' %}
  134.                 this.response.Price.BoardingByRooms[0].Rooms.map((room, idx_room) => {
  135.                     room.Boarding.map((arr, idx_arr) => {
  136.                         if (!arr.surDemande && arr.BasePrice > arr.Price && (nbrChambresPromo[arr.IdRoom] === undefined || arr.disponible > nbrChambresPromo[arr.IdRoom]))
  137.                             nbrChambresPromo[arr.IdRoom] = arr.Quantity
  138.                     })
  139.                 });
  140.                 {% endif %}
  144.                 let allEtiquettes = [];
  146.                 if (this.response.etiquettes !== undefined)
  147.                     Object.values(this.response.etiquettes).map(etq => {
  148.                         etq.nature = 'etiquette'
  149.                         if (allEtiquettes.findIndex(e => e.libelle === etq.libelle) == -1) allEtiquettes.push(etq)
  150.                     })
  152.                 if (this.response.etiquettesSaison !== undefined)
  153.                     Object.values(this.response.etiquettesSaison).map(etq => {
  154.                         etq.nature = 'etiquette-saison'
  155.                         if (allEtiquettes.findIndex(e => e.libelle === etq.libelle) == -1) allEtiquettes.push(etq)
  156.                     })
  158.                 if (this.response.etiquettesEmplacement !== undefined)
  159.                     Object.values(this.response.etiquettesEmplacement).map(etq => {
  160.                         etq.nature = 'etiquette-emplacement'
  161.                         if (allEtiquettes.findIndex(e => e.libelle === etq.libelle) == -1) allEtiquettes.push(etq)
  162.                     })
  164.                 if (wishlist !== undefined)
  165.                     return {
  166.                         details: (details = allHotels.filter(h => h.id == idH)).length > 0 ? details[0] : null,
  167.                         photo: photo,
  168.                         tripAdvisor: this.response.Hotel.TripAdvisor,
  169.                         Price: this.response.Price,
  170.                         StopSales: this.response.StopSales !== undefined ? [this.response.StopSales.Title] : [],
  171.                         description: this.response.Hotel.ShortDescription,
  172.                         descriptionHotel: this.response.Hotel.HotelDescription !== undefined ? this.response.Hotel.HotelDescription : null,
  173.                         recommander: this.response.Recommended,
  174.                         minPrix: parseFloat(this.response.min_arrangement.min_prices).formatMoney(3, ',', ' '),
  175.                         tags: this.response.Hotel.tags,
  176.                         token: this.response.Token !== undefined ? this.response.Token : null,
  177.                         amenagements: this.response.Hotel.Facilities,
  178.                         etoile: nombreEtoiles > 0 ? nombreEtoiles : this.response.Hotel.Category.Title,
  179.                         id: idH,
  180.                         idville: this.response.Hotel.City.Id,
  181.                         nom: this.response.Hotel.Name,
  182.                         ville: ville,
  183.                         autresInformations: this.response.Hotel.OtherDetails !== undefined ? this.response.Hotel.OtherDetails : {},
  184.                         paramsRouteDetails: paramsRouteDetails,
  185.                         nbrChambresPromo: Object.values(nbrChambresPromo).reduce((accumulator, currentValue) => {
  186.                             return accumulator + currentValue
  187.                         }, 0),
  188.                         Recap: {
  189.                             checkin: window.checkin,
  190.                             nuitees: window.nuitees,
  191.                             occupations: window.rooms
  192.                         },
  193.                         {% if app.request.get('product') == "appartement" %}
  194.                         urlDetails: Routing.generate('details_appartement', paramsRouteDetails),
  195.                         {% else %}
  196.                         urlDetails: Routing.generate('details_hotel', paramsRouteDetails),
  197.                         {% endif %}
  198.                         minBasePrix: parseFloat(this.response.min_arrangement.price).formatMoney(3, ',', ' '),
  199.                         minArrangement: this.response.min_arrangement.libelle,
  200.                         earlyBooking: this.response.etiquettes ? Object.values(this.response.etiquettes).filter(etq => {
  201.                             return etq.codeType === 6
  202.                             //return etq.debutReservation
  203.                         }) : [],
  204.                         etiquettesEmplacement: this.response.etiquettesEmplacement ? Object.values(this.response.etiquettesEmplacement).map((etq, idx) => {
  205.                             if (etq.age !== undefined)
  206.                                 etq.slug = 'gratuite-enfant'
  207.                             else if (etq.promotion !== undefined)
  208.                                 etq.slug = 'promotion'
  209.                             else
  210.                                 etq.slug = slugify(etq.libelle)
  211.                             return etq;
  212.                         }) : [],
  213.                         etiquettes: this.response.etiquettes ? Object.values(this.response.etiquettes).sort((a, b) => {
  214.                             return a.ordre > b.ordre ? 1 : -1
  215.                         }).map((etq, idx) => {
  216.                             if (etq.age !== undefined)
  217.                                 etq.slug = 'gratuite-enfant'
  218.                             else if (etq.promotion !== undefined)
  219.                                 etq.slug = 'promotion'
  220.                             else
  221.                                 etq.slug = slugify(etq.libelle)
  222.                             etq.top = idx * 30 + 5
  223.                             return etq;
  224.                         }) : [],
  225.                         etiquettesSaison: this.response.etiquettesSaison ? Object.values(this.response.etiquettesSaison).sort((a, b) => {
  226.                             return a.ordre > b.ordre ? 1 : -1
  227.                         }).map((etq, idx) => {
  228.                             if (etq.age !== undefined)
  229.                                 etq.slug = 'gratuite-enfant'
  230.                             else if (etq.promotion !== undefined)
  231.                                 etq.slug = 'promotion'
  232.                             else
  233.                                 etq.slug = slugify(etq.libelle)
  234.                             return etq;
  235.                         }) : [],
  236.                         allEtiquettes: allEtiquettes,
  237.                         retrocession: this.response.retrocession,
  238.                     }
  239.             },
  240.             minPrix2() {
  241.                 if (this.response.min_arrangement2 !== undefined)
  242.                     return {
  243.                         arrangement: this.response.min_arrangement2.libelle,
  244.                         chambre: this.response.min_arrangement2.chambre.libelle,
  245.                         surDemande: this.response.min_arrangement2.chambre.surDemande,
  246.                         msgSurDemande: this.response.min_arrangement2.chambre.msgSurDemande,
  247.                         prix: parseFloat(this.response.min_arrangement2.min_prices / window.nuitees / 2).formatMoney(3, ',', ' '),
  248.                         base_prix: parseFloat(this.response.min_arrangement2.price / window.nuitees / 2).formatMoney(3, ',', ' ')
  249.                     }
  251.                 return {
  252.                     arrangement: '',
  253.                     chambre: '',
  254.                     surDemande: false,
  255.                     disponible: 0,
  256.                     prix: 0
  257.                 }
  258.             }
  259.         },
  260.         mounted() {
  261.             var el = $(this.$refs.countdown)
  262.             var countDownDate = new Date(el.data('time')).getTime();
  263.             var x = setInterval(function () {
  264.                 var now = new Date().getTime();
  265.                 var distance = countDownDate - now;
  266.                 var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  267.                 var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  268.                 var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  269.                 var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  270.                 el.html(days + "j " + hours + "h " + minutes + "m " + seconds + "s ");
  271.                 if (distance < 0) {
  272.                     clearInterval(x);
  273.                     el.html("EXPIRED");
  274.                 }
  275.             }, 1000);
  276.         },
  277.         methods: {
  278.             loadPrices(event) {
  279.                 {% if hotelSearchOnlyDetails|default('false') == 'true' %}
  280.                 if (this.pricesLoaded || this.loadingPrices) {
  281.                     $(`#tarifs-hotel-${this.index_hotel}`).collapse('toggle');
  282.                     return;
  283.                 }
  285.                 this.loadingPrices = true;
  286.                 // Ajouter l'animation de loading au bouton
  287.                 let loadBtn = $(event.target).closest('.btn');
  288.                 let originalHtml = loadBtn.html();
  289.                 loadBtn.prop('disabled', true).addClass('loading');
  290.                 loadBtn.html('<span class="fa fa-spinner fa-spin" role="status" aria-hidden="true"></span> Chargement...');
  292.                 // Build search parameters from cache, only updating Hotel
  293.                 let searchParams = window.lastHotelSearchParams;
  294.                 delete searchParams.SearchDetails.OnlyHotelDetails;
  295.                 searchParams.SearchDetails.OnlyPrices = true;
  296.                 searchParams.SearchDetails.Filters.Source = (this.response.Hotel.IdLocal !== undefined || this.response.Source == 'local-2') ? 'all' : this.response.Source;
  297.                 if (searchParams.SearchDetails.Filters.Source != 'all') {
  298.                     delete searchParams.SearchDetails.BookingDetails.City;
  299.                     searchParams.SearchDetails.BookingDetails.XMLCity = this.response.Hotel.City.Id;
  300.                 }
  301.                 searchParams.SearchDetails.BookingDetails.Hotel = this.response.Hotel.IdLocal !== undefined ? this.response.Hotel.IdLocal : this.response.Hotel.Id;
  303.                 // Make AJAX call to get prices
  304.                 axios.get("{{ path('sejour_hotel_ajax_availability') }}", {
  305.                     params: {
  306.                         HotelSearch: utf8_to_b64(JSON.stringify(searchParams))
  307.                     }
  308.                 }).then(response => {
  309.                     if (response.data && response.data.HotelSearch && response.data.HotelSearch[0]) {
  310.                         this.pricesLoaded = true;
  311.                         // Update the Price in the response using Vue.set for reactivity
  312.                         this.$set(this.response, 'Price', response.data.HotelSearch[0].Price);
  313.                         this.$set(this.response, 'Token', response.data.HotelSearch[0].Token);
  314.                     }
  315.                     this.loadingPrices = false;
  316.                     // Retirer l'animation de loading
  317.                     loadBtn.prop('disabled', false).removeClass('loading');
  318.                     loadBtn.html(originalHtml);
  319.                     // Trigger collapse after prices are loaded
  320.                     $(`#tarifs-hotel-${this.index_hotel}`).collapse('show');
  321.                 }).catch(error => {
  322.                     console.error('Error loading prices:', error);
  323.                     this.loadingPrices = false;
  324.                     // Retirer l'animation de loading en cas d'erreur
  325.                     loadBtn.prop('disabled', false).removeClass('loading');
  326.                     loadBtn.html(originalHtml);
  327.                     // Still show collapse even if error
  328.                     $(`#tarifs-hotel-${this.index_hotel}`).collapse('show');
  329.                 });
  330.                 {% else %}
  331.                 // If HOTEL_SEARCH_ONLY_DETAILS is not enabled, just toggle collapse
  332.                 $(`#tarifs-hotel-${this.index_hotel}`).collapse('toggle');
  333.                 {% endif %}
  334.             }
  335.         },
  336.         components: {itemPensionRoom}
  337.     }
  339.     $(document).ready(function () {
  340.         $(".invisible-content").hide();
  341.         $(document).on('click', '.btn-more', function () {
  342.             var moreLessButton = $(".invisible-content").is(':visible') ? ' Lire la suite ' : 'Reduire';
  343.             $(this).text(moreLessButton);
  344.             $(this).parent('.large-content').find(".invisible-content").toggle();
  345.             $(this).parent('.large-content').find(".visible-content").toggle();
  346.         });
  347.     });
  348. </script>