diff --git a/trade-intelligence.html b/trade-intelligence.html index 95718a7..2f831c8 100644 --- a/trade-intelligence.html +++ b/trade-intelligence.html @@ -1,504 +1,1066 @@ - - - - - - Trade Intelligence - AI Trade Management - - - - - - - - +/** + * Enhanced Trade Intelligence Functions + * With searchable country dropdown and improved offline handling + */ - - - +// Global variables +let currentSearchData = []; +let buyersData = []; +let sellersData = []; + +// Enhanced country list +const availableCountries = [ + 'Afghanistan', 'Albania', 'Algeria', 'Argentina', 'Armenia', 'Australia', 'Austria', 'Azerbaijan', + 'Bahrain', 'Bangladesh', 'Belarus', 'Belgium', 'Bolivia', 'Brazil', 'Bulgaria', + 'Cambodia', 'Canada', 'Chile', 'China', 'Colombia', 'Croatia', 'Czech Republic', + 'Denmark', 'Ecuador', 'Egypt', 'Estonia', 'Ethiopia', 'Finland', 'France', + 'Georgia', 'Germany', 'Ghana', 'Greece', 'Hungary', 'Iceland', 'India', 'Indonesia', + 'Iran', 'Iraq', 'Ireland', 'Israel', 'Italy', 'Japan', 'Jordan', 'Kazakhstan', + 'Kenya', 'Kuwait', 'Latvia', 'Lebanon', 'Lithuania', 'Luxembourg', 'Malaysia', + 'Mexico', 'Morocco', 'Netherlands', 'New Zealand', 'Nigeria', 'Norway', 'Pakistan', + 'Peru', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Russia', + 'Saudi Arabia', 'Singapore', 'Slovakia', 'Slovenia', 'South Africa', 'South Korea', + 'Spain', 'Sri Lanka', 'Sweden', 'Switzerland', 'Taiwan', 'Thailand', 'Turkey', + 'UAE', 'Ukraine', 'United Kingdom', 'United States', 'Uruguay', 'Vietnam' +]; + +// Function to create searchable country dropdown +function createSearchableCountryDropdown(selectElement, withAllCountries = true) { + if (!selectElement) { + console.warn('Select element not found'); + return; + } - -
+ const container = selectElement.parentNode; + const wrapper = document.createElement('div'); + wrapper.className = 'relative w-full'; + + // Create input field that looks like the original select + const input = document.createElement('input'); + input.type = 'text'; + input.placeholder = 'Type to search countries...'; + input.className = selectElement.className + ' pr-8'; + input.id = selectElement.id + '_input'; + + // Add search icon + const searchIcon = document.createElement('div'); + searchIcon.className = 'absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none'; + searchIcon.innerHTML = ''; + + // Create dropdown container + const dropdown = document.createElement('div'); + dropdown.className = 'absolute z-20 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-48 overflow-y-auto hidden mt-1'; + dropdown.style.top = '100%'; + + // Prepare countries list + const countries = withAllCountries ? ['All Countries', ...availableCountries] : availableCountries; + + // Function to create dropdown options + const createOptions = (filteredCountries) => { + dropdown.innerHTML = ''; - -
-

AI Trade Intelligence

-
- - -
-
-
- -
-

Trade AI Command

-
+ if (filteredCountries.length === 0) { + dropdown.innerHTML = '
No countries found
'; + return; + } + + filteredCountries.forEach(country => { + const option = document.createElement('div'); + option.className = 'p-3 hover:bg-blue-50 cursor-pointer text-sm border-b border-gray-100 last:border-b-0 transition-colors'; + option.textContent = country; - -
-
- -
- -
- - -
-
- Quick searches: - - - - -
-
- - -
-
- -

Advanced Filters

-
+ // Add click handler + option.addEventListener('click', () => { + input.value = country; + selectElement.value = country; + dropdown.classList.add('hidden'); -
- -
- - -
- - -
- - -
- - -
- - -
-
+ // Update search icon to checkmark temporarily + searchIcon.innerHTML = ''; + setTimeout(() => { + searchIcon.innerHTML = ''; + }, 1000); - -
- - - -
-
-
- - - - - -
+ console.log('Selected country:', country); + }); - -
- - -
- - -
- - -
-

Quick Actions

-
- - - - -
-
-
-
-
- - + dropdown.appendChild(option); + }); + }; - -
- -
+ // Initialize with all countries + createOptions(countries); + + // Handle input changes (search functionality) + input.addEventListener('input', (e) => { + const query = e.target.value.toLowerCase().trim(); + + if (query === '') { + createOptions(countries); + } else { + const filtered = countries.filter(country => + country.toLowerCase().includes(query) + ); + createOptions(filtered); + } + + dropdown.classList.remove('hidden'); + }); + + // Show dropdown on focus + input.addEventListener('focus', () => { + dropdown.classList.remove('hidden'); + }); + + // Handle keyboard navigation + input.addEventListener('keydown', (e) => { + const options = dropdown.querySelectorAll('div[class*="cursor-pointer"]'); + let currentIndex = -1; + + // Find currently highlighted option + options.forEach((option, index) => { + if (option.classList.contains('bg-blue-100')) { + currentIndex = index; + } + }); + + if (e.key === 'ArrowDown') { + e.preventDefault(); + // Remove current highlight + if (currentIndex >= 0) { + options[currentIndex].classList.remove('bg-blue-100'); + } + // Add highlight to next option + currentIndex = (currentIndex + 1) % options.length; + if (options[currentIndex]) { + options[currentIndex].classList.add('bg-blue-100'); + options[currentIndex].scrollIntoView({ block: 'nearest' }); + } + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + // Remove current highlight + if (currentIndex >= 0) { + options[currentIndex].classList.remove('bg-blue-100'); + } + // Add highlight to previous option + currentIndex = currentIndex <= 0 ? options.length - 1 : currentIndex - 1; + if (options[currentIndex]) { + options[currentIndex].classList.add('bg-blue-100'); + options[currentIndex].scrollIntoView({ block: 'nearest' }); + } + } else if (e.key === 'Enter') { + e.preventDefault(); + if (currentIndex >= 0 && options[currentIndex]) { + options[currentIndex].click(); + } + } else if (e.key === 'Escape') { + dropdown.classList.add('hidden'); + input.blur(); + } + }); + + // Hide dropdown when clicking outside + document.addEventListener('click', (e) => { + if (!wrapper.contains(e.target)) { + dropdown.classList.add('hidden'); + } + }); + + // Build the wrapper + wrapper.appendChild(input); + wrapper.appendChild(searchIcon); + wrapper.appendChild(dropdown); + + // Replace original select with wrapper + container.insertBefore(wrapper, selectElement); + + // Hide original select but keep it for form submission + selectElement.style.display = 'none'; + wrapper.appendChild(selectElement); + + console.log('โœ… Searchable country dropdown created for:', selectElement.id); + return wrapper; +} - -