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

Merge pull request #8 from Shchoholiev/feature/develop-update

Browse Source 
Feature/develop update
This commit is contained in:
Mykhailo Bilodid 2023-11-05 21:11:58 +02:00 committed by GitHub
commit 606fc820da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 890 additions and 633 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ShoppingAssistantWebClient.Web/Models/Messages.cs Normal file
View File

@ -0,0 +1,14 @@
namespace ShoppingAssistantWebClient.Web.Models
{
public class Messages
{
public required string Id { get; set; }
public required string Text { get; set; }
public required string Role { get; set; }
public required string CreatedById { 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);
}
}
}

240
ShoppingAssistantWebClient.Web/Pages/Chat.razor
View File

@ -1,133 +1,107 @@
@page "/chat/1"
<div class="container-fluid">
<div class="left_frame" id="leftFrame">
<div class="logo">
<img src="/images/logo.png" alt="Logo site">
<span class="logo_name">CARTAID</span>
</div>
<div class="menu">
<div class="elements_wishlisht">
<div class="close_menu">
<span >Wishlists</span>
<a class="button_close_menu" >
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="add_chat">
<a href="/">
<span >Add chat +</span>
</a>
</div>
<div class="wishlist_names">
<section>
<span id ="wishlist_id_1" class="wishlist_name">Gift for Jessica</span>
</section>
<section>
<span id ="wishlist_id_2" class="wishlist_name">Secret Santa</span>
</section>
<section>
<span id ="wishlist_id_3" class="wishlist_name">Phone charger</span>
</section>
<section>
<span class="wishlist_name">Phone</span>
</section>
<section>
<span class="wishlist_name">Printer</span>
</section>
<section>
<span class="wishlist_name">Books</span>
</section>
</div>
</div>
<div class="line"></div>
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<span class="user_name">Username</span>
</div>
</div>
</div>
</div>
<div class="right_frame" id="rightFrame">
<div class="open_menu">
<a class="button_open_menu" >
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="chat_frame">
<div class="new_chat">
<div class="title_one_frame">Gift for Jessica</div>
<ul class="chat_box">
<li class="chat_outgoing">
<p>Give me product recommendation. Ask me questions if you need more directions. I am looking for: hub for my macbook to connect external monitors</p>
</li>
<li class=" chat_incoming">
<p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
<br>
How many external monitors do you want to connect to your MacBook?</p>
</li>
<li class="chat_outgoing">
<p>7</p>
</li>
<li class=" chat_incoming">
<p>Thank you. Here is the next question:
<br>
What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)</p>
</li>
</ul>
<div class="chat_input">
<input type="text" id="chatInput" placeholder="Describe what you are looking for....">
<a class="button_sende">
<img src="/images/send.png" alt="Send message">
</a>
</div>
</div>
</div>
</div>
</div>
@page "/chat/{chatId}"
@inject IHttpClientFactory ClientFactory
<PageTitle>Gift for Jessica</PageTitle>
<div class="right_frame" id="rightFrame">
<div id="button_open" class="open_menu">
<a class="button_open_menu">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="new_chat">
<div class="chat_message">
<div class="title_one_frame">Gift for Jessica</div>
<ul class="chat_box">
@if(!isLoading && Messages!=null){
@foreach (var item in Messages){
if(item.Role!="User"){
<li class=" chat_incoming">
<p>@item.Text</p>
</li>
}else{
<li class="chat_outgoing">
<p>@item.Text</p>
</li>
}
}
}
</ul>
</div>
<div class="possible_options">
<div class="tite_options">Several possible options</div>
<div class="options">
<div class="topic_options">
HDMI
</div>
<div class="topic_options">
VGA
</div>
<div class="topic_options">
DisplayPort
</div>
</div>
</div>
<div class="chat_input">
<input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
</div>
<script>
document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@code {
[Parameter] public string chatId { get; set; }
protected override async Task OnParametersSetAsync()
{
await LoadMessages();
}
public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
AddNewMessage();
}
}
}

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

@ -1,14 +1,101 @@
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase
{
[Inject]
public ILogger<Chat> Logger { get; set; }
protected override async Task OnInitializedAsync()
{
// Get data from Back-end
}
[Inject]
private ApiClient _apiClient { get; set; }
public List<Messages> Messages { get; set; }
public bool isLoading = true;
private string inputValue = "";
protected override async Task OnInitializedAsync()
{
await LoadMessages();
}
private async Task LoadMessages()
{
isLoading = true;
int pageNumber = 1;
string wishlistId = chatId;
var request = new GraphQLRequest
{
Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
{
items {
id
text
role
createdById
}
}
}",
Variables = new
{
wishlistId,
pageNumber,
pageSize = 20
}
};
try{
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
Messages.Reverse();
isLoading = false;
}catch{
}
}
private async Task AddNewMessage()
{
isLoading = true;
var pageNumber = 1;
var wishlistId = chatId;
var text = inputValue;
inputValue="";
var request = new GraphQLRequest
{
Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
id
text
role
createdById
}
}
",
Variables = new
{
wishlistId,
text
}
};
var response = await _apiClient.QueryAsync(request);
await LoadMessages();
}
}

457
ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
View File

@ -1,330 +1,139 @@
html {
font-family: 'Nunito';
padding-top: 20px;
padding-bottom: 20px;
}
.menu {
position: relative;
width: 100%;
height: 100%;
border: 1.5px solid;
border-color: #0052CC;
border-radius: 10px;
padding-top: 16px;
padding-bottom: 16px;
}
.right_frame {
position: relative;
border: 0.09em solid;
border-color: #0052CC;
border-radius: 0.6em;
height: 100%;
width: 100%;
}
.logo {
display: flex;
align-items: center;
padding-bottom: 15PX;
}
.logo_name {
padding-top: 10px;
padding-left: 3px;
font-size: 17px;
justify-content: center;
/* Горизонтальное центрирование */
align-items: center;
letter-spacing: 0.5px;
font-weight: 600;
}
.logo img {
float: left;
width: 52px;
height: 52px;
}
.left_frame {
padding-left: 20px;
position: absolute;
height: calc(100% - 105px);
left: 0;
width: 20%;
transition: 1s;
}
.wishlist_name {
font-size: 15px;
margin-top: 7px;
margin-bottom: 7px;
color: black;
cursor: pointer;
}
.elements {
padding-left: 12px;
padding-right: 12px;
}
.elements_wishlisht{
overflow-y: scroll;
padding-left: 12px;
padding-right: 12px;
height: 90%;
}
.elements_wishlisht::-webkit-scrollbar {
visibility: hidden;
}
.close_menu {
position: relative;
background-color: #EAEAEA;
border-radius: 10px;
color: #4E4E4E;
font-size: 16px;
width: 90%;
height: 40px;
padding: 7px 9px;
}
.add_chat {
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
margin-bottom: 5px;
background-color: #EAEAEA;
border-radius: 10px;
font-size: 16px;
width: 100px;
height: 40px;
cursor: pointer;
}
.add_chat a{
border-radius: 10px;
padding: 7px 9px;
text-decoration: none;
color: #4E4E4E;
}
.info_user {
background-color: white;
position:absolute;
bottom: 0;
padding-bottom: 10px;
padding-top: 10px;
}
.user_name {
font-size: 16px;
padding-left: 7px;
}
.info_user img {
height: 40px;
width: 40px;
border-radius: 50%;
}
.line {
position: absolute;
bottom: 60px;
width: 100%;
border-bottom: 1px solid #4b7bc4;
}
.button_close_menu{
width: 23px;
height: 23px;
position: absolute;
right: 20px;
cursor: pointer;
}
.button_close_menu span {
width: 20px;
height: 1.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #4E4E4E;
}
.button_close_menu span:nth-of-type(2) {
top: calc(50% - 5px);
}
.button_close_menu span:nth-of-type(3) {
top: calc(50% + 5px);
}
.right_frame {
position: absolute;
border: 1.5px solid;
border-color: #0052CC;
border-radius: 10px;
left: 20px;
height: calc(100% - 40px);
width: calc(100% - 40px);
transition: 1s;
}
.button_open_menu{
z-index: 2;
width: 23px;
height: 23px;
position: absolute;
top: 25px;
left: 25px;
cursor: pointer;
}
.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);
}
.title_one_frame{
padding-top: 20px ;
color: #0052CC;
font-size: 17px;
text-align: center;
}
.title_two_frame{
padding-top: 60px ;
padding-bottom: 40px ;
color: black;
font-size: 40px;
text-align: center;
font-weight: 600;
}
.title_three_frame{
padding-top: 60px ;
padding-bottom: 40px ;
color: #202124;
font-size: 20px;
text-align: center;
font-weight: 400;
}
.topic {
font-size: 18px;
text-align: center;
line-height: 35px;
color: #009FFF;
width: 250px;
margin: 0 auto;
}
.topic div{
margin-top: 20px;
border: 1.5px solid;
.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);
}
.title_one_frame {
padding-top: 1.25em;
color: #0052CC;
font-size: 1.0625em;
text-align: center;
}
.chat_input {
background-color: #EAEAEA;
position: absolute;
display: flex;
align-items: center;
bottom: 2em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.possible_options {
visibility: hidden;
position: absolute;
bottom: 5.5em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.tite_options{
font-size: 0.9em;
color: #ADADAD;
margin-bottom: 0.5em;
}
.options{
justify-content: space-between;
align-items: center;
font-size: 1em;
}
.topic_options
{
display: inline-block;
padding: 0.5em;
border: 0.09em solid;
border-color: #009FFF;
border-radius: 10px;
justify-content: center;
align-items: center;
cursor: pointer;
}
.topic div a{
color: #009FFF;
text-decoration:none;
}
.switch{
height: 45px;
width: 350px;
margin: 0 auto;
border: 1.5px solid;
border-color: #EAEAEA;
border-radius: 10px;
border-radius: 0.6em;
margin: 0em 0.6em;
flex: 1;
text-align: center;
position: relative;
}
.switch_product{
position: absolute;
background-color: #0052CC;
border-radius: 10px;
margin: 5px;
width: calc(50% - 10px);
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: white;
}
.switch_gift{
right: 0;
position: absolute;
border-radius: 10px;
margin: 5px;
width: calc(50% - 10px);
height: calc(100% - 10px);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: #202124;
}
.chat_input{
position: absolute;
margin-left: 25%;
margin-bottom: 20px;
width: 50%;
border-radius: 10px;
bottom: 0;
}
.chat_input input{
font-size: 17px;
width: 100%;
position: relative;
color: #4E4E4E;
background-color: #EAEAEA;
border-radius: 10px;
border: none;
padding: 10px 20px;
outline:none;
}
.button_sende{
margin-top: 14px;
margin-right: 20px;
cursor: pointer;
height: calc(100% - 28px);
width: 2.8%;
position: absolute;
right: 0;
}
.button_sende img{
height: 100%;
width: 100%;
position: absolute;
}
.new_chat{
position: absolute;
overflow-y: scroll;
height: 100%;
width: 100%;
}
.new_chat::-webkit-scrollbar {
visibility: hidden;
}
}
.input_messages {
width: 100%;
height: 2.5em;
font-size: 1.0625em;
background-color: #EAEAEA;
color: #4E4E4E;
border-radius: 0.6em;
border: none;
padding: 0.625em 1.25em;
outline: none;
}
.button_sende {
float: right;
cursor: pointer;
line-height: 2.5em;
margin-right: 0.8em;
width: 1.5em;
height: 1.4em;
}
.new_chat {
padding-top: 0.5em;
position: relative;
height: 100%;
width: 100%;
}
.chat_message {
position: relative;
overflow-y: auto;
height: calc(100% - 5.5em);
width: 100%;
}
.chat_message::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
}
.chat_message::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}
.chat_box{
border-radius: 10px;
position: absolute;

104
ShoppingAssistantWebClient.Web/Pages/Index.razor
View File

@ -1,9 +1,105 @@
@page "/"
<PageTitle>CartaId</PageTitle>
<PageTitle>New Chat</PageTitle>
<h1>Hello, world!</h1>
<div class="right_frame" id="rightFrame">
Welcome to your new app.
<div id="button_open" class="open_menu">
<a class="button_open_menu">
<span></span>
<span></span>
<span></span>
</a>
</div>
<SurveyPrompt Title="How is Blazor working for you?" />
<div class="new_chat">
<div class="chat_message">
<div class="title_one_frame">New chat</div>
<div class="title_two_frame">What you're looking for</div>
<div class="switch">
<div @onclick="Сhoose_product"class="switch_product" id="choose_product">
Product
</div>
<div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
Gift
</div>
</div>
<div class="title_three_frame">What you're looking for, we will help you solve your problem and find it
</div>
<div class="topic">
<div class="topic_one">
<a class="button_topic_one">
Date
</a>
</div>
<div class="topic_two">
<a class="button_topic_two">
🎃 Halloween gift
</a>
</div>
<div class="topic_three">
<a class="button_topic_three">
🎁 Birthday gift
</a>
</div>
</div>
</div>
<div class="chat_input">
<input @bind="inputValue" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for....">
<img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
</div>
</div>
</div>
<script>
var choose_gift = document.getElementById("choose_gift");
var choose_product = document.getElementById("choose_product");
var switchGi = document.querySelector(".switch_gift");
var switchProd = document.querySelector(".switch_product");
var choose = "Product";
function switchGift() {
choose_gift.style.backgroundColor = "#0052CC";
choose_product.style.backgroundColor = "transparent";
switchGi.style.color = "white";
switchProd.style.color = "#202124";
choose = "Gift";
}
function switchProduct() {
choose_product.style.backgroundColor = "#0052CC";
choose_gift.style.backgroundColor = "transparent";
switchProd.style.color = "white";
switchGi.style.color = "#202124";
choose = "Product";
}
document.getElementById('choose_gift').addEventListener('click', switchGift);
document.getElementById('choose_product').addEventListener('click', switchProduct);
document.getElementById('button_open').addEventListener('click', changetyle);
</script>
@code{
private string selectedChoice = "Product";
private void Сhoose_product() {
selectedChoice = "Product";
}
private void Сhoose_gift() {
selectedChoice = "Gift";
}
}

57
ShoppingAssistantWebClient.Web/Pages/Index.razor.cs Normal file
View File

@ -0,0 +1,57 @@
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
namespace ShoppingAssistantWebClient.Web.Pages
{
public partial class Index : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
[Inject]
private NavigationManager Navigation { get; set; }
private string inputValue = "";
public bool isLoading = true;
private async Task CreateNewChat() {
if(inputValue!=""){
var type = selectedChoice;
var firstMessageText= inputValue;
var request = new GraphQLRequest
{
Query = @"mutation StartPersonalWishlist($type: String!, $firstMessageText: String!) {
startPersonalWishlist(dto: { type: $type, firstMessageText: $firstMessageText }) {
id
}
}
",
Variables = new
{
type,
firstMessageText
}
};
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var chat_id = responseData.startPersonalWishlist.id;
var url = $"/chat/{chat_id}";
Navigation.NavigateTo(url);
}
}
}
}

187
ShoppingAssistantWebClient.Web/Pages/Index.razor.css Normal file
View File

@ -0,0 +1,187 @@
.right_frame {
position: relative;
border: 0.09em solid;
border-color: #0052CC;
border-radius: 0.6em;
height: 100%;
width: 100%;
}
.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);
}
.title_one_frame {
padding-top: 1.25em;
color: #0052CC;
font-size: 1.0625em;
text-align: center;
}
.title_two_frame {
padding-top: 2.25em;
padding-bottom: 1.5em;
font-size: 2.5em;
text-align: center;
font-weight: 600;
}
.title_three_frame {
padding-top: 3.75em;
padding-bottom: 2.5em;
color: #202124;
font-size: 1.25em;
text-align: center;
font-weight: 400;
}
.topic {
font-size: 1.125em;
text-align: center;
line-height: 2.1875em;
color: #009FFF;
width: 15.625em;
margin: 0 auto;
}
.topic div {
margin-top: 1.25em;
border: 0.09em solid;
border-color: #009FFF;
border-radius: 0.6em;
justify-content: center;
align-items: center;
cursor: pointer;
}
.topic div a {
color: #009FFF;
text-decoration: none;
}
.switch {
height: 2.8125em;
width: 21.875em;
margin: 0 auto;
border: 0.09em solid;
border-color: #EAEAEA;
border-radius: 0.6em;
text-align: center;
position: relative;
}
.switch_product {
position: absolute;
background-color: #0052CC;
border-radius: 0.6em;
margin: 0.3125em;
width: calc(50% - 0.625em);
height: calc(100% - 0.625em);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: white;
}
.switch_gift {
right: 0;
position: absolute;
border-radius: 0.6em;
margin: 0.3125em;
width: calc(50% - 0.625em);
height: calc(100% - 0.625em);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.8s;
color: #202124;
}
.chat_message {
position: relative;
overflow-y: auto;
height: calc(100% - 5.5em);
width: 100%;
}
.chat_input {
background-color: #EAEAEA;
position: absolute;
display: flex;
align-items: center;
bottom: 2em;
margin-left: 25%;
width: 50%;
border-radius: 0.6em;
}
.input_messages {
width: 100%;
height: 2.5em;
font-size: 1.0625em;
background-color: #EAEAEA;
color: #4E4E4E;
border-radius: 0.6em;
border: none;
padding: 0.625em 1.25em;
outline: none;
}
.button_sende {
float: right;
cursor: pointer;
line-height: 2.5em;
margin-right: 0.8em;
width: 1.8em;
height: 1.7em;
}
.new_chat {
padding-top: 0.5em;
position: relative;
height: 100%;
width: 100%;
}
.chat_message::-webkit-scrollbar {
border-radius: 20px;
width: 0.2em;
}
.chat_message::-webkit-scrollbar-thumb {
background-color: #0052CC;
/* Колір позиції покажчика */
border-radius: 10px;
/* Закруглення країв позиції покажчика */
width: 0.2em;
}

5
ShoppingAssistantWebClient.Web/Program.cs
View File

@ -1,5 +1,7 @@
using GraphQL.Client.Http;
using ShoppingAssistantWebClient.Web.Configurations;
using ShoppingAssistantWebClient.Web.Data;
using ShoppingAssistantWebClient.Web.Network;
var builder = WebApplication.CreateBuilder(args);
@ -28,6 +30,7 @@ app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.ConfigureGlobalUserMiddleware();
// Login moved to ApiClient
// app.ConfigureGlobalUserMiddleware();
app.Run();

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

@ -1,15 +1,12 @@
@inherits LayoutComponentBase
<PageTitle>ShoppingAssistantWebClient.Web</PageTitle>
<PageTitle>CARTAID</PageTitle>
<div class="page">
<div class="sidebar-menu">
<NavMenu />
<NavMenu/>
</div>
<div class="right-frame">
@Body
</div>
<!--
<main>
<article class="content px-4">
@Body
</article>
</main>-->
</div>

77
ShoppingAssistantWebClient.Web/Shared/MainLayout.razor.css
View File

@ -1,73 +1,24 @@
.page {
position: relative;
width: 100%;
height: 100vh;
border: 1.5% solid;
border-color: #edf106;
padding: 1.25em;
}
.sidebar-menu {
position: relative;
position: absolute;
width: 20em;
height: 100%;
top: 1.25em;
bottom: 1.25em;
margin-right: 1.5em;
transition: 1s;
border: 1.5% solid;
border-color: #f10606;
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row ::deep a, .top-row .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
}
.top-row a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth) {
display: none;
}
.top-row.auth {
justify-content: space-between;
}
.top-row a, .top-row .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row, article {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
.right-frame {
position: absolute;
right: 1.25em;
left: 23.25em;
top: 1.25em;
bottom: 1.25em;
transition: 1s;
}

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

@ -1,5 +1,7 @@
<div id="leftframe" class="left_frame">
@using Models.GlobalInstances
@inject NavigationManager Navigation
<div id="leftframe" class="left_frame">
<div class="logo">
<img src="/images/logo.svg" alt="Logo site">
@ -16,22 +18,28 @@
<div class="elements_wishlisht">
<div class="add_chat">
<a href="/">
<div class="add_chat" @onclick="RedirectToNewChat" >
<div>
<span>Search</span>
<span class="plus" >+</span>
</a>
<span class="plus">+</span>
</div>
</div>
<div class="wishlist_names">
@foreach(var item in wishlist){
<section class="cont_wishlist">
<div id="wishlist_id_@item.Id" class="wishlist_name">@item.Name</div>
<img class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
<img class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
</section>
@if(!isLoading){
@foreach (var item in Wishlists)
{
<section class="cont_wishlist">
<div @onclick="() => RedirectToPage(item.Id)" class="wishlist_name" >@item.Name</div>
<img @onclick="() => DeleteWishlist(item.Id)" class="button_delete_chat" src="/images/icon_delete.svg" alt="Delete wishlist">
<img @onclick="() => RedirectToCard(item.Id)" class="button_open_card" src="/images/icon_open_card.svg" alt="Card open">
</section>
}
}
</div>
</div>
@ -40,52 +48,64 @@
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<span class="user_name">Semen Semenov</span>
<!-- Change to name -->
<span class="user_name">@GlobalUser.Id</span>
</div>
</div>
</div>
</div>
<script>
function changetyle() {
var element = document.getElementById('leftframe');
var computedStyles = getComputedStyle(element);
var transformValue = computedStyles.transform;
function changetyle() {
var left_frame = document.querySelector('.sidebar-menu');
var right_frame = document.querySelector('.right-frame');
var computedStyles = getComputedStyle(left_frame);
var transformValue = computedStyles.transform;
var button_open = document.querySelector('.button_open_menu');
if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
element.style.transform = 'translateX(-110%)';
} else {
element.style.transform = 'translateX(0%)';
}
if (transformValue === 'matrix(1, 0, 0, 1, 0, 0)') {
left_frame.style.transform = 'translateX(-110%)';
button_open.style.visibility = 'visible';
right_frame.style.left = '1.25em';
} else {
left_frame.style.transform = 'translateX(0)';
button_open.style.visibility = 'hidden';
right_frame.style.left = '23.25em';
}
}
document.getElementById('button_close').addEventListener('click', changetyle);
</script>
@code {
private List<Models.Wishlist> wishlist;
protected override async Task OnInitializedAsync()
{
wishlist = new List<Models.Wishlist>
{
new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"}
};
private void RedirectToPage(string itemId) {
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
}
private void RedirectToNewChat() {
var url = $"/";
Navigation.NavigateTo(url);
}
private void RedirectToCard(string itemId) {
var url = $"/chat/{itemId}/cart";
Navigation.NavigateTo(url);
}
private async void DeleteWishlist(string itemId) {
await DeleteWish(itemId);
}
public void UpdateSideMenu()
{
StateHasChanged();
}
}

97
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
View File

@ -1,25 +1,72 @@
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Wishlists : ComponentBase
{
private List<Wishlist> wishlist;
protected override async Task OnInitializedAsync()
{
wishlist = new List<Models.Wishlist>
{
new Models.Wishlist {Id = "0", Name = "Gift for Jessica", Type="product", CreateById="0"},
new Models.Wishlist {Id = "1", Name = "Secret Santa", Type="gift", CreateById="1"},
new Models.Wishlist {Id = "2", Name = "Mark’s Birthday", Type="product", CreateById="2"},
new Models.Wishlist {Id = "3", Name = "Garden tools", Type="product", CreateById="2"},
new Models.Wishlist {Id = "4", Name = "Phone charger ", Type="product", CreateById="2"},
new Models.Wishlist {Id = "5", Name = "Garden tools", Type="product", CreateById="2"}
};
}
}
using Microsoft.AspNetCore.Components;
using ShoppingAssistantWebClient.Web.Models;
using GraphQL;
using Newtonsoft.Json;
using ShoppingAssistantWebClient.Web.Network;
namespace ShoppingAssistantWebClient.Web.Shared
{
public partial class NavMenu : ComponentBase
{
[Inject]
private ApiClient _apiClient { get; set; }
public List<Wishlist> Wishlists { get; set; }
public bool isLoading = true;
protected override async Task OnInitializedAsync()
{
await LoadMenus();
}
private async Task LoadMenus()
{
isLoading = true;
var pageNumber = 1;
var request = new GraphQLRequest
{
Query = @"query PersonalWishlistsPage( $pageNumber: Int!, $pageSize: Int!) {
personalWishlistsPage(pageNumber: $pageNumber, pageSize: $pageSize) {
items {
id
name
}
}
}",
Variables = new
{
pageNumber,
pageSize = 10,
}
};
var response = await _apiClient.QueryAsync(request);
var responseData = response.Data;
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
isLoading = false;
}
protected async Task DeleteWish(string wishlistId)
{
var request = new GraphQLRequest
{
Query = @"mutation DeletePersonalWishlist($wishlistId: String!) {
deletePersonalWishlist(wishlistId: $wishlistId) {
id
}
}
",
Variables = new
{
wishlistId
}
};
var response = await _apiClient.QueryAsync(request);
await LoadMenus();
}
}
}

34
ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
View File

@ -4,7 +4,6 @@
height: 100%;
width: 100%;
transition: 1s;
transform: translateX(0%);
}
.logo {
height: 5em;
@ -39,7 +38,7 @@
align-items: center;
border-radius: 0 0 0.6em 0.6em;
background-color: rgb(255, 255, 255);
height: 4em;
height: 3.6em;
left: 0;
bottom: 0;
width: 100%;
@ -64,12 +63,14 @@
}
.wishlist_name {
padding-left: 0.7em;
padding-right: 5em;
width: 10.5em;
white-space: nowrap;
overflow: hidden;
position: absolute;
height: 2.5em;
line-height: 2.5em;
cursor: pointer;
}
.cont_wishlist {
margin-top: 0.4375em;
@ -79,7 +80,7 @@
font-size: 1.1em;
width: 100%;
height:2.5em;
cursor: pointer;
}
.cont_wishlist:hover {
background-color: #e6e6e6;
@ -90,29 +91,40 @@
}
.cont_wishlist:hover .button_open_card{
visibility: visible;
}
.button_delete_chat {
margin-top: 0.65em;
cursor: pointer;
margin-top: 0.55em;
margin-right: 1em;
float: right;
position: relative;
visibility: hidden;
height: 1.2em;
width: 1.2em;
height: 1.4em;
width: 1.4em;
}
.button_open_card {
margin-top: 0.65em;
cursor: pointer;
position: relative;
z-index: 999;
margin-top: 0.55em;
margin-right: 1em;
float: right;
visibility: hidden;
height: 1.2em;
width: 1.3em;
height: 1.4em;
width: 1.5em;
}
.elements_wishlisht::-webkit-scrollbar {
background-color: #009FFF;
border-radius: 20px;
width: 0.2em;
}
.elements_wishlisht::-webkit-scrollbar-thumb {
background-color: #0052CC; /* Колір позиції покажчика */
border-radius: 10px; /* Закруглення країв позиції покажчика */
width: 0.2em;
}
.add_chat {
margin-bottom: 0.3125em;
background-color: #0165FF;
@ -123,7 +135,7 @@
cursor: pointer;
line-height: 2.5em;
}
.add_chat a {
.add_chat div {
justify-content: center;
align-items: center;
border-radius: 0.6em;

16
ShoppingAssistantWebClient.Web/Shared/SurveyPrompt.razor
View File

@ -1,16 +0,0 @@
<div class="alert alert-secondary mt-4">
<span class="oi oi-pencil me-2" aria-hidden="true"></span>
<strong>@Title</strong>
<span class="text-nowrap">
Please take our
<a target="_blank" class="font-weight-bold link-dark" href="https://go.microsoft.com/fwlink/?linkid=2186158">brief survey</a>
</span>
and tell us what you think.
</div>
@code {
// Demonstrates how a parent component can supply parameters
[Parameter]
public string? Title { get; set; }
}

2
ShoppingAssistantWebClient.Web/appsettings.Development.json
View File

@ -1,3 +1,5 @@
{
"ApiUrl": "https://shopping-assistant-api-dev.azurewebsites.net/"
}

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 413 B

3
ShoppingAssistantWebClient.Web/wwwroot/images/send.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 11.0192V0L14 5.50962L0 11.0192ZM1.47368 8.95313L10.2053 5.50962L1.47368 2.06611V4.47656L5.89474 5.50962L1.47368 6.54267V8.95313Z" fill="#4E4E4E" fill-opacity="0.4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 281 B