Holen Sie sich die ID des aktuellen Restaurants yii2

Ich habe ein Restaurant-Reservierungsformular auf der Seite, und es gibt eine Zeitauswahl.

Jetzt bekomme ich hier mit json die Arbeitszeit für jeden Tag des Restaurants aus der Datenbank, und im Javascript nehme ich diese Daten und verstecke die zusätzliche Zeit.

Es bleibt nur noch eine Sache zu tun, und das ist, die ID des aktuellen Restaurants zu erhalten.

Jetzt schreibe ich im Skript manuell die ID:

let restaurantID = 1;

Ich habe dieses Formular auf der Seite jedes Restaurants und dementsprechend ist die ID des aktuellen Restaurants bekannt, ich muss es nur in das Javascript übertragen.

Wie kann ich das auf einer phpSeite machen? Ich verwende yii2Rahmen.

Muss ich es irgendwie auf die Seite selbst bringen $restaurant->idund dann an das Skript übergeben oder wie geht das am besten?

let restaurantReserve = {
 init: function() {
 let _self = this;
 $('[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 = 1;
 let dayofweek = document.getElementById("dayofweek").value;
 if ((["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;
}
.btn-fourth:hover {
 background: #747b8b;
 color: #fff;
}
.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="reservation" action="/restaurants/123/" method="post">
 <div class="block-shadow block-white mb-4">
 <div class="btn-s">
 <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>
 <select id="dayofweek" onchange="filterTimes()">
 <option>Please Select Day</option>
 <option value="Mon">Mon</option>
 <option value="Tue">Tue</option>
 <option value="Wed">Wed</option>
 <option value="Thu">Thu</option>
 <option value="Fri">Fri</option>
 <option value="Sat">Sat</option>
 <option value="Sun">Sun</option>
 </select>
 <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-time">
 <input type="hidden" id="restaurantreservationform-time" class="form-control" name="RestaurantReservationForm[time]" data-btn-id="reservation-time">
 </div>

Lösung des Problems

Sie müssen der Funktion filterTimes() die restaurantID übergeben.

Ich würde so etwas tun:

Ändern Sie Ihre filterTimes-Funktion wie folgt:

function filterTimes(restaurantID) { //pass restaurantID as a parameter
 
 let dayofweek = document.getElementById("dayofweek").value;
 if ((["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");
 }
 }
 }

Wenn Sie dann das onchange-Ereignis in der Wochentagsauswahl festlegen, übergeben Sie ihm die ID, indem Sie den PHP-Wert wie folgt in die Seite zurückgeben:

<select id="dayofweek" onchange="filterTimes('<?= $restaurant->id?>')">
 <option>Please Select Day</option>
 <option value="Mon">Mon</option>
 <option value="Tue">Tue</option>
 <option value="Wed">Wed</option>
 <option value="Thu">Thu</option>
 <option value="Fri">Fri</option>
 <option value="Sat">Sat</option>
 <option value="Sun">Sun</option>
</select>