Новые изменения в компонентах
This commit is contained in:
Web-serfer
parent
5bb4525f63
commit
d4394a7597
5 changed files with 145 additions and 34 deletions
|
|
@ -1,21 +1,42 @@
|
|||
---
|
||||
import { reviewsData } from '@data/reviewsData';
|
||||
import ReviewCard from '@components/reviews/ReviewCard.astro';
|
||||
|
||||
// Берём 6 последних отзывов
|
||||
const latestReviews = [...reviewsData]
|
||||
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
||||
.slice(0, 6);
|
||||
interface ReviewRecord {
|
||||
id: string;
|
||||
name: string;
|
||||
surname?: string;
|
||||
profession?: string;
|
||||
text: string;
|
||||
rating: number;
|
||||
votesCount: number;
|
||||
created: string;
|
||||
}
|
||||
|
||||
// Для эффекта бесконечности клонируем элементы
|
||||
const displayReviews = [...latestReviews, ...latestReviews, ...latestReviews];
|
||||
const POCKETBASE_URL = import.meta.env.POCKETBASE_URL || 'http://127.0.0.1:8090';
|
||||
|
||||
let reviews: ReviewRecord[] = [];
|
||||
|
||||
try {
|
||||
const filter = 'status = "published"';
|
||||
const response = await fetch(
|
||||
`${POCKETBASE_URL}/api/collections/reviews/records?filter=${encodeURIComponent(filter)}&sort=-created&perPage=10`
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
reviews = data.items || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ReviewsSlider] Error:', e);
|
||||
}
|
||||
|
||||
const displayReviews = reviews.length >= 3
|
||||
? [...reviews, ...reviews, ...reviews]
|
||||
: [...reviews, ...reviews];
|
||||
|
||||
// Функция для получения инициала из имени
|
||||
const getInitial = (name: string) => name.charAt(0).toUpperCase();
|
||||
|
||||
// Функция для получения цвета аватара (циклически из набора)
|
||||
const colors = ['#eac26e', '#22c55e', '#3b82f6', '#ef4444', '#8b5cf6', '#f59e0b'];
|
||||
const getColor = (index: number) => colors[index % colors.length];
|
||||
const colors = ['bg-gradient-1', 'bg-gradient-2', 'bg-gradient-3', 'bg-gradient-4', 'bg-gradient-5', 'bg-gradient-6'];
|
||||
---
|
||||
|
||||
<!-- КРИТИЧНО: Скрипт скрывает элементы ДО рендера -->
|
||||
|
|
@ -49,25 +70,29 @@ const getColor = (index: number) => colors[index % colors.length];
|
|||
<!-- Окно просмотра -->
|
||||
<div id="sliderContainer" class="overflow-x-hidden scroll-smooth">
|
||||
<div id="sliderTrack" class="flex gap-6 py-4 items-stretch">
|
||||
{displayReviews.map((review, index) => (
|
||||
{displayReviews.map((review, index) => {
|
||||
const fullName = `${review.name} ${review.surname || ''}`.trim();
|
||||
const colorIndex = index % 6;
|
||||
return (
|
||||
<div
|
||||
class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] select-none animate-on-scroll"
|
||||
data-animation="scale-up"
|
||||
data-delay={index * 100 + 300}
|
||||
class="card-item min-w-full md:min-w-[calc(33.333%-1rem)] select-none animate-on-scroll"
|
||||
data-animation="scale-up"
|
||||
data-delay={index * 100 + 300}
|
||||
>
|
||||
<ReviewCard
|
||||
name={review.name}
|
||||
car={review.car}
|
||||
text={review.text}
|
||||
rating={review.rating}
|
||||
date={review.date}
|
||||
votesCount={review.votesCount || 0}
|
||||
isHelpful={review.isHelpful || false}
|
||||
initial={getInitial(review.name)}
|
||||
color={getColor(index)}
|
||||
name={fullName}
|
||||
profession={review.profession || 'Клиент'}
|
||||
text={review.text}
|
||||
rating={review.rating}
|
||||
initial={getInitial(review.name)}
|
||||
color={colors[colorIndex]}
|
||||
date={review.created}
|
||||
reviewId={review.id}
|
||||
initialLikes={review.votesCount || 0}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const gradientColors = {
|
|||
};
|
||||
---
|
||||
|
||||
<article class="review-card animate-on-scroll" data-animation="fade-up" data-review-id={reviewId}>
|
||||
<article class="review-card animate-on-scroll" data-animation="fade-up" data-review-id={reviewId} data-initial-likes={initialLikes}>
|
||||
<!-- Декоративный элемент -->
|
||||
<div class="card-decoration"></div>
|
||||
|
||||
|
|
@ -480,10 +480,11 @@ const gradientColors = {
|
|||
|
||||
document.querySelectorAll('.review-card').forEach((card) => {
|
||||
const reviewId = (card as HTMLElement).dataset.reviewId;
|
||||
const initialLikes = parseInt((card as HTMLElement).dataset.initialLikes || '0', 10);
|
||||
const likeBtn = card.querySelector('[data-vote="likes"]') as HTMLButtonElement;
|
||||
const likesCount = card.querySelector('[data-likes-count]');
|
||||
|
||||
console.log('[ReviewCard] reviewId:', reviewId, 'likeBtn:', likeBtn, 'likesCount:', likesCount);
|
||||
console.log('[ReviewCard] reviewId:', reviewId, 'likeBtn:', likeBtn, 'likesCount:', likesCount, 'initialLikes:', initialLikes);
|
||||
|
||||
if (!reviewId) {
|
||||
console.error('[ReviewCard] No reviewId found!');
|
||||
|
|
@ -492,12 +493,6 @@ const gradientColors = {
|
|||
|
||||
async function loadVotes() {
|
||||
console.log('[ReviewCard] Loading votes for:', reviewId);
|
||||
if (!pb.authStore.isValid) {
|
||||
console.log('[ReviewCard] Not logged in, keeping initialLikes:', initialLikes);
|
||||
if (likesCount) likesCount.textContent = initialLikes.toString();
|
||||
likeBtn?.classList.remove('active');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`/api/reviews/vote?review_id=${reviewId}`, {
|
||||
credentials: 'include',
|
||||
|
|
@ -507,12 +502,17 @@ const gradientColors = {
|
|||
const data = await response.json();
|
||||
console.log('[ReviewCard] Votes data:', data);
|
||||
if (likesCount) likesCount.textContent = data.likes.toString();
|
||||
if (data.userVote === 'likes') {
|
||||
if (data.userVote === 'likes' && pb.authStore.isValid) {
|
||||
likeBtn?.classList.add('active');
|
||||
} else {
|
||||
likeBtn?.classList.remove('active');
|
||||
}
|
||||
} else {
|
||||
if (likesCount) likesCount.textContent = initialLikes.toString();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('[ReviewCard] Error loading votes:', e);
|
||||
if (likesCount) likesCount.textContent = initialLikes.toString();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -116,6 +116,7 @@ const getAvatarInfo = (name: string) => {
|
|||
color={avatarInfo.color}
|
||||
date={review.created}
|
||||
reviewId={review.id}
|
||||
initialLikes={review.votesCount || 0}
|
||||
/>
|
||||
);
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue