- We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with. - Let’s structure a deal that works for you below: -
- - -- ${this.payment} / ${this.frequencyMap[this.paymentFrequency]} -
-${this.intRate}% APR for ${this.loanTerm} Months
- - -+ ${(Number(this.payment) || 0).toLocaleString('en-CA', { style: 'currency', currency: 'CAD' })} + / + ${this.frequencyMap[this.paymentFrequency]} + +
+Please Select a Make
'; - } else if (list && list.length > 0) { - modelContainer.innerHTML = ''; - list.sort((a, b) => a.value.localeCompare(b.value)); - list.forEach((model) => { - modelContainer.appendChild(model.initCheckbox()); }); - } else { - modelContainer.innerHTML = 'No models available
'; - } + + } -function initTrimContainer(model) { - let list = [ - ...new Set( - filterManager.modelFilters - .filter((m) => m.checked == true) - .map((m) => m.trims) - .flat() - ), - ]; +function createMakeList(vehicles){ - // const uniqueArray = [...new Set(array)]; - const trimContainer = document.querySelector('.trim-container'); + const makeContainer = document.querySelector('.make-container'); + makeContainer.innerHTML = ''; - if (list.length === 0) { - trimContainer.innerHTML = 'Please Select a Model
'; - } else if (list && list.length > 0) { - trimContainer.innerHTML = ''; - list.sort((a, b) => a.value.localeCompare(b.value)); - list.forEach((trim) => { - trimContainer.appendChild(trim.initCheckbox()); + const makeCounts = vehicles.reduce((acc, vehicle) => { + const { make } = vehicle; + acc[make] = (acc[make] || 0) + 1; + return acc; + }, {}); + let makeValue = document.querySelector('#autocart-make-field').value; + // if(makeValue){ + // console.log('makeValue',makeValue); + // // dataStore.addFilter('make', makeValue); + // } + makeFilters = Object.entries(makeCounts).map(([make, count]) => { + + return filterManager.createMakeFilter({ + text: make, + checked: makeValue.toLowerCase() === make.toLowerCase(), + count, + models: fetchAvailableModels(vehicles, make) + }, dataStore); }); - } else { - trimContainer.innerHTML = 'No trims available
'; - } + makeFilters.sort((a, b) => a.value.localeCompare(b.value)); + makeFilters.forEach(make => { + + makeContainer.appendChild(make.generateCardHTML()); + make.subscribe(m=> initModelContainer(m)) + }); +} + +function createBodyTypeList(vehicles){ + const bodyTypeContainer = document.querySelector('.body-type-container'); + bodyTypeContainer.innerHTML = ''; + + const bodyType = vehicles.reduce((acc, vehicle) => { + const { body_type } = vehicle; + acc[body_type] = (acc[body_type] || 0) + 1; + return acc; + }, {}); + + filterManager.resetList('body_type'); + + + bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore)); + bodyTypeFilters.sort((a, b) => a.value.localeCompare(b.value)); + bodyTypeFilters.forEach(body_type => { + bodyTypeContainer.appendChild(body_type.initCheckbox()); + // body_type.subscribe(m=> iniBodyTypeContainer(m)) + }); +} + +function createTransmissionList(vehicles){ + const transmissionContainer = document.querySelector('.transmission-container'); + + transmissionContainer.innerHTML = ''; + + const transmission = vehicles.reduce((acc, vehicle) => { + const { transmission_type } = vehicle; + acc[transmission_type] = (acc[transmission_type] || 0) + 1; + return acc; + }, {}); + + filterManager.resetList('transmission_type'); + transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore)); + transmissionFilters.sort((a, b) => a.value.localeCompare(b.value)); + transmissionFilters.forEach(transmission => { + transmissionContainer.appendChild(transmission.initCheckbox()); + }); +} + +function createExteriorList(vehicles){ + console.log(vehicles); + const exteriorContainer = document.querySelector('.exterior-color'); + exteriorContainer.innerHTML = ''; + const exterior = vehicles.reduce((acc, vehicle) => { + const { exterior_color } = vehicle; + acc[exterior_color] = (acc[exterior_color] || 0) + 1; + return acc; + }, {}); + filterManager.resetList('exterior_color'); + + exteriorFilters = Object.entries(exterior).map(([exterior_color, count]) => filterManager.createExteriorFilter({ text: exterior_color, count}, dataStore)); + exteriorFilters.sort((a, b) => a.value.localeCompare(b.value)); + + exteriorFilters.forEach(exterior => { + exteriorContainer.appendChild(exterior.initCheckbox()); + }); +} + + +function initModelContainer(make){ + let list = [...new Set(filterManager.makeFilters.filter(m=>m.checked == true).map(m=>m.models).flat())]; + + const modelContainer = document.querySelector('.model-container'); + if (list.length === 0) { + modelContainer.innerHTML = 'Please Select a Make
'; + } else if (list && list.length > 0) { + modelContainer.innerHTML = ''; + list.sort((a, b) => a.value.localeCompare(b.value)); + list.forEach(model => { + modelContainer.appendChild(model.initCheckbox()); + }); + } else { + modelContainer.innerHTML = 'No models available
'; + } +} + +function initTrimContainer(model){ + let list = [...new Set(filterManager.modelFilters.filter(m=>m.checked == true).map(m=>m.trims).flat())]; + + // const uniqueArray = [...new Set(array)]; + const trimContainer = document.querySelector('.trim-container'); + + if (list.length === 0) { + trimContainer.innerHTML = 'Please Select a Model
'; + } else if (list && list.length > 0) { + trimContainer.innerHTML = ''; + list.sort((a, b) => a.value.localeCompare(b.value)); + list.forEach(trim => { + trimContainer.appendChild(trim.initCheckbox()); + }); + } else { + trimContainer.innerHTML = 'No trims available
'; + } } function fetchAvailableModels(vehicles, make) { - const filteredModels = vehicles - .filter((vehicle) => vehicle.make === make) - .map((vehicle) => vehicle.model); - // Count occurrences of each model - const modelCounts = filteredModels.reduce((acc, model) => { - acc[model] = (acc[model] || 0) + 1; - return acc; - }, {}); + const filteredModels = vehicles + .filter(vehicle => vehicle.make === make) + .map(vehicle => vehicle.model); + // Count occurrences of each model + const modelCounts = filteredModels.reduce((acc, model) => { + acc[model] = (acc[model] || 0) + 1; + return acc; + }, {}); - // Convert to an array of objects - const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ - model, - count, - })); - modelsArray.map((m) => (m['trims'] = fetchAvailableTrim(vehicles, m.model))); - return modelsArray; + // Convert to an array of objects + const modelsArray = Object.entries(modelCounts).map(([model, count]) => ({ model, count })); + modelsArray.map(m=>m['trims'] = fetchAvailableTrim(vehicles, m.model)) + return modelsArray; } -function fetchAvailableTrim(vehicles, modelName) { - const filteredVehicles = vehicles.filter( - (vehicle) => vehicle.model === modelName - ); - const trimCount = filteredVehicles.reduce((result, vehicle) => { - vehicle.trim.forEach((trim) => { - const existingTrim = result.find((item) => item.text === trim); - if (existingTrim) { - existingTrim.count += 1; - } else { - result.push({ text: trim, count: 1 }); - } - }); - return result; - }, []); - return trimCount; +function fetchAvailableTrim(vehicles, modelName){ + const filteredVehicles = vehicles.filter(vehicle => vehicle.model === modelName); + const trimCount = filteredVehicles.reduce((result, vehicle) => { + vehicle.trim.forEach(trim => { + const existingTrim = result.find(item => item.text === trim); + if (existingTrim) { + existingTrim.count += 1; + } else { + result.push({ text: trim, count: 1 }); + } + }); + return result; + }, []); + return trimCount; } -function updateModel(models) { - console.log('updateModel', models); +function updateModel(models){ + console.log('updateModel', models) } + + function debounce(func, delay) { - let timeout; - return function () { - const context = this; - const args = arguments; - clearTimeout(timeout); - timeout = setTimeout(() => func.apply(context, args), delay); - }; + let timeout; + return function () { + const context = this; + const args = arguments; + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(context, args), delay); + }; } function updatePrice() { - const min = price.getValueStart(); - const max = price.getValue(); - const formattedMin = '$' + min.toLocaleString(); - const formattedMax = '$' + max.toLocaleString(); - document.getElementById( - 'priceRange' - ).textContent = `${formattedMin} to ${formattedMax}`; - debouncedSendReq(); + const min = price.getValueStart(); + const max = price.getValue(); + const formattedMin = '$' + min.toLocaleString(); + const formattedMax = '$' + max.toLocaleString(); + document.getElementById('priceRange').textContent = `${formattedMin} to ${formattedMax}`; + debouncedSendReq(); } function updateYear() { - const min = year.getValueStart(); - const max = year.getValue(); - document.getElementById('yearRange').textContent = `${min} to ${max}`; - debouncedSendReq(); + const min = year.getValueStart(); + const max = year.getValue(); + document.getElementById('yearRange').textContent = `${min} to ${max}`; + debouncedSendReq(); } function updateMileage() { - const min = kilometres.getValueStart(); - const max = kilometres.getValue(); - document.getElementById('KilometresRange').textContent = `${min} to ${max}`; - debouncedSendReq(); + const min = kilometres.getValueStart(); + const max = kilometres.getValue(); + document.getElementById('KilometresRange').textContent = `${min} to ${max}`; + debouncedSendReq(); } // Create debounced versions of sendReq const debouncedSendReq = debounce(sendReq, 300); function createSkeletonCard() { - const skeletonCard = document.createElement('div'); - skeletonCard.classList.add( - 'bg-red-200', - 'rounded-lg', - 'shadow-md', - 'animate-pulse' - ); - - const innerHTML = ` + const skeletonCard = document.createElement('div'); + skeletonCard.classList.add('bg-red-200', 'rounded-lg', 'shadow-md', 'animate-pulse'); + + const innerHTML = `