mirror of
https://github.com/StefBuwalda/cal_counter.git
synced 2025-10-30 03:10:00 +00:00
Stef
5ae82e379e
Updated routes and templates to improve the process of adding and logging food items by barcode. The add_food_item route now accepts a barcode parameter, and barcode lookups redirect to item creation if not found. The log_food flow now uses session variables for item and meal selection, and the get_item.html template uses fetch to handle barcode lookups and redirects accordingly.
76 lines
3.0 KiB
HTML
76 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="container py-5">
|
|
<div class="text-center mb-4">
|
|
<h1 class="fw-bold">Barcode Scanner</h1>
|
|
<p class="text-muted">Use your camera to scan barcodes</p>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center mb-4">
|
|
<video id="video" class="border rounded shadow-sm" style="width: 100%; max-width: 500px;" autoplay
|
|
muted></video>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center">
|
|
<button id="startButton" class="btn btn-primary px-4">Start Scanning</button>
|
|
<button id="stopButton" class="btn btn-danger px-4 ms-3">Stop</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="module">
|
|
import { BrowserMultiFormatReader } from 'https://cdn.jsdelivr.net/npm/@zxing/library@0.21.3/+esm';
|
|
|
|
// constants
|
|
const codeReader = new BrowserMultiFormatReader();
|
|
const videoElement = document.getElementById('video');
|
|
|
|
|
|
// Start scanning for barcode
|
|
document.getElementById('startButton').addEventListener('click', async () => {
|
|
console.log('[DEBUG] Start button clicked')
|
|
try {
|
|
await navigator.mediaDevices.getUserMedia({ video: true });
|
|
} catch (err) {
|
|
alert("No camera found or no camera permission");
|
|
console.error("Could not access the camera:", err);
|
|
return;
|
|
}
|
|
console.log('[DEBUG] Permission given and at least one device present');
|
|
const devices = await codeReader.listVideoInputDevices();
|
|
console.log('[DEBUG] Cameras found:', devices);
|
|
const rearCamera = devices.find(device => device.label.toLowerCase().includes('back'))
|
|
|| devices.find(device => device.label.toLowerCase().includes('rear'))
|
|
|| devices[0]; // fallback
|
|
|
|
const selectedDeviceId = rearCamera?.deviceId;
|
|
await codeReader.decodeFromVideoDevice(selectedDeviceId, videoElement, async (result, err) => {
|
|
if (result) {
|
|
// Result found, this should post the barcode
|
|
const codeText = result.getText();
|
|
const baseURL = "{{url_for('user.foodId_from_barcode', barcode='!')}}"
|
|
fetch(baseURL.replace("!", encodeURIComponent(codeText)))
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not OK');
|
|
}
|
|
return response.json(); // or response.text(), response.blob(), etc.
|
|
})
|
|
.then(data => {
|
|
const baseURL2 = "{{url_for('user.select_item', item_id='0')}}"
|
|
window.location.href = baseURL2.replace("0", encodeURIComponent(data["item_id"]))
|
|
})
|
|
.catch(error => {
|
|
console.error('Fetch error:', error);
|
|
});
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
document.getElementById('stopButton').addEventListener('click', () => {
|
|
codeReader.reset();
|
|
});
|
|
</script>
|
|
{% endblock %} |