cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-04 16:49:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug fix

Browse Source
This commit is contained in:
AndriiSyrotenko 2023-11-21 19:49:35 +00:00
parent d74e394280
commit 5085187cbd
9 changed files with 97 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
ShoppingAssistantWebClient.Web/Pages/Cards.razor
View File

@ -1,39 +1,11 @@
@page "/cards/{wishlistName}/{chatId}"
@inject IJSRuntime JSRuntime
@inject NavigationManager navigationManager;
<head>
<link rel="stylesheet" href="css/Cards.css" />
</head>
<script>
function adjustButtonContainerPosition() {
var cardElements = document.querySelectorAll('.card, .back-card, .card-text');
var buttonContainer = document.querySelector('.buttons-container');
if (cardElements.length > 0 && buttonContainer) {
var totalHeight = Array.from(cardElements).reduce((max, card) => {
return Math.max(max, card.offsetHeight);
}, 0);
if (window.matchMedia('(max-width: 440px)').matches) {
buttonContainer.style.top = `calc(20% + ${totalHeight}px + 60px)`;
} else if (window.matchMedia('(max-width: 769px)').matches) {
buttonContainer.style.top = `calc(12% + ${totalHeight}px + 60px)`;
} else if (window.matchMedia('(max-width: 992px)').matches) {
buttonContainer.style.top = `calc(8% + ${totalHeight}px + 60px)`;
} else {
buttonContainer.style.top = `calc(3% + ${totalHeight}px + 60px)`;
}
}
}
window.addEventListener('load', adjustButtonContainerPosition);
window.addEventListener('resize', adjustButtonContainerPosition);
</script>
<div class="card-page">
<button class="back-button button-animation" @onclick="NavigateToMain"></button>
<div class="container">
@ -41,20 +13,27 @@
<p class="header-text">@wishlistName</p>
</div>
<div class="content" data-generalTop="3%" data-largeTop="8%" mediumTop="12%" smallTop="20%">
<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">
@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"/>
@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.png" alt="next image" @onclick="(() => ShowNextImage(currentImage))"/>
<img class="prev-image" src="/images/prev-image.png" alt="previous image" @onclick="(() => ShowPreviousImage(currentImage))"/>
}
else
{
<img src="" class="slider-image" alt="product image"/>
}
<img class="next-image" src="/images/next-image.png" alt="next image" @onclick="(() => ChangeImage(currentImage))"/>
<img class="prev-image" src="/images/prev-image.png" alt="previous image" @onclick="(() => ChangeImage(currentImage))"/>
</div>
<div class="dots">
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
@ -99,10 +78,6 @@
</div>
</div>
if(!isProductsNull) {
isProductsNull = true;
StateHasChanged();
}
}
else {
<style>
@ -121,26 +96,17 @@
<button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
</div>
</div>
if(isProductsNull) {
isProductsNull = false;
StateHasChanged();
}
}
</div>
</div>
</div>
@code {
[Parameter] public string wishlistName { get; set; }
[Parameter] public string chatId {get; set;}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("adjustButtonContainerPosition");
}
private void NavigateToMain() {
navigationManager.NavigateTo($"/chat/{chatId}");
}

31
ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs
View File

@ -25,11 +25,9 @@ public partial class Cards
private bool isProductsNull = false;
//private static string[] Images = {
// "/images/image2.png",
// "/images/image1.png",
// "/images/return-card.png",
// "/images/amazon.png",
// "/images/avatar.png"
// "/images/exit.png",
// "/images/avatar.jpg"
//};
//public List<Product> Products = new()
@ -41,25 +39,40 @@ public partial class Cards
//};
public List<Product> Products {get; set;}
public List<String> productsNames {get; set;}
//public List<String> productsNames {get; set;}
protected override async Task OnInitializedAsync()
{
if (Products != null) {
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
if(Products[currentProduct].ImagesUrls.Length > 0) {
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
}
}
else {
productsNames = _searchService.Products;
//productsNames = _searchService.Products;
currentImage = "";
isProductsNull = true;
}
}
private void ChangeImage(string image)
private void ShowNextImage(string image)
{
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length;
currentIndex = currentIndex >= 3 ? 0 : currentIndex;
if(currentIndex >= 3 || currentIndex >= Products[currentProduct].ImagesUrls.Length) {
currentIndex = 0;
}
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
StateHasChanged();
}
private void ShowPreviousImage(string image)
{
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
currentIndex = (currentIndex - 1) % Products[currentProduct].ImagesUrls.Length;
if(currentIndex < 0) {
currentIndex = Products[currentProduct].ImagesUrls.Length > 2 ? 2 : Products[currentProduct].ImagesUrls.Length - 1;
}
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
StateHasChanged();
}

10
ShoppingAssistantWebClient.Web/Pages/Cart.razor
View File

@ -18,23 +18,23 @@
</div>
<div class="container">
@if (!isError) {
@if (Products != null) {
@if (Products.Count > 0) {
@foreach (var product in Products) {
<div class="product-div">
<img class="product-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSe7MHcuWUvuNJsttl3MEVxEayUGVNH4tA2Ha0K4szpgKvH7QYuiaBa_hCzUgW96I6LXqM&usqp=CAU">
<img class="product-img" src="@product.ImagesUrls[0]" alt="product image">
<label class="product-description">@product.Description</label>
<div class="button-row">
<img class="star" src="/images/star.png">
<img class="star" src="/images/star.png" alt="star">
<label class="rating">@product.Rating</label>
<label class="price-label">@product.Price</label>
</div>
<button class="button-amazon">
<img src="/images/amazon.png">
<img src="/images/amazon.png" alt="amazon">
</button>
</div>
}
}
else{
else {
<p class="error">Cart is empty</p>
}
}

2
ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs
View File

@ -12,7 +12,7 @@ public partial class Cart : ComponentBase
[Inject]
private ApiClient _apiClient { get; set; }
public List<Product> Products { get; set; }
public List<Product> Products { get; set; } = new List<Product>();
public bool isError = false;

8
ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
View File

@ -22,6 +22,7 @@ public partial class Chat : ComponentBase
public List<Messages> Messages { get; set; }
public List<String> Products { get; set; } = new List<string>();
public List<String> Suggestion { get; set; } = new List<String>();
public Messages Message { get; set; }
@ -150,8 +151,12 @@ public partial class Chat : ComponentBase
StateHasChanged();
} else if(sseEvent.Event == SearchEventType.Product){
string pattern = "[\\\\\"]";
Products.Add(result);
input = Regex.Replace(input, pattern, "");
Products.Add(input);
} else if(sseEvent.Event == SearchEventType.Suggestion){
@ -162,6 +167,7 @@ public partial class Chat : ComponentBase
if(Products != null) {
string n = name;
_searchServise.SetProducts(Products);
Products = null;
var url = $"/cards/{name}/{chatId}";
Navigation.NavigateTo(url);
}

6
ShoppingAssistantWebClient.Web/Services/SearchService.cs
View File

@ -5,13 +5,13 @@ public class SearchService
{
public List<String> Products { get; set; }
public string firstMassage { get; set; }
public string FirstMessage { get; set; }
public void SetProducts(List<String> products) {
Products = products;
}
public void SetFirstMassage(string massage) {
firstMassage = massage;
public void SetFirstMassage(string message) {
FirstMessage = message;
}
}

46
ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css
View File

@ -46,6 +46,10 @@
text-align: center;
font-size: 24px;
color: rgba(0, 82, 204, 0.8);
max-width: 500px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.back-button {
@ -57,7 +61,7 @@
background-color: transparent;
position: absolute;
left: 2%;
top: 30px;
top: 25px;
}
.back-card,
@ -110,6 +114,7 @@
width: 40% !important;
position: absolute;
z-index: 3;
top: calc(400px + 8% + 60px) !important;
}
.cancel-button {
@ -205,6 +210,17 @@
}
@media only screen and (max-width: 769px) {
.header-text {
text-align: center;
font-size: 1.4em !important;
color: rgba(0, 82, 204, 0.8);
max-width: 250px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.back-card,
.card,
.card-text {
@ -254,6 +270,7 @@
width: 50vw !important;
position: absolute;
z-index: 3;
top: calc(368px + 12% + 60px) !important;
}
.cancel-button {
@ -332,6 +349,29 @@
}
@media only screen and (max-width: 440px) {
.back-button {
width: 15px !important;
height: 15px !important;
background-image: url("/images/back-button.png");
background-size: cover;
border: none;
background-color: transparent;
position: absolute;
left: 2%;
top: 27px;
}
.header-text {
text-align: center;
font-size: 1.2em !important;
color: rgba(0, 82, 204, 0.8);
max-width: 200px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.back-card,
.card,
.card-text {
@ -340,7 +380,7 @@
aspect-ratio: 1 / 1.6;
border-radius: 15px;
position: absolute;
top: 20% !important;
top: 15% !important;
}
.card,
@ -379,6 +419,7 @@
width: 70vw;
position: absolute;
z-index: 3;
top: calc(340px + 15% + 60px) !important;
}
.cancel-button {
@ -598,6 +639,7 @@
width: 300px;
position: absolute;
z-index: 3;
top: calc(480px + 3% + 60px);
}
.buttons-row {

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/image1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/image2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.3 KiB