'Pass data from the model to js for a specific day and time
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
<?php
namespace common\models;
use yii\behaviors\TimestampBehavior;
use yii\db\ActiveRecord;
use yii\db\Expression;
class WorkHours extends _source_WorkHours
{
public const WEEK_DAY_MON = 'Mon';
public const WEEK_DAY_TUE = 'Tue';
public const WEEK_DAY_WED = 'Wed';
public const WEEK_DAY_THU = 'Thu';
public const WEEK_DAY_FRI = 'Fri';
public const WEEK_DAY_SAT = 'Sat';
public const WEEK_DAY_SUN = 'Sun';
/**
* {@inheritdoc}
*/
public function behaviors(): array
{
return [
'timestamp' => [
'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()');
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('date') ? 'btn-error' : '' ?>" id="reservation-date" data-date="<?= $restaurantReservationForm->getDate()
? $restaurantReservationForm->getDate()->format('m/d/Y') : '' ?>>">
<span class="icon br-calender"></span> <span class="js-value">
<?= $restaurantReservationForm->date
? (new DateTime($restaurantReservationForm->date))->format('d M') : '-- ---' ?>
</span>
</a>
<a class="btn btn-fourth <?= $restaurantReservationForm->getErrors('time') ? 'btn-error' : '' ?>" id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon br-clock"></span> <span class="js-value">
<?= $restaurantReservationForm->time
? WorkHours::hoursList()[$restaurantReservationForm->time] : '-- : --' ?>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
<?php foreach (WorkHours::hoursList() as $k => $v) { ?>
<li>
<a class="dropdown-item <?= $restaurantReservationForm->time === $k ? 'active' : ''
?>" href="#" data-value="<?= $k ?>">
<?= $v ?>
</a>
</li>
<?php } ?>
</ul>
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;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<form id="reservation" action="/restaurants/123/" method="post">
<div class="block-shadow block-white mb-4">
<h5 class="fw-bold mb-3">Reserve a table</h5>
<div class="btn-s">
<a class="btn btn-fourth "
id="reservation-date"
data-date=">">
<span class="icon br-calender"></span> <span class="js-value">
-- --- </span>
</a>
<a class="btn btn-fourth "
id="reservation-time" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon br-clock"></span> <span class="js-value">
-- : -- </span>
</a>
<ul class="dropdown-menu dropdown-menu-height-fixed" aria-labelledby="reservation-time">
<li><a class="dropdown-item " href="#" data-value="0.00">00.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="0.30">00.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="1.00">01.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="1.30">01.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="2.00">02.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="2.30">02.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="3.00">03.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="3.30">03.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="4.00">04.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="4.30">04.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="5.00">05.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="5.30">05.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="6.00">06.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="6.30">06.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="7.00">07.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="7.30">07.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="8.00">08.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="8.30">08.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="9.00">09.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="9.30">09.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="10.00">10.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="10.30">10.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="11.00">11.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="11.30">11.30 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="12.00">00.00 AM</a></li>
<li><a class="dropdown-item " href="#" data-value="12.30">00.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="13.00">01.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="13.30">01.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="14.00">02.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="14.30">02.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="15.00">03.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="15.30">03.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="16.00">04.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="16.30">04.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="17.00">05.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="17.30">05.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="18.00">06.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="18.30">06.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="19.00">07.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="19.30">07.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="20.00">08.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="20.30">08.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="21.00">09.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="21.30">09.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="22.00">10.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="22.30">10.30 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="23.00">11.00 PM</a></li>
<li><a class="dropdown-item " href="#" data-value="23.30">11.30 PM</a></li>
</ul>
</div>
<div class="form-group field-restaurantreservationform-personcount">
<input type="hidden" id="restaurantreservationform-personcount" class="form-control" name="RestaurantReservationForm[personCount]" data-btn-id="reservation-person">
</div> <div class="form-group field-restaurantreservationform-date required">
<input type="hidden" id="restaurantreservationform-date" class="form-control" name="RestaurantReservationForm[date]" data-btn-id="reservation-date">
</div> <div class="form-group field-restaurantreservationform-time">
<input type="hidden" id="restaurantreservationform-time" class="form-control" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
</div>[{"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"}]
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|