lots
This commit is contained in:
270
app/static/inventory_labels.js
Normal file
270
app/static/inventory_labels.js
Normal file
@@ -0,0 +1,270 @@
|
||||
// API base URL
|
||||
const API_BASE_URL = '/api';
|
||||
|
||||
// Show toast notification
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white ${
|
||||
type === 'success' ? 'bg-green-600' : 'bg-red-600'
|
||||
} transform translate-y-0 opacity-100 transition-all duration-300 z-50`;
|
||||
toast.textContent = message;
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.transform = 'translateY(100%)';
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => toast.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
function setLoading(isLoading) {
|
||||
const submitButton = document.querySelector('#createLabelForm button[type="submit"]');
|
||||
if (isLoading) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.classList.add('opacity-50', 'cursor-not-allowed');
|
||||
submitButton.textContent = 'Creating...';
|
||||
} else {
|
||||
submitButton.disabled = false;
|
||||
submitButton.classList.remove('opacity-50', 'cursor-not-allowed');
|
||||
submitButton.textContent = 'Create Label';
|
||||
}
|
||||
}
|
||||
|
||||
// Add metadata field
|
||||
function addMetadataField() {
|
||||
const metadataFields = document.getElementById('metadataFields');
|
||||
const fieldId = Date.now(); // Simple unique ID
|
||||
|
||||
const fieldDiv = document.createElement('div');
|
||||
fieldDiv.className = 'flex space-x-3 items-end';
|
||||
fieldDiv.innerHTML = `
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Key</label>
|
||||
<input
|
||||
type="text"
|
||||
name="metadata_key_${fieldId}"
|
||||
placeholder="e.g., product_name, condition, location..."
|
||||
class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm font-medium text-gray-300 mb-2">Value</label>
|
||||
<input
|
||||
type="text"
|
||||
name="metadata_value_${fieldId}"
|
||||
placeholder="e.g., Lightning Bolt, NM, Shelf A1..."
|
||||
class="w-full rounded-lg border-gray-600 bg-gray-700 text-gray-100 focus:ring-blue-500 focus:border-blue-500"
|
||||
required
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="removeMetadataField(this)"
|
||||
class="px-3 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
`;
|
||||
|
||||
metadataFields.appendChild(fieldDiv);
|
||||
}
|
||||
|
||||
// Remove metadata field
|
||||
function removeMetadataField(button) {
|
||||
button.closest('div').remove();
|
||||
}
|
||||
|
||||
// Validate UPC code
|
||||
function validateUPC(upc) {
|
||||
if (!upc) return true; // Empty UPC is valid (optional field)
|
||||
|
||||
// Remove any non-digit characters
|
||||
const digitsOnly = upc.replace(/[^0-9]/g, '');
|
||||
|
||||
// Check for valid lengths
|
||||
if (digitsOnly.length === 12) {
|
||||
return validateUPCAChecksum(digitsOnly);
|
||||
} else if (digitsOnly.length === 8) {
|
||||
return validateUPCChecksum(digitsOnly);
|
||||
} else if (digitsOnly.length === 13) {
|
||||
return validateEAN13Checksum(digitsOnly);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validate UPC-A checksum
|
||||
function validateUPCAChecksum(upc) {
|
||||
if (upc.length !== 12 || !/^\d+$/.test(upc)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let total = 0;
|
||||
for (let i = 0; i < 11; i++) {
|
||||
const digit = parseInt(upc[i]);
|
||||
if (i % 2 === 0) { // Odd positions (0-indexed)
|
||||
total += digit * 3;
|
||||
} else { // Even positions
|
||||
total += digit;
|
||||
}
|
||||
}
|
||||
|
||||
const checksum = (10 - (total % 10)) % 10;
|
||||
return checksum === parseInt(upc[11]);
|
||||
}
|
||||
|
||||
// Validate UPC-E checksum
|
||||
function validateUPCChecksum(upc) {
|
||||
if (upc.length !== 8 || !/^\d+$/.test(upc)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let total = 0;
|
||||
for (let i = 0; i < 7; i++) {
|
||||
const digit = parseInt(upc[i]);
|
||||
if (i % 2 === 0) { // Odd positions (0-indexed)
|
||||
total += digit * 3;
|
||||
} else { // Even positions
|
||||
total += digit;
|
||||
}
|
||||
}
|
||||
|
||||
const checksum = (10 - (total % 10)) % 10;
|
||||
return checksum === parseInt(upc[7]);
|
||||
}
|
||||
|
||||
// Validate EAN-13 checksum
|
||||
function validateEAN13Checksum(ean) {
|
||||
if (ean.length !== 13 || !/^\d+$/.test(ean)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let total = 0;
|
||||
for (let i = 0; i < 12; i++) {
|
||||
const digit = parseInt(ean[i]);
|
||||
if (i % 2 === 0) { // Even positions (0-indexed)
|
||||
total += digit;
|
||||
} else { // Odd positions
|
||||
total += digit * 3;
|
||||
}
|
||||
}
|
||||
|
||||
const checksum = (10 - (total % 10)) % 10;
|
||||
return checksum === parseInt(ean[12]);
|
||||
}
|
||||
|
||||
// Collect form data
|
||||
function collectFormData() {
|
||||
const upc = document.getElementById('upc').value.trim();
|
||||
const print = document.getElementById('printLabel').checked;
|
||||
|
||||
// Collect metadata
|
||||
const metadata = [];
|
||||
const metadataFields = document.querySelectorAll('#metadataFields input[type="text"]');
|
||||
|
||||
for (let i = 0; i < metadataFields.length; i += 2) {
|
||||
const keyInput = metadataFields[i];
|
||||
const valueInput = metadataFields[i + 1];
|
||||
|
||||
if (keyInput && valueInput && keyInput.value.trim() && valueInput.value.trim()) {
|
||||
metadata.push({
|
||||
key: keyInput.value.trim(),
|
||||
value: valueInput.value.trim()
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
upc: upc || null,
|
||||
metadata: metadata.length > 0 ? metadata : null,
|
||||
print: print
|
||||
};
|
||||
}
|
||||
|
||||
// Create inventory label
|
||||
async function createInventoryLabel(formData) {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/inventory-labels/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.detail || 'Failed to create inventory label');
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
showToast('Inventory label created successfully!', 'success');
|
||||
|
||||
// Reset form
|
||||
document.getElementById('createLabelForm').reset();
|
||||
document.getElementById('metadataFields').innerHTML = '';
|
||||
|
||||
// Optionally refresh recent labels
|
||||
// loadRecentLabels();
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
showToast('Error creating inventory label: ' + error.message, 'error');
|
||||
throw error;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
async function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const formData = collectFormData();
|
||||
|
||||
// Validate UPC if provided
|
||||
if (formData.upc && !validateUPC(formData.upc)) {
|
||||
showToast('Invalid UPC code. Please enter a valid UPC-A, UPC-E, or EAN-13 code.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate metadata if provided
|
||||
if (formData.metadata) {
|
||||
for (const item of formData.metadata) {
|
||||
if (!item.key || !item.value) {
|
||||
showToast('All metadata fields must have both key and value.', 'error');
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await createInventoryLabel(formData);
|
||||
} catch (error) {
|
||||
console.error('Error creating inventory label:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load recent labels (placeholder for future implementation)
|
||||
async function loadRecentLabels() {
|
||||
// This could be implemented to show recently created labels
|
||||
// For now, it's a placeholder
|
||||
const recentLabelsDiv = document.getElementById('recentLabels');
|
||||
recentLabelsDiv.innerHTML = '<p class="text-gray-400 text-center">No recent labels to display</p>';
|
||||
}
|
||||
|
||||
// Initialize page
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Set up form submission handler
|
||||
document.getElementById('createLabelForm').addEventListener('submit', handleFormSubmit);
|
||||
|
||||
// Load recent labels
|
||||
loadRecentLabels();
|
||||
|
||||
// Add initial metadata field
|
||||
addMetadataField();
|
||||
});
|
||||
Reference in New Issue
Block a user