334 lines
11 KiB
JavaScript
334 lines
11 KiB
JavaScript
let drawer;
|
|
let keyword;
|
|
let price;
|
|
let year;
|
|
let kilometres;
|
|
let dataStore;
|
|
let filterManager;
|
|
let appliedFilters;
|
|
let shouldUpdateFilters = true;
|
|
let modelFilter = [];
|
|
let makeFilters;
|
|
function sendReq() {
|
|
var formData = {
|
|
'action': 'handle_autocart_form',
|
|
'minPrice': price.getValueStart(),
|
|
'maxPrice': price.getValue(),
|
|
'minKilometres': kilometres.getValueStart(),
|
|
'maxKilometres': kilometres.getValue(),
|
|
'minYear': year.getValueStart(),
|
|
'maxYear': year.getValue(),
|
|
'autocart_nonce': jQuery('#autocart_nonce').val(),
|
|
};
|
|
const vehiclesContainer = document.querySelector('.vehicles-container');
|
|
// vehiclesContainer.textContent = 'Loading...';
|
|
// Add skeleton cards to the vehicles container
|
|
for (let i = 0; i < 6; i++) {
|
|
const skeletonCard = createSkeletonCard();
|
|
vehiclesContainer.appendChild(skeletonCard);
|
|
}
|
|
|
|
const filtersContainer = document.querySelector('.make-container');
|
|
for (let i = 0; i < 2; i++) {
|
|
const skeletonListItem = createSkeletonListItem();
|
|
filtersContainer.appendChild(skeletonListItem);
|
|
}
|
|
// Add skeleton list item to the filters container
|
|
// const skeletonListItem = createSkeletonListItem();
|
|
// filtersContainer.appendChild(skeletonListItem);
|
|
|
|
jQuery.ajax({
|
|
type: 'POST',
|
|
url: ajax_object.ajax_url,
|
|
data: formData,
|
|
success: function (response) {
|
|
const vehicles = response.data.vehicles;
|
|
if (dataStore) {
|
|
dataStore.unsubscribeAll();
|
|
}
|
|
|
|
|
|
// Initialize new data store
|
|
dataStore.vehicles = vehicles;
|
|
filterManager = new FilterManager(dataStore);
|
|
appliedFilters = new AppliedFilters(dataStore, filterManager);
|
|
|
|
// filterManager = new FilterManager(dataStore);
|
|
// appliedFilters = new AppliedFilters(dataStore, filterManager);
|
|
|
|
shouldUpdateFilters = true;
|
|
dataStore.subscribe(filteredVehicles => {
|
|
console.log('dataStore has been changed')
|
|
handleSuccess(filteredVehicles);
|
|
});
|
|
|
|
dataStore.notifySubscribers(vehicles);
|
|
},
|
|
error: function (xhr, status, error) {
|
|
console.log(xhr.responseText);
|
|
console.log('Status: ' + status);
|
|
console.log('Error: ' + error);
|
|
jQuery("#inventory-search__search-button").text("Error");
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleSuccess(vehicles, updateFilters = shouldUpdateFilters) {
|
|
if(updateFilters){
|
|
createMakeList(vehicles);
|
|
createBodyTypeList(vehicles);
|
|
createTransmissionList(vehicles);
|
|
createExteriorList(vehicles);
|
|
}
|
|
const vehiclesContainer = document.querySelector('.vehicles-container');
|
|
vehiclesContainer.innerHTML = '';
|
|
|
|
vehicles.forEach(vehicleData => {
|
|
const vehicle = new VehicleThumbnail(vehicleData);
|
|
// vehiclesContainer.appendChild(vehicle.generateCardHTML());
|
|
vehiclesContainer.appendChild(vehicle.generateCardElement());
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
function createMakeList(vehicles){
|
|
|
|
const makeContainer = document.querySelector('.make-container');
|
|
makeContainer.innerHTML = '';
|
|
|
|
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);
|
|
});
|
|
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 = '<p>Please Select a Make</p>';
|
|
} 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 = '<p>No models available</p>';
|
|
}
|
|
}
|
|
|
|
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 = '<p>Please Select a Model</p>';
|
|
} 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 = '<p>No trims available</p>';
|
|
}
|
|
}
|
|
|
|
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;
|
|
}, {});
|
|
|
|
// 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 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);
|
|
};
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
function updateYear() {
|
|
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();
|
|
}
|
|
|
|
// 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 = `
|
|
<div class="h-40 bg-red-300 rounded-t-lg"></div>
|
|
<div class="p-4">
|
|
<div class="h-12 bg-red-300 rounded-t-lg"></div>
|
|
<div class="h-5 bg-red-400 rounded-t-lg"></div>
|
|
<div class="h-5 bg-red-300 rounded-t-lg"></div>
|
|
<div class="h-5 bg-red-400 rounded-t-lg"></div>
|
|
<div class="h-5 bg-red-300 rounded-b-lg"></div>
|
|
</div>
|
|
`;
|
|
|
|
skeletonCard.innerHTML = innerHTML;
|
|
|
|
return skeletonCard;
|
|
}
|
|
|
|
|
|
function createSkeletonListItem() {
|
|
const listItem = document.createElement('li');
|
|
listItem.classList.add('w-full', 'bg-custom-red', 'rounded-lg', 'shadow-md', 'animate-pulse');
|
|
|
|
const innerHTML = `
|
|
<div class="flex items-center justify-between p-1">
|
|
<div class="h-6 bg-custom-red-light w-2/3 rounded-lg"></div>
|
|
|
|
<div class="bg-custom-red-light w-1/6 h-6 rounded-lg"></div>
|
|
</div>
|
|
`;
|
|
|
|
listItem.innerHTML = innerHTML;
|
|
|
|
return listItem;
|
|
} |