theme sync
This commit is contained in:
@@ -10,287 +10,329 @@ 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);
|
||||
}
|
||||
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);
|
||||
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();
|
||||
}
|
||||
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);
|
||||
// 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);
|
||||
});
|
||||
// filterManager = new FilterManager(dataStore);
|
||||
// appliedFilters = new AppliedFilters(dataStore, filterManager);
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
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());
|
||||
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){
|
||||
function createMakeList(vehicles) {
|
||||
const makeContainer = document.querySelector('.make-container');
|
||||
makeContainer.innerHTML = '';
|
||||
|
||||
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.forEach(make => {
|
||||
|
||||
makeContainer.appendChild(make.generateCardHTML());
|
||||
make.subscribe(m=> initModelContainer(m))
|
||||
});
|
||||
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 = '';
|
||||
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;
|
||||
}, {});
|
||||
const bodyType = vehicles.reduce((acc, vehicle) => {
|
||||
const { body_type } = vehicle;
|
||||
acc[body_type] = (acc[body_type] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
filterManager.resetList('body_type');
|
||||
|
||||
filterManager.resetList('body_type');
|
||||
|
||||
bodyTypeFilters = Object.entries(bodyType).map(([body_type, count]) => filterManager.createBodyTypeFilter({ text: body_type, count}, dataStore));
|
||||
bodyTypeFilters.forEach(body_type => {
|
||||
bodyTypeContainer.appendChild(body_type.initCheckbox());
|
||||
// body_type.subscribe(m=> iniBodyTypeContainer(m))
|
||||
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 createTransmissionList(vehicles){
|
||||
const transmissionContainer = document.querySelector('.transmission-container');
|
||||
|
||||
transmissionContainer.innerHTML = '';
|
||||
function initTrimContainer(model) {
|
||||
let list = [
|
||||
...new Set(
|
||||
filterManager.modelFilters
|
||||
.filter((m) => m.checked == true)
|
||||
.map((m) => m.trims)
|
||||
.flat()
|
||||
),
|
||||
];
|
||||
|
||||
const transmission = vehicles.reduce((acc, vehicle) => {
|
||||
const { transmission_type } = vehicle;
|
||||
acc[transmission_type] = (acc[transmission_type] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
// const uniqueArray = [...new Set(array)];
|
||||
const trimContainer = document.querySelector('.trim-container');
|
||||
|
||||
filterManager.resetList('transmission_type');
|
||||
transmissionFilters = Object.entries(transmission).map(([transmission_type, count]) => filterManager.createTransmissionFilter({ text: transmission_type, count}, dataStore));
|
||||
transmissionFilters.forEach(transmission => {
|
||||
transmissionContainer.appendChild(transmission.initCheckbox());
|
||||
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());
|
||||
});
|
||||
}
|
||||
|
||||
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.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.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.forEach(trim => {
|
||||
trimContainer.appendChild(trim.initCheckbox());
|
||||
});
|
||||
} else {
|
||||
trimContainer.innerHTML = '<p>No trims available</p>';
|
||||
}
|
||||
} 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;
|
||||
}, {});
|
||||
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 = `
|
||||
<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>
|
||||
@@ -300,18 +342,23 @@ function createSkeletonCard() {
|
||||
<div class="h-5 bg-red-300 rounded-b-lg"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
skeletonCard.innerHTML = innerHTML;
|
||||
|
||||
return skeletonCard;
|
||||
}
|
||||
|
||||
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 listItem = document.createElement('li');
|
||||
listItem.classList.add(
|
||||
'w-full',
|
||||
'bg-custom-red',
|
||||
'rounded-lg',
|
||||
'shadow-md',
|
||||
'animate-pulse'
|
||||
);
|
||||
|
||||
const innerHTML = `
|
||||
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>
|
||||
|
||||
@@ -319,7 +366,7 @@ function createSkeletonListItem() {
|
||||
</div>
|
||||
`;
|
||||
|
||||
listItem.innerHTML = innerHTML;
|
||||
listItem.innerHTML = innerHTML;
|
||||
|
||||
return listItem;
|
||||
}
|
||||
return listItem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user