From 3538439c2b9902da905e1a5c49b1c29227480a86 Mon Sep 17 00:00:00 2001 From: AndriiSyrotenko Date: Mon, 20 Nov 2023 12:40:41 +0000 Subject: [PATCH] fix cards and cart pages --- .../Models/Product.cs | 2 + .../Network/ApiClient.cs | 20 +- .../Pages/Cards.razor | 103 ++- .../Pages/Cards.razor.cs | 69 +- .../Pages/Cards.razor.css | 244 ------ .../Pages/Cart.razor | 67 +- .../Pages/Cart.razor.cs | 97 ++- .../Pages/Cart.razor.css | 290 +++++--- ShoppingAssistantWebClient.Web/Program.cs | 4 +- .../Shared/MainLayout.razor | 3 + .../Shared/NavMenu.razor | 12 +- .../wwwroot/css/Cards.css | 701 ++++++++++++++++++ .../css/MainLayout.css} | 52 +- .../wwwroot/images/next-image.png | Bin 0 -> 264 bytes .../wwwroot/images/prev-image.png | Bin 0 -> 242 bytes 15 files changed, 1154 insertions(+), 510 deletions(-) delete mode 100644 ShoppingAssistantWebClient.Web/Pages/Cards.razor.css create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css rename ShoppingAssistantWebClient.Web/{Shared/MainLayout.razor.css => wwwroot/css/MainLayout.css} (94%) create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png create mode 100644 ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png diff --git a/ShoppingAssistantWebClient.Web/Models/Product.cs b/ShoppingAssistantWebClient.Web/Models/Product.cs index ef0e20a..05e075a 100644 --- a/ShoppingAssistantWebClient.Web/Models/Product.cs +++ b/ShoppingAssistantWebClient.Web/Models/Product.cs @@ -12,6 +12,8 @@ public class Product public required double Rating {get; set;} + public required double Price { get; set; } + public required string[] ImagesUrls {get; set;} public required bool WasOpened {get; set;} diff --git a/ShoppingAssistantWebClient.Web/Network/ApiClient.cs b/ShoppingAssistantWebClient.Web/Network/ApiClient.cs index 9688c66..f7b6532 100644 --- a/ShoppingAssistantWebClient.Web/Network/ApiClient.cs +++ b/ShoppingAssistantWebClient.Web/Network/ApiClient.cs @@ -2,6 +2,7 @@ using GraphQL; using Newtonsoft.Json; using System.Net.Http.Headers; +using ShoppingAssistantWebClient.Web.Models.GlobalInstances; namespace ShoppingAssistantWebClient.Web.Network; @@ -29,7 +30,9 @@ public class ApiClient { await SetAuthenticationAsync(); - return await _graphQLClient.SendQueryAsync(request); + var response = await _graphQLClient.SendQueryAsync(request); + + return response; } public async Task QueryAsync(GraphQLRequest request, string propertyName) @@ -116,7 +119,18 @@ public class ApiClient private async Task SetAuthenticationAsync() { - _graphQLClient.HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken); - _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken); + var accessToken = await _authenticationService.GetAuthTokenAsync(); + if (!string.IsNullOrEmpty(accessToken)) + { + this.JwtToken = accessToken; + + GlobalUser.Id = _authenticationService.GetIdFromJwtToken(accessToken); + GlobalUser.Email = _authenticationService.GetEmailFromJwtToken(accessToken); + GlobalUser.Phone = _authenticationService.GetPhoneFromJwtToken(accessToken); + GlobalUser.Roles = _authenticationService.GetRolesFromJwtToken(accessToken); + + _graphQLClient.HttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken); + _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", this.JwtToken); + } } } \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor b/ShoppingAssistantWebClient.Web/Pages/Cards.razor index 6237394..d5064d9 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor @@ -1,26 +1,63 @@ -@page "/cards" +@page "/cards/{wishlistName}/{chatId}" + +@inject IJSRuntime JSRuntime +@inject NavigationManager navigationManager; + + + + + +
- + +
- -

Gift for Jessica

+

@wishlistName

-
+
@if (Products != null && Products.Count != 0 && currentProduct != Products.Count && currentProduct >= 0) {
- @foreach (var image in Products[currentProduct].ImagesUrls) { + @for(int i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) { + string image = Products[currentProduct].ImagesUrls[i]; if (currentImage == image) { - + product image } } + next image + previous image
- @for (var i = 0; i < Products[currentProduct].ImagesUrls.Length; i++) { + @for (var i = 0; i < Products[currentProduct].ImagesUrls.Length && i < 3; i++) { var dotIndex = i;
} @@ -36,32 +73,36 @@ @{ int whole = (int)Math.Floor(Products[currentProduct].Rating); double fractal = Products[currentProduct].Rating - whole; - string price = "N/A"; } @for(int i = 0; i < 5; i++) { if(i < whole) { - + star continue; } if(fractal != 0.0) { - + star fractal -= fractal; } else { - + star } } - +
- - - + + +
+ + if(!isProductsNull) { + isProductsNull = true; + StateHasChanged(); + } } else {
- +
- - - + + +
+ + if(isProductsNull) { + isProductsNull = false; + StateHasChanged(); + } }
- +
+ +@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}"); + } +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs index 5655b42..993eddd 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs +++ b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.cs @@ -1,43 +1,65 @@ using Microsoft.AspNetCore.Components; using ShoppingAssistantWebClient.Web.Models; +using ShoppingAssistantWebClient.Web.Network; +using GraphQL; +using Newtonsoft.Json; +using Microsoft.JSInterop; namespace ShoppingAssistantWebClient.Web.Pages; public partial class Cards { + [Inject] + private ApiClient _apiClient { get; set; } + private int currentIndex = 0; + private int currentProduct = 0; - private string currentImage; + private string currentImage {get; set;} - private static string[] Images = { - "/images/image2.png", - "/images/image1.png", - "/images/return-card.png" - }; + private bool isProductsNull = false; - public List Products = new() - { - new Product {Id = "0", Url = "some link", Name = "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook", - Description = "The USB C to VGA + Charge Adapter connects to your laptop or tablet via USB-C port, giving you both a VGA port for video display and a USB-C port for power", Rating = 3.8, ImagesUrls = Images, WasOpened = false, WishlistId = "0"}, - new Product {Id = "1", Url = "some link", Name = "Second product", - Description = "Test description", Rating = 4.2, ImagesUrls = Images, WasOpened = false, WishlistId = "0"} - }; + //private static string[] Images = { + // "/images/image2.png", + // "/images/image1.png", + // "/images/return-card.png", + // "/images/amazon.png", + // "/images/avatar.png" + //}; - protected override void OnInitialized() - { - currentImage = Images[currentIndex]; - base.OnInitialized(); + //public List Products = new() + //{ + // new Product {Id = "0", Url = "some link", Name = "Belkin USB C to VGA + Charge Adapter - USB C to VGA Cable for MacBook", + // Description = "The USB C to VGA + Charge Adapter connects to your laptop or tablet via USB-C port, giving you both a VGA port for video display and a USB-C port for power", Rating = 3.8, Price = 120, ImagesUrls = Images, WasOpened = false, WishlistId = "0"}, + // new Product {Id = "1", Url = "some link", Name = "Second product", + // Description = "Test description", Rating = 4.2, Price = 30, ImagesUrls = Images, WasOpened = false, WishlistId = "0"} + //}; + + public List Products {get; set;} + + protected override async Task OnInitializedAsync() + { + if (Products != null) { + currentImage = Products[currentProduct].ImagesUrls[currentIndex]; + } + else { + currentImage = ""; + isProductsNull = true; + } } - private void ChangeImage(string image) { + private void ChangeImage(string image) + { currentIndex = Array.IndexOf(Products[currentProduct].ImagesUrls, image); currentIndex = (currentIndex + 1) % Products[currentProduct].ImagesUrls.Length; + currentIndex = currentIndex >= 3 ? 0 : currentIndex; currentImage = Products[currentProduct].ImagesUrls[currentIndex]; StateHasChanged(); } - private void ChangeImageDot(int index) { + private void ChangeImageDot(int index) + { if (index >= 0 && index < Products[currentProduct].ImagesUrls.Length) { currentIndex = index; currentImage = Products[currentProduct].ImagesUrls[currentIndex]; @@ -45,20 +67,17 @@ public partial class Cards } } - private void LoadNextProduct() { + private async void LoadNextProduct() + { currentProduct += 1; StateHasChanged(); } - private void LoadPreviousProduct() { + private async void LoadPreviousProduct() { currentProduct -= 1; StateHasChanged(); } - private void NavigateToMain() { - - } - private void LoadMoreProducts() { } diff --git a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.css b/ShoppingAssistantWebClient.Web/Pages/Cards.razor.css deleted file mode 100644 index 976c071..0000000 --- a/ShoppingAssistantWebClient.Web/Pages/Cards.razor.css +++ /dev/null @@ -1,244 +0,0 @@ - -.card-page { - position: relative; - border: 0.09em solid; - border-color: #0052CC; - border-radius: 0.6em; - height: 100%; - width: 100%; -} - -.container { - display: flex; - flex-direction: column; - height: 100%; -} - -.content { - padding-top: -52px; - display: flex; - flex-direction: column; - flex-grow: 1; - justify-content: center; - align-items: center; - height: 100%; - position: relative; -} - -.head { - display: flex; - justify-content: center; - align-items: center; -} - -.header-text { - text-align: center; - font-size: 24px; - color: rgba(0, 82, 204, 0.8); -} - -.back-button { - width: 20px; - height: 20px; - background-image: url("images/back-button.png"); - background-size: cover; - border: none; - background-color: transparent; - position: absolute; - left: 40px; -} - -.back-card, -.card, -.card-text { - width: 19em; - height: 30em; - border-radius: 15px; - position: absolute; -} - -.back-card { - transform: rotate(-5deg); - box-shadow: 0 0 10px rgba(0, 82, 204, 1); - z-index: 1; -} - -.card, -.card-text { - box-shadow: 0 0 10px rgba(1, 101, 255, 1); - padding: 30px 20px 50px 20px; - z-index: 2; -} - -.slider-container { - position: relative; - width: 100%; - height: 220px; - margin: 0 auto; - overflow: hidden; - border-radius: 15px; -} - -.slider { - display: flex; - transition: transform 0.3s ease-in-out; -} - -.slider-image { - width: 250px; - height: 180px; - object-fit: cover; -} - -.dots { - display: flex; - justify-content: center; - margin-top: 15px; -} - -.dot { - width: 10px; - height: 10px; - background-color: rgba(234, 234, 234, 1); - border-radius: 50%; - margin: 0 8px; - cursor: pointer; -} - -.active-dot { - background-color: rgba(50, 50, 50, 1); -} - -.product-info { - flex: 1; - display: flex; - flex-direction: column; -} - -.name, -.description { - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - text-overflow: ellipsis; -} - -.name { - max-height: 60px; - font-weight: bold; - font-size: 15px; - -webkit-line-clamp: 2; -} - -.description { - max-height: 70px; - font-size: 13px; - -webkit-line-clamp: 3; - position: absolute; - top: 300px; - right: 20px; - left: 20px; -} - -.star { - margin-right: 5px; -} - -.rating { - margin-right: 15px; -} - -.rating-price-row { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: auto; -} - -.price-label { - margin-left: auto; - font-weight: bold; -} - -.buttons-container { - width: 300px; - position: absolute; - margin-top: 640px; - z-index: 3; -} - -.buttons-row { - display: flex; - justify-content: space-between; - position: absolute; - bottom: 15px; - left: 20px; - right: 20px; -} - -.cancel-button { - width: 30px; - height: 30px; - background-image: url("images/cancel-button.png"); - background-size: cover; - border: none; - background-color: transparent; -} - -.return-button { - width: 30px; - height: 30px; - background-image: url("images/return-card.png"); - background-size: cover; - border: none; - background-color: transparent; -} - -.like-button { - width: 30px; - height: 30px; - background-image: url("images/like-button.png"); - background-size: cover; - border: none; - background-color: transparent; -} - -.exit-button { - width: 30px; - height: 30px; - background-image: url("images/exit.png"); - background-size: cover; - border: none; - background-color: transparent; -} - -.more-button { - width: 30px; - height: 30px; - background-image: url("images/load-more.png"); - background-size: cover; - border: none; - background-color: transparent; -} - -.bold-text { - - font-size: 24px; - font-weight: bold; -} - -.add-text { - font-size: 12px; -} - -.exit-text { - font-size: 12px; -} - -.card-text { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: left; -} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor b/ShoppingAssistantWebClient.Web/Pages/Cart.razor index 9e0a95a..e77a6f0 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor +++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor @@ -1,37 +1,62 @@ -@page "/cart" +@page "/cart/{chatId}/{currentWishlistId}" +@inject NavigationManager navigationManager; + + + +
- +

Cart

- @foreach (var product in Products) { -
- - -
- - - @{ - string price = "N/A"; - } - -
- -
+ @if (!isError) { + @if (Products != null) { + @foreach (var product in Products) { +
+ + +
+ + + +
+ +
+ } + } + else{ +

Cart is empty

+ } + } + else + { +

Something went wrong
We are having some trouble loading the cart

}
+ + @code { - [Inject] - private NavigationManager NavigationManager {get; set;} + [Parameter] public string currentWishlistId {get; set; } + + [Parameter] public string chatId {get; set; } + private void NavigateToMainPage() { - NavigationManager.NavigateTo("/Cards"); + navigationManager.NavigateTo($"/chat/{chatId}"); } } \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs index b77645d..19c4fe0 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs +++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.cs @@ -1,51 +1,68 @@ +using GraphQL; +using Newtonsoft.Json; using Microsoft.AspNetCore.Components; using ShoppingAssistantWebClient.Web.Models; +using ShoppingAssistantWebClient.Web.Network; namespace ShoppingAssistantWebClient.Web.Pages; public partial class Cart : ComponentBase { - public List Products = new() - { - new Product {Id = "0", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "0"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "2", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "2"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - new Product {Id = "1", Url = "some link", Name = "HDMI", Description = "super mega hdmi cabel", Rating = 3.8, ImagesUrls = new string[] {"link"}, WasOpened = false, WishlistId = "1"}, - }; + + [Inject] + private ApiClient _apiClient { get; set; } + + public List Products { get; set; } + + public bool isError = false; protected override async Task OnInitializedAsync() { - // Get data from Back-end + await GetData(); } -} \ No newline at end of file + + private async Task GetData() + { + try { + var request = new GraphQLRequest { + Query = @"query ProductsPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) { + productsPageFromPersonalWishlist(wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) { + items { + id + url + name + description + rating + price + imagesUrls + wasOpened + wishlistId + } + } + }", + + Variables = new { + wishlistId = currentWishlistId, + pageNumber = 1, + pageSize = 10, + } + }; + + var response = await _apiClient.QueryAsync(request); + var responseData = response.Data; + if (response.Errors != null && response.Errors.Any()) { + isError = true; + } + else + { + var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.productsPageFromPersonalWishlist.items); + this.Products = JsonConvert.DeserializeObject>(jsonCategoriesResponse); + } + } + catch(Exception ex) + { + Console.WriteLine(ex); + isError = true; + } + } +} diff --git a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css index e6c916c..bf3641a 100644 --- a/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css +++ b/ShoppingAssistantWebClient.Web/Pages/Cart.razor.css @@ -1,121 +1,171 @@ -.cart { - border-radius: 10px; - border: 1px solid #0052CC; - position: fixed; - left: 20px; - right: 20px; - top: 20px; - bottom: 20px; - padding: 20px; - overflow: auto; - -ms-overflow-style: none; - scrollbar-width: none; -} - -.cart::-webkit-scrollbar { - display: none; -} - -.head { - display: flex; - justify-content: center; - align-items: center; - font-size: large; -} - -.header-text { - text-align: center; - font-size: 12; - color: rgba(0, 82, 204, 0.8); -} - -.back-button { - width: 15px; - height: 15px; - background-image: url("images/back-button.png"); - background-size: cover; - border: none; - background-color: transparent; - position: absolute; - left: 20px; -} - -.container { - display: flex; - flex-wrap: wrap; - justify-content: center; - max-width: 720px; - overflow: auto; -} - -.product-div { - height: 190px; - width: 130px; - border-radius: 10px; - box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); - position: relative; - padding: 0 10px 0 10px; - margin: 15px 15px 15px 15px; -} - -.product-img { - height: 70px; - width: 100%; - align-self: center; - display: block; - margin: 10px; -} - -.product-description { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - font-size: 12px; -} - -.button-amazon { - display: flex; - justify-content: center; - align-items: center; - background-color: #009FFF; - border: none; - border-radius: 10px; - position: absolute; - width: 109px; - height: 27px; - bottom: 10px; -} - -.star { - position: absolute; - bottom: 45px; -} - -.rating { - position: absolute; - bottom: 45px; - left: 26px; - height: 9px; - width: 9px; - display: flex; - justify-content: center; - align-items: center; - font-size: 12px; -} - -.button-row { - display: flex; -} - -.price-label { - position: absolute; - right: 10px; - font-weight: bold; - font-size: 14px; - height: 16px; - bottom: 45px; - display: flex; - justify-content: center; - align-items: center; + +.cart { + border-radius: 0.6em; + position: relative; + height: 100%; + width: 100%; + padding: 20px; + border: 1px solid #0052CC; + overflow: auto; + -ms-overflow-style: none; + scrollbar-width: none; +} + +.cart::-webkit-scrollbar { + display: none; +} + +.head { + display: flex; + justify-content: center; + align-items: center; + font-size: large; +} + +.header-text { + text-align: center; + font-size: 12; + color: rgba(0, 82, 204, 0.8); +} + +.back-button { + width: 15px; + height: 15px; + background-image: url("/images/back-button.png"); + background-size: cover; + border: none; + background-color: transparent; + position: absolute; + left: 20px; +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + max-width: 720px; + overflow: auto; +} + +.product-div { + height: 190px; + width: 130px; + border-radius: 10px; + box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3); + position: relative; + padding: 0 10px 0 10px; + margin: 15px 15px 15px 15px; +} + +.product-img { + height: 70px; + width: 100%; + align-self: center; + display: block; + margin: 10px; +} + +.product-description { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: 12px; +} + +.button-amazon { + display: flex; + justify-content: center; + align-items: center; + background-color: #009FFF; + border: none; + border-radius: 10px; + position: absolute; + width: 85%; + height: 27px; + bottom: 10px; +} + +.star { + position: absolute; + bottom: 45px; +} + +.rating { + position: absolute; + bottom: 45px; + left: 26px; + height: 9px; + width: 9px; + display: flex; + justify-content: center; + align-items: center; + font-size: 12px; +} + +.button-row { + display: flex; +} + +.price-label { + position: absolute; + right: 10px; + font-weight: bold; + font-size: 14px; + height: 16px; + bottom: 45px; + display: flex; + justify-content: center; + align-items: center; +} + +.error { + font-size: x-large; + color: darkgrey; + text-align: center; + line-height: 1.5; +} + +.error br { + display: block; + content: " "; + margin-bottom: 1em; +} + +.right-frame { + position: absolute; + right: 1.25em; + left: 23.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} + +.button_open_menu { + z-index: 2; + width: 1.43em; + height: 1.23em; + position: absolute; + top: 1.56em; + left: 1.56em; + cursor: pointer; + visibility: hidden; +} + +.button_open_menu span { + width: 20px; + height: 1.5px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #4E4E4E; +} + +.button_open_menu span:nth-of-type(2) { + top: calc(50% - 5px); +} + +.button_open_menu span:nth-of-type(3) { + top: calc(50% + 5px); } \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Program.cs b/ShoppingAssistantWebClient.Web/Program.cs index 50d5733..8c07b81 100644 --- a/ShoppingAssistantWebClient.Web/Program.cs +++ b/ShoppingAssistantWebClient.Web/Program.cs @@ -6,6 +6,7 @@ var builder = WebApplication.CreateBuilder(args); // Add services to the container. builder.Services.AddRazorPages(); builder.Services.AddServerSideBlazor(); +builder.Services.AddServerSideBlazor().AddCircuitOptions(options => { options.DetailedErrors = true; }); builder.Services.AddSingleton(); builder.Services.AddApiClient(builder.Configuration); @@ -28,6 +29,7 @@ app.UseRouting(); app.MapBlazorHub(); app.MapFallbackToPage("/_Host"); -app.ConfigureGlobalUserMiddleware(); +// Login moved to ApiClient +// app.ConfigureGlobalUserMiddleware(); app.Run(); diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor index bb52780..fd92cab 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor +++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor @@ -1,6 +1,9 @@ @inherits LayoutComponentBase @using ShoppingAssistantWebClient.Web.Pages ShoppingAssistantWebClient.Web + + +
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor index 0d77508..295ee43 100644 --- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor +++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor @@ -1,4 +1,5 @@ -@inject NavigationManager Navigation +@using Models.GlobalInstances +@inject NavigationManager Navigation
@@ -50,7 +51,7 @@
Avatar user - Semen Semenov + @GlobalUser.Id
@@ -82,13 +83,6 @@ right_frame.style.left = '23.25em'; } } - - - - - - - document.getElementById('button_close').addEventListener('click', changetyle); diff --git a/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css new file mode 100644 index 0000000..541d3fe --- /dev/null +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css @@ -0,0 +1,701 @@ +.page { + position: relative; + width: 100%; + height: 100vh; + border: 1.5% solid; + padding: 1.25em; +} + +.card-page { + border-radius: 10px; + border: 1px solid #0052CC; + position: fixed; + left: 2%; + right: 2%; + top: 2%; + bottom: 2%; + padding: 20px; + position: fixed; +} + +.container { + display: flex; + flex-direction: column; + height: 100%; + overflow: auto; + position: relative; +} + +.content { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + align-items: center; + height: 100%; + position: relative; +} + +.head { + display: flex; + justify-content: center; + align-items: center; +} + +.header-text { + text-align: center; + font-size: 24px; + color: rgba(0, 82, 204, 0.8); +} + +.back-button { + width: 20px; + height: 20px; + background-image: url("/images/back-button.png"); + background-size: cover; + border: none; + background-color: transparent; + position: absolute; + left: 2%; + top: 30px; +} + +.back-card, +.card, +.card-text { + max-width: 280px; + width: 30%; + aspect-ratio: 1 / 1.6; + border-radius: 15px; + position: absolute; + top: 3%; +} + +@media only screen and (max-width: 992px) { + .back-card, + .card, + .card-text { + max-width: 250px; + width: 40%; + aspect-ratio: 1 / 1.6; + border-radius: 15px; + position: absolute; + top: 8% !important; + } + + .card, + .card-text { + box-shadow: 0 0 10px rgba(1, 101, 255, 1); + padding: 15px 10px 30px 10px !important; + z-index: 2; + } + + .slider-container { + position: relative; + height: 200px; + width: 100%; + margin: 0 auto; + overflow: hidden; + border-radius: 15px; + } + + .slider-image { + width: 100%; + height: 190px !important; + object-fit: cover; + } + + .buttons-container { + max-width: 270px; + width: 40% !important; + position: absolute; + z-index: 3; + } + + .cancel-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/cancel-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .return-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/return-card.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .like-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/like-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .exit-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/exit.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .more-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/load-more.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .name { + max-height: 60px; + font-weight: bold; + font-size: 0.85em !important; + -webkit-line-clamp: 2; + } + + .description { + max-height: 70px; + font-size: 0.75em !important; + -webkit-line-clamp: 3; + position: absolute; + top: 280px !important; + left: 10px !important; + right: 10px !important; + } + + .name { + max-height: 60px; + font-weight: bold; + font-size: 0.85em !important; + -webkit-line-clamp: 2; + } + + .description { + max-height: 70px; + font-size: 0.75em !important; + -webkit-line-clamp: 3; + position: absolute; + top: 280px !important; + left: 8px !important; + right: 8px !important; + } + + .next-image, + .prev-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 15px !important; + height: 15px !important; + z-index: 100; + opacity: 0; + transition: opacity 0.5s ease; + } +} + +@media only screen and (max-width: 769px) { + .back-card, + .card, + .card-text { + max-width: 230px; + min-width: 210px !important; + width: 50vw !important; + aspect-ratio: 1 / 1.6; + border-radius: 15px; + position: absolute; + top: 12% !important; + } + + .card, + .card-text { + box-shadow: 0 0 10px rgba(1, 101, 255, 1); + padding: 12px 8px 24px 8px !important; + z-index: 2; + } + + .slider-container { + position: relative; + width: 100%; + height: 170px !important; + margin: 0 auto; + overflow: hidden; + border-radius: 15px; + } + + .slider-image { + height: 150px !important; + width: 100%; + object-fit: cover; + } + + .dot { + width: 8px !important; + height: 8px !important; + background-color: rgba(234, 234, 234, 1); + border-radius: 50%; + margin: 0 8px; + cursor: pointer; + } + + .buttons-container { + max-width: 250px; + min-width: 230px; + width: 50vw !important; + position: absolute; + z-index: 3; + } + + .cancel-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/cancel-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .return-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/return-card.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .like-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/like-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .exit-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/exit.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .more-button { + width: 25px !important; + height: 25px !important; + background-image: url("/images/load-more.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .name { + max-height: 60px; + font-weight: bold; + font-size: 0.85em !important; + -webkit-line-clamp: 2; + } + + .description { + max-height: 70px; + font-size: 0.75em !important; + -webkit-line-clamp: 3; + position: absolute; + top: 240px !important; + left: 8px !important; + right: 8px !important; + } + + .next-image, + .prev-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 12px !important; + height: 12px !important; + z-index: 100; + opacity: 0; + transition: opacity 0.5s ease; + } +} + +@media only screen and (max-width: 440px) { + .back-card, + .card, + .card-text { + min-width: 200px !important; + width: 70vw; + aspect-ratio: 1 / 1.6; + border-radius: 15px; + position: absolute; + top: 20% !important; + } + + .card, + .card-text { + box-shadow: 0 0 10px rgba(1, 101, 255, 1); + padding: 10px 5px 18px 5px !important; + z-index: 2; + } + + .slider-container { + position: relative; + width: 100%; + height: 160px !important; + margin: 0 auto; + overflow: hidden; + border-radius: 15px; + } + + .slider-image { + height: 140px !important; + width: 100%; + object-fit: cover; + } + + .dot { + width: 6px !important; + height: 6px !important; + background-color: rgba(234, 234, 234, 1); + border-radius: 50%; + margin: 0 8px; + cursor: pointer; + } + + .buttons-container { + min-width: 210px; + width: 70vw; + position: absolute; + z-index: 3; + } + + .cancel-button { + width: 20px !important; + height: 20px !important; + background-image: url("/images/cancel-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .return-button { + width: 20px !important; + height: 20px !important; + background-image: url("/images/return-card.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .like-button { + width: 20px !important; + height: 20px !important; + background-image: url("/images/like-button.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .exit-button { + width: 20px !important; + height: 20px !important; + background-image: url("/images/exit.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .more-button { + width: 20px !important; + height: 20px !important; + background-image: url("/images/load-more.png"); + background-size: cover; + border: none; + background-color: transparent; + } + + .name { + max-height: 60px; + font-weight: bold; + font-size: 0.8em !important; + -webkit-line-clamp: 2; + } + + .description { + max-height: 70px; + font-size: 0.75em !important; + -webkit-line-clamp: 3; + position: absolute; + top: 220px !important; + left: 5px !important; + right: 5px !important; + } + + .bold-text { + font-size: 1.2em !important; + font-weight: bold; + } + + .add-text { + font-size: 0.85em !important; + } + + .exit-text { + font-size: 0.85em !important; + } + + .next-image, + .prev-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 10px !important; + height: 10px !important; + z-index: 100; + opacity: 0; + transition: opacity 0.5s ease; + } +} + +.back-card { + transform: rotate(-5deg); + box-shadow: 0 0 10px rgba(0, 82, 204, 1); + z-index: 1; +} + +.card, +.card-text { + box-shadow: 0 0 10px rgba(1, 101, 255, 1); + padding: 30px 20px 40px 20px; + z-index: 2; +} + +.slider-container { + position: relative; + width: 100%; + height: 210px; + margin: 0 auto; + overflow: hidden; + border-radius: 15px; +} + +.slider { + display: flex; + transition: transform 0.3s ease-in-out; + +} + +.next-image, +.prev-image { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 20px; + height: 20px; + z-index: 100; + opacity: 0; + transition: opacity 0.5s ease; +} + +.next-image { + right: 0; +} + +.slider:hover .next-image, +.slider:hover .prev-image { + opacity: 1; +} + +.slider-image { + height: 190px; + width: 100%; + object-fit: cover; +} + +.dots { + display: flex; + justify-content: center; + margin-top: 2%; +} + +.dot { + width: 10px; + height: 10px; + background-color: rgba(234, 234, 234, 1); + border-radius: 50%; + margin: 0 8px; + cursor: pointer; +} + +.active-dot { + background-color: rgba(50, 50, 50, 1); +} + +.product-info { + flex: 1; + display: flex; + flex-direction: column; +} + +.name, +.description { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + text-overflow: ellipsis; +} + +.name { + max-height: 60px; + font-weight: bold; + font-size: 15px; + -webkit-line-clamp: 2; +} + +.description { + max-height: 70px; + font-size: 13px; + -webkit-line-clamp: 3; + position: absolute; + top: 300px; + right: 20px; + left: 20px; +} + +.star { + margin-right: 5px; +} + +.rating { + margin-right: 15px; +} + +.rating-price-row { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; +} + +.price-label { + margin-left: auto; + font-weight: bolder; +} + +.buttons-container { + width: 300px; + position: absolute; + z-index: 3; +} + +.buttons-row { + display: flex; + justify-content: space-between; + position: absolute; + bottom: 15px; + left: 20px; + right: 20px; +} + +.button-animation { + transition: transform 0.3s ease; +} + +.button-animation:active { + transform: scale(0.55); +} + +.cancel-button { + width: 30px; + height: 30px; + background-image: url("/images/cancel-button.png"); + background-size: cover; + border: none; + background-color: transparent; +} + +.return-button { + width: 30px; + height: 30px; + background-image: url("/images/return-card.png"); + background-size: cover; + border: none; + background-color: transparent; +} + +.like-button { + width: 30px; + height: 30px; + background-image: url("/images/like-button.png"); + background-size: cover; + border: none; + background-color: transparent; +} + +.exit-button { + width: 30px; + height: 30px; + background-image: url("/images/exit.png"); + background-size: cover; + border: none; + background-color: transparent; +} + +.more-button { + width: 30px; + height: 30px; + background-image: url("/images/load-more.png"); + background-size: cover; + border: none; + background-color: transparent; +} + +.bold-text { + font-size: 24px; + font-weight: bold; +} + +.add-text { + font-size: 12px; +} + +.exit-text { + font-size: 12px; +} + +.card-text { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: left; +} + +.sidebar-menu { + display: none; +} + +.right-frame { + position: absolute; + right: 1.25em; + left: 1.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} + +.plus-image { + vertical-align: baseline; +} \ No newline at end of file diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css similarity index 94% rename from ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css rename to ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css index e0e762a..32b38d9 100644 --- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css +++ b/ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css @@ -1,26 +1,26 @@ -.page { - position: relative; - width: 100%; - height: 100vh; - border: 1.5% solid; - border-color: #edf106; - padding: 1.25em; -} - -.sidebar-menu { - position: absolute; - width: 20em; - top: 1.25em; - bottom: 1.25em; - margin-right: 1.5em; - transition: 1s; -} - -.right-frame { - position: absolute; - right: 1.25em; - left: 23.25em; - top: 1.25em; - bottom: 1.25em; - transition: 1s; -} +.page { + position: relative; + width: 100%; + height: 100vh; + border: 1.5% solid; + border-color: #edf106; + padding: 1.25em; +} + +.sidebar-menu { + position: absolute; + width: 20em; + top: 1.25em; + bottom: 1.25em; + margin-right: 1.5em; + transition: 1s; +} + +.right-frame { + position: absolute; + right: 1.25em; + left: 23.25em; + top: 1.25em; + bottom: 1.25em; + transition: 1s; +} diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png b/ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png new file mode 100644 index 0000000000000000000000000000000000000000..8e1d219617979957488356fef51ab974effa97c1 GIT binary patch literal 264 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa#^NA%Cx&(BWL^R}Ea{HEjtmSN z`?>!lvI6;>1s;*b3=G`DAk4@xYmNj^aIU9|V~B-+@5PORhZT4n0w=baX{R=?VKhl( zIxakc>)HnO6JD7sIUb3`b8K95zu?+k>l&tg-G*&bF1gIlQMZb=e7=u#w4LX;z{lm;z=^^rhT6M{a>hf*}>MUz4tTjBq@q>+wYIck6F8w zUurww^yU+m<;y>c{g$cbkY2!&C_6=IO|+luWEMt-J&fo6MlCkHUNar&PzFy|KbLh* G2~7Y+8C#YB literal 0 HcmV?d00001 diff --git a/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png b/ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png new file mode 100644 index 0000000000000000000000000000000000000000..c89fce961d2d717fe413894ca409d5155e4805d3 GIT binary patch literal 242 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG zc*WYzbYf?%-uFxY5WoD1^U5rO$!D_GUah>IEU>iX)4l#m|BW7Al?xSG z;u5(-71@@GJU;St+7FXJFZa4-4Ne`lb)OS@=0?3{Y`R)Fr&z1Spk9i-`yg|J0f*w9 jn5o74Y@1i^+0S@7C@u5&uCfZClNdZ*{an^LB{Ts5gB?=# literal 0 HcmV?d00001