update to use single html with dynamic div
This commit is contained in:
+268
@@ -0,0 +1,268 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user