Enhance library management system with new features and improvements

- Updated `docker-compose.yml` to include `ADMIN_PASSWORD` environment variable for enhanced security.
- Modified `index.js` to allow checkout requests to capture user names and improved email notifications with detailed information.
- Added a new endpoint to fetch books currently on loan, providing better tracking of borrowed items.
- Implemented a `list_books_on_loan` function in `libraryManager.py` to display books on loan in a formatted table.
- Updated `models.js` to include an `approved` column in the `Checkout` model for tracking approval status.
- Enhanced the user interface in `public/index.html` with a dark mode toggle and improved checkout request handling.
- Updated styles in `public/styles.css` to support dark mode and improve overall aesthetics.
This commit is contained in:
2024-12-11 12:48:04 -05:00
parent a2a485dd8e
commit 370ad7c107
7 changed files with 289 additions and 71 deletions

View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="dark-mode-toggle">🌙</button>
<h1>Ramsey Library</h1>
<input type="text" id="search-bar" placeholder="Search by title, author, publisher, etc.">
@@ -90,8 +91,12 @@ function setCookie(name, value, days) {
// Client-side function to request checkout
function requestCheckout(isbn) {
let email = getCookie('lastEmail') || prompt('Please enter your email:');
let name = getCookie('lastName') || prompt('Please enter your name:');
let email = getCookie('lastEmail') || '';
let name = getCookie('lastName') || '';
// Prompt the user for email and name, pre-filling with existing values if available
email = prompt('Please enter your email:', email);
name = prompt('Please enter your name:', name);
if (!email || !name) {
alert('Email and name are required to proceed with checkout.');
@@ -142,6 +147,28 @@ function requestCheckout(isbn) {
rows.forEach(row => table.tBodies[0].appendChild(row));
table.setAttribute('data-sort-order', isAscending ? 'desc' : 'asc');
}
// Dark mode toggle functionality
const darkModeToggle = document.getElementById('dark-mode-toggle');
const body = document.body;
// Check for saved user preference, if any, on load
if (localStorage.getItem('darkMode') === 'enabled') {
body.classList.add('dark-mode');
darkModeToggle.textContent = '☀️'; // Set to sun icon if dark mode is enabled
}
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
// Toggle icon
if (body.classList.contains('dark-mode')) {
darkModeToggle.textContent = '☀️'; // Sun icon
localStorage.setItem('darkMode', 'enabled');
} else {
darkModeToggle.textContent = '🌙'; // Moon icon
localStorage.setItem('darkMode', 'disabled');
}
});
</script>
</body>
</html>