472 lines
17 KiB
PHP
472 lines
17 KiB
PHP
<html>
|
|
<head>
|
|
<title>Stay@RoamEase</title>
|
|
<link rel="shortcut icon" href="../../icon/favicon/favicon.ico" type="image/x-icon" />
|
|
<link rel="icon" href="../../icon/favicon/favicon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="./home.css?version=1" type="text/css" />
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<style>
|
|
.pagebutton{
|
|
background-color: #ADD8FF;
|
|
border: none;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
width:5%;
|
|
border-radius: 10px;
|
|
font-size:17px;
|
|
transition:background-color 0.3s ease;
|
|
}
|
|
.hotel{
|
|
background-color:rgba(355,355,355,0.7);
|
|
width:750px;
|
|
margin:0 auto;
|
|
cursor:pointer;
|
|
}
|
|
.searchBox{
|
|
padding: 5%;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-radius: 20px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
width: auto;
|
|
|
|
}
|
|
.searchB{
|
|
padding: 2% 5%;
|
|
font-size: 120%;
|
|
background-color: #003b94;;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 20px;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
}
|
|
.searchB:hover {
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
.buttonDiv{
|
|
text-align:center;
|
|
}
|
|
.back{
|
|
margin-top:10%;
|
|
height:90%;
|
|
width:100%;
|
|
}
|
|
table tr td:first-child {
|
|
width: 120px;
|
|
}
|
|
</STYLE>
|
|
|
|
</head>
|
|
<body>
|
|
<?php
|
|
include "../ConnectDB.php";
|
|
// Start the session
|
|
session_start();
|
|
// Check if the user is already logged in
|
|
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
|
|
if(isset($_SESSION['user_type']) && $_SESSION['user_type'] === 'seller'){
|
|
echo "<script type='text/javascript'>
|
|
window.top.location.href = '../seller/home.php';
|
|
</script>";
|
|
}
|
|
if(isset($_SESSION['user_type']) && $_SESSION['user_type'] === 'admin'){
|
|
echo "<script type='text/javascript'>
|
|
window.top.location.href = '../admin/home.php';
|
|
</script>";
|
|
}
|
|
if(isset($_SESSION['user_type']) && $_SESSION['user_type'] === 'guide'){
|
|
echo "<script type='text/javascript'>
|
|
window.top.location.href = '../guide/home.php';
|
|
</script>";
|
|
}
|
|
}
|
|
?>
|
|
|
|
<header>
|
|
<div class="logo">
|
|
<a href="../../index.php"><img src="../../icon/favicon/logo_white.svg" alt="RoamEase"></a>
|
|
</div>
|
|
|
|
<div class="nav-links">
|
|
<?php
|
|
if (isset($_SESSION['loggedin'])) {
|
|
echo '<a href="./process/cart.php">Cart</a>
|
|
<a href="../../login/login.php">Account</a>';
|
|
}
|
|
else {
|
|
echo '<a href="../../login/register.php">Sign up</a>
|
|
<a href="../../login/username.php">Log in</a>';
|
|
}
|
|
?>
|
|
</div>
|
|
</header>
|
|
|
|
<header>
|
|
<nav>
|
|
<a href="#" style="border-color: white;">
|
|
<img src="../../icon/header/stays.svg" alt="Stays">
|
|
</a>
|
|
<a href="transport.php">
|
|
<img src="../../icon/header/transportations.svg" alt="Transportations">
|
|
</a>
|
|
<a href="foods.php">
|
|
<img src="../../icon/header/foods.svg" alt="Foods">
|
|
</a>
|
|
<a href="attractions.php">
|
|
<img src="../../icon/header/attractions.svg" alt="Attractions">
|
|
</a>
|
|
<a href="guiding.php">
|
|
<img src="../../icon/header/guiding.svg" alt="Guiding">
|
|
</a>
|
|
<a href="plans.php">
|
|
<img src="../../icon/header/plans.svg" alt="Plans">
|
|
</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<br><br><br>
|
|
|
|
<!-- Search Box Container -->
|
|
<div id="searchBox" class="sticky-search-box">
|
|
<form id="searchForm" method="post">
|
|
<!-- Input field for state -->
|
|
<div class="input-field with-button" style="min-width: 80px; max-width: 200px;">
|
|
<input type="text" value=" " style="display:none;" readonly>
|
|
<label for="state">State</label>
|
|
<select class="edit-button" id="state" name="state" required>
|
|
<option value="">Select</option>
|
|
<?php
|
|
// Fetch states with country ID 45 from the database
|
|
$query = "SELECT `id`, `name` FROM states WHERE country_id = 45";
|
|
$result = $conn->query($query);
|
|
|
|
// Check if the query was successful
|
|
if ($result) {
|
|
// Populate the dropdown with states
|
|
while ($row = $result->fetch_assoc()) {
|
|
$stateId = $row['id'];
|
|
$stateName = $row['name'];
|
|
echo "<option value='$stateId'>$stateName</option>";
|
|
}
|
|
echo '</select>';
|
|
} else {
|
|
echo "Error fetching states from the database.";
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<!-- Input field for city -->
|
|
<div class="input-field with-button" style="min-width: 80px; max-width: 200px;">
|
|
<input type="text" value=" " style="display:none;" readonly>
|
|
<label for="city">City</label>
|
|
<select class="edit-button" id="city" name="city" disabled>
|
|
<option value="">Select</option>
|
|
<!-- Cities will be loaded here based on the selected state -->
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Input fields for date range -->
|
|
<div class="input-field with-button" style="min-width: 110px; max-width: 200px;">
|
|
<input type="text" value=" " style="display:none;" readonly>
|
|
<label for="start_date">Check-in</label>
|
|
<input type="date" id="start_date" class="edit-button" name="start_date" style="border:none;" onchange="setMinEndDate()" onkeydown="return false" required>
|
|
</div>
|
|
|
|
<div class="input-field with-button" style="min-width: 110px; max-width: 200px;">
|
|
<input type="text" value=" " style="display:none;" readonly>
|
|
<label for="end_date">Check-out</label>
|
|
<input type="date" id="end_date" class="edit-button" name="end_date" style="border:none;" onkeydown="return false" required>
|
|
</div>
|
|
|
|
<div class="input-field with-button" style="min-width: 80px; max-width: 100px;">
|
|
<input type="text" value=" " style="display:none;" readonly>
|
|
<label for="hotel_type">Hotel type</label>
|
|
<select class="edit-button" id="hotel_type" name="hotel_type">
|
|
<option value="">Select</option>
|
|
<?php
|
|
// Fetch states with country ID 45 from the database
|
|
$query = "SELECT `hotel_type_id`, `hotel_type_name` FROM hotel_type";
|
|
$result = $conn->query($query);
|
|
|
|
// Check if the query was successful
|
|
if ($result) {
|
|
// Populate the dropdown with states
|
|
while ($row = $result->fetch_assoc()) {
|
|
$hoteltypeId = $row['hotel_type_id'];
|
|
$hoteltypeName = $row['hotel_type_name'];
|
|
echo "<option value='$hoteltypeId'>$hoteltypeName</option>";
|
|
}
|
|
echo '</select>';
|
|
} else {
|
|
echo "Error fetching states from the database.";
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
<div class="input-field with-button" style="min-width: 120px; max-width: 335px;">
|
|
<input type="text" id="myInput" name="myInput" placeholder=" ">
|
|
<label for="keyword">Search hotel</label>
|
|
</div>
|
|
|
|
<!-- Search button -->
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
|
|
<br><br><br>
|
|
|
|
<div id="pageContainer" style="display: block;">
|
|
|
|
</div>
|
|
<div id="pageButtons" class="buttonDiv"></div>
|
|
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
|
|
<footer>
|
|
<div class="logo">
|
|
<a href="../../index.php"><img src="../../icon/favicon/textlogo.svg" alt="RoamEase" height="50px"></a>
|
|
<p style="font-size:10%;">©2023 COMP3013 Group10</p>
|
|
</div>
|
|
|
|
<div class="nav-links" style="font-size: 80%;">
|
|
<a href="../aboutus.php" style="color: white; margin: 0 10px;">About us</a>
|
|
<a href="../aboutus.php" style="color: white; margin: 0 10px;">Privacy Policy</a>
|
|
<a href="../aboutus.php" style="color: white; margin: 0 10px;">Terms For Usage</a>
|
|
</div>
|
|
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
<script>
|
|
document.getElementById('state').addEventListener('change', function() {
|
|
var stateId = this.value;
|
|
var citySelect = document.getElementById('city');
|
|
|
|
if(stateId) {
|
|
citySelect.disabled = false; // Enable the city select element
|
|
fetchCities(stateId); // Call a function to fetch cities for the selected state
|
|
} else {
|
|
citySelect.disabled = true; // Keep the city select element disabled
|
|
citySelect.innerHTML = '<option value="">Select</option>'; // Reset the cities dropdown
|
|
}
|
|
});
|
|
|
|
function fetchCities(stateId) {
|
|
// Use fetch or AJAX to get the cities from the server
|
|
fetch('getCities.php?state_id=' + stateId)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
var citySelect = document.getElementById('city');
|
|
citySelect.innerHTML = '<option value="">Select</option>'; // Reset the dropdown
|
|
|
|
// Populate the dropdown with the new cities
|
|
data.forEach(function(city) {
|
|
var option = document.createElement('option');
|
|
option.value = city.id;
|
|
option.textContent = city.name;
|
|
citySelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
|
|
function setMinEndDate() {
|
|
var startDateInput = document.getElementById('start_date');
|
|
var endDateInput = document.getElementById('end_date');
|
|
var startDate = new Date(startDateInput.value);
|
|
|
|
// Check if the start date is valid before proceeding
|
|
if (startDateInput.value) {
|
|
// Set the end date minimum to one day after the start date
|
|
startDate.setDate(startDate.getDate() + 1);
|
|
endDateInput.min = formatDate(startDate);
|
|
|
|
// If the end date is before the new min, reset it
|
|
var endDate = new Date(endDateInput.value);
|
|
if (endDate < startDate) {
|
|
endDateInput.value = formatDate(startDate);
|
|
}
|
|
}
|
|
}
|
|
|
|
function formatDate(date) {
|
|
var d = new Date(date),
|
|
month = '' + (d.getMonth() + 1),
|
|
day = '' + d.getDate(),
|
|
year = d.getFullYear();
|
|
|
|
if (month.length < 2)
|
|
month = '0' + month;
|
|
if (day.length < 2)
|
|
day = '0' + day;
|
|
|
|
return [year, month, day].join('-');
|
|
}
|
|
|
|
// Set initial constraints on dates
|
|
window.onload = function() {
|
|
var today = new Date();
|
|
var tomorrow = new Date(today);
|
|
tomorrow.setDate(tomorrow.getDate() + 1); // Set tomorrow's date
|
|
|
|
var nextYear = new Date(today);
|
|
nextYear.setFullYear(today.getFullYear() + 1);
|
|
|
|
var startDateInput = document.getElementById('start_date');
|
|
var endDateInput = document.getElementById('end_date');
|
|
|
|
startDateInput.min = formatDate(today);
|
|
startDateInput.max = formatDate(nextYear);
|
|
startDateInput.value = formatDate(today); // Set default value to today
|
|
|
|
endDateInput.min = formatDate(tomorrow);
|
|
endDateInput.max = formatDate(nextYear);
|
|
endDateInput.value = formatDate(tomorrow); // Set default value to tomorrow
|
|
};
|
|
|
|
// Attach onchange event listeners
|
|
document.getElementById('start_date').addEventListener('change', setMinEndDate);
|
|
|
|
document.getElementById('searchForm').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
|
|
// Validate required fields
|
|
var state = document.getElementById('state').value;
|
|
var startDate = document.getElementById('start_date').value;
|
|
var endDate = document.getElementById('end_date').value;
|
|
|
|
if (state && startDate && endDate) {
|
|
// All required fields are filled, submit the form or call your function
|
|
myFunction();
|
|
} else {
|
|
// Not all required fields are filled
|
|
alert('Please fill all required fields.');
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
var currentPage = 1;
|
|
var totalPages = 1;
|
|
var judge=1;
|
|
|
|
function changePage(pageNumber) {
|
|
currentPage = pageNumber;
|
|
myFunction();
|
|
}
|
|
|
|
function myFunction() {
|
|
var state = document.getElementById('state').value;
|
|
var city = document.getElementById('city').value;
|
|
var start_date = document.getElementById('start_date');
|
|
var end_date = document.getElementById('end_date');
|
|
var hotel_type = document.getElementById('hotel_type').value;
|
|
var input = document.getElementById('myInput');
|
|
var myinput = input.value.toUpperCase();
|
|
|
|
var xmlhttp = new XMLHttpRequest();
|
|
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
var response = JSON.parse(this.responseText);
|
|
var data = response.data;
|
|
totalPages = response.total_pages;
|
|
var time=response.time;
|
|
time=time.toFixed(6);
|
|
var html = '';
|
|
if (data[0]=="No result"){
|
|
html="<p style='text-align:center; font-size:40px;'>Sorry, we did not find what you are looking for.</p>";
|
|
judge=0;
|
|
}else{
|
|
html+='Running time: '+time+'s';
|
|
for (var i = 0; i < data.length; i++) {
|
|
html += '<div class="hotel" style="cursor:default;">';
|
|
html += '<table style="border: none; cursor:pointer;" onclick="window.open(\'./getInfo/HoInfo.php?id=' + data[i].hotel_id + '\', \'_blank\');">';
|
|
html += '<tr><td rowspan="5"><img width=130; height=100; src="data:image/jpeg;base64,'+data[i].image+'" alt="Hotel Image"></td>';
|
|
html += '<td>Name</td><td><p style="font-size:20px; font-family: Times New Roman, Times, serif;">' + data[i].hname + '</p></td></tr>';
|
|
html += '<tr><td>City</td><td>' + data[i].cname + '</td></tr>';
|
|
html += '<tr><td>Rating</td><td>';
|
|
for (var j = 0; j < 5; j++) {
|
|
if (j < Math.floor(data[i].rating)) {
|
|
html += '<img width="30" height="30" src="../../icon/filled_star.svg" alt="Filled Star">';
|
|
} else if (j < data[i].rating && data[i].rating - j < 1) {
|
|
html += '<img width="30" height="30" src="../../icon/half_star.svg" alt="Half Star">';
|
|
} else {
|
|
html += '<img width="30" height="30" src="../../icon/empty_star.svg" alt="Empty Star">';
|
|
}
|
|
}
|
|
html += '</td></tr>';
|
|
html += '<tr><td>Type</td><td>' + data[i].hotel_type_name + '</td></tr>';
|
|
html += '</table>';
|
|
html += '</div><br>';
|
|
}
|
|
|
|
html += '<p style="text-align:center; font-size:30px;">Current page:' + currentPage+'</p>';
|
|
|
|
}
|
|
document.getElementById("pageContainer").innerHTML = html;
|
|
generatePageButtons();
|
|
}
|
|
};
|
|
|
|
xmlhttp.open("GET", "getHotel.php?state="+state+"&city="+city+"&start_date="+start_date+"&end_date="+end_date
|
|
+"&hotel_type="+hotel_type+"&myinput="+myinput
|
|
+"&page="+currentPage, true);
|
|
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function addToPlan(hotelId) {
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.open("GET", "plans.php?hotel_id=" + hotelId, true);
|
|
xmlhttp.send();
|
|
}
|
|
|
|
function generatePageButtons() {
|
|
var html = '';
|
|
var startPage = Math.max(currentPage - 2, 1);
|
|
var endPage = Math.min(currentPage + 2, totalPages);
|
|
var html2='';
|
|
|
|
|
|
// Always add the first page button
|
|
if ((currentPage != 1||currentPage != 2||currentPage == 3)&&endPage!=0) {
|
|
html += '<button class="pagebutton" onclick="changePage(1)">1</button>';
|
|
}
|
|
|
|
// Add "..." before current pages
|
|
if (startPage > 2&&endPage!=0) {
|
|
html += '.............';
|
|
}
|
|
|
|
// Add buttons for current pages
|
|
for (var i = startPage+1; i <= endPage; i++) {
|
|
html += '<button class="pagebutton" onclick="changePage(' + i + ')">' + i + '</button>';
|
|
}
|
|
|
|
// Add "..." after current pages
|
|
if (endPage < totalPages - 1&&endPage!=0) {
|
|
html += '.............';
|
|
}
|
|
|
|
// Always add the last page button
|
|
if (currentPage != totalPages && totalPages != 2&& totalPages != 3&& totalPages != 4&& totalPages != 5) {
|
|
html += '<button class="pagebutton" onclick="changePage(' + totalPages + ')">' + totalPages + '</button>';
|
|
}
|
|
|
|
document.getElementById("pageButtons").innerHTML = html;
|
|
}
|
|
|
|
</script>
|