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

Create connection to api

Browse Source
This commit is contained in:
––AsTroLog 2023-11-05 16:18:31 +00:00
parent f8a32070c5
commit 32764e3040
8 changed files with 203 additions and 69 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; }
}
}

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

@ -23,25 +23,26 @@
<ul class="chat_box"> <ul class="chat_box">
<li class="chat_outgoing"> @if(!isLoading && Messages!=null){
<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> @foreach (var item in Messages){
</li>
<li class=" chat_incoming"> if(item.Role!="User"){
<p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
<br> <li class=" chat_incoming">
How many external monitors do you want to connect to your MacBook? <p>@item.Text</p>
</p> </li>
</li>
<li class="chat_outgoing"> }else{
<p>7</p>
</li> <li class="chat_outgoing">
<li class=" chat_incoming"> <p>@item.Text</p>
<p>Thank you. Here is the next question: </li>
<br>
What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA) }
</p> }
</li>
}
</ul> </ul>
@ -71,9 +72,9 @@
<div class="chat_input"> <div class="chat_input">
<input class="input_messages" type="text" id="chatInput" <input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for...."> placeholder="Describe what you are looking for....">
<img class="button_sende" src="/images/send.svg" alt="Send message"> <img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
</div> </div>
</div> </div>
@ -89,4 +90,18 @@
@code { @code {
[Parameter] public string chatId { get; set; } [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();
}
}
} }

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

@ -9,40 +9,91 @@ namespace ShoppingAssistantWebClient.Web.Pages;
public partial class Chat : ComponentBase public partial class Chat : ComponentBase
{ {
[Inject] [Inject]
private ApiClient _apiClient { get; set; } private ApiClient _apiClient { get; set; }
public List<Messages> Messages { get; set; }
protected override async Task OnInitializedAsync() public bool isLoading = true;
private string inputValue = "";
protected override async Task OnInitializedAsync()
{ {
await LoadMenus(); await LoadMessages();
} }
private async Task LoadMenus() private async Task LoadMessages()
{ {
var pageNumber = 1;
isLoading = true;
int pageNumber = 1;
string wishlistId = chatId;
var request = new GraphQLRequest var request = new GraphQLRequest
{ {
Query = @"mutation StartPersonalWishlist { Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
startPersonalWishlist(dto: { type: product, firstMessageText: hello }) { messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize)
id {
name items {
type id
createdById text
} role
}", createdById
}
}
}",
Variables = new Variables = new
{ {
pageNumber = pageNumber, wishlistId,
pageSize = 12, 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); var response = await _apiClient.QueryAsync(request);
await LoadMessages();
}
}

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

@ -56,6 +56,7 @@
} }
.possible_options { .possible_options {
visibility: hidden;
position: absolute; position: absolute;
bottom: 5.5em; bottom: 5.5em;
margin-left: 25%; margin-left: 25%;

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

@ -19,10 +19,10 @@
<div class="title_two_frame">What you're looking for</div> <div class="title_two_frame">What you're looking for</div>
<div class="switch"> <div class="switch">
<div class="switch_product" id="choose_product"> <div @onclick="Сhoose_product"class="switch_product" id="choose_product">
Product Product
</div> </div>
<div class="switch_gift" id="choose_gift"> <div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
Gift Gift
</div> </div>
</div> </div>
@ -52,9 +52,9 @@
</div> </div>
<div class="chat_input"> <div class="chat_input">
<input class="input_messages" type="text" id="chatInput" <input @bind="inputValue" class="input_messages" type="text" id="chatInput"
placeholder="Describe what you are looking for...."> placeholder="Describe what you are looking for....">
<img class="button_sende" src="/images/send.svg" alt="Send message"> <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
</div> </div>
</div> </div>
@ -68,12 +68,15 @@
var choose_product = document.getElementById("choose_product"); var choose_product = document.getElementById("choose_product");
var switchGi = document.querySelector(".switch_gift"); var switchGi = document.querySelector(".switch_gift");
var switchProd = document.querySelector(".switch_product"); var switchProd = document.querySelector(".switch_product");
var choose = "Product";
function switchGift() { function switchGift() {
choose_gift.style.backgroundColor = "#0052CC"; choose_gift.style.backgroundColor = "#0052CC";
choose_product.style.backgroundColor = "transparent"; choose_product.style.backgroundColor = "transparent";
switchGi.style.color = "white"; switchGi.style.color = "white";
switchProd.style.color = "#202124"; switchProd.style.color = "#202124";
choose = "Gift";
} }
function switchProduct() { function switchProduct() {
@ -81,6 +84,8 @@
choose_gift.style.backgroundColor = "transparent"; choose_gift.style.backgroundColor = "transparent";
switchProd.style.color = "white"; switchProd.style.color = "white";
switchGi.style.color = "#202124"; switchGi.style.color = "#202124";
choose = "Product";
} }
document.getElementById('choose_gift').addEventListener('click', switchGift); document.getElementById('choose_gift').addEventListener('click', switchGift);
@ -88,3 +93,13 @@
document.getElementById('button_open').addEventListener('click', changetyle); document.getElementById('button_open').addEventListener('click', changetyle);
</script> </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);
}
}
}
}

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

@ -3,7 +3,6 @@
<div id="leftframe" class="left_frame"> <div id="leftframe" class="left_frame">
<div class="logo"> <div class="logo">
<img src="/images/logo.svg" alt="Logo site"> <img src="/images/logo.svg" alt="Logo site">
<span class="logo_name">CARTAID</span> <span class="logo_name">CARTAID</span>
@ -39,11 +38,8 @@
</section> </section>
} }
}else{
<div>loading ...</div>
} }
</div> </div>
</div> </div>
@ -58,10 +54,8 @@
</div> </div>
</div> </div>
</div> </div>
@ -85,20 +79,12 @@
right_frame.style.left = '23.25em'; right_frame.style.left = '23.25em';
} }
} }
document.getElementById('button_close').addEventListener('click', changetyle); document.getElementById('button_close').addEventListener('click', changetyle);
</script> </script>
@code { @code {
private void RedirectToPage(string itemId) { private void RedirectToPage(string itemId) {
var url = $"/chat/{itemId}"; var url = $"/chat/{itemId}";
Navigation.NavigateTo(url); Navigation.NavigateTo(url);
@ -117,4 +103,9 @@
} }
public void UpdateSideMenu()
{
StateHasChanged();
}
} }

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

@ -11,23 +11,14 @@ namespace ShoppingAssistantWebClient.Web.Shared
[Inject] [Inject]
private ApiClient _apiClient { get; set; } private ApiClient _apiClient { get; set; }
//public string jwt;
public List<Wishlist> Wishlists { get; set; } public List<Wishlist> Wishlists { get; set; }
public bool isLoading = true; public bool isLoading = true;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
//jwt = _apiClient.JwtToken;
await LoadMenus(); await LoadMenus();
} }
private async Task LoadMenus() private async Task LoadMenus()
{ {
isLoading = true; isLoading = true;
var pageNumber = 1; var pageNumber = 1;
var request = new GraphQLRequest var request = new GraphQLRequest
@ -53,7 +44,6 @@ namespace ShoppingAssistantWebClient.Web.Shared
var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items); var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse); this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
isLoading = false; isLoading = false;
} }
protected async Task DeleteWish(string wishlistId) protected async Task DeleteWish(string wishlistId)
@ -74,7 +64,7 @@ namespace ShoppingAssistantWebClient.Web.Shared
}; };
var response = await _apiClient.QueryAsync(request); var response = await _apiClient.QueryAsync(request);
var responseData = response.Data; await LoadMenus();
} }
} }