106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
// components/likes/view.js
|
||
export class LikesView {
|
||
constructor() {
|
||
this.likesContainer = document.getElementById('likesContainer');
|
||
this.emptyLikesElement = document.querySelector('.empty-likes');
|
||
}
|
||
|
||
showLikes(items) {
|
||
if (!this.likesContainer) return;
|
||
|
||
if (!items || items.length === 0) {
|
||
this.showEmptyLikes();
|
||
return;
|
||
}
|
||
|
||
// Если товары есть — убираем блок "пусто"
|
||
this.hideEmptyLikes();
|
||
|
||
const likesHTML = items.map(item => this.createLikesItemHTML(item)).join('');
|
||
|
||
// Добавляем заголовок "Избранное" и кнопку очистки
|
||
this.likesContainer.innerHTML = `
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<h2 class="mb-0">Избранное</h2>
|
||
<button class="btn btn-outline-danger" id="clearAllLikesBtn">
|
||
<i class="bi bi-trash me-2"></i>Очистить избранное
|
||
</button>
|
||
</div>
|
||
<div class="row g-3">
|
||
${likesHTML}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
createLikesItemHTML(item) {
|
||
return `
|
||
<div class="col-md-4">
|
||
<div class="card h-100 border-0 shadow like-item" data-id="${item.id}">
|
||
<img src="${item.image}" class="card-img-top" alt="${item.name}">
|
||
<div class="card-body">
|
||
<h5 class="card-title">${item.name}</h5>
|
||
<p class="card-text">${item.description}</p>
|
||
|
||
<!-- Добавляем Category и Condition -->
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<h6 class="mb-1">Category:</h6>
|
||
<p class="card-text">${item.category || '-'}</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<h6 class="mb-1">Condition:</h6>
|
||
<p class="card-text">${item.condition || '-'}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card-footer bg-transparent">
|
||
<div class="d-flex justify-content-between align-items-end">
|
||
<!-- Цена слева -->
|
||
<span class="fw-bold text-muted fs-3 price-large">$${item.price}</span>
|
||
|
||
<!-- Кнопки справа -->
|
||
<div class="d-flex flex-column gap-1">
|
||
<button class="btn btn-sm btn-outline-primary move-to-basket-btn">
|
||
<i class="bi bi-cart-plus"></i> В корзину
|
||
</button>
|
||
<button class="btn btn-sm btn-outline-danger remove-like-btn">
|
||
<i class="bi bi-trash"></i> Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
showEmptyLikes() {
|
||
if (this.emptyLikesElement) {
|
||
this.emptyLikesElement.style.display = 'block';
|
||
}
|
||
if (this.likesContainer) {
|
||
this.likesContainer.innerHTML = '';
|
||
}
|
||
}
|
||
|
||
hideEmptyLikes() {
|
||
if (this.emptyLikesElement) {
|
||
this.emptyLikesElement.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
showNotification(message, type = 'success') {
|
||
const notification = document.createElement('div');
|
||
notification.className = `alert alert-${type === 'success' ? 'success' : 'danger'} alert-dismissible fade show`;
|
||
notification.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 1050; min-width: 300px;';
|
||
notification.innerHTML = `
|
||
${message}
|
||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||
`;
|
||
document.body.appendChild(notification);
|
||
setTimeout(() => {
|
||
if (notification.parentNode) notification.remove();
|
||
}, 3000);
|
||
}
|
||
} |