Invario/Inventarsystem
3
1
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases 216 Wiki Activity

improvements in processing the library item uploading
Release Inventarsystem / release-docker (push) Successful in 2m16s
Details

Browse Source
This commit is contained in:
AIIrondev
2026-08-16 22:50:17 +02:00
parent 8783f97a09
commit c62b2b553d
2 changed files with 110 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/upload_admin.html
+71 -84
View File
@@ -876,12 +876,14 @@
</div>
<!-- Image upload -->
<div class="form-group">
<label for="images">Bilder:</label>
<label>Buchcover (automatisch):</label>
<div id="book-cover-preview-container"></div>
</div>
<div class="form-group">
<label for="images"> Bilder hinzufügen:</label>
<input type="file" id="images" name="images" accept=".jpg, .jpeg, .png, .gif" multiple>
<div class="allowed-formats">Erlaubte Formate: JPG, JPEG, PNG, GIF</div>
<!-- Add image preview area -->
<div class="image-preview-container" id="image-preview-container"></div>
</div>
@@ -1669,23 +1671,24 @@
}, 3000);
}
// Function to download book cover image
function downloadBookCover(imageUrl) {
if (!imageUrl) {
console.log('No image URL provided');
return;
}
// Show loading indicator for image download
const imagePreviewContainer = document.getElementById('image-preview-container');
if (imagePreviewContainer) {
const loadingDiv = document.createElement('div');
loadingDiv.className = 'image-loading';
loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
imagePreviewContainer.appendChild(loadingDiv);
const coverPreviewContainer = document.getElementById('book-cover-preview-container');
if (!coverPreviewContainer) {
console.error('Error: "book-cover-preview-container" not found in the DOM.');
return;
}
// Download the image via backend
const loadingDiv = document.createElement('div');
loadingDiv.className = 'image-loading';
loadingDiv.innerHTML = '<div class="loading-spinner">Buchcover wird heruntergeladen...</div>';
coverPreviewContainer.appendChild(loadingDiv);
fetch('/download_book_cover', {
method: 'POST',
headers: {
@@ -1693,78 +1696,63 @@
},
body: JSON.stringify({ url: imageUrl })
})
.then(response => response.json())
.then(data => {
// Remove loading indicator
const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
if (loadingDiv) {
loadingDiv.remove();
}
if (data.success) {
// Create a preview of the downloaded image
const imagePreview = document.createElement('div');
imagePreview.className = 'book-cover-preview';
imagePreview.innerHTML = `
<div class="preview-item">
<img src="{{ url_for('uploaded_file', filename='') }}${data.filename}"
alt="Buchcover" class="book-cover-thumbnail">
<p class="book-cover-caption">Buchcover automatisch heruntergeladen</p>
<input type="hidden" name="book_cover_image" value="${data.filename}">
<button type="button" onclick="removeBookCover(this)"
class="remove-book-cover-button">
Entfernen
</button>
</div>
`;
if (imagePreviewContainer) {
imagePreviewContainer.appendChild(imagePreview);
.then(response => response.json())
.then(data => {
const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
if (currentLoadingDiv) {
currentLoadingDiv.remove();
}
console.log('Book cover downloaded successfully:', data.filename);
} else {
console.error('Failed to download book cover:', data.error);
// Show error message to user
if (imagePreviewContainer) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = 'Fehler beim Herunterladen des Buchcovers: ' + data.error;
errorDiv.style.fontSize = '0.8em';
errorDiv.style.padding = '5px';
errorDiv.style.marginTop = '5px';
imagePreviewContainer.appendChild(errorDiv);
// Remove error message after 5 seconds
setTimeout(() => errorDiv.remove(), 5000);
if (data.success) {
coverPreviewContainer.innerHTML = '';
const imagePreview = document.createElement('div');
imagePreview.className = 'book-cover-preview';
imagePreview.innerHTML = `
<div class="preview-item">
<img src="/uploads/${data.filename}"
alt="Buchcover" class="book-cover-thumbnail" style="max-width: 150px; border-radius: 4px;">
<p class="book-cover-caption" style="font-size: 0.9em; color: #555;">Buchcover automatisch heruntergeladen</p>
<input type="hidden" name="book_cover_image" value="${data.filename}">
<button type="button" onclick="removeBookCover(this)"
class="remove-book-cover-button btn btn-sm btn-danger">
Entfernen
</button>
</div>
`;
coverPreviewContainer.appendChild(imagePreview);
console.log('Book cover downloaded successfully:', data.filename);
} else {
console.error('Failed to download book cover:', data.error);
showCoverError(coverPreviewContainer, 'Fehler beim Herunterladen des Buchcovers: ' + data.error);
}
}
})
.catch(error => {
console.error('Error downloading book cover:', error);
// Remove loading indicator
const loadingDiv = imagePreviewContainer?.querySelector('.image-loading');
if (loadingDiv) {
loadingDiv.remove();
}
// Show error message
if (imagePreviewContainer) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = 'Netzwerkfehler beim Herunterladen des Buchcovers';
errorDiv.style.fontSize = '0.8em';
errorDiv.style.padding = '5px';
errorDiv.style.marginTop = '5px';
imagePreviewContainer.appendChild(errorDiv);
// Remove error message after 5 seconds
setTimeout(() => errorDiv.remove(), 5000);
}
});
})
.catch(error => {
console.error('Error downloading book cover:', error);
const currentLoadingDiv = coverPreviewContainer.querySelector('.image-loading');
if (currentLoadingDiv) {
currentLoadingDiv.remove();
}
showCoverError(coverPreviewContainer, 'Netzwerkfehler beim Herunterladen des Buchcovers');
});
}
// Function to remove downloaded book cover
function showCoverError(container, message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
errorDiv.style.fontSize = '0.8em';
errorDiv.style.color = 'red';
errorDiv.style.padding = '5px';
errorDiv.style.marginTop = '5px';
container.appendChild(errorDiv);
setTimeout(() => errorDiv.remove(), 5000);
}
function removeBookCover(button) {
const previewItem = button.closest('.preview-item');
if (previewItem) {
@@ -1772,7 +1760,6 @@
}
}
// Code validation functions
function checkCodeUnique(code, excludeId, callback) {
if (!code || code.trim() === '') {
callback(true);