Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Library App</title> | |
| </head> | |
| <body> | |
| <h1>Library App</h1> | |
| <!-- Borrow a Book --> | |
| <section id="borrow-section"> | |
| <h2>Borrow a Book</h2> | |
| <button onclick="loadGroups('borrow')">Select Group</button> | |
| <div id="borrow-controls" style="display: none;"> | |
| <select id="group-select-borrow" onchange="loadStudents('borrow')"></select> | |
| <select id="student-select-borrow"></select> | |
| <input type="text" id="book-id-borrow" placeholder="Enter Book ID"> | |
| <button onclick="borrowBook()">Borrow Book</button> | |
| </div> | |
| <div id="borrow-result"></div> | |
| </section> | |
| <!-- Return Books --> | |
| <section id="return-section"> | |
| <h2>Return Books</h2> | |
| <input type="text" id="book-id-return" placeholder="Enter Book ID"> | |
| <button onclick="returnBook()">Return Book</button> | |
| <div id="return-result"></div> | |
| </section> | |
| <!-- List Outstanding Books --> | |
| <section id="list-section"> | |
| <h2>List Outstanding Books</h2> | |
| <button onclick="loadGroups('list')">Select Group</button> | |
| <div id="list-controls" style="display: none;"> | |
| <select id="group-select-list" onchange="loadStudents('list')"></select> | |
| <select id="student-select-list"></select> | |
| <button onclick="listOutstandingBooks()">Show Outstanding Books</button> | |
| </div> | |
| <div id="list-result"></div> | |
| </section> | |
| <!-- Inventory --> | |
| <section id="inventory-section"> | |
| <h2>Inventory</h2> | |
| <input type="text" id="book-id-inventory" placeholder="Enter Book ID"> | |
| <button onclick="inventoryBook()">Inventory Book</button> | |
| <div id="inventory-result"></div> | |
| </section> | |
| <script> | |
| const apiUrl = 'http://localhost:8000'; // Replace with your actual API URL | |
| // Load groups for selection | |
| function loadGroups(mode) { | |
| fetch(`${apiUrl}/groups`) | |
| .then(response => response.json()) | |
| .then(groups => { | |
| let groupSelect = document.getElementById(`group-select-${mode}`); | |
| groupSelect.innerHTML = '<option value="">Select Group</option>'; | |
| groups.forEach(group => { | |
| groupSelect.innerHTML += `<option value="${group.id}">${group.name}</option>`; | |
| }); | |
| document.getElementById(`${mode}-controls`).style.display = 'block'; | |
| }); | |
| } | |
| // Load students based on selected group | |
| function loadStudents(mode) { | |
| const groupId = document.getElementById(`group-select-${mode}`).value; | |
| if (groupId) { | |
| fetch(`${apiUrl}/students/${groupId}`) | |
| .then(response => response.json()) | |
| .then(students => { | |
| let studentSelect = document.getElementById(`student-select-${mode}`); | |
| studentSelect.innerHTML = '<option value="">Select Student</option>'; | |
| students.forEach(student => { | |
| studentSelect.innerHTML += `<option value="${student.id}">${student.name}</option>`; | |
| }); | |
| }); | |
| } | |
| } | |
| // Borrow a book | |
| function borrowBook() { | |
| const studentId = document.getElementById('student-select-borrow').value; | |
| const bookId = document.getElementById('book-id-borrow').value; | |
| if (studentId && bookId) { | |
| fetch(`${apiUrl}/borrow/${bookId}/${studentId}`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| document.getElementById('borrow-result').innerText = JSON.stringify(result); | |
| }); | |
| } else { | |
| alert('Please select a student and enter a book ID.'); | |
| } | |
| } | |
| // Return a book | |
| function returnBook() { | |
| const bookId = document.getElementById('book-id-return').value; | |
| if (bookId) { | |
| fetch(`${apiUrl}/return/${bookId}?grund=rueckgabe`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| document.getElementById('return-result').innerText = JSON.stringify(result); | |
| }); | |
| } else { | |
| alert('Please enter a book ID.'); | |
| } | |
| } | |
| // List outstanding books | |
| function listOutstandingBooks() { | |
| const studentId = document.getElementById('student-select-list').value; | |
| if (studentId) { | |
| fetch(`${apiUrl}/borrowed/${studentId}`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| document.getElementById('list-result').innerText = JSON.stringify(result); | |
| }); | |
| } else { | |
| alert('Please select a student.'); | |
| } | |
| } | |
| // Inventory a book | |
| function inventoryBook() { | |
| const bookId = document.getElementById('book-id-inventory').value; | |
| if (bookId) { | |
| fetch(`${apiUrl}/return/${bookId}?grund=inventory`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| document.getElementById('inventory-result').innerText = JSON.stringify(result); | |
| }); | |
| } else { | |
| alert('Please enter a book ID.'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |