knight/bookManagement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance library management system with new features and improvements

Browse Source 
- 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:
knight
2024-12-11 12:48:04 -05:00
parent a2a485dd8e
commit 370ad7c107
7 changed files with 289 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/index.html
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>

77
public/styles.css
View File

@@ -67,6 +67,43 @@ h1 {
background-color: #f0f0f0;
}
body.dark-mode #search-bar {
background-color: #333;
color: #fff;
border-color: #444;
}
#dark-mode-toggle {
position: fixed;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: background-color 0.3s;
opacity: 0.7;
}
#dark-mode-toggle:hover {
background-color: rgba(255, 255, 255, 0.7);
opacity: 1;
}
body.dark-mode #dark-mode-toggle {
background-color: rgba(0, 0, 0, 0.5);
}
body.dark-mode #dark-mode-toggle:hover {
background-color: rgba(0, 0, 0, 0.7);
}
table {
width: 90%;
margin: 20px auto;
@@ -121,3 +158,43 @@ a:hover {
outline-style: solid;
outline-width: 2px;
}
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
body.dark-mode table {
background-color: #2b2b2b;
}
body.dark-mode th, body.dark-mode td {
border-color: #444;
}
body.dark-mode button {
background-color: #333;
color: #fff;
}
body.dark-mode th {
background-color: #3a3a3a;
}
body.dark-mode td {
background-color: #2b2b2b;
}
body.dark-mode #book-table-body tr:nth-child(even) {
background-color: #333;
}
body.dark-mode #book-table-body tr:nth-child(odd) {
background-color: #2b2b2b;
}
body.dark-mode #book-table-body tr:hover {
background-color: #444;
}
/* Add more styles as needed for other elements */