123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253 |
- import AOS from "aos";
- import jQuery from "jquery";
- import API from './api/api';
-
- const $ = jQuery;
- const api = new API();
-
- var bookingRules = [];
-
- setTimeout(() => {
- console.log("AOS init");
- AOS.init();
- }, 500);
-
- $(document).ready(function () {
-
-
- $('.article-carousel-item').on('click', function(){
-
- let redirectlink = $(this).data('href')
- location.href = redirectlink;
- })
-
- $('#contact-form').on('submit', function(e){
- e.preventDefault();
- let name = $(this).find("#name").val();
- let email = $(this).find("#email").val();
- let message = $(this).find("#message").val();
- let submitButton = $(this).find('#submitButton');
- let loadingSpan = document.createElement('span');
-
- $(submitButton).prop("disabled",true);
- $(loadingSpan).attr("role", "status");
- $(loadingSpan).attr("aria-hidden", "true");
- $(loadingSpan).addClass("spinner-border spinner-border-sm");
- submitButton.text("Sending ");
- $(submitButton).append(loadingSpan)
-
- const _callback = (resp) => {
-
- let {status} = resp
- if(status === "Success"){
- submitButton.text("Success");
- $("#name").val("");
- $("#email").val("");
- $("#message").val("");
- } else {
- submitButton.text("Fail");
- }
-
- setTimeout(()=>{
- $(submitButton).prop("disabled",false);
- submitButton.text("Submit");
- },1000)
- }
-
- api.enquiry({name, email, message}, _callback)
-
- })
-
- // this section is for booking page
- //check if booking section exist in any page
- let bookingContainer = $('#booking-section');
- if(bookingContainer.length > 0){
-
- api.listState({
- _callback: ({state_city}) => {
-
- const selectLocationInput = $("#select-location");
-
- $(selectLocationInput).children(".select-value").remove()
-
- if(Array.isArray(state_city)){
- state_city.forEach(({state, city}, i) => {
- let newOption = document.createElement('option');
- $(newOption).attr("id", `location_${i}`)
- $(newOption).attr("value",JSON.stringify({state,city}))
- $(newOption).addClass("select-value")
- newOption.text = `${city}, ${state}`
- $(selectLocationInput).append(newOption)
- });
- }
-
- $(selectLocationInput).on('change', ()=>{
- resetField()
- })
-
- }
- })
-
- // set date max and min
- let { maxDate, minDate } = createDateInputWithRange(14)
- let inputDate = $('#input-booking-date')
- $(inputDate).attr("min", minDate)
- $(inputDate).attr("max", maxDate)
- resetDate()
-
- }
-
- $("#select-location").on('change', function(){
-
- resetDate()
- resetRules()
- resetField()
-
- if(this.value !== "default" ){
- let {state, city} = JSON.parse(this.value);
-
- api.listLocation({
- state,
- city,
- _callback: ({field_location}) => {
-
- let template = $('#field-location-template')
- let container = $(template).parent()
-
- //reset eveything
- $(container).children(".select-field").remove()
-
- try{
-
- field_location.forEach(({field_name, city, state, photo_path}) => {
- let newField = $(template).clone()
- $(newField).css('display','block')
- $(newField).removeAttr("id")
- $(newField).addClass("select-field")
- $(newField).find('.field-location-text').text("")
- $(newField).on('click', ()=>{ handleClickFieldLocation(city, state, field_name, newField) })
- $(newField).find('.field-location-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
- $(container).append(newField)
-
- });
-
- }catch(err){
- console.log(err)
- }
- },
- });
- }
-
- })
-
-
- const handleClickFieldLocation = function (city, state, field_name, refElem) {
-
- $("#field-location-container").find(".select-field").removeClass("active")
- $(refElem).addClass("active")
- resetDate()
- resetRules()
- resetField()
-
- api.listField({state, city, field_name, _callback:({results})=>{
-
- let container = $('#field-container')
- let template = $('#field-template')
- try{
-
- results.forEach(({location_name, photo_path, slot_rules}) => {
-
- let newField = $(template).clone()
- $(newField).css('display','block')
- $(newField).removeAttr("id")
- $(newField).addClass("select-field")
- $(newField).find('.field-text').text(location_name)
- $(newField).on('click', ()=>{ handleClickField(slot_rules, newField)})
- $(newField).find('.field-img').attr("style", `background-image:url(https://thebola.club/files/${photo_path})`)
- $(container).append(newField)
-
- });
-
- }catch(err){
- console.log(err)
- }
-
- }})
-
- }
-
- const handleClickField = function (slot_rules,refElem){
-
- // remove all child active class, then add active on clicked
- let fieldContainer = $('#field-container');
- $(fieldContainer).find(".select-field").removeClass("active")
- $(refElem).addClass("active");
- resetRules()
- resetDate()
- bookingRules = slot_rules.rules
-
-
- }
-
- $('#input-booking-date').change(function() {
-
-
- if(bookingRules){
-
- // render rule of slot base on current input value date
- var dayName = getDayNameFromInput(document.getElementById("input-booking-date"));
- resetRules()
-
- setTimeout(() => {
-
- // append slot list
- bookingRules[dayName].forEach(({end_time, start_time, price, id}) => {
- let newOption = document.createElement('option');
- $(newOption).attr("id", id)
- $(newOption).addClass("select-value")
- newOption.text = `${start_time} - ${end_time} (RM ${price})`
- $("#input-booking-slot").append(newOption)
- });
-
- }, 1000);
-
- }
- });
-
- function createDateInputWithRange(days) {
-
- var today = new Date();
-
- var futureDate = new Date(today.getTime() + days * 24 * 60 * 60 * 1000);
- var maxDate = futureDate.toISOString().split('T')[0];
- let minDate = today.toISOString().split('T')[0];
-
- return { maxDate, minDate };
- }
-
- function getDayNameFromInput(inputElement) {
-
- var selectedDate = inputElement.value;
- var date = new Date(selectedDate);
- var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
- var dayIndex = date.getDay();
- return dayNames[dayIndex];
-
- }
-
- function resetField(){
- $('#field-container').children(".select-field").remove()
- }
-
- function resetDate(){
- $('#input-booking-date').val("")
- }
-
- function resetRules(){
- $("#input-booking-slot").children(".select-value").remove();
- }
-
-
-
-
- });
|