Pass data from the model to js for a specific day and time

Question

I have a model in which we can choose the opening hours of the institution for each day of the week, from such and such to such and such, for example Monday 12:00 AM - 11:30 PM

 [
                'class'      => TimestampBehavior::class,
                'attributes' => [
                    ActiveRecord::EVENT_BEFORE_INSERT => ['created_at'],
                ],
                'value'      => new Expression('NOW()'),
            ],
        ];
    }

    public static function weekDays(): array
    {
        return [
            self::WEEK_DAY_MON => 'Monday',
            self::WEEK_DAY_TUE => 'Tuesday',
            self::WEEK_DAY_WED => 'Wednesday',
            self::WEEK_DAY_THU => 'Thursday',
            self::WEEK_DAY_FRI => 'Friday',
            self::WEEK_DAY_SAT => 'Saturday',
            self::WEEK_DAY_SUN => 'Sunday',
        ];
    }

    public static function getWeekDay(string $val): string
    {
        $ar = self::weekDays();

        return $ar[$val] ?? $val;
    }

    public static function hoursList(): array
    {
        $list = [];
        for ($i = 0; $i < 24; $i++) {
            $A = 'AM';
            $n = $i;
            if ($i >= 12) {
                $A = 'PM';
                $n = $i - 12;
            }

            $n = $n < 10 ? '0' . $n : $n;
            $_A = ($i === 12 ? 'AM' : $A);
            $list[$i . '.00'] = $n . '.00 ' . ($i === 0 ? 'PM' : $_A);
            $list[$i . '.30'] = $n . '.30 ' . $A;
        }
        return $list;
    }
}

Next, using the script, we pass all these fields, and in the end we can select any day, at any time, from 00:00 PM to 11:30 PM

$this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class]]);
$this->registerJs('restaurantReserve.init()');


   
                    date
                        ? (new DateTime($restaurantReservationForm->date))->format('d M') : '-- ---' ?>
                


   
                    time
                        ? WorkHours::hoursList()[$restaurantReservationForm->time] : '-- : --' ?>
                


   $v) { ?>

Here is the script

let restaurantReserve = {
    init: function () {
        let _self = this;

        $('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
            const arDate = e.date.toString().split(' ');
            let input = $('[name="RestaurantReservationForm[date]"]');
            input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
            _self.unSetError(input);
            $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
        });

        $('[aria-labelledby="reservation-time"] li a').click(function () {
            $(this).closest('ul').find('a').removeClass('active');
            $(this).addClass('active');
            let input = $('[name="RestaurantReservationForm[time]"]');
            input.val($(this).data('value'));
            _self.unSetError(input);
            $('#reservation-time .js-value').text($(this).text());
        });

        $('[aria-labelledby="reservation-person"] li a').click(function () {
            $(this).closest('ul').find('a').removeClass('active');
            $(this).addClass('active');
            let input = $('[name="RestaurantReservationForm[personCount]"]');
            input.val($(this).data('value'));
            _self.unSetError(input);
            $('#reservation-person .js-value').text($(this).data('value'));
        });
    },
    setError: function (ob) {
        $('#' + ob.data('btnId')).addClass('btn-error');
    },
    unSetError: function (ob) {
        $('#' + ob.data('btnId')).removeClass('btn-error');
    }
}

I have different establishments and each establishment has its own working hours. And I need to have a choice of time for a particular institution on a particular day. Let's say one establishment on Monday has a working time from 9:30 AM to 2.30 PM, as a result, the select should have a choice of time only in this interval.

What am I trying to do

To begin with, pass data from the database to the init function via json

$this->registerJs('restaurantReserve.init('. Json::encode($restaurant->workHours) .')');

As a result, we pass data to the script in the form of an array with a database [{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]

Here's the plug, I have the necessary data, it remains only to add the script so that for each day there is a time interval taken from this data

I need another function like

restaurantDate: function (e) {
        ...
    }

But what to do in it, I still do not quite understand

Here is a snippet of how everything should look like, now you can choose any time here, but i need to have a time interval for each day that will be transmitted from json

let restaurantReserve = {
    init: function () {
        let _self = this;
        
        $('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
            const arDate = e.date.toString().split(' ');
            let input = $('[name="RestaurantReservationForm[date]"]');
            input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
            _self.unSetError(input);
            $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
        });

        $('[aria-labelledby="reservation-time"] li a').click(function () {
            $(this).closest('ul').find('a').removeClass('active');
            $(this).addClass('active');
            let input = $('[name="RestaurantReservationForm[time]"]');
            input.val($(this).data('value'));
            _self.unSetError(input);
            $('#reservation-time .js-value').text($(this).text());
        });
    },
    setError: function (ob) {
        $('#' + ob.data('btnId')).addClass('btn-error');
    },
    unSetError: function (ob) {
        $('#' + ob.data('btnId')).removeClass('btn-error');
    }
}

restaurantReserve.init();

.btn {
    border: none;
    border-radius: 8px;
    height: 40px;
    padding: 10px 15px;
    font-weight: 800;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
}

.btn-fourth {
    text-decoration: none;
    background: #e3e5e8;
    color: #747b8b;
}

ul.with-out > li:before, .dropdown-menu li:before, ul.whithout > li:before {display:none;}

.dropdown-menu li {padding:0;}

.dropdown-menu-height-fixed {max-height:200px;overflow-y:auto;}

.dropdown-item.active, .dropdown-item:active {background:red;}

.block-shadow {box-shadow:0 2px 8px 0 rgba(32,35,44,0.05);}
.block-white {background:#fff;border-radius:8px;padding:20px;}






   
        Reserve a table
        
            
                 
                    -- ---                
            
            
                 
                    -- : --                
            
            
                                    00.00 PM
                                    00.30 AM
                                    01.00 AM
                                    01.30 AM
                                    02.00 AM
                                    02.30 AM
                                    03.00 AM
                                    03.30 AM
                                    04.00 AM
                                    04.30 AM
                                    05.00 AM
                                    05.30 AM
                                    06.00 AM
                                    06.30 AM
                                    07.00 AM
                                    07.30 AM
                                    08.00 AM
                                    08.30 AM
                                    09.00 AM
                                    09.30 AM
                                    10.00 AM
                                    10.30 AM
                                    11.00 AM
                                    11.30 AM
                                    00.00 AM
                                    00.30 PM
                                    01.00 PM
                                    01.30 PM
                                    02.00 PM
                                    02.30 PM
                                    03.00 PM
                                    03.30 PM
                                    04.00 PM
                                    04.30 PM
                                    05.00 PM
                                    05.30 PM
                                    06.00 PM
                                    06.30 PM
                                    07.00 PM
                                    07.30 PM
                                    08.00 PM
                                    08.30 PM
                                    09.00 PM
                                    09.30 PM
                                    10.00 PM
                                    10.30 PM
                                    11.00 PM
                                    11.30 PM

[{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"},{"id":87,"restaurant_id":1,"day":"Tue","open":"3.00","close":"21.00","created_at":"2022-02-22 10:56:15"},{"id":88,"restaurant_id":1,"day":"Wed","open":"4.30","close":"6.30","created_at":"2022-02-22 10:56:15"},{"id":89,"restaurant_id":1,"day":"Thu","open":"2.30","close":"7.00","created_at":"2022-02-22 10:56:15"},{"id":90,"restaurant_id":1,"day":"Fri","open":"3.00","close":"22.00","created_at":"2022-02-22 10:56:15"},{"id":91,"restaurant_id":1,"day":"Sat","open":"1.30","close":"4.30","created_at":"2022-02-22 10:56:15"},{"id":92,"restaurant_id":1,"day":"Sun","open":"3.00","close":"20.30","created_at":"2022-02-22 10:56:15"}]

[{"id":107,"restaurant_id":3,"day":"Mon","open":"1.30","close":"19.00","created_at":"2022-02-22 10:58:59"},{"id":108,"restaurant_id":3,"day":"Tue","open":"5.30","close":"8.00","created_at":"2022-02-22 10:58:59"},{"id":109,"restaurant_id":3,"day":"Wed","open":"3.00","close":"20.30","created_at":"2022-02-22 10:58:59"},{"id":110,"restaurant_id":3,"day":"Thu","open":"1.00","close":"12.30","created_at":"2022-02-22 10:58:59"},{"id":111,"restaurant_id":3,"day":"Fri","open":"2.30","close":"12.30","created_at":"2022-02-22 10:58:59"},{"id":112,"restaurant_id":3,"day":"Sat","open":"4.00","close":"22.00","created_at":"2022-02-22 10:58:59"},{"id":113,"restaurant_id":3,"day":"Sun","open":"4.00","close":"22.30","created_at":"2022-02-22 10:58:59"}]

user_436560 · Answer

Since your code is not a runnable snippet to reproduce the behavior, I will refrain from providing a full solution and, instead, I provide the means to solve the issue. Your JSON of

[{"id":"1","restaurant_id":"1","day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-15 05:00:57"}]

has a restaurant_id and a day. So, let's define a function that finds all hours for all days for a restaurant:

function getWorkHours(json, restaurant_id) {
    return json.filter(item => item.restaurant_id === restaurant_id);
}

And this is how you can find the work hours of a day for a restaurant:

function getWorkHoursForDay(json, restaurant_id, day) {
    return getWorkHours(json, restaurant_id).filter(item => item.day === day);
}

Using these functions you can get the data you need. Based on that data you can fill your HTML the way you need. If you need more information, then please provide a minimal reproducible example of your problem, a JSON input, your current HTML and the HTML you desire based on the JSON input. Then I can apply this for your structure. But, in order to do so, I need to have much more information.

EDIT

Based on the discussion we had in the comment section I have received enough information to solve the issue:

let restaurantReserve = {
        init: function () {
            let _self = this;
            
            $('#reservation-date').datepicker({startDate: '+0d'}).on('changeDate', function (e) {
                const arDate = e.date.toString().split(' ');
                let input = $('[name="RestaurantReservationForm[date]"]');
                input.val(arDate[3] + '-' + (e.date.getMonth() + 1) + '-' + arDate[2]);
                _self.unSetError(input);
                $('#reservation-date .js-value').text(arDate[2] + ' ' + arDate[1]);
            });

            $('[aria-labelledby="reservation-time"] li a').click(function () {
                $(this).closest('ul').find('a').removeClass('active');
                $(this).addClass('active');
                let input = $('[name="RestaurantReservationForm[time]"]');
                input.val($(this).data('value'));
                _self.unSetError(input);
                $('#reservation-time .js-value').text($(this).text());
            });
        },
        setError: function (ob) {
            $('#' + ob.data('btnId')).addClass('btn-error');
        },
        unSetError: function (ob) {
            $('#' + ob.data('btnId')).removeClass('btn-error');
        }
    }

    restaurantReserve.init();
    
    let json = [{"id":86,"restaurant_id":1,"day":"Mon","open":"9.30","close":"14.30","created_at":"2022-02-22 10:56:15"},{"id":87,"restaurant_id":1,"day":"Tue","open":"3.00","close":"21.00","created_at":"2022-02-22 10:56:15"},{"id":88,"restaurant_id":1,"day":"Wed","open":"4.30","close":"6.30","created_at":"2022-02-22 10:56:15"},{"id":89,"restaurant_id":1,"day":"Thu","open":"2.30","close":"7.00","created_at":"2022-02-22 10:56:15"},{"id":90,"restaurant_id":1,"day":"Fri","open":"3.00","close":"22.00","created_at":"2022-02-22 10:56:15"},/*{"id":91,"restaurant_id":1,"day":"Sat","open":"1.30","close":"4.30","created_at":"2022-02-22 10:56:15"},*/{"id":91,"restaurant_id":1,"day":"Sat","open":"0","close":"4.30","created_at":"2022-02-22 10:56:15"},{"id":92,"restaurant_id":1,"day":"Sun","open":"3.00","close":"20.30","created_at":"2022-02-22 10:56:15"}, {"id":107,"restaurant_id":3,"day":"Mon","open":"1.30","close":"19.00","created_at":"2022-02-22 10:58:59"},{"id":108,"restaurant_id":3,"day":"Tue","open":"5.30","close":"8.00","created_at":"2022-02-22 10:58:59"},{"id":109,"restaurant_id":3,"day":"Wed","open":"3.00","close":"20.30","created_at":"2022-02-22 10:58:59"},{"id":110,"restaurant_id":3,"day":"Thu","open":"1.00","close":"12.30","created_at":"2022-02-22 10:58:59"},{"id":111,"restaurant_id":3,"day":"Fri","open":"2.30","close":"12.30","created_at":"2022-02-22 10:58:59"},{"id":112,"restaurant_id":3,"day":"Sat","open":"4.00","close":"22.00","created_at":"2022-02-22 10:58:59"},{"id":113,"restaurant_id":3,"day":"Sun","open":"4.00","close":"22.30","created_at":"2022-02-22 10:58:59"}];

    function getWorkHours(json, restaurant_id) {
        return json.filter(item => item.restaurant_id == restaurant_id);
    }

    function getWorkHoursForDay(json, restaurant_id, day) {
        return getWorkHours(json, restaurant_id).filter(item => item.day === day)[0];
    }

    function filterTimes() {
        let restaurantID = document.getElementById("restaurantid").value;
        let dayofweek = document.getElementById("dayofweek").value;
        if ((["1", "3"].indexOf(restaurantID) >= 0) && ((["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(dayofweek)) >= 0)) {
            let workHours = getWorkHoursForDay(json, restaurantID, dayofweek);
            let items = document.querySelectorAll(".dropdown-menu.dropdown-menu-height-fixed li a");
            for (let item of items) {
                let itemValueParts = item.innerText.split(" ");
                itemValue = parseFloat(itemValueParts[0]) + (((itemValueParts[1] === "PM") && (itemValueParts[0] !== "00.00")) ? 12 : 0);
                item.parentNode.classList[((itemValue < parseFloat(workHours.open)) || (itemValue > parseFloat(workHours.close)) ? "add" : "remove")]("invisible");
            }
        }
    }

.btn {
        border: none;
        border-radius: 8px;
        height: 40px;
        padding: 10px 15px;
        font-weight: 800;
        font-size: 14px;
        margin-right: 10px;
        cursor: pointer;
    }

    .btn-fourth {
        text-decoration: none;
        background: #e3e5e8;
        color: #747b8b;
    }
    
    .invisible {
        display: none;
    }

    ul.with-out > li:before, .dropdown-menu li:before, ul.whithout > li:before {display:none;}

    .dropdown-menu li {padding:0;}

    .dropdown-menu-height-fixed {max-height:200px;overflow-y:auto;}

    .dropdown-item.active, .dropdown-item:active {background:red;}

    .block-shadow {box-shadow:0 2px 8px 0 rgba(32,35,44,0.05);}
    .block-white {background:#fff;border-radius:8px;padding:20px;}


    
    

    
       
            Reserve a table
            
                
                     
                        -- ---                
                
                
                     
                        -- : --                
                
                
                
                
                                        00.00 PM
                                        00.30 AM
                                        01.00 AM
                                        01.30 AM
                                        02.00 AM
                                        02.30 AM
                                        03.00 AM
                                        03.30 AM
                                        04.00 AM
                                        04.30 AM
                                        05.00 AM
                                        05.30 AM
                                        06.00 AM
                                        06.30 AM
                                        07.00 AM
                                        07.30 AM
                                        08.00 AM
                                        08.30 AM
                                        09.00 AM
                                        09.30 AM
                                        10.00 AM
                                        10.30 AM
                                        11.00 AM
                                        11.30 AM
                                        00.00 AM
                                        00.30 PM
                                        01.00 PM
                                        01.30 PM
                                        02.00 PM
                                        02.30 PM
                                        03.00 PM
                                        03.30 PM
                                        04.00 PM
                                        04.30 PM
                                        05.00 PM
                                        05.30 PM
                                        06.00 PM
                                        06.30 PM
                                        07.00 PM
                                        07.30 PM
                                        08.00 PM
                                        08.30 PM
                                        09.00 PM
                                        09.30 PM
                                        10.00 PM
                                        10.30 PM
                                        11.00 PM
                                        11.30 PM

Pass data from the model to js for a specific day and time

1 Answers