Reverted Faulti changes that have proven not worth implementing
This commit is contained in:
-60
@@ -3484,66 +3484,6 @@ def api_library_scan_action():
|
||||
client.close()
|
||||
|
||||
|
||||
@app.route('/api/scan_upload', methods=['POST'])
|
||||
def api_scan_upload():
|
||||
"""
|
||||
Server-side barcode/QR decoding endpoint.
|
||||
Accepts image upload and returns detected barcodes (fallback for client-side scanner).
|
||||
"""
|
||||
if 'username' not in session:
|
||||
return jsonify({'ok': False, 'message': 'Nicht angemeldet.'}), 401
|
||||
|
||||
try:
|
||||
from pyzbar.pyzbar import decode
|
||||
from PIL import Image
|
||||
import io
|
||||
except ImportError:
|
||||
return jsonify({'ok': False, 'message': 'pyzbar library not installed on server.'}), 500
|
||||
|
||||
if 'image' not in request.files:
|
||||
return jsonify({'ok': False, 'message': 'Keine Bilddatei bereitgestellt.'}), 400
|
||||
|
||||
file = request.files['image']
|
||||
if file.filename == '':
|
||||
return jsonify({'ok': False, 'message': 'Datei ist leer.'}), 400
|
||||
|
||||
try:
|
||||
# Decode image
|
||||
image = Image.open(io.BytesIO(file.read()))
|
||||
image = image.convert('RGB')
|
||||
|
||||
# Detect barcodes using pyzbar
|
||||
results = decode(image)
|
||||
|
||||
if not results:
|
||||
return jsonify({'ok': False, 'message': 'Kein Barcode im Bild erkannt.'}), 400
|
||||
|
||||
# Return all detected barcodes, sorted by confidence (quality)
|
||||
barcodes = [
|
||||
{
|
||||
'type': result.type,
|
||||
'value': result.data.decode('utf-8'),
|
||||
'rect': {
|
||||
'x': result.rect.left,
|
||||
'y': result.rect.top,
|
||||
'width': result.rect.width,
|
||||
'height': result.rect.height,
|
||||
}
|
||||
}
|
||||
for result in results
|
||||
]
|
||||
|
||||
return jsonify({
|
||||
'ok': True,
|
||||
'barcodes': barcodes,
|
||||
'message': f'{len(barcodes)} Barcode(s) erkannt.'
|
||||
}), 200
|
||||
|
||||
except Exception as e:
|
||||
app.logger.error(f"Error decoding barcode image: {e}")
|
||||
return jsonify({'ok': False, 'message': f'Fehler beim Dekodieren: {str(e)}'}), 500
|
||||
|
||||
|
||||
@app.route('/api/item_detail/<item_id>')
|
||||
def api_item_detail(item_id):
|
||||
"""
|
||||
|
||||
@@ -15,4 +15,3 @@ openpyxl
|
||||
cryptography>=42.0.0
|
||||
pywebpush
|
||||
py-vapid>=1.9.0
|
||||
pyzbar
|
||||
|
||||
@@ -1,353 +0,0 @@
|
||||
/**
|
||||
* Hybrid Barcode Scanner
|
||||
* Supports: Real-time camera scanning (ZXing.js), image upload fallback (server-side pyzbar),
|
||||
* and USB/keyboard scanner emulation.
|
||||
*/
|
||||
|
||||
class HybridScanner {
|
||||
constructor(options = {}) {
|
||||
this.options = {
|
||||
videoId: options.videoId || 'scanner-video',
|
||||
canvasId: options.canvasId || 'scanner-canvas',
|
||||
formats: options.formats || ['QR_CODE', 'CODE_128', 'EAN_13', 'ISBN', 'CODE_39', 'UPC_A'],
|
||||
fps: options.fps || 10,
|
||||
onSuccess: options.onSuccess || (() => {}),
|
||||
onError: options.onError || (() => {}),
|
||||
facingMode: options.facingMode || 'environment', // 'environment' for rear, 'user' for front
|
||||
};
|
||||
|
||||
this.state = {
|
||||
isRunning: false,
|
||||
stream: null,
|
||||
reader: null,
|
||||
canvas: null,
|
||||
videoElement: null,
|
||||
zxingReady: false,
|
||||
lastScanTime: 0,
|
||||
scanDebounceMs: 300, // Prevent rapid duplicate scans
|
||||
};
|
||||
|
||||
this.keyboardInputBuffer = '';
|
||||
this.keyboardInputTimeout = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize ZXing library from CDN
|
||||
*/
|
||||
async initZXing() {
|
||||
if (this.state.zxingReady) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return new Promise((resolve) => {
|
||||
// Load ZXing library from CDN
|
||||
if (typeof ZXing !== 'undefined') {
|
||||
this.state.zxingReady = true;
|
||||
resolve(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// Use fallback URL for better mobile compatibility
|
||||
let scriptUrl = 'https://unpkg.com/@zxing/library@latest/umd/index.min.js';
|
||||
|
||||
// Check if already loading
|
||||
const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
|
||||
if (existingScript) {
|
||||
existingScript.addEventListener('load', () => {
|
||||
this.state.zxingReady = typeof ZXing !== 'undefined';
|
||||
resolve(this.state.zxingReady);
|
||||
}, { once: true });
|
||||
existingScript.addEventListener('error', () => {
|
||||
console.error('Failed to load ZXing library');
|
||||
resolve(false);
|
||||
}, { once: true });
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = scriptUrl;
|
||||
script.async = true;
|
||||
script.onload = () => {
|
||||
this.state.zxingReady = typeof ZXing !== 'undefined';
|
||||
resolve(this.state.zxingReady);
|
||||
};
|
||||
script.onerror = () => {
|
||||
console.error('Failed to load ZXing library');
|
||||
resolve(false);
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Start real-time barcode scanning via camera
|
||||
*/
|
||||
async start() {
|
||||
if (this.state.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Ensure ZXing is loaded
|
||||
const zxingReady = await this.initZXing();
|
||||
if (!zxingReady) {
|
||||
this.options.onError('ZXing library failed to load. Please use image upload fallback.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Get DOM elements
|
||||
this.state.videoElement = document.getElementById(this.options.videoId);
|
||||
this.state.canvas = document.getElementById(this.options.canvasId);
|
||||
|
||||
if (!this.state.videoElement || !this.state.canvas) {
|
||||
this.options.onError('Scanner video or canvas element not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Request camera access
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode: this.options.facingMode,
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
},
|
||||
audio: false,
|
||||
});
|
||||
|
||||
this.state.stream = stream;
|
||||
this.state.videoElement.srcObject = stream;
|
||||
|
||||
// Make video element visible (ensure it's not hidden by display: none)
|
||||
this.state.videoElement.style.display = 'block';
|
||||
// Ensure autoplay works on mobile by muting and setting playsInline
|
||||
try {
|
||||
this.state.videoElement.muted = true;
|
||||
this.state.videoElement.autoplay = true;
|
||||
this.state.videoElement.playsInline = true;
|
||||
// Some browsers require explicit play() after setting srcObject
|
||||
const p = this.state.videoElement.play();
|
||||
if (p && p.then) {
|
||||
p.catch(() => {
|
||||
// ignore play promise rejection (user gesture required on some browsers)
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
|
||||
// Initialize ZXing reader
|
||||
const hints = new Map();
|
||||
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, this.options.formats);
|
||||
hints.set(ZXing.DecodeHintType.TRY_HARDER, true);
|
||||
this.state.reader = new ZXing.BrowserMultiFormatReader(hints);
|
||||
|
||||
this.state.isRunning = true;
|
||||
|
||||
// Start scanning loop
|
||||
this.scanLoop();
|
||||
|
||||
// Setup keyboard input fallback for USB scanners
|
||||
this.setupKeyboardInput();
|
||||
} catch (err) {
|
||||
this.options.onError(`Camera error: ${err.message || err}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop barcode scanning
|
||||
*/
|
||||
stop() {
|
||||
if (!this.state.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.state.isRunning = false;
|
||||
|
||||
if (this.state.stream) {
|
||||
this.state.stream.getTracks().forEach((track) => track.stop());
|
||||
this.state.stream = null;
|
||||
}
|
||||
|
||||
if (this.state.videoElement) {
|
||||
this.state.videoElement.srcObject = null;
|
||||
this.state.videoElement.style.display = 'none';
|
||||
}
|
||||
|
||||
// Reset ZXing reader to stop any internal loops
|
||||
try {
|
||||
if (this.state.reader && typeof this.state.reader.reset === 'function') {
|
||||
this.state.reader.reset();
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
this.state.reader = null;
|
||||
|
||||
this.removeKeyboardInput();
|
||||
}
|
||||
|
||||
/**
|
||||
* Main scanning loop for real-time frame processing
|
||||
*/
|
||||
scanLoop() {
|
||||
if (!this.state.isRunning) {
|
||||
return;
|
||||
}
|
||||
|
||||
const canvas = this.state.canvas;
|
||||
const video = this.state.videoElement;
|
||||
|
||||
if (!video || !canvas) {
|
||||
setTimeout(() => this.scanLoop(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (video.readyState === video.HAVE_ENOUGH_DATA) {
|
||||
try {
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
|
||||
if (canvas.width === 0 || canvas.height === 0) {
|
||||
setTimeout(() => this.scanLoop(), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
if (context) {
|
||||
context.drawImage(video, 0, 0);
|
||||
|
||||
try {
|
||||
const luminanceSource = new ZXing.HTMLCanvasElementLuminanceSource(canvas);
|
||||
const binaryBitmap = new ZXing.BinaryBitmap(new ZXing.HybridBinarizer(luminanceSource));
|
||||
|
||||
try {
|
||||
const result = this.state.reader.decodeFromBitmap(binaryBitmap);
|
||||
this.handleScanResult(result.text);
|
||||
} catch (e) {
|
||||
// No barcode found in frame; continue scanning
|
||||
}
|
||||
} catch (err) {
|
||||
// Silently ignore canvas errors
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Scan loop error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Throttle scan loop based on FPS setting
|
||||
setTimeout(() => this.scanLoop(), 1000 / this.options.fps);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle successful barcode scan with debouncing
|
||||
*/
|
||||
handleScanResult(scannedText) {
|
||||
const now = Date.now();
|
||||
if (now - this.state.lastScanTime < this.state.scanDebounceMs) {
|
||||
return; // Ignore rapid duplicates
|
||||
}
|
||||
|
||||
this.state.lastScanTime = now;
|
||||
this.options.onSuccess(scannedText.trim());
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup keyboard input listener for USB scanner emulation
|
||||
* Most USB scanners emulate keyboard input (barcode followed by Enter)
|
||||
*/
|
||||
setupKeyboardInput() {
|
||||
this.keyboardListener = (event) => {
|
||||
// Allow only alphanumeric, dash, colon (common in barcodes)
|
||||
if (/^[a-zA-Z0-9:_\-]$/.test(event.key)) {
|
||||
event.preventDefault();
|
||||
this.keyboardInputBuffer += event.key;
|
||||
|
||||
// Reset timeout for multi-part barcodes
|
||||
if (this.keyboardInputTimeout) {
|
||||
clearTimeout(this.keyboardInputTimeout);
|
||||
}
|
||||
} else if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
if (this.keyboardInputBuffer.length > 0) {
|
||||
this.handleScanResult(this.keyboardInputBuffer);
|
||||
this.keyboardInputBuffer = '';
|
||||
}
|
||||
} else if (event.key === 'Escape') {
|
||||
this.keyboardInputBuffer = '';
|
||||
this.stop();
|
||||
}
|
||||
|
||||
// Auto-trigger if buffer looks complete (common barcode lengths)
|
||||
if ([8, 12, 13, 17].includes(this.keyboardInputBuffer.length)) {
|
||||
this.keyboardInputTimeout = setTimeout(() => {
|
||||
if (this.keyboardInputBuffer.length > 0) {
|
||||
this.handleScanResult(this.keyboardInputBuffer);
|
||||
this.keyboardInputBuffer = '';
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', this.keyboardListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove keyboard input listener
|
||||
*/
|
||||
removeKeyboardInput() {
|
||||
if (this.keyboardListener) {
|
||||
document.removeEventListener('keydown', this.keyboardListener);
|
||||
this.keyboardListener = null;
|
||||
}
|
||||
this.keyboardInputBuffer = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload image for server-side decoding (fallback)
|
||||
* Requires /api/scan_upload endpoint
|
||||
*/
|
||||
static async uploadImageForDecoding(file, onSuccess, onError) {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('image', file);
|
||||
|
||||
const response = await fetch('/api/scan_upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.ok && data.barcodes && data.barcodes.length > 0) {
|
||||
// Return first detected barcode (highest confidence)
|
||||
onSuccess(data.barcodes[0].value);
|
||||
} else {
|
||||
onError(data.message || 'No barcode detected in image.');
|
||||
}
|
||||
} catch (err) {
|
||||
onError(`Upload error: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle camera (front/rear on mobile)
|
||||
*/
|
||||
toggleCamera() {
|
||||
if (this.options.facingMode === 'environment') {
|
||||
this.options.facingMode = 'user';
|
||||
} else {
|
||||
this.options.facingMode = 'environment';
|
||||
}
|
||||
|
||||
// Restart scanning with new camera
|
||||
this.stop();
|
||||
this.start();
|
||||
}
|
||||
}
|
||||
|
||||
// Export for use in templates
|
||||
if (typeof window !== 'undefined') {
|
||||
window.HybridScanner = HybridScanner;
|
||||
}
|
||||
+13
-313
@@ -67,22 +67,8 @@
|
||||
|
||||
<!-- Scanner Panel -->
|
||||
<div id="qrContainer" class="qr-container" style="display: none;">
|
||||
<div class="scanner-header">
|
||||
<h3>Barcode/QR-Code Scanner</h3>
|
||||
<div class="scanner-controls">
|
||||
<button type="button" id="cameraToggle" class="scanner-button" title="Kamera wechseln">📷 Kamera</button>
|
||||
<label for="uploadScanImage" class="scanner-button" title="Bild hochladen zum Dekodieren">📤 Upload</label>
|
||||
<input type="file" id="uploadScanImage" accept="image/*" style="display: none;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="scanner-video-wrapper">
|
||||
<video id="qr-reader" playsinline style="width: 100%; max-width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px;"></video>
|
||||
<canvas id="scanner-canvas" style="display: none;"></canvas>
|
||||
</div>
|
||||
<div id="scanMessage" class="scanner-message" style="margin-top: 10px; text-align: center; font-weight: bold; color: #666;"></div>
|
||||
<p style="font-size: 0.85em; color: #999; margin-top: 10px; margin-bottom: 0; text-align: center;">
|
||||
💡 Hinweis: Scan-Ergebnis wird automatisch in das Feld oben übernommen. USB-Scanner werden als Tastatureingabe erkannt.
|
||||
</p>
|
||||
<div id="qr-reader" style="width: auto; height: 300px;"></div>
|
||||
<span id="qr-result" style="display: none;"></span>
|
||||
</div>
|
||||
|
||||
<!-- Table Header (only in table mode) -->
|
||||
@@ -220,8 +206,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
|
||||
<script src="/static/js/scanner.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/minified/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
// View mode persistence
|
||||
const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
|
||||
@@ -564,29 +549,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
|
||||
initMobileWindowedLibraryLoading();
|
||||
// On mobile, make tapping an item open details for easier access (tap target larger)
|
||||
function enableMobileTapToDetails() {
|
||||
if (!isMobileViewport()) return;
|
||||
document.querySelectorAll('.library-item').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
// Ignore clicks on buttons/links inside the card
|
||||
const tag = e.target.tagName.toLowerCase();
|
||||
if (tag === 'button' || tag === 'a' || e.target.closest('.action-button')) return;
|
||||
const itemId = this.dataset.itemId;
|
||||
if (!itemId) return;
|
||||
fetch(`/get_item_details/${itemId}`)
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
displayLibraryItemDetail(data.item);
|
||||
document.getElementById('detailModal').style.display = 'flex';
|
||||
}
|
||||
});
|
||||
}, { passive: true });
|
||||
});
|
||||
}
|
||||
|
||||
enableMobileTapToDetails();
|
||||
});
|
||||
|
||||
function displayLibraryItemDetail(item) {
|
||||
@@ -597,7 +559,7 @@ function displayLibraryItemDetail(item) {
|
||||
modalBody.innerHTML = `
|
||||
<h2>${item.Name}</h2>
|
||||
<div class="detail-content">
|
||||
${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" class="detail-image">` : ''}
|
||||
${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" style="max-width: 200px; margin-bottom: 20px;">` : ''}
|
||||
<p><strong>Autor:</strong> ${item.Author || '—'}</p>
|
||||
<p><strong>ISBN:</strong> ${item.ISBN || '—'}</p>
|
||||
<p><strong>Typ:</strong> ${item.ItemType || 'Medium'}</p>
|
||||
@@ -669,9 +631,8 @@ document.getElementById('favoriteToggle').addEventListener('click', function() {
|
||||
// TODO: Implement favorites filtering
|
||||
});
|
||||
|
||||
// Scanner instance (hybrid: real-time + upload + keyboard)
|
||||
// Scanner toggle
|
||||
let scanner = null;
|
||||
|
||||
document.getElementById('scannerBtn').addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
const container = document.getElementById('qrContainer');
|
||||
@@ -679,10 +640,7 @@ document.getElementById('scannerBtn').addEventListener('click', function(e) {
|
||||
|
||||
if (isOpen) {
|
||||
container.style.display = 'none';
|
||||
if (scanner) {
|
||||
scanner.stop();
|
||||
scanner = null;
|
||||
}
|
||||
if (scanner) scanner.clear();
|
||||
this.classList.remove('open');
|
||||
this.setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
@@ -691,64 +649,15 @@ document.getElementById('scannerBtn').addEventListener('click', function(e) {
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
|
||||
if (!scanner) {
|
||||
initScanner();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function initScanner() {
|
||||
scanner = new HybridScanner({
|
||||
videoId: 'qr-reader',
|
||||
canvasId: 'scanner-canvas',
|
||||
formats: ['QR_CODE', 'CODE_128', 'EAN_13', 'ISBN', 'CODE_39', 'UPC_A', 'EAN_8'],
|
||||
fps: 10,
|
||||
facingMode: 'environment',
|
||||
onSuccess: function(decodedText) {
|
||||
const studentId = decodedText.trim();
|
||||
document.getElementById('studentIdInput').value = studentId;
|
||||
document.getElementById('scanMessage').textContent = '✓ Erkannt: ' + studentId;
|
||||
document.getElementById('scanMessage').style.color = '#4CAF50';
|
||||
},
|
||||
onError: function(error) {
|
||||
document.getElementById('scanMessage').textContent = '✗ ' + error;
|
||||
document.getElementById('scanMessage').style.color = '#f44336';
|
||||
}
|
||||
});
|
||||
|
||||
scanner.start();
|
||||
}
|
||||
|
||||
// Camera toggle
|
||||
document.getElementById('cameraToggle')?.addEventListener('click', function() {
|
||||
if (scanner) {
|
||||
scanner.toggleCamera();
|
||||
this.textContent = scanner.options.facingMode === 'user' ? '📷 Rückkamera' : '🤳 Frontkamera';
|
||||
}
|
||||
});
|
||||
|
||||
// Image upload fallback
|
||||
document.getElementById('uploadScanImage')?.addEventListener('change', function(e) {
|
||||
const file = e.target.files[0];
|
||||
if (file) {
|
||||
const messageEl = document.getElementById('scanMessage');
|
||||
messageEl.textContent = 'Wird dekodiert...';
|
||||
messageEl.style.color = '#2196F3';
|
||||
|
||||
HybridScanner.uploadImageForDecoding(
|
||||
file,
|
||||
(decodedText) => {
|
||||
document.getElementById('studentIdInput').value = decodedText;
|
||||
messageEl.textContent = '✓ Erkannt (Upload): ' + decodedText;
|
||||
messageEl.style.color = '#4CAF50';
|
||||
e.target.value = ''; // Reset file input
|
||||
},
|
||||
(error) => {
|
||||
messageEl.textContent = '✗ ' + error;
|
||||
messageEl.style.color = '#f44336';
|
||||
e.target.value = '';
|
||||
}
|
||||
scanner = new Html5Qrcode('qr-reader');
|
||||
scanner.start(
|
||||
{ facingMode: "environment" },
|
||||
{ fps: 10, qrbox: 250 },
|
||||
onScanSuccess,
|
||||
onScanError
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function onScanSuccess(decodedText, decodedResult) {
|
||||
@@ -814,46 +723,12 @@ function onScanError(error) {
|
||||
color: #b3261e;
|
||||
}
|
||||
|
||||
/* Mobile: simplify list entries - show only title */
|
||||
@media (max-width: 900px) {
|
||||
.library-item .item-author,
|
||||
.library-item .item-isbn,
|
||||
.table-cell.author-cell,
|
||||
.table-cell.isbn-cell {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Make title more prominent and full-width */
|
||||
.library-item .item-details {
|
||||
display: block;
|
||||
width: calc(100% - 140px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.library-item .item-name {
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 6px 0;
|
||||
line-height: 1.2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.library-item .item-image-wrapper {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: allow horizontal scrolling for table-mode views */
|
||||
@media (max-width: 900px) {
|
||||
.library-table-wrapper {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 -12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.library-table-wrapper .table-row {
|
||||
min-width: 720px; /* allow table to have intrinsic width and be scrolled */
|
||||
@@ -862,180 +737,5 @@ function onScanError(error) {
|
||||
display: block; /* keep rows stacked but allow horizontal scroll */
|
||||
}
|
||||
}
|
||||
|
||||
/* Hybrid Scanner Styles */
|
||||
.qr-container {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.scanner-header {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.scanner-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1em;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.scanner-controls {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.scanner-button {
|
||||
background: #2196F3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
white-space: nowrap;
|
||||
flex: 0 1 auto;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.scanner-button:hover {
|
||||
background: #1976D2;
|
||||
}
|
||||
|
||||
.scanner-button:active {
|
||||
background: #1565C0;
|
||||
}
|
||||
|
||||
.scanner-video-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 12px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qr-reader {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #2196F3;
|
||||
border-radius: 8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.scanner-message {
|
||||
min-height: 20px;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.qr-container {
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.scanner-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.scanner-header h3 {
|
||||
width: 100%;
|
||||
font-size: 0.95em;
|
||||
}
|
||||
|
||||
.scanner-controls {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.scanner-button {
|
||||
flex: 1 1 auto;
|
||||
padding: 8px 6px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#qr-reader {
|
||||
max-width: 100%;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.scanner-message {
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal styles - responsive for mobile */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 2000;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 1.1rem;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.modal-body p { margin: 6px 0; }
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.modal-content { padding: 12px; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -876,10 +876,7 @@
|
||||
<button type="button" id="scan-code4-btn" class="fetch-isbn-button">Barcode scannen</button>
|
||||
</div>
|
||||
<small style="display:block; color:#666;">Einzelcode manuell setzen oder per Scanner erfassen.</small>
|
||||
<div id="code4-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
|
||||
<video id="code4-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
|
||||
<canvas id="code4-scanner-canvas" style="display: none;"></canvas>
|
||||
</div>
|
||||
<div id="code4-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
|
||||
<small id="code4-scan-status" style="display:block; color:#666; margin-top:6px;"></small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
@@ -910,10 +907,7 @@
|
||||
<button type="button" id="scan-isbn-btn" class="fetch-isbn-button">Barcode scannen</button>
|
||||
<button type="button" class="fetch-isbn-button" onclick="fetchBookInfo('upload')">Bild abrufen</button>
|
||||
</div>
|
||||
<div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;">
|
||||
<video id="isbn-scanner-video" playsinline style="width: 100%; border-radius: 8px;"></video>
|
||||
<canvas id="isbn-scanner-canvas" style="display: none;"></canvas>
|
||||
</div>
|
||||
<div id="isbn-scanner" style="width:100%; max-width:520px; display:none; margin-top:10px;"></div>
|
||||
<small id="isbn-scan-status" style="display:block; color:#666; margin-top:6px;">Scannen oder manuell eingeben. Gültige ISBNs helfen beim Abruf von Buchdaten, andere Codes werden trotzdem akzeptiert.</small>
|
||||
<div id="book-info-container" class="book-info-container"></div>
|
||||
</div>
|
||||
@@ -977,8 +971,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="https://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
|
||||
<script src="/static/js/scanner.js"></script>
|
||||
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
|
||||
<script>
|
||||
const libraryModuleEnabled = {{ 'true' if library_module_enabled else 'false' }};
|
||||
|
||||
@@ -1057,19 +1050,16 @@
|
||||
|
||||
// Stop ISBN scanner if currently running to avoid camera conflicts.
|
||||
if (isbnScannerRunning && isbnScannerInstance) {
|
||||
isbnScannerInstance.stop();
|
||||
isbnScannerInstance = null;
|
||||
isbnScannerInstance.clear().catch(() => {});
|
||||
const isbnScannerBox = document.getElementById('isbn-scanner');
|
||||
const isbnScanButton = document.getElementById('scan-isbn-btn');
|
||||
if (isbnScannerBox) isbnScannerBox.style.display = 'none';
|
||||
if (isbnScanButton) isbnScanButton.textContent = 'ISBN scannen';
|
||||
isbnScannerRunning = false;
|
||||
setIsbnScanStatus('Scanner gestoppt.');
|
||||
}
|
||||
|
||||
if (code4ScannerRunning && code4ScannerInstance) {
|
||||
code4ScannerInstance.stop();
|
||||
code4ScannerInstance = null;
|
||||
code4ScannerInstance.clear().catch(() => {});
|
||||
scannerBox.style.display = 'none';
|
||||
scanButton.textContent = 'Barcode scannen';
|
||||
code4ScannerRunning = false;
|
||||
@@ -1079,16 +1069,15 @@
|
||||
|
||||
scannerBox.style.display = 'block';
|
||||
scanButton.textContent = 'Scanner stoppen';
|
||||
code4ScannerInstance = new Html5QrcodeScanner('code4-scanner', {
|
||||
fps: 10,
|
||||
qrbox: 250,
|
||||
rememberLastUsedCamera: true
|
||||
});
|
||||
code4ScannerRunning = true;
|
||||
setCode4ScanStatus('Scanner läuft. Der Scan wird im Basis-Codefeld übernommen.');
|
||||
|
||||
code4ScannerInstance = new HybridScanner({
|
||||
videoId: 'code4-scanner-video',
|
||||
canvasId: 'code4-scanner-canvas',
|
||||
formats: ['CODE_128', 'CODE_39', 'QR_CODE'],
|
||||
fps: 10,
|
||||
facingMode: 'environment',
|
||||
onSuccess: function(decodedText) {
|
||||
code4ScannerInstance.render((decodedText) => {
|
||||
const scannedCode = String(decodedText || '').trim();
|
||||
if (!scannedCode) return;
|
||||
|
||||
@@ -1102,13 +1091,7 @@
|
||||
codeField.value = scannedCode;
|
||||
validateCodeField(codeField);
|
||||
setCode4ScanStatus(`Code_4 gesetzt: ${scannedCode}`);
|
||||
},
|
||||
onError: function(error) {
|
||||
setCode4ScanStatus(`Fehler: ${error}`, true);
|
||||
}
|
||||
});
|
||||
|
||||
code4ScannerInstance.start();
|
||||
}, () => {});
|
||||
}
|
||||
|
||||
function startIsbnScanner() {
|
||||
@@ -1123,8 +1106,7 @@
|
||||
|
||||
// Stop Code_4 scanner if currently running to avoid camera conflicts.
|
||||
if (code4ScannerRunning && code4ScannerInstance) {
|
||||
code4ScannerInstance.stop();
|
||||
code4ScannerInstance = null;
|
||||
code4ScannerInstance.clear().catch(() => {});
|
||||
const codeScannerBox = document.getElementById('code4-scanner');
|
||||
const codeScanButton = document.getElementById('scan-code4-btn');
|
||||
if (codeScannerBox) codeScannerBox.style.display = 'none';
|
||||
@@ -1134,8 +1116,7 @@
|
||||
}
|
||||
|
||||
if (isbnScannerRunning && isbnScannerInstance) {
|
||||
isbnScannerInstance.stop();
|
||||
isbnScannerInstance = null;
|
||||
isbnScannerInstance.clear().catch(() => {});
|
||||
scannerBox.style.display = 'none';
|
||||
scanButton.textContent = 'ISBN scannen';
|
||||
isbnScannerRunning = false;
|
||||
@@ -1145,16 +1126,15 @@
|
||||
|
||||
scannerBox.style.display = 'block';
|
||||
scanButton.textContent = 'Scanner stoppen';
|
||||
isbnScannerInstance = new Html5QrcodeScanner('isbn-scanner', {
|
||||
fps: 10,
|
||||
qrbox: 250,
|
||||
rememberLastUsedCamera: true
|
||||
});
|
||||
isbnScannerRunning = true;
|
||||
setIsbnScanStatus('Scanner läuft. Bitte ISBN-Code erfassen.');
|
||||
|
||||
isbnScannerInstance = new HybridScanner({
|
||||
videoId: 'isbn-scanner-video',
|
||||
canvasId: 'isbn-scanner-canvas',
|
||||
formats: ['ISBN', 'EAN_13', 'EAN_8', 'QR_CODE'],
|
||||
fps: 10,
|
||||
facingMode: 'environment',
|
||||
onSuccess: function(decodedText) {
|
||||
isbnScannerInstance.render((decodedText) => {
|
||||
const scannedCode = String(decodedText || '').trim();
|
||||
if (!scannedCode) return;
|
||||
|
||||
@@ -1167,11 +1147,7 @@
|
||||
setIsbnScanStatus('Kein gültiges ISBN-Format erkannt, der gescannte Wert bleibt aber im Feld.', true);
|
||||
}
|
||||
|
||||
// Stop scanner after successful scan
|
||||
if (isbnScannerInstance) {
|
||||
isbnScannerInstance.stop();
|
||||
isbnScannerInstance = null;
|
||||
}
|
||||
isbnScannerInstance.clear().catch(() => {});
|
||||
scannerBox.style.display = 'none';
|
||||
scanButton.textContent = 'ISBN scannen';
|
||||
isbnScannerRunning = false;
|
||||
@@ -1180,13 +1156,7 @@
|
||||
// Automatically load book metadata after a valid ISBN scan.
|
||||
fetchBookInfo('upload');
|
||||
}
|
||||
},
|
||||
onError: function(error) {
|
||||
setIsbnScanStatus(`Fehler: ${error}`, true);
|
||||
}
|
||||
});
|
||||
|
||||
isbnScannerInstance.start();
|
||||
}, () => {});
|
||||
}
|
||||
|
||||
// Load predefined filter values for dropdowns
|
||||
|
||||
Reference in New Issue
Block a user