nokker
5d86958186
- Remove progress step indicators (Fill Essential Info, Select Car, Calculate Impact) - Clean up interface by removing STEP badges from sections - Improve mobile responsive design with better touch targets - Fix JavaScript errors with safer element selectors - Create collapsible Advanced Options and Calculated Parameters sections - Position both sections above calculate button in responsive side-by-side layout - Remove gear icon from Calculated Parameters for cleaner design - Add mobile-first CSS with proper breakpoints and touch improvements - Enhance form validation and field monitoring without visual step clutter - Preserve tax-old.html as backup of previous tabbed interface - Maintain all calculation functionality while streamlining user flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
839 lines
34 KiB
JavaScript
839 lines
34 KiB
JavaScript
// Vehicle Search System - Type-to-filter approach
|
|
// Much more user-friendly than cascading dropdowns
|
|
|
|
class VehicleSearchAutocomplete {
|
|
constructor(containerId, onSelectionChange = null) {
|
|
this.container = document.getElementById(containerId);
|
|
this.onSelectionChange = onSelectionChange;
|
|
this.selectedVehicle = null;
|
|
this.isManualMode = false;
|
|
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.createSearchInterface();
|
|
this.bindEvents();
|
|
}
|
|
|
|
createSearchInterface() {
|
|
this.container.innerHTML = `
|
|
<div class="vehicle-search-container">
|
|
<div class="search-filters" style="display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap;">
|
|
<div class="filter-group">
|
|
<label for="year-filter" data-i18n="filter.year">Year</label>
|
|
<select id="year-filter" class="filter-dropdown">
|
|
<option value="" data-i18n="filter.allYears">All Years</option>
|
|
<option value="2025">2025</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2022">2022</option>
|
|
<option value="2021">2021</option>
|
|
<option value="2020">2020</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="fuel-filter" data-i18n="filter.fuelType">Fuel Type</label>
|
|
<select id="fuel-filter" class="filter-dropdown">
|
|
<option value="" data-i18n="filter.allFuelTypes">All Fuel Types</option>
|
|
<option value="electric" data-i18n="filter.electric">⚡ Electric</option>
|
|
<option value="hybrid" data-i18n="filter.hybrid">🔋 Hybrid</option>
|
|
<option value="petrol" data-i18n="filter.petrol">⛽ Petrol</option>
|
|
<option value="diesel" data-i18n="filter.diesel">🛢️ Diesel</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="filter-group">
|
|
<label for="price-filter" data-i18n="filter.priceRange">Price Range</label>
|
|
<select id="price-filter" class="filter-dropdown">
|
|
<option value="" data-i18n="filter.allPrices">All Prices</option>
|
|
<option value="0-30000" data-i18n="filter.under30k">Under €30,000</option>
|
|
<option value="30000-50000" data-i18n="filter.30k50k">€30,000 - €50,000</option>
|
|
<option value="50000-75000" data-i18n="filter.50k75k">€50,000 - €75,000</option>
|
|
<option value="75000-100000" data-i18n="filter.75k100k">€75,000 - €100,000</option>
|
|
<option value="100000-999999" data-i18n="filter.above100k">Above €100,000</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-group" style="position: relative;">
|
|
<label for="vehicle-search-input" data-i18n="search.label">Search Vehicle</label>
|
|
<input type="text"
|
|
id="vehicle-search-input"
|
|
class="vehicle-search-input"
|
|
data-i18n-placeholder="search.placeholder"
|
|
placeholder="Type to search... (e.g., BMW X1, Mercedes C200, Audi Q5)"
|
|
autocomplete="off">
|
|
<div id="vehicle-search-results" class="vehicle-search-results" style="display: none;"></div>
|
|
</div>
|
|
|
|
<div class="manual-override" style="margin-top: 16px;">
|
|
<label>
|
|
<input type="checkbox" id="manual-override-checkbox">
|
|
<span style="margin-left: 8px; font-size: 0.9rem; color: #6c757d;" data-i18n="manual.override">Enter vehicle details manually</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="manual-fields" class="manual-fields" style="display: none; margin-top: 16px;">
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label for="manual-name" data-i18n="manual.vehicleName">Vehicle Name</label>
|
|
<input type="text" id="manual-name" placeholder="e.g., Tesla Model 3">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="manual-price" data-i18n="manual.listPrice">List Price (€)</label>
|
|
<input type="number" id="manual-price" placeholder="50000" min="15000" max="200000">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="manual-co2" data-i18n="manual.co2Emissions">CO2 Emissions (g/km)</label>
|
|
<input type="number" id="manual-co2" placeholder="120" min="0" max="300">
|
|
</div>
|
|
|
|
<div class="input-group">
|
|
<label for="manual-fuel" data-i18n="manual.fuelType">Fuel Type</label>
|
|
<select id="manual-fuel">
|
|
<option value="electric" data-i18n="fuel.electric">Electric</option>
|
|
<option value="petrol" data-i18n="fuel.petrol">Petrol</option>
|
|
<option value="diesel" data-i18n="fuel.diesel">Diesel</option>
|
|
<option value="hybrid" data-i18n="fuel.hybrid">Hybrid</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="selected-vehicle-info" id="selected-vehicle-info" style="display: none; margin-top: 16px; padding: 16px; background: #f8f9fa; border-radius: 6px;">
|
|
<h4 style="margin-bottom: 12px; font-size: 0.95rem; font-weight: 500; color: #28a745;">✓ Selected Vehicle:</h4>
|
|
<div id="vehicle-details"></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
updateTranslations() {
|
|
// This will be called when language changes to update all translatable elements
|
|
// The main translation system will handle the data-i18n attributes
|
|
// Just trigger a re-render of any dynamic elements if needed
|
|
|
|
// Update placeholder for search input if needed
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
if (searchInput && window.translations && window.currentLanguage) {
|
|
const placeholder = window.translations[window.currentLanguage]['search.placeholder'];
|
|
if (placeholder) {
|
|
searchInput.setAttribute('placeholder', placeholder);
|
|
}
|
|
}
|
|
}
|
|
|
|
bindEvents() {
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
const resultsContainer = document.getElementById('vehicle-search-results');
|
|
const manualCheckbox = document.getElementById('manual-override-checkbox');
|
|
const manualFields = document.getElementById('manual-fields');
|
|
|
|
// Search input
|
|
searchInput.addEventListener('input', (e) => {
|
|
this.performSearch(e.target.value);
|
|
});
|
|
|
|
// Filter dropdowns
|
|
const yearFilter = document.getElementById('year-filter');
|
|
const fuelFilter = document.getElementById('fuel-filter');
|
|
const priceFilter = document.getElementById('price-filter');
|
|
|
|
[yearFilter, fuelFilter, priceFilter].forEach(filter => {
|
|
filter.addEventListener('change', () => {
|
|
this.performSearch(searchInput.value);
|
|
});
|
|
});
|
|
|
|
// Result selection
|
|
resultsContainer.addEventListener('click', (e) => {
|
|
const resultItem = e.target.closest('.search-result-item');
|
|
if (resultItem) {
|
|
const index = parseInt(resultItem.getAttribute('data-index'));
|
|
this.selectResult(index);
|
|
}
|
|
});
|
|
|
|
// Hide results when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!searchInput.contains(e.target) && !resultsContainer.contains(e.target)) {
|
|
this.hideResults();
|
|
}
|
|
});
|
|
|
|
// Manual override toggle
|
|
manualCheckbox.addEventListener('change', (e) => {
|
|
this.isManualMode = e.target.checked;
|
|
|
|
if (this.isManualMode) {
|
|
manualFields.style.display = 'block';
|
|
searchInput.disabled = true;
|
|
searchInput.style.background = '#f8f9fa';
|
|
this.hideResults();
|
|
this.hideSelectedInfo();
|
|
} else {
|
|
manualFields.style.display = 'none';
|
|
searchInput.disabled = false;
|
|
searchInput.style.background = 'white';
|
|
this.updateSelectedVehicleInfo();
|
|
}
|
|
});
|
|
|
|
// Manual field changes
|
|
const manualFieldIds = ['manual-name', 'manual-price', 'manual-co2', 'manual-fuel'];
|
|
manualFieldIds.forEach(fieldId => {
|
|
const field = document.getElementById(fieldId);
|
|
if (field) {
|
|
field.addEventListener('input', () => {
|
|
this.notifySelectionChange();
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
performSearch(searchTerm) {
|
|
const filters = this.getActiveFilters();
|
|
const results = VehicleSearchDB.smartSearchWithFilters(searchTerm, filters, 12);
|
|
this.displayResults(results);
|
|
}
|
|
|
|
getActiveFilters() {
|
|
return {
|
|
year: document.getElementById('year-filter')?.value || '',
|
|
fuel: document.getElementById('fuel-filter')?.value || '',
|
|
priceRange: document.getElementById('price-filter')?.value || ''
|
|
};
|
|
}
|
|
|
|
selectResult(index) {
|
|
if (!this.currentResults || !this.currentResults[index]) {
|
|
return;
|
|
}
|
|
|
|
const selectedVehicle = this.currentResults[index];
|
|
this.selectedVehicle = selectedVehicle;
|
|
|
|
// Update search input with selected vehicle
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
searchInput.value = `${selectedVehicle.brand} ${selectedVehicle.model} ${selectedVehicle.variant.name} (${selectedVehicle.year})`;
|
|
|
|
this.hideResults();
|
|
this.updateSelectedVehicleInfo();
|
|
this.notifySelectionChange();
|
|
|
|
// Add the selected vehicle to the car list
|
|
if (window.addSelectedVehicle) {
|
|
window.addSelectedVehicle();
|
|
}
|
|
}
|
|
|
|
|
|
displayResults(results) {
|
|
const resultsContainer = document.getElementById('vehicle-search-results');
|
|
this.currentResults = results; // Store for selection
|
|
|
|
if (results.length === 0) {
|
|
this.hideResults();
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
results.forEach((result, index) => {
|
|
const variant = result.variant;
|
|
const co2Badge = variant.co2 === 0 ?
|
|
'<span style="background: #d1fae5; color: #065f46; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; margin-left: 8px;">0g CO₂</span>' :
|
|
'';
|
|
|
|
html += `
|
|
<div class="search-result-item" data-index="${index}">
|
|
<div class="result-main">
|
|
<strong>${result.brand} ${result.model}</strong>
|
|
<span class="result-variant">${variant.name}</span>
|
|
<span class="result-year">(${result.year})</span>
|
|
${co2Badge}
|
|
</div>
|
|
<div class="result-details">
|
|
€${variant.price.toLocaleString()} • ${variant.co2}g CO₂ • ${this.getFuelDisplay(variant.fuel)} • ${variant.power}hp
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
resultsContainer.innerHTML = html;
|
|
resultsContainer.style.display = 'block';
|
|
|
|
// Bind click events
|
|
resultsContainer.querySelectorAll('.search-result-item').forEach((item, index) => {
|
|
item.addEventListener('click', () => {
|
|
this.selectVehicle(results[index]);
|
|
});
|
|
});
|
|
}
|
|
|
|
selectVehicle(result) {
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
const vehicleName = `${result.brand} ${result.model} ${result.variant.name} (${result.year})`;
|
|
|
|
searchInput.value = vehicleName;
|
|
this.selectedVehicle = {
|
|
name: vehicleName,
|
|
price: result.variant.price,
|
|
co2: result.variant.co2,
|
|
fuel: result.variant.fuel,
|
|
power: result.variant.power,
|
|
brand: result.brand,
|
|
model: result.model,
|
|
year: result.year,
|
|
variant: result.variant
|
|
};
|
|
|
|
this.hideResults();
|
|
this.updateSelectedVehicleInfo();
|
|
this.notifySelectionChange();
|
|
}
|
|
|
|
hideResults() {
|
|
document.getElementById('vehicle-search-results').style.display = 'none';
|
|
}
|
|
|
|
updateSelectedVehicleInfo() {
|
|
const infoDiv = document.getElementById('selected-vehicle-info');
|
|
const detailsDiv = document.getElementById('vehicle-details');
|
|
|
|
if (this.isManualMode || !this.selectedVehicle) {
|
|
infoDiv.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
const vehicle = this.selectedVehicle;
|
|
const variant = vehicle.variant;
|
|
const fuelBadge = variant.fuel === 'electric' ?
|
|
'<span style="background: #d1fae5; color: #065f46; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem;">Electric</span>' :
|
|
variant.fuel === 'hybrid' ?
|
|
'<span style="background: #fef3c7; color: #92400e; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem;">Hybrid</span>' :
|
|
`<span style="background: #f3f4f6; color: #374151; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem;">${this.getFuelDisplay(variant.fuel)}</span>`;
|
|
|
|
detailsDiv.innerHTML = `
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; font-size: 0.9rem;">
|
|
<div><strong>Brand:</strong> ${vehicle.brand}</div>
|
|
<div><strong>Model:</strong> ${vehicle.model}</div>
|
|
<div><strong>Year:</strong> ${vehicle.year}</div>
|
|
<div><strong>Price:</strong> €${variant.price.toLocaleString()}</div>
|
|
<div><strong>CO₂:</strong> ${variant.co2}g/km</div>
|
|
<div><strong>Fuel:</strong> ${fuelBadge}</div>
|
|
<div><strong>Power:</strong> ${variant.power}hp</div>
|
|
<div><strong>Variant:</strong> ${variant.name}</div>
|
|
</div>
|
|
`;
|
|
infoDiv.style.display = 'block';
|
|
}
|
|
|
|
hideSelectedInfo() {
|
|
document.getElementById('selected-vehicle-info').style.display = 'none';
|
|
}
|
|
|
|
getFuelDisplay(fuelType) {
|
|
const fuelMap = {
|
|
electric: 'Electric',
|
|
petrol: 'Petrol',
|
|
diesel: 'Diesel',
|
|
hybrid: 'Hybrid'
|
|
};
|
|
return fuelMap[fuelType] || fuelType;
|
|
}
|
|
|
|
getSelectedVehicleData() {
|
|
if (this.isManualMode) {
|
|
return {
|
|
name: document.getElementById('manual-name').value,
|
|
price: parseFloat(document.getElementById('manual-price').value) || 0,
|
|
co2: parseInt(document.getElementById('manual-co2').value) || 0,
|
|
fuel: document.getElementById('manual-fuel').value
|
|
};
|
|
}
|
|
|
|
return this.selectedVehicle;
|
|
}
|
|
|
|
notifySelectionChange() {
|
|
if (this.onSelectionChange) {
|
|
const vehicleData = this.getSelectedVehicleData();
|
|
this.onSelectionChange(vehicleData);
|
|
}
|
|
}
|
|
|
|
reset() {
|
|
// Clear search input
|
|
document.getElementById('vehicle-search-input').value = '';
|
|
document.getElementById('vehicle-search-input').disabled = false;
|
|
document.getElementById('vehicle-search-input').style.background = 'white';
|
|
|
|
// Reset manual mode
|
|
document.getElementById('manual-override-checkbox').checked = false;
|
|
document.getElementById('manual-fields').style.display = 'none';
|
|
this.isManualMode = false;
|
|
|
|
// Clear manual fields
|
|
document.getElementById('manual-name').value = '';
|
|
document.getElementById('manual-price').value = '';
|
|
document.getElementById('manual-co2').value = '';
|
|
document.getElementById('manual-fuel').value = 'electric';
|
|
|
|
// Clear selected vehicle
|
|
this.selectedVehicle = null;
|
|
|
|
this.hideResults();
|
|
this.hideSelectedInfo();
|
|
}
|
|
|
|
disable() {
|
|
// Store disabled state
|
|
this.isDisabled = true;
|
|
|
|
// Disable all filter dropdowns
|
|
const filters = ['year-filter', 'fuel-filter', 'price-filter'];
|
|
filters.forEach(filterId => {
|
|
const filter = document.getElementById(filterId);
|
|
if (filter) {
|
|
filter.disabled = true;
|
|
filter.style.opacity = '0.5';
|
|
filter.style.cursor = 'not-allowed';
|
|
filter.style.pointerEvents = 'none';
|
|
}
|
|
});
|
|
|
|
// Disable search input
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
if (searchInput) {
|
|
searchInput.disabled = true;
|
|
searchInput.readonly = true;
|
|
searchInput.placeholder = 'Complete Step 1 to search vehicles...';
|
|
searchInput.style.opacity = '0.5';
|
|
searchInput.style.cursor = 'not-allowed';
|
|
searchInput.style.pointerEvents = 'none';
|
|
}
|
|
|
|
// Disable manual mode toggle
|
|
const manualCheckbox = document.getElementById('manual-override-checkbox');
|
|
if (manualCheckbox) {
|
|
manualCheckbox.disabled = true;
|
|
manualCheckbox.style.opacity = '0.5';
|
|
manualCheckbox.style.cursor = 'not-allowed';
|
|
manualCheckbox.style.pointerEvents = 'none';
|
|
}
|
|
|
|
// Disable manual form inputs
|
|
const manualInputs = ['manual-name', 'manual-price', 'manual-co2', 'manual-fuel'];
|
|
manualInputs.forEach(inputId => {
|
|
const input = document.getElementById(inputId);
|
|
if (input) {
|
|
input.disabled = true;
|
|
input.readonly = true;
|
|
input.style.opacity = '0.5';
|
|
input.style.cursor = 'not-allowed';
|
|
input.style.pointerEvents = 'none';
|
|
}
|
|
});
|
|
|
|
// Disable any buttons
|
|
const addButton = document.getElementById('add-vehicle-btn');
|
|
if (addButton) {
|
|
addButton.disabled = true;
|
|
addButton.style.opacity = '0.5';
|
|
addButton.style.cursor = 'not-allowed';
|
|
addButton.style.pointerEvents = 'none';
|
|
}
|
|
|
|
// Hide results if shown
|
|
this.hideResults();
|
|
this.hideSelectedInfo();
|
|
}
|
|
|
|
enable() {
|
|
// Clear disabled state
|
|
this.isDisabled = false;
|
|
|
|
// Enable all filter dropdowns
|
|
const filters = ['year-filter', 'fuel-filter', 'price-filter'];
|
|
filters.forEach(filterId => {
|
|
const filter = document.getElementById(filterId);
|
|
if (filter) {
|
|
filter.disabled = false;
|
|
filter.style.opacity = '1';
|
|
filter.style.cursor = 'pointer';
|
|
filter.style.pointerEvents = 'auto';
|
|
}
|
|
});
|
|
|
|
// Enable search input
|
|
const searchInput = document.getElementById('vehicle-search-input');
|
|
if (searchInput) {
|
|
searchInput.disabled = false;
|
|
searchInput.readonly = false;
|
|
searchInput.placeholder = 'Type to search vehicles (e.g., Tesla Model 3, BMW X3, Audi A4)...';
|
|
searchInput.style.opacity = '1';
|
|
searchInput.style.cursor = 'text';
|
|
searchInput.style.pointerEvents = 'auto';
|
|
}
|
|
|
|
// Enable manual mode toggle
|
|
const manualCheckbox = document.getElementById('manual-override-checkbox');
|
|
if (manualCheckbox) {
|
|
manualCheckbox.disabled = false;
|
|
manualCheckbox.style.opacity = '1';
|
|
manualCheckbox.style.cursor = 'pointer';
|
|
manualCheckbox.style.pointerEvents = 'auto';
|
|
}
|
|
|
|
// Enable manual form inputs
|
|
const manualInputs = ['manual-name', 'manual-price', 'manual-co2', 'manual-fuel'];
|
|
manualInputs.forEach(inputId => {
|
|
const input = document.getElementById(inputId);
|
|
if (input) {
|
|
input.disabled = false;
|
|
input.readonly = false;
|
|
input.style.opacity = '1';
|
|
input.style.cursor = input.tagName === 'INPUT' ? 'text' : 'pointer';
|
|
input.style.pointerEvents = 'auto';
|
|
}
|
|
});
|
|
|
|
// Enable any buttons
|
|
const addButton = document.getElementById('add-vehicle-btn');
|
|
if (addButton) {
|
|
addButton.disabled = false;
|
|
addButton.style.opacity = '1';
|
|
addButton.style.cursor = 'pointer';
|
|
addButton.style.pointerEvents = 'auto';
|
|
}
|
|
}
|
|
|
|
setVehicleData(vehicleData) {
|
|
if (vehicleData.manual) {
|
|
document.getElementById('manual-override-checkbox').checked = true;
|
|
document.getElementById('manual-fields').style.display = 'block';
|
|
document.getElementById('manual-name').value = vehicleData.name || '';
|
|
document.getElementById('manual-price').value = vehicleData.price || '';
|
|
document.getElementById('manual-co2').value = vehicleData.co2 || '';
|
|
document.getElementById('manual-fuel').value = vehicleData.fuel || 'electric';
|
|
|
|
this.isManualMode = true;
|
|
document.getElementById('vehicle-search-input').disabled = true;
|
|
document.getElementById('vehicle-search-input').style.background = '#f8f9fa';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Enhanced Vehicle Database utilities for search
|
|
const VehicleSearchDB = {
|
|
// Get all vehicles as flat array for easier searching
|
|
getAllVehicles() {
|
|
const allVehicles = [];
|
|
|
|
Object.keys(vehicleDatabase).forEach(brand => {
|
|
Object.keys(vehicleDatabase[brand]).forEach(model => {
|
|
Object.keys(vehicleDatabase[brand][model]).forEach(year => {
|
|
vehicleDatabase[brand][model][year].forEach(variant => {
|
|
allVehicles.push({
|
|
brand,
|
|
model,
|
|
year,
|
|
variant,
|
|
searchText: `${brand} ${model} ${variant.name} ${year}`.toLowerCase()
|
|
});
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
return allVehicles;
|
|
},
|
|
|
|
// Get popular suggestions for empty search
|
|
getPopularSuggestions() {
|
|
const popular = [
|
|
// BMW best sellers
|
|
{brand: "BMW", model: "X1", year: "2024", variantIndex: 0},
|
|
{brand: "BMW", model: "3 Series", year: "2024", variantIndex: 0},
|
|
|
|
// Mercedes popular
|
|
{brand: "Mercedes-Benz", model: "C-Class", year: "2024", variantIndex: 0},
|
|
{brand: "Mercedes-Benz", model: "GLC", year: "2024", variantIndex: 0},
|
|
|
|
// Audi favorites
|
|
{brand: "Audi", model: "Q5", year: "2024", variantIndex: 0},
|
|
{brand: "Audi", model: "Q3", year: "2024", variantIndex: 0},
|
|
|
|
// VW popular
|
|
{brand: "Volkswagen", model: "Tiguan", year: "2024", variantIndex: 0},
|
|
{brand: "Volkswagen", model: "Golf", year: "2024", variantIndex: 1},
|
|
|
|
// Tesla models
|
|
{brand: "Tesla", model: "Model Y", year: "2024", variantIndex: 0},
|
|
{brand: "Tesla", model: "Model 3", year: "2024", variantIndex: 0}
|
|
];
|
|
|
|
return popular.map(item => {
|
|
const variant = vehicleDatabase[item.brand][item.model][item.year][item.variantIndex];
|
|
return {
|
|
brand: item.brand,
|
|
model: item.model,
|
|
year: item.year,
|
|
variant
|
|
};
|
|
}).filter(item => item.variant); // Filter out any missing variants
|
|
},
|
|
|
|
// Smart search with filters
|
|
smartSearchWithFilters(searchTerm, filters = {}, limit = 12) {
|
|
if (!searchTerm || searchTerm.length < 2) {
|
|
return this.getPopularSuggestions(filters).slice(0, limit);
|
|
}
|
|
|
|
return this.smartSearch(searchTerm, filters, limit);
|
|
},
|
|
|
|
// Smart search with fuzzy matching
|
|
smartSearch(searchTerm, filters = {}, limit = 12) {
|
|
|
|
const term = searchTerm.toLowerCase();
|
|
const results = [];
|
|
|
|
Object.keys(vehicleDatabase).forEach(brand => {
|
|
Object.keys(vehicleDatabase[brand]).forEach(model => {
|
|
Object.keys(vehicleDatabase[brand][model]).forEach(year => {
|
|
vehicleDatabase[brand][model][year].forEach(variant => {
|
|
// Apply filters first
|
|
if (!this.passesFilters(variant, year, filters)) {
|
|
return;
|
|
}
|
|
|
|
const searchText = `${brand} ${model} ${variant.name}`.toLowerCase();
|
|
const fullText = `${brand} ${model} ${variant.name} ${year}`.toLowerCase();
|
|
|
|
let score = 0;
|
|
|
|
// Brand exact match
|
|
if (brand.toLowerCase() === term) score += 1000;
|
|
else if (brand.toLowerCase().includes(term)) score += 500;
|
|
|
|
// Model exact match
|
|
if (model.toLowerCase() === term) score += 800;
|
|
else if (model.toLowerCase().includes(term)) score += 400;
|
|
|
|
// Variant name match
|
|
if (variant.name.toLowerCase().includes(term)) score += 300;
|
|
|
|
// Full text contains term
|
|
if (fullText.includes(term)) score += 100;
|
|
|
|
// Partial brand + model match (e.g., "bmw x1")
|
|
const brandModel = `${brand} ${model}`.toLowerCase();
|
|
if (brandModel.includes(term)) score += 600;
|
|
|
|
// Year preference (newer = better)
|
|
score += parseInt(year) * 0.1;
|
|
|
|
// Electric/hybrid bonus for environmental preference
|
|
if (variant.fuel === 'electric') score += 50;
|
|
if (variant.fuel === 'hybrid') score += 25;
|
|
|
|
if (score > 0) {
|
|
results.push({
|
|
brand,
|
|
model,
|
|
year,
|
|
variant,
|
|
score
|
|
});
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
|
|
return results.sort((a, b) => b.score - a.score).slice(0, limit);
|
|
},
|
|
|
|
// Check if vehicle passes all active filters
|
|
passesFilters(variant, year, filters) {
|
|
// Year filter
|
|
if (filters.year && year !== filters.year) {
|
|
return false;
|
|
}
|
|
|
|
// Fuel type filter
|
|
if (filters.fuel && variant.fuel !== filters.fuel) {
|
|
return false;
|
|
}
|
|
|
|
// Price range filter
|
|
if (filters.priceRange && variant.price) {
|
|
const [minPrice, maxPrice] = filters.priceRange.split('-').map(Number);
|
|
if (variant.price < minPrice || variant.price > maxPrice) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
},
|
|
|
|
// Get popular suggestions with filters applied
|
|
getPopularSuggestions(filters = {}) {
|
|
const popular = [
|
|
// BMW best sellers
|
|
{brand: "BMW", model: "X1", year: "2024", variantIndex: 0},
|
|
{brand: "BMW", model: "3 Series", year: "2024", variantIndex: 0},
|
|
|
|
// Mercedes popular
|
|
{brand: "Mercedes-Benz", model: "C-Class", year: "2024", variantIndex: 0},
|
|
{brand: "Mercedes-Benz", model: "GLC", year: "2024", variantIndex: 0},
|
|
|
|
// Audi favorites
|
|
{brand: "Audi", model: "Q5", year: "2024", variantIndex: 0},
|
|
{brand: "Audi", model: "Q3", year: "2024", variantIndex: 0},
|
|
|
|
// VW popular
|
|
{brand: "Volkswagen", model: "Tiguan", year: "2024", variantIndex: 0},
|
|
{brand: "Volkswagen", model: "Golf", year: "2024", variantIndex: 1},
|
|
|
|
// Tesla models
|
|
{brand: "Tesla", model: "Model Y", year: "2024", variantIndex: 0},
|
|
{brand: "Tesla", model: "Model 3", year: "2024", variantIndex: 0}
|
|
];
|
|
|
|
return popular.map(item => {
|
|
if (!vehicleDatabase[item.brand] || !vehicleDatabase[item.brand][item.model] || !vehicleDatabase[item.brand][item.model][item.year]) {
|
|
return null;
|
|
}
|
|
|
|
const variant = vehicleDatabase[item.brand][item.model][item.year][item.variantIndex];
|
|
if (!variant) return null;
|
|
|
|
// Apply filters to popular suggestions too
|
|
if (!this.passesFilters(variant, item.year, filters)) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
brand: item.brand,
|
|
model: item.model,
|
|
year: item.year,
|
|
variant
|
|
};
|
|
}).filter(item => item !== null); // Filter out any missing variants
|
|
}
|
|
};
|
|
|
|
// Utility functions for integration with existing tax calculator
|
|
const VehicleAutocompleteUtils = {
|
|
// Convert autocomplete selection to legacy custom car format
|
|
convertToCustomCar(vehicleData) {
|
|
// Handle both data structures: manual mode (flat) and search mode (nested)
|
|
let name, price, co2, fuel;
|
|
|
|
if (vehicleData.variant) {
|
|
// Search mode: {brand, model, year, variant}
|
|
const variant = vehicleData.variant;
|
|
name = `${vehicleData.brand} ${vehicleData.model} ${variant.name} (${vehicleData.year})`;
|
|
price = variant.price;
|
|
co2 = variant.co2;
|
|
fuel = variant.fuel;
|
|
} else {
|
|
// Manual mode: {name, price, co2, fuel}
|
|
name = vehicleData.name;
|
|
price = vehicleData.price;
|
|
co2 = vehicleData.co2;
|
|
fuel = vehicleData.fuel;
|
|
}
|
|
|
|
return {
|
|
name,
|
|
price,
|
|
co2,
|
|
fuel,
|
|
examples: vehicleData.variant ? "Selected from database" : "Manual entry"
|
|
};
|
|
},
|
|
|
|
// Validate vehicle data before adding
|
|
validateVehicleData(vehicleData) {
|
|
if (!vehicleData) {
|
|
return {
|
|
valid: false,
|
|
message: "Please select a vehicle or enter all required fields"
|
|
};
|
|
}
|
|
|
|
// Handle both data structures: manual mode (flat) and search mode (nested)
|
|
let name, price, co2, fuel;
|
|
|
|
if (vehicleData.variant) {
|
|
// Search mode: {brand, model, year, variant}
|
|
const variant = vehicleData.variant;
|
|
name = `${vehicleData.brand} ${vehicleData.model} ${variant.name} (${vehicleData.year})`;
|
|
price = variant.price;
|
|
co2 = variant.co2;
|
|
fuel = variant.fuel;
|
|
} else {
|
|
// Manual mode: {name, price, co2, fuel}
|
|
name = vehicleData.name;
|
|
price = vehicleData.price;
|
|
co2 = vehicleData.co2;
|
|
fuel = vehicleData.fuel;
|
|
}
|
|
|
|
if (!name || !price) {
|
|
return {
|
|
valid: false,
|
|
message: "Please select a vehicle or enter all required fields"
|
|
};
|
|
}
|
|
|
|
if (price < 15000 || price > 200000) {
|
|
return {
|
|
valid: false,
|
|
message: "Price must be between €15,000 and €200,000"
|
|
};
|
|
}
|
|
|
|
if (co2 < 0 || co2 > 300) {
|
|
return {
|
|
valid: false,
|
|
message: "CO2 emissions must be between 0 and 300 g/km"
|
|
};
|
|
}
|
|
|
|
return { valid: true };
|
|
},
|
|
|
|
// Get fuel type display name
|
|
getFuelTypeDisplay(fuelType, language = 'en') {
|
|
const fuelTypes = {
|
|
en: {
|
|
electric: "Electric",
|
|
petrol: "Petrol",
|
|
diesel: "Diesel",
|
|
hybrid: "Hybrid"
|
|
},
|
|
fr: {
|
|
electric: "Électrique",
|
|
petrol: "Essence",
|
|
diesel: "Diesel",
|
|
hybrid: "Hybride"
|
|
},
|
|
nl: {
|
|
electric: "Elektrisch",
|
|
petrol: "Benzine",
|
|
diesel: "Diesel",
|
|
hybrid: "Hybride"
|
|
}
|
|
};
|
|
|
|
return fuelTypes[language][fuelType] || fuelType;
|
|
}
|
|
}; |