Spaces:
Sleeping
Sleeping
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{{ page_title }}</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; } | |
| select, input, button { margin: 10px 0; padding: 5px; } | |
| #message { margin-top: 20px; font-weight: bold; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>{{ page_title }}</h1> | |
| <h2>Buch zurückgeben</h2> | |
| <input type="number" id="returnBookId" placeholder="Buchnummer eingeben"> | |
| <button onclick="returnBook()">Buch zurückgeben</button> | |
| <h2>Buch ausleihen</h2> | |
| <select id="groupSelect" onchange="loadStudents()"> | |
| <option value="">Gruppe auswählen</option> | |
| </select> | |
| <select id="studentSelect" onchange="loadOutstandingBooks()"> | |
| <option value="">Schüler auswählen</option> | |
| </select> | |
| <input type="number" id="borrowBookId" placeholder="Buchnummer eingeben"> | |
| <button onclick="borrowBook()">Buch ausleihen</button> | |
| <div id="message"></div> | |
| <div id="outstandingBooks"></div> | |
| <script> | |
| // Load groups when the page loads | |
| window.onload = function() { | |
| loadGroups(); | |
| document.getElementById('returnBookId').addEventListener('keyup', function(event) { | |
| if (event.key === 'Enter') { | |
| returnBook(); | |
| } | |
| }); | |
| document.getElementById('borrowBookId').addEventListener('keyup', function(event) { | |
| if (event.key === 'Enter') { | |
| borrowBook(); | |
| } | |
| }); | |
| }; | |
| function loadGroups() { | |
| fetch('/groups') | |
| .then(response => response.json()) | |
| .then(groups => { | |
| const select = document.getElementById('groupSelect'); | |
| // Add "Alle Gruppen" option | |
| const allGroupsOption = document.createElement('option'); | |
| allGroupsOption.value = "all"; | |
| allGroupsOption.textContent = "Alle Gruppen"; | |
| select.appendChild(allGroupsOption); | |
| // Add other groups | |
| groups.forEach(group => { | |
| const option = document.createElement('option'); | |
| option.value = group.idGruppe; | |
| option.textContent = group.Gruppe; | |
| select.appendChild(option); | |
| }); | |
| }); | |
| } | |
| function loadStudents() { | |
| const groupId = document.getElementById('groupSelect').value; | |
| if (!groupId) return; | |
| let url = groupId === 'all' ? '/students/all' : `/students/${groupId}`; | |
| fetch(url) | |
| .then(response => response.json()) | |
| .then(students => { | |
| const select = document.getElementById('studentSelect'); | |
| select.innerHTML = '<option value="">Schüler auswählen</option>'; | |
| students.forEach(student => { | |
| const option = document.createElement('option'); | |
| option.value = student.idKind; | |
| option.textContent = student.Kind; | |
| select.appendChild(option); | |
| }); | |
| // Clear outstanding books when changing students | |
| document.getElementById('outstandingBooks').innerHTML = ''; | |
| }); | |
| } | |
| function loadOutstandingBooks() { | |
| const studentId = document.getElementById('studentSelect').value; | |
| if (!studentId) { | |
| document.getElementById('outstandingBooks').innerHTML = ''; | |
| return; | |
| } | |
| fetch(`/borrowed/${studentId}`) | |
| .then(response => response.json()) | |
| .then(books => { | |
| const outstandingBooksDiv = document.getElementById('outstandingBooks'); | |
| if (books.length === 0) { | |
| outstandingBooksDiv.innerHTML = '<p>Keine ausstehenden Bücher</p>'; | |
| } else { | |
| let html = '<h3>Ausstehende Bücher:</h3><ul>'; | |
| books.forEach(book => { | |
| const borrowDate = new Date(book.ausleihe).toLocaleDateString('de-DE'); | |
| html += `<li>Buch ID: ${book.idBuch}, Ausgeliehen am: ${borrowDate}</li>`; | |
| }); | |
| html += '</ul>'; | |
| outstandingBooksDiv.innerHTML = html; | |
| } | |
| }); | |
| } | |
| function returnBook() { | |
| const bookId = document.getElementById('returnBookId').value; | |
| if (!bookId) { | |
| setMessage('Bitte geben Sie eine Buchnummer ein'); | |
| return; | |
| } | |
| fetch(`/return/${bookId}`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| if (result.success) { | |
| let message = `Buch (Nummer: ${bookId}) erfolgreich zurückgegeben.`; | |
| if (result.student_names.length === 1) { | |
| message += ` Ausgeliehen von: ${result.student_names[0]}`; | |
| } else if (result.student_names.length > 1) { | |
| message += ` Ausgeliehen von: ${result.student_names.join(', ')}`; | |
| } | |
| setMessage(message); | |
| document.getElementById('returnBookId').value = ''; // Clear input field | |
| } else { | |
| setMessage(`Buch (Nummer: ${bookId}) nicht zurückgegeben. ` + result.message); | |
| } | |
| }); | |
| } | |
| function borrowBook() { | |
| const studentId = document.getElementById('studentSelect').value; | |
| const bookId = document.getElementById('borrowBookId').value; | |
| if (!studentId || !bookId) { | |
| setMessage('Bitte wählen Sie einen Schüler aus und geben Sie eine Buchnummer ein'); | |
| return; | |
| } | |
| fetch(`/borrow/${bookId}/${studentId}`) | |
| .then(response => response.json()) | |
| .then(result => { | |
| if (result.success) { | |
| setMessage(`Buch (Nummer: ${bookId}) erfolgreich ausgeliehen`); | |
| document.getElementById('borrowBookId').value = ''; // Clear input field | |
| } else { | |
| setMessage('Fehler beim Ausleihen des Buches: ' + result.message); | |
| } | |
| // Refresh the outstanding books list | |
| loadOutstandingBooks(); | |
| }); | |
| } | |
| function setMessage(msg) { | |
| document.getElementById('message').textContent = msg; | |
| } | |
| </script> | |
| </body> | |
| </html> | |