updated booking page & filter room functionality
This commit is contained in:
parent
24ff4cf9e7
commit
bfd996cf87
2 changed files with 229 additions and 77 deletions
126
hotel_booking/ajax/room.php
Normal file
126
hotel_booking/ajax/room.php
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<?php
|
||||
|
||||
require('../admin/components/db_config.php');
|
||||
require('../admin/components/utils.php');
|
||||
date_default_timezone_set("America/Chicago");
|
||||
session_start();
|
||||
|
||||
if(isset($_GET['fetch_room'])){
|
||||
//check room availability
|
||||
$check_filter = json_decode($_GET['check_filter'], true);
|
||||
if($check_filter['checkin'] != '' && $check_filter['checkout'] != ''){
|
||||
$today_date = new DateTime(date("F j, Y"));
|
||||
$checkin_date = new DateTime($check_filter['checkin']);
|
||||
$checkout_date = new DateTime($check_filter['checkout']);
|
||||
|
||||
if($checkin_date == $checkout_date){
|
||||
echo "<p>No options matching your search, please make sure your check-in and check-out date is not the same!</p>";
|
||||
exit;
|
||||
} else if($checkout_date < $checkin_date){
|
||||
echo "<p>No options matching your search, please check your check-out date</p>";
|
||||
exit;;
|
||||
} else if($checkin_date < $today_date){
|
||||
echo "<p>No options matching your search, please check your check-in date</p>";
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
//check guest filter
|
||||
$guest_filter = json_decode($_GET['guest_filter'], true);
|
||||
$adult = ($guest_filter['adult']!='') ? $guest_filter['adult'] : 0;
|
||||
$children = ($guest_filter['children']!='') ? $guest_filter['children'] : 0;
|
||||
|
||||
//output available room
|
||||
$count_room = 0;
|
||||
$setting_query = "SELECT *FROM `settings` WHERE `sr_no` = 1";
|
||||
$settings_result = mysqli_fetch_assoc(mysqli_query($con, $setting_query));
|
||||
$output = "";
|
||||
|
||||
$room_res = select("SELECT * FROM `rooms` WHERE `adult` >=? AND `children` >=? AND `status`=? AND `removed`=?", [$adult, $children, 1, 0], 'iiii');
|
||||
while($room_data = mysqli_fetch_assoc($room_res)){
|
||||
//fetch room availability
|
||||
if($check_filter['checkin'] != '' && $check_filter['check-out'] != ''){
|
||||
$data_query = "SELECT COUNT(*) AS `total_booking` FROM `booking_order` WHERE booking_status=? AND room_id=? AND check_out > ? AND check_in < ?";
|
||||
$values = ['pending', $room_data['id'], $check_filter['checkin'], $check_filter['checkout']];
|
||||
$data_fetch = mysqli_fetch_assoc(select($data_query, $values, 'siss'));
|
||||
|
||||
if(($room_data['quantity'] - $data_fetch['total_booking']) == 0){
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
//get accommodation data from database
|
||||
$accom_q = mysqli_query($con, "SELECT a.name FROM `accommodation` a INNER JOIN `room_accommodation` raccom ON a.id = raccom.accommodation_id WHERE raccom.room_id = '$room_data[id]'");
|
||||
$accommodation_data = "";
|
||||
|
||||
while($accom_row = mysqli_fetch_assoc($accom_q)){
|
||||
$accommodation_data .="<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>$accom_row[name]</span>";
|
||||
}
|
||||
|
||||
//get additional accommodation data from database
|
||||
$addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
|
||||
$additionalAccom_data = "";
|
||||
|
||||
while($addi_row = mysqli_fetch_assoc($addi_q)){
|
||||
$additionalAccom_data .="<span class='badge text-dark mb-1 mx-1' style='border-radius: 25px; background-color: #F3EEEA;'>$addi_row[name]</span>";
|
||||
}
|
||||
|
||||
//get cover image
|
||||
$room_cover = ROOM_IMG_PATH."logo.png";
|
||||
$cover_q = mysqli_query($con, "SELECT * FROM `room_images` WHERE `room_id`='$room_data[id]' AND `upload`='1'");
|
||||
|
||||
if(mysqli_num_rows($cover_q) > 0){
|
||||
$cover_res = mysqli_fetch_assoc($cover_q);
|
||||
$room_cover = ROOM_IMG_PATH.$cover_res['image'];
|
||||
}
|
||||
|
||||
//booking & shutdown booking process
|
||||
$booking = "";
|
||||
if(!$settings_r['shutdown']){
|
||||
$login = 0;
|
||||
if(isset($_SESSION['login']) && $_SESSION['login'] == true){
|
||||
$login=1;
|
||||
}
|
||||
$booking = "<button onclick='loginToBook($login, $room_data[id])' class='btn-main d-block mb-2' style='font-size: 14px;'>Book</button>";
|
||||
}
|
||||
|
||||
//display room (---**accommodation section did not use from database**---)
|
||||
$output .= "
|
||||
<div class='card mb-3 shadow'>
|
||||
<div class='row g-0 p-2 align-items-center'>
|
||||
<div class='col-lg-4 col-md-5 mb-lg-0 mb-3'>
|
||||
<img src='$room_cover' class='img-fluid rounded' alt='room' style='height: 220px; width: 100%; object-fit: cover;'>
|
||||
</div>
|
||||
<div class='col-lg-7 col-md-6 px-lg-2 px-md-2 px-0'>
|
||||
<p class='mb-1' style='font-size: 20px; font-weight: 600;'>$room_data[name]</p>
|
||||
<div class='accommodation'>
|
||||
<p class='fw-bold' style='color: #31363F; font-size: 14px; margin-bottom: 5px;'>Accommodation</p>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Heating and air conditioning</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Mini-fridge</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Coffee & tea</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Desk</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Television</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>Wi-Fi</span>
|
||||
<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>...</span>
|
||||
</div>
|
||||
<div class='extra-accommodation mt-2 mb-2'>
|
||||
<p class='fw-bold' style='color: #31363F; font-size: 14px; margin-bottom: 5px;'>Additional Accommodation</p>$additionalAccom_data
|
||||
</div>
|
||||
</div>
|
||||
<div class='col-md-1'>
|
||||
<p class='mb-4 text-center mt-lg-0 mt-4' style='font-size: 14px;'>$$room_data[price]/night</p>
|
||||
$booking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
";
|
||||
$count_room++;
|
||||
}
|
||||
if($count_room > 0 ){
|
||||
echo $output;
|
||||
} else{
|
||||
echo 'We are sorry, but there is no room available at this moment!';
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
|
@ -28,6 +28,20 @@
|
|||
right: 25px;
|
||||
z-index: 10000;
|
||||
}
|
||||
.btn-set{
|
||||
background-color: #3C3633;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 2px 4px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn-set:hover{
|
||||
background-color: #625e5b;
|
||||
color: white;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
@media (max-width:765px){
|
||||
.booking-hero{
|
||||
height: 100px;
|
||||
|
|
@ -50,26 +64,35 @@
|
|||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse flex-column align-items-stretch" id="filterDropdown">
|
||||
<!--room availability-->
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Availability</p>
|
||||
<p class="mb-2 d-flex justify-content-between" style="font-weight: 600;">
|
||||
<span>Availability</span>
|
||||
<button class="btn-set d-none" id='check-filter-btn' onclick='check_filter_clear()'><i class='bx bx-reset'></i></button>
|
||||
</p>
|
||||
<label class="form-label" style="font-size: 14px;">Check-in</label>
|
||||
<input type="date" class="form-control shadow-none mb-4" style="font-size: 14px;"/>
|
||||
<input type="date" onchange="check_filter()" class="form-control shadow-none mb-4" id="checkin" style="font-size: 14px;"/>
|
||||
<label class="form-label" style="font-size: 14px;">Check-out</label>
|
||||
<input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
|
||||
<input type="date" onchange="check_filter()" class="form-control shadow-none" id="checkout" style="font-size: 14px;"/>
|
||||
</div>
|
||||
<!--guest-->
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Guests</p>
|
||||
<p class="mb-2 d-flex justify-content-between" style="font-weight: 600;">
|
||||
<span>Guest</span>
|
||||
<button class="btn-set d-none" id='guest-filter-btn' onclick='guest_filter_clear()'><i class='bx bx-reset'></i></button>
|
||||
</p>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="mb-2" style="font-size: 14px;">
|
||||
<label class="form-label">Adults</label>
|
||||
<input type="number" class="form-control shadow-none" min="1"/>
|
||||
<input type="number" id="adult" oninput="guest_filter()" class="form-control shadow-none" min="1"/>
|
||||
</div>
|
||||
<div class="mb-2" style="font-size: 14px;">
|
||||
<label class="form-label">Children</label>
|
||||
<input type="number" class="form-control shadow-none" min="0"/>
|
||||
<input type="number" id="children" oninput="guest_filter()" class="form-control shadow-none" min="1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--room types-->
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Room Types</p>
|
||||
<div class="mb-1">
|
||||
|
|
@ -106,77 +129,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-12">
|
||||
<?php
|
||||
$room_res = select("SELECT * FROM `rooms` WHERE `status`=? AND `removed`=?", [1, 0], 'ii');
|
||||
while($room_data = mysqli_fetch_assoc($room_res)){
|
||||
//get accommodation data from database
|
||||
$accom_q = mysqli_query($con, "SELECT a.name FROM `accommodation` a INNER JOIN `room_accommodation` raccom ON a.id = raccom.accommodation_id WHERE raccom.room_id = '$room_data[id]'");
|
||||
$accommodation_data = "";
|
||||
|
||||
while($accom_row = mysqli_fetch_assoc($accom_q)){
|
||||
$accommodation_data .="<span class='badge text-dark mb-1' style='border-radius: 25px; background-color: #F3EEEA;'>$accom_row[name]</span>";
|
||||
}
|
||||
//get additional accommodation data from database
|
||||
$addi_q = mysqli_query($con, "SELECT a.name FROM `additional_accomm` a INNER JOIN `room_additionalAccom` raddi ON a.id = raddi.additionalAccom_id WHERE raddi.room_id = '$room_data[id]'");
|
||||
$additionalAccom_data = "";
|
||||
|
||||
while($addi_row = mysqli_fetch_assoc($addi_q)){
|
||||
$additionalAccom_data .="<span class='badge text-dark mb-1 mx-1' style='border-radius: 25px; background-color: #F3EEEA;'>$addi_row[name]</span>";
|
||||
}
|
||||
//get cover image
|
||||
$room_cover = ROOM_IMG_PATH."logo.png";
|
||||
$cover_q = mysqli_query($con, "SELECT * FROM `room_images` WHERE `room_id`='$room_data[id]' AND `upload`='1'");
|
||||
|
||||
if(mysqli_num_rows($cover_q) > 0){
|
||||
$cover_res = mysqli_fetch_assoc($cover_q);
|
||||
$room_cover = ROOM_IMG_PATH.$cover_res['image'];
|
||||
}
|
||||
//booking & shutdown booking process
|
||||
$booking = "";
|
||||
if(!$settings_r['shutdown']){
|
||||
$login = 0;
|
||||
if(isset($_SESSION['login']) && $_SESSION['login'] == true){
|
||||
$login=1;
|
||||
}
|
||||
$booking = "<button onclick='loginToBook($login, $room_data[id])' class='btn-main d-block mb-2' style='font-size: 14px;'>Book</button>";
|
||||
}
|
||||
//display room (---**accommodation section did not use from database**---)
|
||||
echo <<< data
|
||||
<div class="card mb-3 shadow">
|
||||
<div class="row g-0 p-2 align-items-center">
|
||||
<div class="col-lg-4 col-md-5 mb-lg-0 mb-3">
|
||||
<img src="$room_cover" class="img-fluid rounded" alt="room" style="height: 220px; width: 100%; object-fit: cover;">
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-6 px-lg-2 px-md-2 px-0">
|
||||
<p class="mb-1" style="font-size: 20px; font-weight: 600;">$room_data[name]</p>
|
||||
<div class="accommodation">
|
||||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Heating and air conditioning</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Mini-fridge</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">...</span>
|
||||
</div>
|
||||
<div class="extra-accommodation mt-2 mb-2">
|
||||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Additional Accommodation</p>
|
||||
$additionalAccom_data
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<p class="mb-4 text-center mt-lg-0 mt-4" style="font-size: 14px;">$$room_data[price]/night</p>
|
||||
$booking
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
data;
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="col-lg-9 col-md-12" id="room-data"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -185,6 +138,17 @@
|
|||
<?php require('./components/script.php') ?>
|
||||
|
||||
<script>
|
||||
//fetch room
|
||||
let room_data = document.getElementById('room-data');
|
||||
//check-in & check-out filter
|
||||
let checkin = document.getElementById('checkin');
|
||||
let checkout = document.getElementById('checkout');
|
||||
let check_filter_btn = document.getElementById('check-filter-btn');
|
||||
//guest filter
|
||||
let adult = document.getElementById('adult');
|
||||
let children = document.getElementById('children');
|
||||
let guest_filter_btn = document.getElementById('guest-filter-btn');
|
||||
|
||||
function loginToBook(status, room_id){
|
||||
if(status){
|
||||
window.location.href='confirm_booking.php?id='+room_id;
|
||||
|
|
@ -193,6 +157,68 @@
|
|||
}
|
||||
}
|
||||
|
||||
//fetch room
|
||||
function fetch_room(){
|
||||
let check_filter = JSON.stringify({
|
||||
checkin: checkin.value,
|
||||
checkout: checkout.value
|
||||
});
|
||||
|
||||
let guest_filter = JSON.stringify({
|
||||
adult: adult.value,
|
||||
children: children.value
|
||||
});
|
||||
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", "ajax/room.php?fetch_room&check_filter="+check_filter+"&guest_filter="+guest_filter, true);
|
||||
|
||||
xhr.onprogress = function(){
|
||||
room_data.innerHTML = `
|
||||
<div class="m-3">
|
||||
<span class="spinner-border spinner-border-sm mx-2" role="status" aria-hidden="true" id="room_loading"></span>Loading...
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
xhr.onload = function(){
|
||||
room_data.innerHTML = this.responseText;
|
||||
}
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
//check-in & check-out filter
|
||||
function check_filter(){
|
||||
if(checkin.value != '' && checkout.value != ''){
|
||||
fetch_room()
|
||||
check_filter_btn.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
function check_filter_clear(){
|
||||
checkin.value = '';
|
||||
checkout.value ='';
|
||||
check_filter_btn.classList.add('d-none');
|
||||
fetch_room();
|
||||
}
|
||||
|
||||
//guest filter
|
||||
function guest_filter(){
|
||||
if(adult.value > 0 || children.value > 0){
|
||||
fetch_room();
|
||||
guest_filter_btn.classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
function guest_filter_clear(){
|
||||
adult.value = '';
|
||||
children.value = '';
|
||||
fetch_room();
|
||||
guest_filter_btn.classList.add('d-none');
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
fetch_room();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue