mirror of
https://github.com/Shchoholiev/shopping-assistant-web-client.git
synced 2025-04-04 16:49:36 +00:00
116 lines
5.6 KiB
Plaintext
116 lines
5.6 KiB
Plaintext
@page "/cards/{wishlistName}/{chatId}"
|
|
|
|
@inject NavigationManager navigationManager;
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="css/Cards.css" />
|
|
</head>
|
|
|
|
<div class="card-page">
|
|
<button class="back-button button-animation" @onclick="NavigateToMain"></button>
|
|
<div class="container">
|
|
<div class="head">
|
|
<p class="header-text">@wishlistName</p>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="back-card"></div>
|
|
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
|
|
<div class="card">
|
|
<div class="slider-container">
|
|
<div class="slider">
|
|
@if(Products[currentProduct].ImagesUrls.Length > 0) {
|
|
@for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
|
|
string image = Products[currentProduct].ImagesUrls[i];
|
|
if (currentImage == image) {
|
|
<img src="@image" class="slider-image" alt="product image"/>
|
|
}
|
|
}
|
|
<img class="next-image" src="/images/next-image.svg" alt="next image" @onclick="(() => ShowNextImage(currentImage))"/>
|
|
<img class="prev-image" src="/images/prev-image.svg" alt="previous image" @onclick="(() => ShowPreviousImage(currentImage))"/>
|
|
}
|
|
else
|
|
{
|
|
<img src="" class="slider-image" alt="product image"/>
|
|
}
|
|
|
|
</div>
|
|
<div class="dots">
|
|
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
|
|
var dotIndex = i;
|
|
<div class="dot @(i == currentIndex ? "active-dot" : "")" @onclick="(() => ChangeImageDot(dotIndex))"></div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="product-info">
|
|
|
|
<p class="name">@Products[currentProduct].Name</p>
|
|
<p class="description">@Products[currentProduct].Description</p>
|
|
|
|
<div class="rating-price-row">
|
|
<label class="rating">@Products[currentProduct].Rating</label>
|
|
@{
|
|
int whole = (int)Math.Floor(Products[currentProduct].Rating);
|
|
double fractal = Products[currentProduct].Rating - whole;
|
|
}
|
|
@for(int i = 0; i < 5; i++) {
|
|
if(i < whole) {
|
|
<img class="star" src="/images/star-cards.svg" alt="star">
|
|
continue;
|
|
}
|
|
if(fractal != 0.0) {
|
|
<img class="star" src="/images/half-star.svg" alt="star">
|
|
fractal -= fractal;
|
|
}
|
|
else {
|
|
<img class="star" src="/images/empty-star.svg" alt="star">
|
|
}
|
|
}
|
|
<label class="price-label">@Products[currentProduct].Price</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons-container">
|
|
<div class="buttons-row">
|
|
@{
|
|
string[] type = {"cancel", "like"};
|
|
}
|
|
<button class="cancel-button button-animation" @onclick="(() => LoadNextProduct(type[0]))"></button>
|
|
<button class="return-button button-animation" @onclick="(() => LoadPreviousProduct())"></button>
|
|
<button class="like-button button-animation" @onclick="(() => LoadNextProduct(type[1]))"></button>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
else {
|
|
<style>
|
|
.back-card {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<div class="card-text">
|
|
<label class="bold-text">The cards ended</label>
|
|
<label class="more-text">Click <img class="plus-image" src="/images/load-more-small.svg" alt="plus"/> to see more<br> or <img src="/images/return-small.svg" alt="return"/> to exit</label>
|
|
</div>
|
|
<div class="buttons-container">
|
|
<div class="buttons-row">
|
|
<button class="exit-button button-animation" @onclick="(() => NavigateToMain())"></button>
|
|
<button class="return-button button-animation" @onclick="(() => { LoadPreviousProduct(); })"></button>
|
|
<button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@code {
|
|
[Parameter] public string wishlistName { get; set; }
|
|
|
|
[Parameter] public string chatId {get; set;}
|
|
|
|
private void NavigateToMain() {
|
|
navigationManager.NavigateTo($"/chat/{chatId}");
|
|
}
|
|
} |