392 lines
15 KiB
HTML
392 lines
15 KiB
HTML
|
@if (isnovo) {
|
|||
|
|
<!-- novo VERSION - Modern Design -->
|
|||
|
|
<div class="novo-item-container">
|
|||
|
|
@if (loading()) {
|
|||
|
|
<div class="novo-loading">
|
|||
|
|
<div class="novo-spinner"></div>
|
|||
|
|
<p>Загрузка...</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (error()) {
|
|||
|
|
<div class="novo-error">
|
|||
|
|
<p>{{ error() }}</p>
|
|||
|
|
<a routerLink="/" class="novo-back-link">Вернуться</a>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (item() && !loading()) {
|
|||
|
|
<div class="novo-item-content">
|
|||
|
|
<div class="novo-gallery">
|
|||
|
|
@if (item()?.photos && item()!.photos!.length > 0) {
|
|||
|
|
<div class="novo-main-photo">
|
|||
|
|
@if (item()!.photos![selectedPhotoIndex()]?.video) {
|
|||
|
|
<video [src]="item()!.photos![selectedPhotoIndex()].url" controls></video>
|
|||
|
|
} @else {
|
|||
|
|
<img [src]="item()!.photos![selectedPhotoIndex()].url" [alt]="item()!.name" />
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@if (item()!.photos!.length > 1) {
|
|||
|
|
<div class="novo-thumbnails">
|
|||
|
|
@for (photo of item()!.photos!; track $index) {
|
|||
|
|
<div
|
|||
|
|
class="novo-thumb"
|
|||
|
|
[class.active]="selectedPhotoIndex() === $index"
|
|||
|
|
(click)="selectPhoto($index)">
|
|||
|
|
@if (photo.video) {
|
|||
|
|
<div class="video-indicator">▶</div>
|
|||
|
|
}
|
|||
|
|
<img [src]="photo.url" [alt]="'Photo ' + ($index + 1)" loading="lazy" />
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
} @else {
|
|||
|
|
<div class="novo-main-photo novo-no-image">
|
|||
|
|
<svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|||
|
|
<rect x="3" y="3" width="18" height="18" rx="2"></rect>
|
|||
|
|
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|||
|
|
<path d="M21 15l-5-5L5 21"></path>
|
|||
|
|
</svg>
|
|||
|
|
<p>Нет изображения</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="novo-info">
|
|||
|
|
<h1 class="novo-title">{{ item()!.name }}</h1>
|
|||
|
|
|
|||
|
|
<div class="novo-rating">
|
|||
|
|
<span class="stars">{{ getRatingStars(item()!.rating) }}</span>
|
|||
|
|
<span class="value">{{ item()!.rating }}</span>
|
|||
|
|
<span class="reviews">({{ item()!.callbacks?.length || 0 }})</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="novo-price-block">
|
|||
|
|
@if (item()!.discount > 0) {
|
|||
|
|
<div class="price-row">
|
|||
|
|
<span class="old-price">{{ item()!.price }} {{ item()!.currency }}</span>
|
|||
|
|
<span class="discount-badge">-{{ item()!.discount }}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="current-price">{{ getDiscountedPrice() | number:'1.2-2' }} {{ item()!.currency }}</div>
|
|||
|
|
} @else {
|
|||
|
|
<div class="current-price">{{ item()!.price }} {{ item()!.currency }}</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="novo-stock">
|
|||
|
|
<span class="stock-label">Наличие:</span>
|
|||
|
|
<div class="stock-indicator" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'" [class.low]="item()!.remainings === 'low'">
|
|||
|
|
<span class="dot"></span>
|
|||
|
|
{{ item()!.remainings === 'high' ? 'В наличии' : item()!.remainings === 'medium' ? 'Мало' : 'Осталось немного' }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="novo-add-cart" (click)="addToCart()">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<circle cx="9" cy="21" r="1"></circle>
|
|||
|
|
<circle cx="20" cy="21" r="1"></circle>
|
|||
|
|
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
|
|||
|
|
</svg>
|
|||
|
|
Добавить в корзину
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="novo-description">
|
|||
|
|
<h3>Описание</h3>
|
|||
|
|
<div [innerHTML]="getSafeHtml(item()!.description)"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="novo-reviews">
|
|||
|
|
<h2>Отзывы ({{ item()!.callbacks?.length || 0 }})</h2>
|
|||
|
|
|
|||
|
|
<!-- novo Review Form -->
|
|||
|
|
<div class="novo-review-form">
|
|||
|
|
<h3>Ваш отзыв</h3>
|
|||
|
|
<div class="novo-rating-input">
|
|||
|
|
<label>Оценка:</label>
|
|||
|
|
<div class="novo-star-selector">
|
|||
|
|
@for (star of [1, 2, 3, 4, 5]; track star) {
|
|||
|
|
<span
|
|||
|
|
class="novo-star"
|
|||
|
|
[class.selected]="newReview.rating >= star"
|
|||
|
|
(click)="setRating(star)">
|
|||
|
|
★
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
[(ngModel)]="newReview.comment"
|
|||
|
|
placeholder="Поделитесь своими впечатлениями о товаре..."
|
|||
|
|
rows="4"
|
|||
|
|
class="novo-textarea">
|
|||
|
|
</textarea>
|
|||
|
|
<div class="novo-form-actions">
|
|||
|
|
<label class="novo-anonymous-toggle">
|
|||
|
|
<input type="checkbox" [(ngModel)]="newReview.anonymous">
|
|||
|
|
<span>Анонимно</span>
|
|||
|
|
</label>
|
|||
|
|
@if (!newReview.anonymous && getUserDisplayName()) {
|
|||
|
|
<span class="novo-username-preview">{{ getUserDisplayName() }}</span>
|
|||
|
|
}
|
|||
|
|
<button
|
|||
|
|
class="novo-submit-review-btn"
|
|||
|
|
(click)="submitReview()"
|
|||
|
|
[disabled]="!newReview.rating || !newReview.comment.trim() || reviewSubmitStatus() === 'loading'"
|
|||
|
|
[class.submitting]="reviewSubmitStatus() === 'loading'">
|
|||
|
|
@if (reviewSubmitStatus() === 'loading') {
|
|||
|
|
<span class="novo-spinner-small"></span>
|
|||
|
|
Отправка...
|
|||
|
|
} @else {
|
|||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|||
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/>
|
|||
|
|
</svg>
|
|||
|
|
Отправить
|
|||
|
|
}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@if (reviewSubmitStatus() === 'success') {
|
|||
|
|
<div class="novo-status-message success">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|||
|
|
<path d="M20 6L9 17l-5-5"/>
|
|||
|
|
</svg>
|
|||
|
|
Спасибо за ваш отзыв!
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (reviewSubmitStatus() === 'error') {
|
|||
|
|
<div class="novo-status-message error">
|
|||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
|||
|
|
<path d="M18 6L6 18M6 6l12 12"/>
|
|||
|
|
</svg>
|
|||
|
|
Ошибка отправки. Попробуйте позже.
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="novo-reviews-list">
|
|||
|
|
@if (item()!.callbacks && item()!.callbacks!.length > 0) {
|
|||
|
|
@for (review of item()!.callbacks!; track review.userID) {
|
|||
|
|
<div class="novo-review-card">
|
|||
|
|
<div class="review-header">
|
|||
|
|
<div class="reviewer-info">
|
|||
|
|
<span class="reviewer-name">{{ review.userID || 'Пользователь' }}</span>
|
|||
|
|
@if (review.timestamp) {
|
|||
|
|
<span class="review-date">{{ formatDate(review.timestamp) }}</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
<span class="review-stars">{{ getRatingStars(review.rating || 0) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<p class="review-text">{{ review.content }}</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
} @else {
|
|||
|
|
<p class="novo-no-reviews">Пока нет отзывов. Станьте первым!</p>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
} @else {
|
|||
|
|
<!-- DEXAR VERSION - Original -->
|
|||
|
|
<div class="item-detail-container">
|
|||
|
|
@if (loading()) {
|
|||
|
|
<div class="loading">
|
|||
|
|
<div class="spinner"></div>
|
|||
|
|
<p>Загрузка товара...</p>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (error()) {
|
|||
|
|
<div class="error">
|
|||
|
|
<p>{{ error() }}</p>
|
|||
|
|
<a routerLink="/" class="back-link">Вернуться на главную</a>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (item() && !loading()) {
|
|||
|
|
<div class="item-content">
|
|||
|
|
<div class="item-gallery">
|
|||
|
|
@if (item()?.photos && item()!.photos!.length > 0) {
|
|||
|
|
<div class="main-photo">
|
|||
|
|
@if (item()!.photos![selectedPhotoIndex()]?.video) {
|
|||
|
|
<video [src]="item()!.photos![selectedPhotoIndex()].url" controls></video>
|
|||
|
|
} @else {
|
|||
|
|
<img [src]="item()!.photos![selectedPhotoIndex()].url" [alt]="item()!.name" fetchpriority="high" decoding="async" width="600" height="600" />
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="photo-thumbnails">
|
|||
|
|
@for (photo of item()!.photos!; track $index) {
|
|||
|
|
<div
|
|||
|
|
class="thumbnail"
|
|||
|
|
[class.active]="selectedPhotoIndex() === $index"
|
|||
|
|
(click)="selectPhoto($index)">
|
|||
|
|
@if (photo.video) {
|
|||
|
|
<div class="video-indicator">▶</div>
|
|||
|
|
}
|
|||
|
|
<img [src]="photo.url" [alt]="'Photo ' + ($index + 1)" loading="lazy" decoding="async" />
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
} @else {
|
|||
|
|
<div class="main-photo">
|
|||
|
|
<div class="no-image">📦 Нет изображения</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="item-info">
|
|||
|
|
<h1>{{ item()!.name }}</h1>
|
|||
|
|
|
|||
|
|
<div class="rating-section">
|
|||
|
|
<span class="rating">{{ getRatingStars(item()!.rating) }} {{ item()!.rating }}</span>
|
|||
|
|
<span class="reviews-count">({{ item()!.callbacks?.length || 0 }} отзывов)</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="price-section">
|
|||
|
|
@if (item()!.discount > 0) {
|
|||
|
|
<div class="discount-info">
|
|||
|
|
<span class="original-price">{{ item()!.price }} {{ item()!.currency }}</span>
|
|||
|
|
<span class="discount-badge">-{{ item()!.discount }}%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="current-price">{{ getDiscountedPrice() | number:'1.2-2' }} {{ item()!.currency }}</div>
|
|||
|
|
} @else {
|
|||
|
|
<div class="current-price">{{ item()!.price }} {{ item()!.currency }}</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stock-info">
|
|||
|
|
<div class="stock-bar">
|
|||
|
|
<span class="bar-segment" [class.filled]="item()!.remainings === 'high' || item()!.remainings === 'medium' || item()!.remainings === 'low'" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'" [class.low]="item()!.remainings === 'low'"></span>
|
|||
|
|
<span class="bar-segment" [class.filled]="item()!.remainings === 'high' || item()!.remainings === 'medium'" [class.high]="item()!.remainings === 'high'" [class.medium]="item()!.remainings === 'medium'"></span>
|
|||
|
|
<span class="bar-segment" [class.filled]="item()!.remainings === 'high'" [class.high]="item()!.remainings === 'high'"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="add-to-cart-btn" (click)="addToCart()">
|
|||
|
|
Добавить в корзину
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<div class="description-section">
|
|||
|
|
<h2>Описание</h2>
|
|||
|
|
<div class="description" [innerHTML]="getSafeHtml(item()!.description)"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="reviews-section">
|
|||
|
|
<h2>Отзывы ({{ item()!.callbacks?.length || 0 }})</h2>
|
|||
|
|
|
|||
|
|
<!-- Review Submission Form -->
|
|||
|
|
<div class="review-form">
|
|||
|
|
<h3>Оставить отзыв</h3>
|
|||
|
|
<div class="rating-input">
|
|||
|
|
<label>Оценка:</label>
|
|||
|
|
<div class="star-selector">
|
|||
|
|
@for (star of [1, 2, 3, 4, 5]; track star) {
|
|||
|
|
<span
|
|||
|
|
class="star"
|
|||
|
|
[class.selected]="newReview.rating >= star"
|
|||
|
|
(click)="setRating(star)">
|
|||
|
|
⭐
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<textarea
|
|||
|
|
[(ngModel)]="newReview.comment"
|
|||
|
|
placeholder="Напишите свой отзыв..."
|
|||
|
|
rows="4">
|
|||
|
|
</textarea>
|
|||
|
|
<div class="form-actions">
|
|||
|
|
<label class="anonymous-toggle">
|
|||
|
|
<input type="checkbox" [(ngModel)]="newReview.anonymous">
|
|||
|
|
Анонимно
|
|||
|
|
</label>
|
|||
|
|
@if (!newReview.anonymous && getUserDisplayName()) {
|
|||
|
|
<span class="username-preview">Опубликуется как: {{ getUserDisplayName() }}</span>
|
|||
|
|
}
|
|||
|
|
<button
|
|||
|
|
class="submit-review-btn"
|
|||
|
|
(click)="submitReview()"
|
|||
|
|
[disabled]="!newReview.rating || !newReview.comment.trim() || reviewSubmitStatus() === 'loading'"
|
|||
|
|
[class.submitting]="reviewSubmitStatus() === 'loading'">
|
|||
|
|
@if (reviewSubmitStatus() === 'loading') {
|
|||
|
|
<span class="spinner-small"></span>
|
|||
|
|
Отправка...
|
|||
|
|
} @else {
|
|||
|
|
Отправить отзыв
|
|||
|
|
}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
@if (reviewSubmitStatus() === 'success') {
|
|||
|
|
<div class="status-message success">
|
|||
|
|
<span class="icon">✓</span>
|
|||
|
|
Спасибо за ваш отзыв!
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@if (reviewSubmitStatus() === 'error') {
|
|||
|
|
<div class="status-message error">
|
|||
|
|
<span class="icon">✗</span>
|
|||
|
|
Ошибка отправки. Попробуйте позже.
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="reviews-list">
|
|||
|
|
@if (item()?.callbacks && item()!.callbacks!.length > 0) {
|
|||
|
|
@for (callback of item()!.callbacks; track $index) {
|
|||
|
|
<div class="review-card">
|
|||
|
|
<div class="review-header">
|
|||
|
|
<span class="review-author">{{ callback.userID || 'Аноним' }}</span>
|
|||
|
|
@if (callback.rating) {
|
|||
|
|
<div class="review-rating">{{ getRatingStars(callback.rating) }}</div>
|
|||
|
|
}
|
|||
|
|
@if (callback.timestamp) {
|
|||
|
|
<span class="review-date">{{ formatDate(callback.timestamp) }}</span>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
@if (callback.content) {
|
|||
|
|
<p class="review-text">{{ callback.content }}</p>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
} @else {
|
|||
|
|
<p class="no-reviews">Пока нет отзывов</p>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="questions-section">
|
|||
|
|
<h2>Вопросы и ответы ({{ item()!.questions?.length || 0 }})</h2>
|
|||
|
|
<div class="questions-list">
|
|||
|
|
@if (item()?.questions && item()!.questions!.length > 0) {
|
|||
|
|
@for (question of item()!.questions; track $index) {
|
|||
|
|
<div class="question-card">
|
|||
|
|
<div class="question-text">
|
|||
|
|
<strong>В:</strong> {{ question.question }}
|
|||
|
|
</div>
|
|||
|
|
<div class="answer-text">
|
|||
|
|
<strong>О:</strong> {{ question.answer }}
|
|||
|
|
</div>
|
|||
|
|
<div class="question-votes">
|
|||
|
|
<span class="vote-up">👍 {{ question.upvotes }}</span>
|
|||
|
|
<span class="vote-down">👎 {{ question.downvotes }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
} @else {
|
|||
|
|
<p class="no-questions">Пока нет вопросов</p>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
}
|