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

fix cards and cart pages

Browse Source
This commit is contained in:
AndriiSyrotenko 2023-11-20 12:40:41 +00:00
parent 0f2d183f55
commit 3538439c2b
15 changed files with 1154 additions and 510 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ShoppingAssistantWebClient.Web/Models/Product.cs
View File

@ -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;}

20
ShoppingAssistantWebClient.Web/Network/ApiClient.cs
View File

@ -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<dynamic>(request);
var response = await _graphQLClient.SendQueryAsync<dynamic>(request);
return response;
}
public async Task<T> QueryAsync<T>(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);
}
}
}

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

@ -1,26 +1,63 @@
@page "/cards"
@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">
<div class="head">
<button class="back-button"></button>
<p class="header-text">Gift for Jessica</p>
<p class="header-text">@wishlistName</p>
</div>
<div class="content">
<div class="content" data-generalTop="3%" data-largeTop="8%" mediumTop="12%" smallTop="20%">
<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">
@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) {
<img src="@image" class="slider-image" @onclick="(() => ChangeImage(image))"/>
<img src="@image" 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++) {
@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>
}
@ -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) {
<img class="star" src="/images/star-cards.png">
<img class="star" src="/images/star-cards.png" alt="star">
continue;
}
if(fractal != 0.0) {
<img class="star" src="/images/half-star.png">
<img class="star" src="/images/half-star.png" alt="star">
fractal -= fractal;
}
else {
<img class="star" src="/images/empty-star.png">
<img class="star" src="/images/empty-star.png" alt="star">
}
}
<label class="price-label">@price</label>
<label class="price-label">@Products[currentProduct].Price</label>
</div>
</div>
</div>
<div class="buttons-container">
<div class="buttons-row">
<button class="cancel-button" @onclick="(() => LoadNextProduct())"></button>
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
<button class="like-button" @onclick="(() => LoadNextProduct())"></button>
<button class="cancel-button button-animation" @onclick="(() => LoadNextProduct())"></button>
<button class="return-button button-animation" @onclick="(() => LoadPreviousProduct())"></button>
<button class="like-button button-animation" @onclick="(() => LoadNextProduct())"></button>
</div>
</div>
if(!isProductsNull) {
isProductsNull = true;
StateHasChanged();
}
}
else {
<style>
@ -71,16 +112,36 @@
</style>
<div class="card-text">
<label class="bold-text">The cards ended</label>
<label class="more-text">Click <img src="/images/load-more-small.png"/> to see more<br> or <img src="/images/return-small.png"/> to exit</label>
<label class="more-text">Click <img class="plus-image" src="/images/load-more-small.png" alt="plus"/> to see more<br> or <img src="/images/return-small.png" alt="return"/> to exit</label>
</div>
<div class="buttons-container">
<div class="buttons-row">
<button class="exit-button" @onclick="(() => NavigateToMain())"></button>
<button class="return-button" @onclick="(() => LoadPreviousProduct())"></button>
<button class="more-button" @onclick="(() => LoadMoreProducts())"></button>
<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>
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}");
}
}

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

@ -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<Product> 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<Product> 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<Product> 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() {
}

244
ShoppingAssistantWebClient.Web/Pages/Cards.razor.css
View File

@ -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;
}

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

@ -1,37 +1,62 @@
@page "/cart"
@page "/cart/{chatId}/{currentWishlistId}"
@inject NavigationManager navigationManager;
<head>
<link rel="stylesheet" href="css/Cart.css" />
</head>
<div class="cart">
<div class="head">
<button class="back-button" @onclick="NavigateToMainPage"></button>
<div id="button_open" class="open_menu">
<a class="button_open_menu">
<span></span>
<span></span>
<span></span>
</a>
</div>
<p class="header-text">Cart</p>
</div>
<div class="container">
@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">
<label class="product-description">@product.Description</label>
<div class="button-row">
<img class="star" src="/images/star.png">
<label class="rating">@product.Rating</label>
@{
string price = "N/A";
}
<label class="price-label">@price</label>
</div>
<button class="button-amazon">
<img src="/images/amazon.png">
</button>
</div>
@if (!isError) {
@if (Products != null) {
@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">
<label class="product-description">@product.Description</label>
<div class="button-row">
<img class="star" src="/images/star.png">
<label class="rating">@product.Rating</label>
<label class="price-label">@product.Price</label>
</div>
<button class="button-amazon">
<img src="/images/amazon.png">
</button>
</div>
}
}
else{
<p class="error">Cart is empty</p>
}
}
else
{
<p class="error">Something went wrong<br>We are having some trouble loading the cart</p>
}
</div>
</div>
<script>
document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@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}");
}
}

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

@ -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<Product> 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<Product> Products { get; set; }
public bool isError = false;
protected override async Task OnInitializedAsync()
{
// Get data from Back-end
await GetData();
}
}
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<List<Product>>(jsonCategoriesResponse);
}
}
catch(Exception ex)
{
Console.WriteLine(ex);
isError = true;
}
}
}

290
ShoppingAssistantWebClient.Web/Pages/Cart.razor.css
View File

@ -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);
}

4
ShoppingAssistantWebClient.Web/Program.cs
View File

@ -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<WeatherForecastService>();
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();

3
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
View File

@ -1,6 +1,9 @@
@inherits LayoutComponentBase
@using ShoppingAssistantWebClient.Web.Pages
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
<head>
<link rel="stylesheet" href="css/MainLayout.css" />
</head>
<div class="page">
<div class="sidebar-menu">

12
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
View File

@ -1,4 +1,5 @@
@inject NavigationManager Navigation
@using Models.GlobalInstances
@inject NavigationManager Navigation
<div id="leftframe" class="left_frame">
@ -50,7 +51,7 @@
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<span class="user_name">Semen Semenov</span>
<span class="user_name">@GlobalUser.Id</span>
</div>
</div>
@ -82,13 +83,6 @@
right_frame.style.left = '23.25em';
}
}
document.getElementById('button_close').addEventListener('click', changetyle);
</script>

701
ShoppingAssistantWebClient.Web/wwwroot/css/Cards.css Normal file
View File

@ -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;
}

52
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css → ShoppingAssistantWebClient.Web/wwwroot/css/MainLayout.css
View File

@ -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;
}

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/next-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 B

BIN
ShoppingAssistantWebClient.Web/wwwroot/images/prev-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 242 B