diff --git a/py_app/app/templates/fg_scan.html b/py_app/app/templates/fg_scan.html index 30ab8f3..a2e818a 100644 --- a/py_app/app/templates/fg_scan.html +++ b/py_app/app/templates/fg_scan.html @@ -246,6 +246,102 @@ document.addEventListener('DOMContentLoaded', function() { cpErrorMessage.textContent = 'Please scan a valid CP'; cpCodeInput.parentNode.insertBefore(cpErrorMessage, cpCodeInput.nextSibling); + // CP Code Auto-Completion Feature: Pad incomplete CP codes after 2 seconds + let cpCodeLastInputTime = null; + let cpCodeAutoCompleteTimeout = null; + + function autoCompleteCpCode() { + const value = cpCodeInput.value.trim().toUpperCase(); + + // Only process if it starts with "CP" but is not 15 characters + if (value.startsWith('CP') && value.length < 15 && value.length > 2) { + console.log('Auto-completing CP code:', value); + + // Check if there's a hyphen in the value + if (value.includes('-')) { + // Split by hyphen: CP[base]-[suffix] + const parts = value.split('-'); + if (parts.length === 2) { + const cpPrefix = parts[0]; // e.g., "CP00002042" + const suffix = parts[1]; // e.g., "1" or "12" or "123" or "3" + + console.log('CP prefix:', cpPrefix, 'Suffix:', suffix); + + // Always pad the suffix to exactly 4 digits (to make total 15 chars: CP[8digits]-[4digits]) + const paddedSuffix = suffix.padStart(4, '0'); + + // Construct the complete CP code + const completedCpCode = `${cpPrefix}-${paddedSuffix}`; + + console.log('Completed CP code length:', completedCpCode.length, 'Code:', completedCpCode); + + // Ensure it's exactly 15 characters + if (completedCpCode.length === 15) { + console.log('✅ Completed CP code:', completedCpCode); + cpCodeInput.value = completedCpCode; + + // Show visual feedback + cpCodeInput.style.backgroundColor = '#e8f5e9'; + setTimeout(() => { + cpCodeInput.style.backgroundColor = ''; + }, 500); + + // Move focus to next field (OC1 code) + oc1CodeInput.focus(); + + // Show completion notification + showNotification(`✅ CP Code auto-completed: ${completedCpCode}`, 'success'); + } else { + console.log('⚠️ Completed code length is not 15:', completedCpCode.length); + } + } + } else { + console.log('⏳ Waiting for hyphen to be entered before auto-completing'); + } + } else { + if (value.length >= 15) { + console.log('ℹ️ CP code is already complete (15 characters)'); + } + } + } + + cpCodeInput.addEventListener('input', function() { + cpCodeLastInputTime = Date.now(); + const currentValue = this.value.trim().toUpperCase(); + + // Clear existing timeout + if (cpCodeAutoCompleteTimeout) { + clearTimeout(cpCodeAutoCompleteTimeout); + } + + console.log('CP Code input changed:', currentValue); + + // If hyphen is present and value is less than 15 chars, process immediately + if (currentValue.includes('-') && currentValue.length < 15) { + console.log('Hyphen detected, checking for auto-complete'); + // Set shorter timeout (500ms) when hyphen is present + cpCodeAutoCompleteTimeout = setTimeout(() => { + console.log('Processing auto-complete after hyphen'); + autoCompleteCpCode(); + }, 500); + } else if (currentValue.length < 15 && currentValue.startsWith('CP')) { + // Set normal 2-second timeout only when no hyphen yet + cpCodeAutoCompleteTimeout = setTimeout(() => { + console.log('2-second timeout triggered for CP code'); + autoCompleteCpCode(); + }, 2000); + } + }); + + // Also trigger auto-complete when focus leaves the field (blur event) + cpCodeInput.addEventListener('blur', function() { + console.log('CP Code blur event triggered with value:', this.value); + if (cpCodeAutoCompleteTimeout) { + clearTimeout(cpCodeAutoCompleteTimeout); + } + autoCompleteCpCode(); + }); + // Create error message element for OC1 code const oc1ErrorMessage = document.createElement('div'); oc1ErrorMessage.className = 'error-message';