shopping-assistant-web-client/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
2023-11-20 15:48:48 +00:00

184 lines
5.0 KiB
Plaintext

@using Models.GlobalInstances
@using System.Linq
@using Microsoft.AspNetCore.Components
@using Microsoft.JSInterop
@inject NavigationManager Navigation
@inject IJSRuntime JSRuntime;
<div id="leftframe" class="left_frame">
<div class="logo">
<img src="/images/logo.svg" alt="Logo site">
<span class="logo_name">CARTAID</span>
</div>
<div class="menu">
<a id="button_close" class="button_close_menu">
<span></span>
<span></span>
<span></span>
</a>
<div class="elements_wishlisht" id="elements_wishlisht" >
<div class="add_chat" @onclick="RedirectToNewChat" >
<div>
<span>Search</span>
<span class="plus">+</span>
</div>
</div>
<div class="wishlist_names">
@if(!isLoading){
@foreach (var item in Wishlists)
{
<section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
<div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
<img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
<img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
</section>
}
}
</div>
</div>
<div class="line"></div>
<div class="elements">
<div class="info_user">
<img src="/images/avatar.jpg" alt="Avatar user">
<!-- Change to name -->
<span class="user_name">@GlobalUser.Id</span>
</div>
</div>
</div>
</div>
<script>
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)') {
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);
/*
window.getScrollTop = function (element) {
return element.scrollTop;
};
window.getOffsetHeight = function (element) {
return element.offsetHeight;
};
window.getScrollHeight = function (element) {
return element.scrollHeight;
};
window.setScrollTop = function (element, scrollTop) {
element.scrollTop = scrollTop;
};
*/
</script>
<script>
function UpdateMenu(wishlistId)
{
DotNet.invokeMethodAsync('ShoppingAssistantWebClient.Web', 'Update', wishlistId);
}
</script>
@code {
[Parameter] public string chatId { get; set; }
private string selectedWishlistId;
private static NavMenu _app;
public NavMenu ()
{
_app = this;
}
[JSInvokable]
public static void Update(string wishlistId)
{
_app.LoadMenus(1,200);
_app.selectedWishlistId=wishlistId;
}
private void RedirectToPage(string itemId) {
_app.selectedWishlistId = itemId;
var url = $"/chat/{itemId}";
Navigation.NavigateTo(url);
}
private void RedirectToNewChat() {
var url = $"/";
Navigation.NavigateTo(url);
}
private void RedirectToCart(string itemId) {
var url = $"/cart/{itemId}";
Navigation.NavigateTo(url);
}
private async void DeleteWishlist(string itemId) {
await DeleteWish(itemId);
}
/*
private int savedScrollTop = 0;
private ElementReference wishlishtRef;
private async Task OnScroll()
{
var scrollTop = await JSRuntime.InvokeAsync<int>("getScrollTop", wishlishtRef);
var offsetHeight = await JSRuntime.InvokeAsync<int>("getOffsetHeight", wishlishtRef);
var scrollHeight = await JSRuntime.InvokeAsync<int>("getScrollHeight", wishlishtRef);
if (scrollTop + offsetHeight > scrollHeight - 100)
{
savedScrollTop = scrollTop;
currentPage++;
await LoadMenus(currentPage, pageSize);
await InvokeAsync(() => JSRuntime.InvokeVoidAsync("setScrollTop", wishlishtRef, savedScrollTop));
}
}
*/
}