268 lines
11 KiB
HTML
268 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Restaurant Review Site</title>
|
|
<link rel="stylesheet" type="text/css" href="central.css">
|
|
<style>
|
|
/* ... (rest of your existing styles in <style> tag) ... */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="menu-bar">
|
|
<ul>
|
|
<li><a href="#" data-target="login.html" id="login-link">Login</a></li>
|
|
<li><a href="#" data-target="chart.html">Chart</a></li>
|
|
<li><a href="#" data-target="overview.html">Overview</a></li>
|
|
<li id="admin-link-item" style="display: none;"><a href="#" data-target="logged_in.html">Admin</a></li>
|
|
</ul>
|
|
<a id="add-restaurant-btn" href="#" data-target="add_restaurant.html" style="display: none;">Add Restaurant</a>
|
|
</div>
|
|
|
|
<div id="content-area">
|
|
</div>
|
|
|
|
<script>
|
|
const contentArea = document.getElementById('content-area');
|
|
const menuLinks = document.querySelectorAll('#menu-bar a[data-target]');
|
|
const addRestaurantBtn = document.getElementById('add-restaurant-btn');
|
|
const loginLink = document.getElementById('login-link');
|
|
const adminLinkItem = document.getElementById('admin-link-item');
|
|
|
|
function loadContent(url) {
|
|
fetch('htmls/' + url)
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
contentArea.innerHTML = data;
|
|
// Re-attach event listeners for dynamic content
|
|
attachFormListeners(url);
|
|
if (url === 'overview.html') {
|
|
loadRestaurantOverview(); // If this function is only in overview.html
|
|
} else if (url === 'chart.html') {
|
|
loadTierList(); // If this function is only in chart.html
|
|
} else if (url === 'logged_in.html') {
|
|
loadRegistrationRequests(); // Load admin content
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error loading content:', error);
|
|
contentArea.innerHTML = '<p class="error">Failed to load content.</p>';
|
|
});
|
|
}
|
|
|
|
function attachFormListeners(url) {
|
|
if (url === 'login.html') {
|
|
const registerButton = contentArea.querySelector('#register-btn');
|
|
if (registerButton) {
|
|
registerButton.addEventListener('click', () => {
|
|
loadContent('register_request.html');
|
|
});
|
|
}
|
|
const loginForm = contentArea.querySelector('#login-form');
|
|
if (loginForm) {
|
|
loginForm.addEventListener('submit', handleLoginFormSubmit);
|
|
}
|
|
} else if (url === 'add_restaurant.html') {
|
|
const addRestaurantForm = contentArea.querySelector('#add-restaurant-form');
|
|
if (addRestaurantForm) {
|
|
addRestaurantForm.addEventListener('submit', handleAddRestaurantFormSubmit);
|
|
}
|
|
} else if (url === 'register_request.html') {
|
|
const registerRequestForm = contentArea.querySelector('#register-request-form');
|
|
if (registerRequestForm) {
|
|
registerRequestForm.addEventListener('submit', handleRegisterRequestFormSubmit);
|
|
}
|
|
} else if (url === 'logged_in.html') {
|
|
// Event listeners for accept/reject buttons are attached in loadRegistrationRequests()
|
|
const changePasswordForm = contentArea.querySelector('#change-password-form');
|
|
if (changePasswordForm) {
|
|
changePasswordForm.addEventListener('submit', handleChangePasswordFormSubmit);
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleLoginFormSubmit(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('php/login.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
setLoggedInCookie();
|
|
checkLoginStatus(); // Reload content based on login
|
|
} else {
|
|
const errorDiv = contentArea.querySelector('.error');
|
|
if (errorDiv) {
|
|
errorDiv.textContent = data.error;
|
|
} else {
|
|
contentArea.innerHTML += '<p class="error">' + data.error + '</p>';
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error during login:', error);
|
|
contentArea.innerHTML = '<p class="error">Login failed due to network error.</p>';
|
|
});
|
|
}
|
|
|
|
function handleAddRestaurantFormSubmit(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('php/add_restaurant.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const errorDiv = contentArea.querySelector('.error');
|
|
const successDiv = contentArea.querySelector('.success');
|
|
if (data.success) {
|
|
if (successDiv) {
|
|
successDiv.textContent = data.message;
|
|
} else {
|
|
contentArea.innerHTML += '<p class="success">' + data.message + '</p>';
|
|
}
|
|
document.getElementById('add-restaurant-form').reset();
|
|
} else {
|
|
if (errorDiv) {
|
|
errorDiv.textContent = data.error;
|
|
} else {
|
|
contentArea.innerHTML += '<p class="error">' + data.error + '</p>';
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error adding restaurant:', error);
|
|
contentArea.innerHTML = '<p class="error">Failed to add restaurant.</p>';
|
|
});
|
|
}
|
|
|
|
function handleRegisterRequestFormSubmit(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('php/register_request.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const errorDiv = contentArea.querySelector('#register-request-form + .error');
|
|
const successDiv = contentArea.querySelector('#register-request-form + .error + .success');
|
|
if (data.success) {
|
|
if (successDiv) {
|
|
successDiv.textContent = data.message;
|
|
} else {
|
|
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="success">' + data.message + '</p>');
|
|
}
|
|
document.getElementById('register-request-form').reset();
|
|
} else {
|
|
if (errorDiv) {
|
|
errorDiv.textContent = data.error;
|
|
} else {
|
|
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="error">' + data.error + '</p>');
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error requesting registration:', error);
|
|
const errorDiv = document.querySelector('#register-request-form + .error');
|
|
if (errorDiv) {
|
|
errorDiv.textContent = 'Failed to request account due to network error.';
|
|
} else {
|
|
document.querySelector('#register-request-form').insertAdjacentHTML('afterend', '<p class="error">Failed to request account due to network error.</p>');
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleChangePasswordFormSubmit(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(this);
|
|
fetch('php/process_registration.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
alert(data.message);
|
|
document.getElementById('change-password-form').reset();
|
|
} else {
|
|
alert(data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error changing password:', error);
|
|
alert('Failed to change password.');
|
|
});
|
|
}
|
|
|
|
function setLoggedInCookie() {
|
|
const expiryDate = new Date(Date.now() + 10 * 60 * 1000); // 10 minutes
|
|
document.cookie = `loggedIn=true; expires=${expiryDate.toUTCString()}; path=/`;
|
|
}
|
|
|
|
function deleteLoggedInCookie() {
|
|
document.cookie = 'loggedIn=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
}
|
|
|
|
function getCookie(name) {
|
|
const value = `; ${document.cookie}`;
|
|
const parts = value.split(`; ${name}=`);
|
|
if (parts.length === 2) return parts.pop().split(';').shift();
|
|
}
|
|
|
|
function checkLoginStatus() {
|
|
const loggedIn = getCookie('loggedIn');
|
|
|
|
if (loggedIn) {
|
|
loginLink.textContent = 'Logout';
|
|
loginLink.removeEventListener('click', handleLoginClick);
|
|
loginLink.addEventListener('click', handleLogoutClick);
|
|
// For simplicity, we'll just show the admin link if logged in.
|
|
// A more robust solution would involve checking the user's role on the server.
|
|
adminLinkItem.style.display = 'inline-block';
|
|
addRestaurantBtn.style.display = 'inline-block';
|
|
loadContent('overview.html'); // Load a default logged-in view
|
|
} else {
|
|
loginLink.textContent = 'Login';
|
|
loginLink.removeEventListener('click', handleLogoutClick);
|
|
loginLink.addEventListener('click', handleLoginClick);
|
|
adminLinkItem.style.display = 'none';
|
|
addRestaurantBtn.style.display = 'none';
|
|
loadContent('login.html'); // Load login form by default
|
|
}
|
|
}
|
|
|
|
function handleLoginClick(event) {
|
|
event.preventDefault();
|
|
loadContent('login.html');
|
|
}
|
|
|
|
function handleLogoutClick(event) {
|
|
event.preventDefault();
|
|
fetch('php/logout.php')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
deleteLoggedInCookie();
|
|
checkLoginStatus(); // Reload based on logout
|
|
} else {
|
|
console.error('Logout failed:', data.error);
|
|
alert('Logout failed.');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error during logout:', error);
|
|
alert('Logout failed due to network error.');
|
|
});
|
|
}
|
|
|
|
// Initial check on page load
|
|
checkLoginStatus();
|
|
</script>
|
|
</body>
|
|
</html> |