63 lines
2.6 KiB
JavaScript
63 lines
2.6 KiB
JavaScript
class VehicleThumbnail {
|
|
constructor(vehicle) {
|
|
this.id = vehicle.id_vehicle;
|
|
this.name = vehicle.make + ' ' + vehicle.model;
|
|
this.year = vehicle.year;
|
|
this.make = vehicle.make;
|
|
this.model = vehicle.model;
|
|
this.trim = vehicle.trim;
|
|
this.landingImage = vehicle.landingImage;
|
|
this.advertisePrice = vehicle.advertise_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
this.stockNumber = vehicle.stock_number;
|
|
this.mileage = vehicle.mileage;
|
|
}
|
|
|
|
generateCardElement() {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = this.generateCardHTML().trim();
|
|
|
|
// Get the vehicle-card element
|
|
const cardElement = wrapper.querySelector('.vehicle-card');
|
|
const ripple = new mdc.ripple.MDCRipple(cardElement);
|
|
ripple.unbounded = false;
|
|
cardElement.addEventListener('click', () => {
|
|
console.log(dataStore)
|
|
var queryString = encodeURIComponent(JSON.stringify(dataStore.filters));
|
|
|
|
const url = `vehicle-details/?vehicle_id=${encodeURIComponent(this.id)}&filters=${queryString}`;
|
|
window.location.href = url;
|
|
|
|
});
|
|
|
|
|
|
|
|
return cardElement;
|
|
}
|
|
|
|
|
|
|
|
generateCardHTML() {
|
|
return `
|
|
<div class="bg-white shadow-md rounded-md transition-all duration-500 vehicle-card cursor-pointer mdc-ripple-surface hover:shadow-lg" data-vehicle-id="${this.id}">
|
|
<img src="${this.landingImage}" alt="Vehicle Image" class="w-full h-auto object-cover transition-all duration-500 vehicle-image rounded-tl-md rounded-tr-md">
|
|
<div class="flex flex-col justify-around transition-all duration-500 p-4">
|
|
<h3 class="text-lg font-semibold mb-2 break-words ">${this.year} ${this.name} ${this.trim.join(' - ')}</h3>
|
|
<div class="text-gray-600">Year: ${this.year}</div>
|
|
<div class="text-gray-600">Mileage: ${this.mileage} km</div>
|
|
<div class="text-red-800 font-bold mt-2">Price: $${this.advertisePrice}</div>
|
|
<div class="text-gray-600">Stock #: ${this.stockNumber} km</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Initialize the ripple component for all instances of VehicleThumbnail
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const vehicleThumbnails = document.querySelectorAll('.mdc-ripple-surface');
|
|
vehicleThumbnails.forEach(thumbnail => {
|
|
const ripple = new mdc.ripple.MDCRipple(thumbnail);
|
|
ripple.unbounded = true;
|
|
});
|
|
});
|