180 lines
7.5 KiB
PHP
180 lines
7.5 KiB
PHP
<html>
|
|
<title>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">
|
|
<header>
|
|
<style>
|
|
.pagebutton{
|
|
background-color: #ADD8FF;
|
|
border: none;
|
|
color: white;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 13px;
|
|
width:10%;
|
|
border-radius: 10px;
|
|
font-size:17px;
|
|
transition:background-color 0.3s ease;
|
|
}
|
|
</style>
|
|
<div class="logo">
|
|
<a href="../home.php"><img src="../../../icon/favicon/logo_white.svg" alt="RoamEase"></a>
|
|
</div>
|
|
|
|
<div class="nav-links">
|
|
<?php
|
|
session_start();
|
|
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="../stays.php" 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>
|
|
|
|
<style>
|
|
table tr td:first-child {
|
|
width: 160px;
|
|
}
|
|
</style>
|
|
<script>
|
|
var attractionDetail; // Declare globally
|
|
var aid; // Declare globally
|
|
|
|
function GoodFunction() {
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|
aid = urlParams.get('id');
|
|
var xmlhttp = new XMLHttpRequest();
|
|
xmlhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
attractionDetail = JSON.parse(this.responseText);
|
|
console.log(attractionDetail);
|
|
var detailHtml = '<table style="border-collapse: collapse; width:100%; height:70%; margin-top:-0.1%;">';
|
|
detailHtml += '<tr><td rowspan="20"><img width=130; height=100; src="data:image/jpeg;base64,'+attractionDetail[0].image+'" alt="Hotel Image"></td>';
|
|
detailHtml += '<tr><td>Name</td><td>' + attractionDetail[0].hname + '</td></tr>';
|
|
detailHtml += '<tr><td>Location</td><td>' + attractionDetail[0].location + '</td></tr>';
|
|
detailHtml += '<tr><td style="vertical-align:top;">Description</td><td style="vertical-align:top;">' + attractionDetail[0].descrip + '</td></tr>';
|
|
for (var i = 0; i < attractionDetail.length; i++) {
|
|
detailHtml += '<tr>';
|
|
detailHtml += '<td><input type="radio" id="hotel_room_id" name="hotel_room_id" value="' + attractionDetail[i].hotel_room_id + '">';
|
|
detailHtml += attractionDetail[i].rType + '</td>';
|
|
detailHtml += '<td>' + attractionDetail[i].price + 'RMB</td>';
|
|
detailHtml += '<td><div style="padding: 10px 20px;background-color: #1E90FF;color: white;cursor: pointer;" onclick="addToPlan(' + attractionDetail[i].hotel_room_id + ')">Add to Plan</div></td>';
|
|
if (i==0){
|
|
detailHtml += '<tr><td><button id="add_cart">Add cart</button></td></tr>';
|
|
}
|
|
detailHtml += '</tr>';
|
|
}
|
|
|
|
detailHtml += '<tr><td><div class="input-field with button"><input type="date" id="start_date" class="edit-button" name="start_date" style="border:none;" onchange="setMinEndDate()" onkeydown="return false" required><label for="start_date">Visit date</label></td>';
|
|
detailHtml += '<td><div class="input-field with button"><input type="date" id="end_date" class="edit-button" name="end_date" style="border:none;" onchange="setMinEndDate()" onkeydown="return false" required><label for="end_date">End date</label></td>';
|
|
detailHtml += '<td><div class="input-field"><input type="number" id="quantity" name="quantity" placeholder=" " required value=""><label for="quantity">Quantity</label></div></td></tr>';
|
|
|
|
|
|
detailHtml += '</table><a href="../stays.php" style="text-decoration:none;"><button class="pageButton">Go back</button></a>';
|
|
detailHtml += '';
|
|
document.getElementById("detail").innerHTML = detailHtml;
|
|
}
|
|
document.getElementById('add_cart').addEventListener('click', add_cart);
|
|
}
|
|
|
|
xmlhttp.open("GET", "getHoInfo.php?id=" + aid, true);
|
|
xmlhttp.send();
|
|
function add_cart() {
|
|
let start_date = document.getElementById("start_date").value;
|
|
let end_date = document.getElementById("end_date").value;
|
|
let quantity = document.getElementById("quantity").value;
|
|
let price = attractionDetail[0].price; // Now accessible
|
|
let product_id = document.getElementById("hotel_room_id").value;
|
|
|
|
window.location.href = '../addcart.php?target_id=' + product_id + '&start_date=' + start_date + '&end_date=' + end_date + '&quantity=' + quantity + '&table=1&price=' + price;
|
|
}
|
|
|
|
}
|
|
GoodFunction();
|
|
</script>
|
|
|
|
<div id="detail"></div><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="#" style="color: white; margin: 0 10px;">About us</a>
|
|
<a href="#" style="color: white; margin: 0 10px;">Privacy Policy</a>
|
|
<a href="#" style="color: white; margin: 0 10px;">Terms For Usage</a>
|
|
</div>
|
|
|
|
</footer>
|
|
</html>
|
|
|
|
<script>
|
|
function addToPlan(roomId) {
|
|
var startDate = prompt("Select start date:", formatDate(new Date()));
|
|
var endDate = prompt("Select end date:", formatDate(new Date()));
|
|
if (startDate && endDate) {
|
|
var url = `../plans_do.php?roomId=${roomId}&startDate=${startDate}&endDate=${endDate}`;
|
|
|
|
fetch(url)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`Error adding to the plan. Status code: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.code === 0) {
|
|
alert(data.msg)
|
|
} else {
|
|
console.error(`Error adding to the plan. Message: ${data.message}`);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Fetch error:", error);
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
function formatDate(date) {
|
|
var year = date.getFullYear();
|
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
var day = date.getDate().toString().padStart(2, '0');
|
|
return year + '-' + month + '-' + day;
|
|
}
|
|
|
|
|
|
</script>
|