1(function($) { 2"use strict"; 3 4jQuery(document).ready(function() { 5 6var dump = function(data) 7{ 8 console.debug(data); 9} 10 11var empty = function(data){ 12 if (typeof data === "undefined" || data==null || data=="" || data=="null" || data=="undefined" ) { 13 return true; 14 } 15 return false; 16}; 17 18const $timeout = 20000; 19 20const getCustomerToken = function(){ 21 if (typeof identity_token === "undefined" || identity_token==null || identity_token=="" || identity_token=="null" || identity_token=="undefined" ) { 22 return ''; 23 } 24 return identity_token; 25}; 26 27/* 28 COMPONENTS PHONE NUMBER 29*/ 30const ComponentsPhoneNumber = { 31 props: ['ajax_url','label','mobile_number','mobile_prefix'], 32 emits: ['update:mobile_number','update:mobile_prefix'], 33 data(){ 34 return { 35 data : [], 36 country_flag : '' 37 }; 38 }, 39 mounted () { 40 this.getLocationCountries(); 41 }, 42 methods :{ 43 getLocationCountries(){ 44 axios({ 45 method: 'POST', 46 url: this.ajax_url+"/getLocationCountries" , 47 data : 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') , 48 timeout: $timeout, 49 }).then( response => { 50 if(response.data.code==1){ 51 this.data = response.data.details.data; 52 this.country_flag = response.data.details.default_data.flag; 53 this.$emit('update:mobile_prefix', response.data.details.default_data.phonecode ); 54 } else { 55 this.data = []; 56 this.country_flag=''; 57 this.mobile_prefix=''; 58 } 59 }).catch(error => { 60 // 61 }).then(data => { 62 63 }); 64 }, 65 setValue(data){ 66 this.country_flag = data.flag; 67 this.$emit('update:mobile_prefix', data.phonecode ); 68 this.$refs.ref_mobile_number.focus(); 69 }, 70 }, 71 template: ` 72 <div class="inputs-with-dropdown d-flex align-items-center mb-3" > 73 <div class="dropdown"> 74 <button class="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 75 <img v-if="country_flag" :src="country_flag"> 76 </button> 77 <div class="dropdown-menu" > 78 <a v-for="item in data" @click="setValue(item)" 79 href="javascript:;" class="dropdown-item d-flex align-items-center"> 80 <div class="mr-2"> 81 <img :src="item.flag"> 82 </div> 83 <div>{{item.country_name}}</div> 84 </a> 85 </div> 86 </div> <!--dropdown--> 87 88 <div class="mr-0 ml-1" v-if="mobile_prefix">+{{mobile_prefix}}</div> 89 <input type="text" ref="ref_mobile_number" 90 :value="mobile_number" @input="$emit('update:mobile_number', $event.target.value)" > 91 92 </div> <!--inputs--> 93 ` 94}; 95 96 97/* 98 COMPONENTS RECAPCHA 99*/ 100const componentsRecaptcha = { 101 props: ['sitekey','size','theme','is_enabled'], 102 data() { 103 return { 104 recaptcha: null, 105 } 106 }, 107 mounted() { 108 if(this.is_enabled==1 || this.is_enabled=="true" || this.is_enabled==true){ 109 this.initCapcha(); 110 } 111 }, 112 methods: { 113 initCapcha(){ 114 if (window.grecaptcha == null) { 115 new Promise((resolve) => { 116 window.recaptchaReady = function () { 117 resolve(); 118 }; 119 120 const doc = window.document; 121 const scriptId = "recaptcha-script"; 122 const scriptTag = doc.createElement("script"); 123 scriptTag.id = scriptId; 124 scriptTag.setAttribute("src", "https://www.google.com/recaptcha/api.js?onload=recaptchaReady&render=explicit"); 125 doc.head.appendChild(scriptTag); 126 }).then(() => { 127 this.renderRecaptcha(); 128 }); 129 } else { 130 this.renderRecaptcha(); 131 } 132 }, 133 renderRecaptcha(){ 134 this.recaptcha = grecaptcha.render( this.$refs.recaptcha_target , { 135 'sitekey' : this.sitekey, 136 'theme': this.theme, 137 'size': this.size, 138 'tabindex': this.tabindex, 139 'callback': (response) => this.$emit("verify", response), 140 'expired-callback': () => this.$emit("expire"), 141 'error-callback': () => this.$emit("fail") 142 });
143 }, 144 reset() { 145 grecaptcha.reset(this.recaptcha); 146 } 147 }, 148 template: ` 149 <div class="mb-2 mt-2" ref="recaptcha_target"></div> 150 ` 151}; 152 153 154/* 155 COMPONENTS RESERVATION 156*/ 157const ComponentsReservation = { 158 props: ['label','ajax_url','api_url','merchant_uuid','booking_enabled_capcha','captcha_site_key','reservation_uuid'], 159 components : { 160 'component-phone' : ComponentsPhoneNumber, 161 'vue-recaptcha' : componentsRecaptcha, 162 }, 163 data() { 164 return { 165 steps : 1, 166 guest_list :[], 167 guest : 1, 168 reservation_date : '', 169 reservation_time : '', 170 reservation_time_pretty : '', 171 time_slot : [], 172 date_list : [], 173 all_time_slot : [], 174 tc : '', 175 first_name : '', 176 last_name : '', 177 email_address : '', 178 special_request :'', 179 mobile_prefix : '', 180 mobile_number :'', 181 loading : false, 182 loading_time_slot : false, 183 submit_loading : false, 184 next_step_loading : false, 185 reservation_info : [], 186 success_data : [], 187 recaptcha_response : '', 188 not_available_time : [], 189 track_reservation_link : '', 190 data_booking : [], 191 details_link : '', 192 allowed_choose_table : false, 193 room_list : [], 194 room_uuid : '', 195 table_uuid : '', 196 user_data : '' 197 } 198 }, 199 created() { 200 this.getBookingAttributes(); 201 }, 202 computed: { 203 hasTimeSlot(){ 204 if (Object.keys(this.all_time_slot).length > 0) { 205 return true; 206 } 207 return false; 208 }, 209 bookingValid(){ 210 let $pass = true; 211 if(this.guest<=0){ 212 $pass = false; 213 } 214 if(empty(this.reservation_date)){ 215 $pass = false; 216 } 217 if(empty(this.reservation_time)){ 218 $pass = false; 219 } 220 return $pass; 221 }, 222 reservationValid(){ 223 let $pass = true; 224 if(empty(this.first_name)){ 225 $pass = false; 226 } 227 if(empty(this.last_name)){ 228 $pass = false; 229 } 230 if(!this.validEmail(this.email_address)){ 231 $pass = false; 232 } 233 if(empty(this.mobile_number)){ 234 $pass = false; 235 } 236 return $pass; 237 }, 238 isEdit(){ 239 if(!empty(this.reservation_uuid)){ 240 return true; 241 } 242 return false; 243 }, 244 }, 245 methods: { 246 validEmail(email){ 247 var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 248 return re.test(email); 249 }, 250 getBookingAttributes(){ 251 this.loading = true; 252 let reservation_uuid = !empty(this.reservation_uuid)?this.reservation_uuid:''; 253 axios({ 254 method: 'POST', 255 url: this.ajax_url+"/Getbookingattributes" , 256 data : 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&merchant_uuid="+ this.merchant_uuid +"&id="+ reservation_uuid , 257 timeout: $timeout, 258 }).then( response => { 259 if(response.data.code==1){ 260 this.guest_list = response.data.details.guest_list; 261 this.date_list = response.data.details.date_list; 262 this.time_slot = response.data.details.time_slot; 263 this.all_time_slot = response.data.details.all_time_slot; 264 this.reservation_date = response.data.details.default_date; 265 this.tc = response.data.details.tc; 266 this.allowed_choose_table = response.data.details.allowed_choose_table; 267 this.room_list = response.data.details.room_list; 268 269 this.not_available_time = response.data.details.not_available_time; 270 this.guest = response.data.details.default_guest; 271 this.data_booking = response.data.details.data_booking; 272 this.details_link = response.data.details.details_link; 273 274 if(!empty(this.reservation_uuid)){ 275 this.guest = response.data.details.data_booking.guest_number_raw; 276 this.reservation_time = response.data.details.data_booking.reservation_time_raw; 277 this.first_name = response.data.details.data_booking.first_name; 278 this.last_name = response.data.details.data_booking.last_name; 279 this.email_address = response.data.details.data_booking.email_address; 280 this.special_request = response.data.details.data_booking.special_request; 281 282 this.mobile_prefix = response.data.details.data_booking.phone_prefix; 283 this.mobile_number = response.data.details.data_booking.contact_phone_without_prefix; 284 285 // this.room_uuid = response.data.details.data_booking.room_uuid; 286 // this.table_uuid = response.data.details.data_booking.table_uuid; 287 } 288 } else { 289 this.guest_list = []; 290 this.date_list = []; 291 this.time_slot = []; 292 this.all_time_slot = []; 293 this.reservation_date = ''; 294 this.tc = ''; 295 this.not_available_time = []; 296 this.data_booking = []; 297 this.allowed_choose_table = []; 298 this.room_list = []; 299 this.room_uuid = ''; 300 this.table_uuid = ''; 301 } 302 }).catch(error => { 303 // 304 }).then(data => { 305 this.loading = false; 306 }); 307 }, 308 getTimeslot(){ 309 this.loading_time_slot = true; 310 this.reservation_time = ''; 311 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&merchant_uuid="+ this.merchant_uuid ; 312 $params+="&reservation_date="+ this.reservation_date; 313 $params+="&guest="+ this.guest; 314 $params+="&id="+ this.reservation_uuid; 315 axios({ 316 method: 'POST', 317 url: this.ajax_url+"/Gettimeslot" , 318 data : $params, 319 timeout: $timeout, 320 }).then( response => { 321 if(response.data.code==1){ 322 this.time_slot = response.data.details.time_slot; 323 this.all_time_slot = response.data.details.all_time_slot; 324 //this.guest_list = response.data.details.guest_list; 325 this.not_available_time = response.data.details.not_available_time; 326 } else { 327 this.time_slot = []; 328 this.all_time_slot = []; 329 //this.guest_list = []; 330 this.not_available_time = []; 331 } 332 }).catch(error => { 333 // 334 }).then(data => { 335 this.loading_time_slot = false; 336 }); 337 }, 338 nextStep(){ 339 this.next_step_loading = true; 340 let reservation_uuid = !empty(this.reservation_uuid)?this.reservation_uuid:''; 341 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&merchant_uuid="+ this.merchant_uuid ; 342 $params+="&reservation_date="+ this.reservation_date; 343 $params+="&reservation_time="+ this.reservation_time; 344 $params+="&guest="+ this.guest; 345 $params+="&id="+ reservation_uuid; 346 347 axios({ 348 method: 'POST', 349 url: this.ajax_url+"/SetBooking" , 350 data : $params, 351 timeout: $timeout, 352 headers : { 353 Authorization : `token ${getCustomerToken()}` 354 } 355 }).then( response => { 356 if(response.data.code==1){ 357 this.steps = 2; 358 this.reservation_info = response.data.details; 359 this.table_list = response.data.details.table_list; 360 if(!empty(this.reservation_uuid)){ 361 this.room_uuid = response.data.details.room_uuid; 362 this.table_uuid = response.data.details.table_uuid; 363 } else { 364 this.room_uuid = ''; 365 this.table_uuid = ''; 366 } 367 368 this.user_data = response.data.details.user_data; 369 if (Object.keys(this.user_data).length > 0) { 370 this.first_name = this.user_data.first_name; 371 this.last_name = this.user_data.last_name; 372 this.email_address = this.user_data.email_address; 373 this.mobile_prefix = this.user_data.phone_prefix; 374 this.mobile_number = this.user_data.contact_number_without_prefix; 375 } 376 377 } else { 378 this.reservation_info = []; 379 this.table_list = []; 380 ElementPlus.ElNotification({ 381 title: "", 382 message: response.data.msg, 383 position: 'bottom-right', 384 type: 'warning',
385 }); 386 } 387 }).catch(error => { 388 // 389 }).then(data => { 390 this.next_step_loading = false; 391 }); 392 }, 393 submit(){ 394 this.submit_loading = true; 395 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&merchant_uuid="+ this.merchant_uuid ; 396 $params+="&reservation_date="+ this.reservation_date; 397 $params+="&reservation_time="+ this.reservation_time; 398 $params+="&guest="+ this.guest; 399 $params+="&first_name="+ this.first_name; 400 $params+="&last_name="+ this.last_name; 401 $params+="&email_address="+ this.email_address; 402 $params+="&mobile_prefix="+ this.mobile_prefix; 403 $params+="&mobile_number="+ this.mobile_number; 404 $params+="&room_uuid="+ this.room_uuid; 405 $params+="&table_uuid="+ this.table_uuid; 406 $params+="&special_request="+ this.special_request; 407 $params+="&recaptcha_response="+ this.recaptcha_response; 408 $params+="&id="+ this.reservation_uuid; 409 axios({ 410 method: 'POST', 411 url: this.ajax_url+"/ReserveTable" , 412 data : $params, 413 timeout: $timeout, 414 headers : { 415 Authorization : `token ${getCustomerToken()}` 416 } 417 }).then( response => { 418 if(response.data.code==1){ 419 this.steps = 3; 420 this.success_data = response.data.details; 421 this.track_reservation_link = response.data.details.track_reservation_link; 422 setTimeout(() => { 423 const el = document.getElementById('reservation_ty'); 424 el.scrollIntoView({behavior: "smooth"}); 425 }, 500); 426 427 this.room_uuid = ''; 428 this.table_uuid = ''; 429 } else { 430 this.success_data = []; 431 this.track_reservation_link = ''; 432 ElementPlus.ElNotification({ 433 title: "", 434 message: response.data.msg, 435 position: 'bottom-right', 436 type: 'warning', 437 }); 438 } 439 }).catch(error => { 440 // 441 }).then(data => { 442 this.submit_loading = false; 443 }); 444 }, 445 resetReservation(){ 446 this.steps = 1; 447 this.getBookingAttributes(); 448 this.guest = 1; 449 this.reservation_date = ''; 450 this.reservation_time = ''; 451 }, 452 recaptchaVerified(response) { 453 this.recaptcha_response = response; 454 }, 455 recaptchaExpired() { 456 if ( this.booking_enabled_capcha){ 457 this.$refs.vueRecaptcha.reset(); 458 } 459 }, 460 recaptchaFailed() { 461 462 }, 463 isNotavailable(bookingTime){ 464 if (Object.keys(this.not_available_time).length > 0) { 465 if(this.not_available_time.includes(bookingTime)===true){ 466 return true; 467 } 468 } 469 return false; 470 }, 471 trackReservation(){ 472 window.location.href = this.track_reservation_link; 473 }, 474 clearTableList(){ 475 this.table_uuid = ''; 476 } 477 }, 478 template:` 479 480 <template v-if="steps==2"> 481 482 <div class="mt-2 mb-2" v-loading="submit_loading"> 483 484 <div class="d-flex align-items-center mb-2"> 485 <b><i class="zmdi zmdi-arrow-left mr-2"></i></b> 486 <a @click="this.steps=1" class="mr-2"><b>{{label.back}}</b></a> 487 </div> 488 489 <h5>{{label.reservation_details}}</h5> 490 <p class="m-0">{{reservation_info.full_time}}</p> 491 <p class="m-0">{{reservation_info.guest}}</p> 492 493 <h5 class="mt-3">{{label.personal_details}}</h5> 494 495 <div class="row mb-3"> 496 <div class="col"> 497 <p class="m-0 p-0 ">{{label.first_name}}</p> 498 <el-input v-model="first_name" size="large" /> 499 </div> 500 <div class="col"> 501 <p class="m-0 p-0">{{label.last_name}}</p> 502 <el-input v-model="last_name" size="large" /> 503 </div> 504 </div> 505 <!-- row --> 506 507 <div class="row mb-3"> 508 <div class="col"> 509 <p class="m-0 p-0">{{label.email_address}}</p> 510 <el-input v-model="email_address" size="large" /> 511 </div> 512 </div> 513 <!-- row --> 514 515 <component-phone 516 :ajax_url="ajax_url" 517 v-model:mobile_number="mobile_number" 518 v-model:mobile_prefix="mobile_prefix" 519 > 520 </component-phone> 521 522 <template v-if="allowed_choose_table"> 523 <div class="row mb-3"> 524 <div class="col"> 525 <p class="m-0 p-0">{{label.room_name}}</p> 526 <el-select v-model="room_uuid" @change="clearTableList" class="m-2" placeholder="Select" size="large"> 527 <el-option 528 v-for="item in this.room_list" 529 :key="item.value" 530 :label="item.label" 531 :value="item.value" 532 /> 533 </el-select> 534 </div> 535 536 <div class="col"> 537 <p class="m-0 p-0">{{label.table_name}}</p> 538 <el-select v-model="table_uuid" class="m-2" placeholder="Select" size="large"> 539 <el-option 540 v-for="item in this.table_list[room_uuid]" 541 :key="item.value" 542 :label="item.label" 543 :value="item.value" 544 /> 545 </el-select> 546 </div> 547 548 </div> 549 </template> 550 <!-- row --> 551 552 <div class="row mb-3"> 553 <div class="col "> 554 <p class="m-0 p-0">{{label.special_request}}</p> 555 <el-input 556 v-model="special_request" 557 :rows="3" 558 type="textarea" 559 > 560 </el-input> 561 </div> 562 </div> 563 <!-- row --> 564 565 <p v-html="label.agree"></p> 566 567 <vue-recaptcha 568 :sitekey="captcha_site_key" 569 size="normal" 570 theme="light" 571 :tabindex="0" 572 :is_enabled="booking_enabled_capcha" 573 @verify="recaptchaVerified" 574 @expire="recaptchaExpired" 575 @fail="recaptchaFailed" 576 ref="vueRecaptcha"> 577 </vue-recaptcha> 578 579 </div> 580 <!-- mt --> 581 582 <div class="mt-3 mb-1"> 583 <el-button @click="submit" size="large" type="success" style="width:100%;" 584 :disabled="!reservationValid" 585 :loading="submit_loading" 586 >{{label.reserve}}</el-button> 587 </div> 588 589 </template> 590 591 <template v-else-if="steps==3"> 592 593 <div id="reservation_ty" class="card border p-3"> 594 <div class="text-center"> 595 <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> 596 </svg> 597 598 <template v-if="isEdit"> 599 <h4>{{label.reservation_updated}}</h4> 600 <p>{{label.reservation_succesful_notes}}</p> 601 </template> 602 <template> 603 <h4>{{label.reservation_succesful}}</h4> 604 <p>{{label.reservation_succesful_notes}}</p> 605 </template> 606 607 <h6>{{success_data.full_time}}</h6> 608 <p>{{success_data.guest}}</p> 609 <p>{{label.reservation_id}}
609# <span class="text-success">{{success_data.reservation_id}}</span></p> 610 611 <el-button 612 v-if="!isEdit" 613 type="success" 614 @click="resetReservation()" 615 > 616 {{label.reserved_table_again}} 617 </el-button> 618 619 <el-button 620 @click="trackReservation" 621 > 622 {{label.track_your_reservation}} 623 </el-button> 624 625 </div> 626 </div> 627 628 </template> 629 <template v-else> 630 631 632 <div v-if="isEdit" class="d-flex align-items-center mb-2"> 633 <b><i class="zmdi zmdi-arrow-left mr-2"></i></b> 634 <a :href="details_link" class="mr-2"><b>{{label.back}}</b></a> 635 </div> 636 637 638 <div class="row"> 639 <div class="col-4 "> 640 <p class="m-0 p-0 ml-2">{{label.guest}}</p> 641 <el-select v-model="guest" @change="getTimeslot" class="m-2" placeholder="Select" size="large"> 642 <el-option 643 v-for="item in this.guest_list" 644 :key="item.value" 645 :label="item.label" 646 :value="item.value" 647 /> 648 </el-select> 649 </div> 650 651 <div class="col "> 652 <p class="m-0 p-0 ml-2">{{label.date}}</p> 653 <el-select v-model="reservation_date" @change="getTimeslot" class="m-2" placeholder="Select" size="large"> 654 <el-option 655 v-for="item in this.date_list" 656 :key="item.value" 657 :label="item.label" 658 :value="item.value" 659 /> 660 </el-select> 661 </div> 662 663 <div class="col d-none d-lg-block"> 664 <p class="m-0 p-0 ml-2 mb-2">{{label.time}}</p> 665 <el-input v-model="reservation_time" size="large" disabled /> 666 </div> 667 </div> 668 669 <div class="mt-2 mb-2" v-loading="loading_time_slot"> 670 <template v-if="hasTimeSlot"> 671 <el-radio-group v-model="reservation_time" size="large"> 672 <template v-for="items in time_slot"> 673 <template v-for="(item,index) in items"> 674 <el-radio-button :label="index" :disabled="isNotavailable(index)" >{{item}}</el-radio-button>
674 675 </template> 676 </template> 677 </el-radio-group> 678 </template> 679 <template v-else> 680 <el-alert 681 v-if="!loading" 682 :title="label.no_results" 683 type="error" 684 :closable="false" 685 > 686 </el-alert> 687 </template> 688 </div> 689 690 <template v-if="this.tc"> 691 <div class="mt-2 mb-3"> 692 <h6>{{label.terms}}</h6> 693 <div v-html="this.tc"></div> 694 </div> 695 </template> 696 697 <div class="mt-3 mb-1"> 698 <el-button @click="nextStep" size="large" type="success" style="width:100%;" 699 :disabled="!bookingValid" 700 :loading="next_step_loading" 701 > 702 {{label.continue}} 703 </el-button> 704 </div> 705 706 </template> 707 ` 708}; 709 710const ComponentsBookingDetails = { 711 props : ['id','ajax_url'], 712 data() { 713 return { 714 steps : 1, 715 loading : false, 716 data : [], 717 merchant : [], 718 cancel_link : '', 719 update_link : '', 720 cancel_reservation_stats : [], 721 pending_reservation_stats : [], 722 confirm_reservation_stats : [], 723 completed_reservation_stats : [] 724 } 725 }, 726 created() { 727 this.getBookingDetails(); 728 }, 729 computed: { 730 hasData(){ 731 if (Object.keys(this.data).length > 0) { 732 return true; 733 } 734 return false; 735 }, 736 hasMerchant(){ 737 if (Object.keys(this.merchant).length > 0) { 738 return true; 739 } 740 return false; 741 }, 742 CanCancelReservation(){ 743 if(this.cancel_reservation_stats.includes(this.data.status)===true){ 744 return false; 745 } 746 return true 747 } 748 }, 749 methods: { 750 getBookingDetails(){ 751 this.loading = true; 752 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&id="+ this.id ; 753 axios({ 754 method: 'POST', 755 url: this.ajax_url+"/BookingDetails" , 756 data : $params, 757 timeout: $timeout, 758 headers : { 759 Authorization : `token ${getCustomerToken()}` 760 } 761 }).then( response => { 762 if(response.data.code==1){ 763 this.data = response.data.details.data; 764 this.merchant = response.data.details.merchant; 765 this.cancel_link = response.data.details.cancel_link; 766 this.update_link = response.data.details.update_link; 767 768 this.cancel_reservation_stats = response.data.details.cancel_reservation_stats; 769 this.pending_reservation_stats = response.data.details.pending_reservation_stats; 770 this.confirm_reservation_stats = response.data.details.confirm_reservation_stats; 771 this.completed_reservation_stats = response.data.details.completed_reservation_stats; 772 773 this.setSteps(); 774 775 } else { 776 this.data = []; 777 this.merchant = []; 778 this.cancel_link = ''; 779 this.update_link = ''; 780 781 this.cancel_reservation_stats = []; 782 this.pending_reservation_stats = []; 783 this.confirm_reservation_stats = []; 784 this.completed_reservation_stats = []; 785 } 786 }).catch(error => { 787 // 788 }).then(data => { 789 this.loading = false; 790 }); 791 }, 792 setSteps(){ 793 dump('setSteps'); 794 if(this.confirm_reservation_stats.includes(this.data.status)===true){ 795 this.steps = 2; 796 } else if ( this.completed_reservation_stats.includes(this.data.status)===true ){ 797 this.steps = 3; 798 } else if ( this.cancel_reservation_stats.includes(this.data.status)===true ){ 799 this.steps = 4; 800 } else { 801 this.steps = 1; 802 } 803 }, 804 toCancelPage(){ 805 window.location.href = this.cancel_link; 806 }, 807 toUpdatePage(){ 808 window.location.href = this.update_link; 809 } 810 }, 811 template: '#xtemplate_booking_details', 812}; 813 814const ComponentsBookingCancel = { 815 props : ['id','ajax_url','label'], 816 data() { 817 return { 818 reason : '', 819 loading : true, 820 data : [], 821 submit : false, 822 } 823 }, 824 created() { 825 this.getCancelreason() 826 }, 827 computed: { 828 hasData(){ 829 if(!empty(this.reason)){ 830 return true; 831 } 832 return false; 833 }, 834 }, 835 methods: { 836 getCancelreason(){ 837 this.loading = true; 838 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&id="+ this.id ; 839 axios({ 840 method: 'POST', 841 url: this.ajax_url+"/getCancelreason" , 842 data : $params, 843 timeout: $timeout, 844 }).then( response => { 845 if(response.data.code==1){ 846 this.data = response.data.details.data; 847 } else { 848 this.data = []; 849 } 850 }).catch(error => { 851 // 852 }).then(data => { 853 this.loading = false; 854 }); 855 }, 856 ConfirmcancelReservation(){ 857 ElementPlus.ElMessageBox.confirm( 858 this.label.confirm, 859 this.label.cancel_reservation, 860 { 861 confirmButtonText: this.label.yes, 862 cancelButtonText: this.label.cancel, 863 type: 'warning',
864 } 865 ) 866 .then(() => { 867 dump('here') 868 this.CancelReservation(); 869 }) 870 .catch(() => { 871 // 872 }); 873 874 }, 875 CancelReservation(){ 876 this.submit = true; 877 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') + "&id="+ this.id ; 878 $params+="&reason="+ this.reason; 879 axios({ 880 method: 'POST', 881 url: this.ajax_url+"/CancelReservation" , 882 data : $params, 883 timeout: $timeout, 884 headers : { 885 Authorization : `token ${getCustomerToken()}` 886 }, 887 }).then( response => { 888 if(response.data.code==1){ 889 ElementPlus.ElNotification({ 890 title: "", 891 message: response.data.msg, 892 position: 'bottom-right', 893 type: 'success', 894 }); 895 setTimeout(() => { 896 window.location.href = response.data.details.redirect_url; 897 }, 500); 898 } else { 899 this.submit = false; 900 ElementPlus.ElNotification({ 901 title: "", 902 message: response.data.msg, 903 position: 'bottom-right', 904 type: 'warning', 905 }); 906 } 907 }).catch(error => { 908 // 909 }).then(data => { 910 911 }); 912 }, 913 }, 914 template: '#xtemplate_booking_cancel', 915}; 916 917const app_booking = Vue.createApp({ 918 components: { 919 'component-reservation' : ComponentsReservation, 920 'booking-details' : ComponentsBookingDetails, 921 'booking-cancel' : ComponentsBookingCancel 922 }, 923 created() { 924 // 925 }, 926}); 927app_booking.use(ElementPlus); 928const vm_booking = app_booking.mount('#vue-booking-reservation'); 929 930// MANAGE BOOKING 931const ComponentsBookingList = { 932 template: '#xtemplate_booking_list', 933 props :['api_url','status_list','q'], 934 data() { 935 return { 936 tab : 'all', 937 page : 1, 938 data : [], 939 code : 0, 940 loading : false, 941 load_more : false, 942 merchant : [], 943 table_list : [], 944 show_next : false, 945 awaitingSearch : false, 946 } 947 }, 948 created() {
949 this.BookingList(); 950 }, 951 computed: { 952 hasData(){ 953 if (Object.keys(this.data).length > 0) { 954 return true; 955 } 956 return false; 957 }, 958 statusColor(){ 959 //:style="{background:order_status.background_color_hex,color:order_status.font_color_hex}" 960 return "{background:'#f44336'}"; 961 }, 962 }, 963 watch: { 964 q(newsearch,oldsearch){ 965 if (!this.awaitingSearch) { 966 if(empty(newsearch)){ 967 return false; 968 } 969 970 setTimeout(() => { 971 this.resetData(); 972 this.awaitingSearch = false; 973 }, 1000); // 1 sec delay 974 this.awaitingSearch = true; 975 976 } 977 }, 978 awaitingSearch(newval,oldval){ 979 this.$emit("setSearch",newval); 980 }, 981 }, 982 methods: { 983 resetData(){ 984 this.page = 1; 985 this.tab = 'all'; 986 this.data = []; 987 this.merchant = []; 988 this.table_list = []; 989 this.BookingList(false); 990 }, 991 loadMore(data){ 992 this.page = data; 993 this.BookingList(true); 994 }, 995 tabChange(data){ 996 this.page = 1; 997 this.data = []; 998 this.merchant = []; 999 this.BookingList(false); 1000 }, 1001 BookingList(data){ 1002 if(data){ 1003 this.load_more = true; 1004 } else { 1005 this.loading = true; 1006 } 1007 let $params = 'YII_CSRF_TOKEN=' + $('meta[name=YII_CSRF_TOKEN]').attr('content') +"&status="+ this.tab + "&page="+this.page + "&q="+ this.q; 1008 axios({ 1009 method: 'POST', 1010 url: this.api_url+"/BookingList" , 1011 data : $params, 1012 timeout: $timeout, 1013 headers : { 1014 Authorization : `token ${getCustomerToken()}` 1015 }, 1016 }).then( response => { 1017 this.code = response.data.code; 1018 if(response.data.code==1){ 1019 this.data.push(response.data.details.data); 1020 this.merchant = response.data.details.merchant; 1021 this.table_list = response.data.details.table_list; 1022 this.show_next = response.data.details.show_next; 1023 this.page = response.data.details.page_raw; 1024 } 1025 }).catch(error => { 1026 // 1027 }).then(data => { 1028 this.load_more = false; 1029 this.loading = false; 1030 }); 1031 }, 1032 // 1033 }, 1034}; 1035 1036const manage_booking = Vue.createApp({ 1037 components: { 1038 'component-booking-list' : ComponentsBookingList, 1039 }, 1040 data() { 1041 return { 1042 q : '', 1043 awaitingSearch : false, 1044 } 1045 }, 1046 methods: { 1047 setSearch(data){ 1048 this.awaitingSearch = data; 1049 }, 1050 resetData(){ 1051 this.q = ''; 1052 setTimeout(() => { 1053 this.$refs.booking_list.resetData(); 1054 }, 500); 1055 }, 1056 }, 1057}); 1058manage_booking.use(ElementPlus); 1059const vm_manage_booking = manage_booking.mount('#vue-my-bookings'); 1060 1061 1062}); 1063// end ready 1064 1065 1066})(jQuery); 1067/*end strict*/
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.