Get the id of the current restaurant yii2

Question

I have a restaurant reservation form on the page, and there is a time selection.

Now here, using json, I get the working time for each day of the restaurant from the database, and in the javascript I take this data and hide the extra time.

There is only one thing left to do, and that is to get the ID of the current restaurant.

Now in the script I manually write the ID:

let restaurantID = 1;

I have this form on the page of each restaurant and, accordingly, the ID of the current restaurant is known, I just need to transfer it to the javascript.

How can I do this in a php page? I am using yii2 framework.

Do I need to somehow get it on the page itself like $restaurant->id and then pass it to the script or what is the best way to do this?

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>

Answer 1

Passed id via json

$this->registerJs('let restaurantID = '. Json::encode($restaurant->id) .';', View::POS_END);

If there are other options, I'm also ready to look.

Answer 2

You need to pass the filterTimes() function the restaurantID.

I would do something like this:

Change your filterTimes function to this:

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");
        }
      }
    }

Then when you are setting the onchange event in the day of the week select, pass it the id by echoing the php value into the page like this:

<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>