templates/vuejs-filtre-home.html.twig line 1

Open in your IDE?
  1. {% set villes_hotels = getVillesHotels('SHT',false,app.request.get('destination','all')) %}
  2. {% set selected_destination = villes_hotels.selected_destination %}
  3. {% set villes_hotels = villes_hotels.destinations %}
  4. {% set nuitees = app.request.get('nuitees',1) %}
  5. {% set checkin = app.request.get('checkin',date('now')) %}
  6. {% set rooms = roomsToArray(app.request.get('rooms','2')) %}
  7. <script>
  8.     var vjsAdvancedSearch = new Vue({
  9.         el: '#vjs-advanced-search',
  10.         delimiters:  ['${', '}'],
  11.         data: {
  12.             rooms: {{ rooms|json_encode|raw }},
  13.             checkin_fr: '{{ checkin|date('d/m/Y') }}',
  14.             checkout_fr: '{{ checkin|date_modify("+" ~ nuitees ~ " day")|date('d/m/Y') }}',
  15.             checkin_en: '{{ checkin|date('Y-m-d') }}',
  16.             checkout_en: '{{ checkin|date_modify("+" ~ nuitees ~ " day")|date('Y-m-d') }}',
  17.             nuitees: {{ nuitees }},
  18.             pays: '{{ (selected_destination and selected_destination.pays is defined) ? selected_destination.pays : 'all' }}',
  19.             ville: '{{ (selected_destination and selected_destination.ville is defined) ? selected_destination.ville : 'all' }}',
  20.             hotel: '{{ (selected_destination and selected_destination.hotel is defined) ? selected_destination.hotel : 'tous' }}',
  21.             destination: '{{ selected_destination ? selected_destination.type ~ '-' ~ selected_destination.id : 'all' }}',
  22.             lbl_destination: '{{ selected_destination ? selected_destination.name : '' }}',
  23.             occupations: '',
  24.             recap_occupations: '',
  25.         },
  26.         methods: {
  27.             callAvailability() {
  28.                 if ($('.typeahead.destination').val() == '') {
  29.                     viewAlert('Veuillez choisir une ville ou un hôtel', 'danger')
  30.                     return
  31.                 }
  32.                 //$('#mobile-destination').html(`<i class="fa fa-${this.destination.split('-')[0] == 'v' ? 'map-marker' : 'hotel'} fa-1" aria-hidden="true" style=" margin-left: 1px;"></i> ` + this.lbl_destination);
  33.                 //$('#mobile-sejour').html(`Du ${this.checkin_fr.substr(0, 5)} au ${this.checkout_fr.substr(0, 5)} soit ${this.nuitees == 1 ? 'une' : this.nuitees} nuitée${this.nuitees > 1 ? 's' : ''}`);
  34.                 //$('#mobile-occupations').html(this.recap_occupations);
  35.                 $('#btnSearch').prop('disabled', true)
  36.                 $('#btnSearch').html('<i class="fa fa-spinner fa-spin"></i> Veuillez patienter ')
  39.                 $('#btnSearch').html('<i class="fa fa-spinner fa-spin"></i> Veuillez patienter ')
  40.                 window.location = Routing.generate('sejour_hotel_availability', {
  41.                     checkin: this.checkin_en,
  42.                     nuitees: this.nuitees,
  43.                     rooms: this.occupations,
  44.                     /*destination: this.destination*/
  45.                     pays: this.pays,
  46.                     ville: this.ville,
  47.                     hotel: this.hotel,
  48.                 })
  50.             },
  51.             Recap() {
  52.                 let nbrR = this.rooms.length,
  53.                     nbrA = 0,
  54.                     nbrC = 0;
  55.                 let rooms = []
  56.                 this.rooms.map(x => {
  57.                     nbrA += parseInt(x['Adult']);
  58.                     nbrC += parseInt(x['children']);
  59.                     rooms.push(([x['Adult']].concat(x['Child'])).join(','))
  60.                 });
  61.                 let text = (nbrR == 1 ? 'une' : nbrR) + ' chambre' + (nbrR > 1 ? 's' : '') + ': ' + (nbrA == 1 ? 'un' : nbrA) + ' adulte' + (nbrA > 1 ? 's' : '') + ' et ' + (nbrC == 1 ? 'un' : nbrC) + ' enfant' + (nbrC > 1 ? 's' : '')
  63.                 $('[data-target="#occupations"]').val(text);
  64.                 this.occupations = rooms.join(';')
  65.                 this.recap_occupations = text
  66.                 $('#occupations').modal('hide')
  67.             },
  68.             editChildren(index) {
  69.                 let old_child = this.rooms[index]['Child'].length;
  70.                 let new_child = this.rooms[index]['children'];
  71.                 if (old_child > new_child)
  72.                     this.rooms[index]['Child'].length = new_child;
  73.                 else
  74.                     do
  75.                         this.rooms[index]['Child'].push(1)
  76.                     while (this.rooms[index]['Child'].length < new_child);
  77.             },
  78.             removeRoom(index) {
  79.                 this.rooms.splice(index, 1);
  80.             },
  81.             addRoom() {
  82.                 this.rooms.push({
  83.                     Adult: 2,
  84.                     children: 0,
  85.                     Child: []
  86.                 })
  87.             },
  89.         },
  90.         mounted() {
  91.             $('.typeahead.destination').val(this.lbl_destination)
  92.             this.Recap()
  93.             $(this.$refs.select).selectpicker('refresh')
  94.         },
  95.         updated() {
  96.             $(this.$refs.select).selectpicker('refresh')
  97.         },
  98.         destroyed() {
  99.             $(this.$refs.select).off().selectpicker('destroy')
  100.         }
  101.     });
  104.     $(function() {
  105.         var date=new Date();
  106.         var currentMonth = date.getMonth();
  107.         var currentDate = date.getDate();
  108.         var currentYear = date.getFullYear();
  109.         $('input[name="daterange"]').daterangepicker({
  110.                 "autoApply": false,
  111.                 "startDate": vjsAdvancedSearch.checkin_fr,
  112.                 "endDate": vjsAdvancedSearch.checkout_fr,
  113.                 "minDate": new Date(currentYear, currentMonth, currentDate),
  114.                 "opens": "right",
  115.                 "drops": "down",
  116.                 "locale": {
  117.                     "applyLabel": "Valider",
  118.                     "cancelLabel": "Annuler",
  119.                     "format": "DD/MM/YYYY",
  120.                     "fromLabel": "De",
  121.                     "toLabel": "à",
  122.                     "customRangeLabel": "Custom",
  123.                     "daysOfWeek": [
  124.                         "Dim",
  125.                         "Lun",
  126.                         "Mar",
  127.                         "Mer",
  128.                         "Jeu",
  129.                         "Ven",
  130.                         "Sam"
  131.                     ],
  132.                     "monthNames": [
  133.                         "Janvier",
  134.                         "Février",
  135.                         "Mars",
  136.                         "Avril",
  137.                         "Mai",
  138.                         "Juin",
  139.                         "Juillet",
  140.                         "Août",
  141.                         "Septembre",
  142.                         "Octobre",
  143.                         "Novembre",
  144.                         "Décembre"
  145.                     ],
  146.                     "firstDay": 1,
  148.                 }
  149.             },
  150.             function (start, end, label) {
  151.                 vjsAdvancedSearch.checkin_en = start.format('YYYY-MM-DD')
  152.                 vjsAdvancedSearch.checkout_en = end.format('YYYY-MM-DD')
  153.                 vjsAdvancedSearch.checkin_fr = start.format('DD/MM/YYYY')
  154.                 vjsAdvancedSearch.checkout_fr = end.format('DD/MM/YYYY')
  155.                 vjsAdvancedSearch.nuitees = parseInt((end - start) / 1000 / 60 / 60 / 24)
  156.             });
  157.     });
  158.     var $input = $("input.typeahead.destination");
  159.     $input.typeahead({
  160.         limit: 20,
  161.         source: {{ villes_hotels|json_encode|raw }},
  162.         autoSelect: true,
  163.         displayText: function (item) {
  164.             return item.name
  165.         },
  166.         //highlighter: Object,
  167.         afterSelect: function (item) {
  168.             $input.val(item.name).change();
  169.             vjsAdvancedSearch.pays = item.pays
  170.             vjsAdvancedSearch.ville = item.ville
  171.             vjsAdvancedSearch.hotel = (item.hotel === undefined ? 'tous' : item.hotel)
  172.             vjsAdvancedSearch.destination = `${item.type}-${item.id}`
  173.             vjsAdvancedSearch.lbl_destination = item.name
  174.         }
  176.     });
  178. </script>