309 lines
13 KiB
JavaScript
309 lines
13 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// --- DOM Element References ---
|
|
const videoContainer = document.getElementById('alp-video-container');
|
|
const video = document.getElementById('alp-video');
|
|
const canvas = document.getElementById('alp-canvas');
|
|
const overlay = document.getElementById('alp-viewfinder-overlay');
|
|
const overlayText = document.getElementById('alp-overlay-text');
|
|
const cameraSelector = document.getElementById('alp-camera-selector');
|
|
const manualInputForm = document.getElementById('alp-manual-form');
|
|
const productInfoSection = document.getElementById('alp-product-info');
|
|
const productNameEl = document.getElementById('alp-product-name');
|
|
const productPricesEl = document.getElementById('alp-product-prices');
|
|
const existingPhotosSection = document.getElementById('alp-existing-photos');
|
|
const existingPhotosContainer = document.getElementById('alp-photos-container');
|
|
const messageArea = document.getElementById('alp-message-area');
|
|
|
|
// --- State Management ---
|
|
const AppState = {
|
|
IDLE: 'idle', // Camera off, welcome message
|
|
READY_TO_SCAN: 'ready_to_scan', // Camera on, waiting for tap to scan
|
|
SCANNING: 'scanning', // Actively looking for barcode
|
|
PRODUCT_FOUND: 'product_found', // Product found, waiting for tap to take photo
|
|
UPLOADING: 'uploading' // Photo is being sent to server
|
|
};
|
|
let currentState = AppState.IDLE;
|
|
let currentStream = null;
|
|
let barcodeDetector = null;
|
|
let currentProductId = null;
|
|
const ajaxUrl = window.addLivePhotoAjaxUrl || '';
|
|
|
|
// --- Initialization ---
|
|
if (!('BarcodeDetector' in window)) {
|
|
showMessage('Barcode Detector API is not supported. Please use manual input.', true);
|
|
} else {
|
|
barcodeDetector = new BarcodeDetector({ formats: ['ean_13'] });
|
|
}
|
|
if (!navigator.mediaDevices) {
|
|
showMessage('Camera access is not supported in this browser.', true);
|
|
} else {
|
|
populateCameraSelector();
|
|
}
|
|
|
|
updateUIForState(AppState.IDLE); // Set initial UI state
|
|
|
|
// --- Event Listeners ---
|
|
videoContainer.addEventListener('click', handleViewfinderTap);
|
|
cameraSelector.addEventListener('change', handleCameraChange);
|
|
manualInputForm.addEventListener('submit', handleManualSubmit);
|
|
existingPhotosContainer.addEventListener('click', handleDeleteClick);
|
|
|
|
// --- Core Logic ---
|
|
function handleViewfinderTap() {
|
|
switch (currentState) {
|
|
case AppState.IDLE:
|
|
startCamera();
|
|
break;
|
|
case AppState.READY_TO_SCAN:
|
|
detectBarcode();
|
|
break;
|
|
case AppState.PRODUCT_FOUND:
|
|
takePhoto();
|
|
break;
|
|
}
|
|
}
|
|
|
|
function updateUIForState(newState, customText = null) {
|
|
currentState = newState;
|
|
let textContent = '';
|
|
overlay.style.display = 'flex';
|
|
|
|
switch (newState) {
|
|
case AppState.IDLE:
|
|
textContent = "Tap to Start Camera";
|
|
break;
|
|
case AppState.READY_TO_SCAN:
|
|
textContent = "Tap to Scan Barcode";
|
|
break;
|
|
case AppState.SCANNING:
|
|
textContent = `<div class="spinner"></div>`;
|
|
break;
|
|
case AppState.PRODUCT_FOUND:
|
|
textContent = "Tap to Take Picture";
|
|
break;
|
|
case AppState.UPLOADING:
|
|
textContent = "Uploading...";
|
|
break;
|
|
}
|
|
overlayText.innerHTML = customText || textContent;
|
|
}
|
|
|
|
async function startCamera() {
|
|
if (currentStream) return;
|
|
const constraints = { video: { deviceId: cameraSelector.value ? { exact: cameraSelector.value } : undefined, facingMode: 'environment' } };
|
|
try {
|
|
currentStream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
video.srcObject = currentStream;
|
|
await video.play();
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
} catch (err) {
|
|
console.error('Error accessing camera:', err);
|
|
stopCamera(); // Ensure everything is reset
|
|
updateUIForState(AppState.IDLE, 'Camera Error. Tap to retry.');
|
|
}
|
|
}
|
|
|
|
function stopCamera() {
|
|
if (currentStream) {
|
|
currentStream.getTracks().forEach(track => track.stop());
|
|
currentStream = null;
|
|
}
|
|
video.srcObject = null;
|
|
updateUIForState(AppState.IDLE);
|
|
}
|
|
|
|
async function detectBarcode() {
|
|
if (!barcodeDetector || currentState !== AppState.READY_TO_SCAN) return;
|
|
updateUIForState(AppState.SCANNING);
|
|
try {
|
|
const barcodes = await barcodeDetector.detect(video);
|
|
if (barcodes.length > 0) {
|
|
searchProduct(barcodes[0].rawValue);
|
|
} else {
|
|
showMessage('No barcode found. Please try again.', true);
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
}
|
|
} catch (err) {
|
|
console.error('Barcode detection error:', err);
|
|
showMessage('Error during barcode detection.', true);
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
}
|
|
}
|
|
|
|
function takePhoto() {
|
|
if (!currentStream || !currentProductId || currentState !== AppState.PRODUCT_FOUND) return;
|
|
updateUIForState(AppState.UPLOADING);
|
|
|
|
const targetWidth = 800, targetHeight = 800;
|
|
canvas.width = targetWidth; canvas.height = targetHeight;
|
|
const ctx = canvas.getContext('2d');
|
|
const videoWidth = video.videoWidth, videoHeight = video.videoHeight;
|
|
const size = Math.min(videoWidth, videoHeight);
|
|
const x = (videoWidth - size) / 2, y = (videoHeight - size) / 2;
|
|
ctx.drawImage(video, x, y, size, size, 0, 0, targetWidth, targetHeight);
|
|
const imageData = canvas.toDataURL('image/webp', 0.8);
|
|
|
|
uploadImage(imageData);
|
|
}
|
|
|
|
function resetForNextProduct() {
|
|
currentProductId = null;
|
|
productInfoSection.style.display = 'none';
|
|
existingPhotosSection.style.display = 'none';
|
|
existingPhotosContainer.innerHTML = '';
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
}
|
|
|
|
// --- AJAX and Helper Functions ---
|
|
async function searchProduct(identifier) {
|
|
const formData = new FormData();
|
|
formData.append('action', 'searchProduct'); formData.append('identifier', identifier);
|
|
try {
|
|
const response = await fetch(ajaxUrl, { method: 'POST', body: formData });
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const product = result.data;
|
|
currentProductId = product.id_product;
|
|
displayProductInfo(product);
|
|
updateUIForState(AppState.PRODUCT_FOUND);
|
|
} else {
|
|
showMessage(result.message, true);
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
}
|
|
} catch (err) {
|
|
showMessage('Network error searching for product.', true);
|
|
updateUIForState(AppState.READY_TO_SCAN);
|
|
}
|
|
}
|
|
|
|
async function uploadImage(imageData) {
|
|
const formData = new FormData();
|
|
formData.append('action', 'uploadImage'); formData.append('id_product', currentProductId); formData.append('imageData', imageData);
|
|
try {
|
|
const response = await fetch(ajaxUrl, { method: 'POST', body: formData });
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
showMessage(result.message, false);
|
|
appendNewPhoto(result.data.new_photo);
|
|
setTimeout(resetForNextProduct, 1500); // Pause to show success, then reset
|
|
} else {
|
|
showMessage(result.message, true);
|
|
updateUIForState(AppState.PRODUCT_FOUND); // Allow user to try photo again
|
|
}
|
|
} catch (err) {
|
|
showMessage('Network error uploading photo.', true);
|
|
updateUIForState(AppState.PRODUCT_FOUND);
|
|
}
|
|
}
|
|
|
|
async function populateCameraSelector() { /* (This function can remain from previous versions) */ }
|
|
function handleCameraChange() { /* (This function can remain from previous versions) */ }
|
|
function handleManualSubmit(e) { /* (This function can remain from previous versions) */ }
|
|
function handleDeleteClick(e) { /* (This function can remain from previous versions) */ }
|
|
function displayProductInfo(product) { /* (This function can remain from previous versions) */ }
|
|
function appendNewPhoto(photo) { /* (This function can remain from previous versions) */ }
|
|
function showMessage(text, isError = false) { /* (This function can remain from previous versions) */ }
|
|
|
|
// --- Re-pasting the helper functions for completeness ---
|
|
|
|
async function populateCameraSelector() {
|
|
try {
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
const videoDevices = devices.filter(device => device.kind === 'videoinput');
|
|
cameraSelector.innerHTML = '';
|
|
videoDevices.forEach((device, index) => {
|
|
const option = document.createElement('option');
|
|
option.value = device.deviceId;
|
|
option.textContent = device.label || `Camera ${index + 1}`;
|
|
cameraSelector.appendChild(option);
|
|
});
|
|
const preferredCameraId = localStorage.getItem('addLivePhoto_preferredCameraId');
|
|
if (preferredCameraId && cameraSelector.querySelector(`option[value="${preferredCameraId}"]`)) {
|
|
cameraSelector.value = preferredCameraId;
|
|
}
|
|
} catch (err) { console.error('Error enumerating devices:', err); }
|
|
}
|
|
|
|
function handleCameraChange() {
|
|
localStorage.setItem('addLivePhoto_preferredCameraId', cameraSelector.value);
|
|
if (currentStream) { // If camera is active, restart it with the new selection
|
|
stopCamera();
|
|
startCamera();
|
|
}
|
|
}
|
|
|
|
function handleManualSubmit(e) {
|
|
e.preventDefault();
|
|
const identifier = document.getElementById('alp-manual-identifier').value.trim();
|
|
if (identifier) {
|
|
showMessage(`Searching for: ${identifier}...`);
|
|
searchProduct(identifier);
|
|
}
|
|
}
|
|
|
|
function handleDeleteClick(e) {
|
|
if (e.target && e.target.classList.contains('delete-photo-btn')) {
|
|
const button = e.target;
|
|
const imageName = button.dataset.imageName;
|
|
const productId = button.dataset.productId;
|
|
if (confirm(`Are you sure you want to delete this photo?`)) {
|
|
// Simplified delete without a dedicated function
|
|
const formData = new FormData();
|
|
formData.append('action', 'deleteImage');
|
|
formData.append('id_product', productId);
|
|
formData.append('image_name', imageName);
|
|
fetch(ajaxUrl, { method: 'POST', body: formData })
|
|
.then(res => res.json())
|
|
.then(result => {
|
|
if (result.success) {
|
|
showMessage(result.message, false);
|
|
button.closest('.photo-thumb').remove();
|
|
} else {
|
|
showMessage(result.message, true);
|
|
}
|
|
}).catch(err => showMessage('Network error deleting photo.', true));
|
|
}
|
|
}
|
|
}
|
|
|
|
function displayProductInfo(product) {
|
|
productNameEl.textContent = `[ID: ${product.id_product}] ${product.name}`;
|
|
let pricesHtml = `Wholesale: ${product.wholesale_price} | Sale: ${product.retail_price}`;
|
|
if (product.discounted_price) {
|
|
pricesHtml += ` | <strong class="text-danger">Discounted: ${product.discounted_price}</strong>`;
|
|
}
|
|
productPricesEl.innerHTML = pricesHtml;
|
|
renderExistingPhotos(product.existing_photos, product.id_product);
|
|
productInfoSection.style.display = 'block';
|
|
}
|
|
|
|
function renderExistingPhotos(photos, productId) {
|
|
existingPhotosContainer.innerHTML = '';
|
|
if (photos && photos.length > 0) {
|
|
existingPhotosSection.style.display = 'block';
|
|
photos.forEach(photo => appendNewPhoto(photo, productId));
|
|
} else {
|
|
existingPhotosSection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function appendNewPhoto(photo, productId = currentProductId) {
|
|
const thumbDiv = document.createElement('div');
|
|
thumbDiv.className = 'photo-thumb';
|
|
thumbDiv.innerHTML = `
|
|
<a href="${photo.url}" target="_blank">
|
|
<img src="${photo.url}" alt="Live photo" loading="lazy" />
|
|
</a>
|
|
<button class="btn btn-sm btn-danger delete-photo-btn" data-product-id="${productId}" data-image-name="${photo.name}">X</button>
|
|
`;
|
|
existingPhotosContainer.prepend(thumbDiv);
|
|
existingPhotosSection.style.display = 'block';
|
|
}
|
|
|
|
function showMessage(text, isError = false) {
|
|
messageArea.textContent = text;
|
|
messageArea.className = isError ? 'alert alert-danger' : 'alert alert-info';
|
|
messageArea.style.display = 'block';
|
|
setTimeout(() => { messageArea.style.display = 'none'; }, 4000); // Message disappears after 4s
|
|
}
|
|
}); |