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

slight fixes to fix the image displayment
Release Inventarsystem / release-docker (push) Successful in 2m17s
Details

Browse Source
This commit is contained in:
AIIrondev
2026-08-13 00:23:54 +02:00
parent e9b4cf0c25
commit 28f5991fa0
1 changed files with 18 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/library_table.html
+12 -17
View File
@@ -1256,23 +1256,22 @@
const detailContent = document.getElementById('detailContent'); const detailContent = document.getElementById('detailContent');
const detailModal = document.getElementById('detailModal'); const detailModal = document.getElementById('detailModal');
// 1. Show the loading state immediately
detailContent.innerHTML = '<p>Lade Details...</p>'; detailContent.innerHTML = '<p>Lade Details...</p>';
detailModal.style.display = 'flex'; detailModal.style.display = 'flex';
// 2. Generate Image/Video Gallery Client-Side
const item = libraryItems.find(i => i._id === itemId); const item = libraryItems.find(i => i._id === itemId);
let mediaHtml = ''; let mediaHtml = '';
// Sicherstellen, dass item.Images existiert und ein Array mit Elementen ist // Robuste Prüfung: Wir testen gängige Benennungen aus deinem Backend
if (item && Array.isArray(item.Images) && item.Images.length > 0) { const imageArray = item.Images || item.Bilder || item.images;
const imagesHtml = item.Images.map((image, index) => {
// Robuste Pfad-Generierung: Startet es nicht mit http oder /, setzen wir /uploads/ davor if (item && Array.isArray(imageArray) && imageArray.length > 0) {
let imageSrc = image; const imagesHtml = imageArray.map((image, index) => {
if (!image.startsWith('http') && !image.startsWith('/')) {
// Passe "/uploads/" an, falls dein Server-Ordner für Bilder anders heißt (z.B. "/static/uploads/") // Dein neuer Code für die exakte Routen-Generierung
imageSrc = '/uploads/' + image; const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ?
} image :
`{{ url_for('uploaded_file', filename='') }}${image}`;
const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index]; const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
const isVideo = isVideoFile(image); const isVideo = isVideoFile(image);
@@ -1305,21 +1304,17 @@
mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`; mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
} }
// 3. Fetch the data
fetch(`/api/item_detail/${itemId}`) fetch(`/api/item_detail/${itemId}`)
.then(response => { .then(response => {
if (!response.ok) { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.text(); return response.text();
}) })
.then(html => { .then(html => {
// 4. Clean the HTML and display it, injecting the media gallery before the fetched content
detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html); detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html);
}) })
.catch(err => { .catch(err => {
console.error('Error loading detail:', err); console.error('Error loading detail:', err);
detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden. Bitte versuche es später erneut.</p>'; detailContent.innerHTML = '<p style="color: red;">Entschuldigung, die Details konnten nicht geladen werden.</p>';
}); });
} }