thebola-cms/resources/js/main.js

import AOS from "aos";
import jQuery from "jquery";
import queryString from "query-string";
//import API from './api/api';

const server_url = "https://thebola.club";

export default class API {
    constructor() {
        this.prefix = server_url;
        this.url = "/api";
        this.test = 200;
    }

    listLocation({ _search, _page = 1, _pagesize = 20, _callback = () => {} }) {

        let url = `${this.prefix}${
            this.url
        }/public/event/location?${queryString.stringify({
            _search,
            _page,
            _pagesize,
        })}`;


        fetch(url)
            .then(response => response.json())
            .then(data => _callback(data) )
            .catch(err => console.log(err))

    }
}

const $ = jQuery;
const api = new API();

var bookingList = [];
var bookingRules = [];

setTimeout(() => {
    console.log("AOS init");
    AOS.init();
}, 500);

$(document).ready(function () {


    // this section is for booking page
    //check if booking section exist in any page
    let bookingContainer = $('#booking-section');
    if(bookingContainer.length > 0){
        api.listLocation({
            _search: "",
            _page: 1,
            _pagesize: 20,
            _callback: (data) => {
                console.log("fetch")
                localStorage.setItem('thebola-booking', JSON.stringify(data))
                bookingList = data;

                // set date max and min
                let { maxDate, minDate } = createDateInputWithRange(14)
                $('#input-booking-date').attr("min", minDate)
                $('#input-booking-date').attr("max", maxDate)

            },
        });
    }


    $(".booking-item").on("click", function () {

        // remove all child active class, then add active on clicked
        let bookingContainer = $('.booking-container');
        $(bookingContainer).find(".booking-item").removeClass("active")
        $(this).addClass("active");

        let fieldID = $(this).data('fieldid');

        //ensure everything exist
        if(bookingList === undefined || bookingList.length == 0){
            bookingList = localStorage.getItem('thebola-booking')
        }

        if(fieldID && bookingList){

            let { results } = bookingList;
            let slots = results.filter( data => data.id == fieldID )
            let { rules } = slots[0].slot_rules
            bookingRules = rules

        }else{
            console.log("no booking data")
        }


    });

    $('#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"));
            $("#input-booking-slot").children(".select-value").remove();

            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) {
        // Get the value of the input element
        var selectedDate = inputElement.value;

        // Create a new Date object from the input date string
        var date = new Date(selectedDate);

        // Array of day names
        var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        // Get the day of the week (0 for Sunday, 1 for Monday, ..., 6 for Saturday)
        var dayIndex = date.getDay();

        // Return the name of the day corresponding to the day index
        return dayNames[dayIndex];
    }


});