cartaid/shopping-assistant-web-client
1
0
Fork 0
mirror of https://github.com/Shchoholiev/shopping-assistant-web-client.git synced 2025-04-12 01:48:49 +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}" @page "/cards/{wishlistName}/{chatId}"
@inject IJSRuntime JSRuntime
@inject NavigationManager navigationManager; @inject NavigationManager navigationManager;
<head> <head>
<link rel="stylesheet" href="css/Cards.css" /> <link rel="stylesheet" href="css/Cards.css" />
</head> </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"> <div class="card-page">
<button class="back-button button-animation" @onclick="NavigateToMain"></button> <button class="back-button button-animation" @onclick="NavigateToMain"></button>
<div class="container"> <div class="container">
@ -41,20 +13,27 @@
<p class="header-text">@wishlistName</p> <p class="header-text">@wishlistName</p>
</div> </div>
<div class="content" data-generalTop="3%" data-largeTop="8%" mediumTop="12%" smallTop="20%"> <div class="content">
<div class="back-card"></div> <div class="back-card"></div>
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) { @if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
<div class="card"> <div class="card">
<div class="slider-container"> <div class="slider-container">
<div class="slider"> <div class="slider">
@for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) { @if(Products[currentProduct].ImagesUrls.Length > 0) {
string image = Products[currentProduct].ImagesUrls[i]; @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
if (currentImage == image) { string image = Products[currentProduct].ImagesUrls[i];
<img src="@image" class="slider-image" alt="product image"/> 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>
<div class="dots"> <div class="dots">
@for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) { @for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) {
@ -99,10 +78,6 @@
</div> </div>
</div> </div>
if(!isProductsNull) {
isProductsNull = true;
StateHasChanged();
}
} }
else { else {
<style> <style>
@ -121,26 +96,17 @@
<button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button> <button class="more-button button-animation" @onclick="(() => LoadMoreProducts())"></button>
</div> </div>
</div> </div>
if(isProductsNull) {
isProductsNull = false;
StateHasChanged();
}
} }
</div> </div>
</div> </div>
</div> </div>
@code { @code {
[Parameter] public string wishlistName { get; set; } [Parameter] public string wishlistName { get; set; }
[Parameter] public string chatId {get; set;} [Parameter] public string chatId {get; set;}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeVoidAsync("adjustButtonContainerPosition");
}
private void NavigateToMain() { private void NavigateToMain() {
navigationManager.NavigateTo($"/chat/{chatId}"); 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 bool isProductsNull = false;
//private static string[] Images = { //private static string[] Images = {
// "/images/image2.png",
// "/images/image1.png",
// "/images/return-card.png", // "/images/return-card.png",
// "/images/amazon.png", // "/images/exit.png",
// "/images/avatar.png" // "/images/avatar.jpg"
//}; //};
//public List<Product> Products = new() //public List<Product> Products = new()
@ -41,25 +39,40 @@ public partial class Cards
//}; //};
public List<Product> Products {get; set;} public List<Product> Products {get; set;}
public List<String> productsNames {get; set;} //public List<String> productsNames {get; set;}
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
if (Products != null) { if (Products != null) {
currentImage = Products[currentProduct].ImagesUrls[currentIndex]; if(Products[currentProduct].ImagesUrls.Length > 0) {
currentImage = Products[currentProduct].ImagesUrls[currentIndex];
}
} }
else { else {
productsNames = _searchService.Products; //productsNames = _searchService.Products;
currentImage = ""; currentImage = "";
isProductsNull = true; isProductsNull = true;
} }
} }
private void ChangeImage(string image) private void ShowNextImage(string image)
{ {
currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image); currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image);
currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length; 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]; currentImage = Products[currentProduct].ImagesUrls[currentIndex];
StateHasChanged(); StateHasChanged();
} }

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

@ -18,23 +18,23 @@
</div> </div>
<div class="container"> <div class="container">
@if (!isError) { @if (!isError) {
@if (Products != null) { @if (Products.Count > 0) {
@foreach (var product in Products) { @foreach (var product in Products) {
<div class="product-div"> <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> <label class="product-description">@product.Description</label>
<div class="button-row"> <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="rating">@product.Rating</label>
<label class="price-label">@product.Price</label> <label class="price-label">@product.Price</label>
</div> </div>
<button class="button-amazon"> <button class="button-amazon">
<img src="/images/amazon.png"> <img src="/images/amazon.png" alt="amazon">
</button> </button>
</div> </div>
} }
} }
else{ else {
<p class="error">Cart is empty</p> <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] [Inject]
private ApiClient _apiClient { get; set; } private ApiClient _apiClient { get; set; }
public List<Product> Products { get; set; } public List<Product> Products { get; set; } = new List<Product>();
public bool isError = false; 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<Messages> Messages { get; set; }
public List<String> Products { get; set; } = new List<string>(); public List<String> Products { get; set; } = new List<string>();
public List<String> Suggestion { get; set; } = new List<String>(); public List<String> Suggestion { get; set; } = new List<String>();
public Messages Message { get; set; } public Messages Message { get; set; }
@ -150,8 +151,12 @@ public partial class Chat : ComponentBase
StateHasChanged(); StateHasChanged();
} else if(sseEvent.Event == SearchEventType.Product){ } 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){ } else if(sseEvent.Event == SearchEventType.Suggestion){
@ -162,6 +167,7 @@ public partial class Chat : ComponentBase
if(Products != null) { if(Products != null) {
string n = name; string n = name;
_searchServise.SetProducts(Products); _searchServise.SetProducts(Products);
Products = null;
var url = $"/cards/{name}/{chatId}"; var url = $"/cards/{name}/{chatId}";
Navigation.NavigateTo(url); 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 List<String> Products { get; set; }
public string firstMassage { get; set; } public string FirstMessage { get; set; }
public void SetProducts(List<String> products) { public void SetProducts(List<String> products) {
Products = products; Products = products;
} }
public void SetFirstMassage(string massage) { public void SetFirstMassage(string message) {
firstMassage = massage; FirstMessage = message;
} }
} }

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

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