2nd update

Data/WeatherForecast.cs

@@ -1,15 +0,0 @@
-using System;
-
-namespace HyperCube.Data
-{
-    public class WeatherForecast
-    {
-        public DateTime Date { get; set; }
-
-        public int TemperatureC { get; set; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-
-        public string Summary { get; set; }
-    }
-}

Data/WeatherForecastService.cs

@@ -1,25 +0,0 @@
-using System;
-using System.Linq;
-using System.Threading.Tasks;
-
-namespace HyperCube.Data
-{
-    public class WeatherForecastService
-    {
-        private static readonly string[] Summaries = new[]
-        {
-            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
-        };
-
-        public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
-        {
-            var rng = new Random();
-            return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
-            {
-                Date = startDate.AddDays(index),
-                TemperatureC = rng.Next(-20, 55),
-                Summary = Summaries[rng.Next(Summaries.Length)]
-            }).ToArray());
-        }
-    }
-}

Pages/FetchData.razor

@@ -1,46 +0,0 @@
-@page "/fetchdata"
-
-@using HyperCube.Data
-@inject WeatherForecastService ForecastService
-
-<h1>Weather forecast</h1>
-
-<p>This component demonstrates fetching data from a service.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[] forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
-    }
-}

Pages/Index.razor

@@ -19,7 +19,6 @@
 
 
 @code{
-
     protected override async Task OnInitializedAsync()
     {
 

Pages/ModalWallet.razor

@@ -0,0 +1,113 @@
+<div class="modal" tabindex="-1" role="dialog" style="display:@modalDisplay; overflow: hidden">
+    <div class="modal-container">
+        <div class="modal__body">
+            <div class="modal__body__header">
+                <div class="modal__body__header__info">
+                    <img src="img/packet.svg" alt="">
+                    <p>Цифровые активы</p>
+                </div>
+                <div class="modal__body__header__href">
+                    <a href="">Balans</a>
+                    <a href="">Swap</a>
+                    <a href="">Liquidity</a>
+                </div>
+            </div>
+            <div class="modal__body__container">
+                <div class="modal__body__container__left">
+                    <div class="modal__body__calc__balance__header">
+                        <p>БАЛАНС</p>
+                        <button class="btn_orange">История</button>
+                    </div>
+                    <div class="modal__body__calc__balance__numbers">
+                        <div class="modal__body__calc__balance__numbers__name">
+                            <p>Системы</p>
+                        </div>
+                        <div class="modal__body__calc__balance__numbers__value">
+                            <div class="modal__body__calc__balance__numbers__value__item">
+                                <p>100.890110</p>
+                                <p>ETH</p>
+
+                            </div>
+                            <div class="modal__body__calc__balance__numbers__value__item">
+                                <p>1000.89011</p>
+                                <p>2DH</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal__body__calc__balance__numbers">
+                        <div class="modal__body__calc__balance__numbers__name">
+                            <p>Ваше</p>
+                        </div>
+                        <div class="modal__body__calc__balance__numbers__value">
+                            <div class="modal__body__calc__balance__numbers__value__item">
+                                <p>100.890110</p>
+                                <p>ETH</p>
+
+                            </div>
+                            <div class="modal__body__calc__balance__numbers__value__item">
+                                <p>1000.89011</p>
+                                <p>2DH</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal__body__calc__balance__button">
+                        <button class="btn_orange btn_center">Депозиты</button>
+                        <button class="btn_orange btn_center">Вывод</button>
+                    </div>
+                </div>
+                <div class="modal__body__container__right">
+                    <p class="modal__body__calc__change__header">Обмен</p>
+                    <p class="modal__body__calc__change__desc">Trade tokens in an istant</p>
+                    <div class="modal__input__box" place="From" balanc='0.00000410' currency='ETH'>
+                        <input type="text" class="modal__input">
+                        <select type="select" class="modal__select">
+                            <option>ETH</option>
+                            <option>2DH</option>
+                        </select>
+                    </div>
+                    <div class="modal__input__box" place="To" balanc='0.00000410' currency='2DH'>
+                        <input type="text" class="modal__input">
+                        <select type="select" class="modal__select">
+                            <option>2DH</option>
+                            <option>ETH</option>
+                        </select>
+                    </div>
+                    <div class="modal__input__total">
+                        <p>Price</p>
+                        <div class="modal_input_total_value">
+                            <p>1.000000050</p>
+                            <p>2DH</p>
+                        </div>
+                    </div>
+                    <div class="modal__input__button">
+                        <button class="btn_orange btn_center">ОК</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <a href="" class="modal_close" @onclick="@Close">&#10006;</a>
+    </div>
+</div>
+
+@code {
+    [Inject]
+    public IJSRuntime JsRuntime { get; set; }
+
+    [Parameter]
+    public RenderFragment Title { get; set; }
+
+    private string modalDisplay = "none;";
+
+
+    public void Open()
+    {
+        JsRuntime.InvokeVoidAsync("BodyScroll", false);
+        modalDisplay = "block;";
+    }
+
+    public void Close()
+    {
+        JsRuntime.InvokeVoidAsync("BodyScroll", true);
+        modalDisplay = "none";
+    }
+}

Shared/Sidebar.razor

@@ -24,7 +24,7 @@
                 <a href="" title="Правила системы" class='js-open-modal' data-modal="rules-modal">
                     <img src="img/rules.svg" alt="">
                 </a>
-                <a href="" title="Цифровые активы" class='js-open-modal' data-modal="activites-modal">
+                <a href="" title="Цифровые активы" @onclick="@WalletClick">
                     <img src="img/packet.svg" alt="">
                 </a>
             </div>
@@ -37,5 +37,16 @@
                 </a>
             </div>
         </nav>
+
+    <HyperCube.Pages.ModalWallet @ref="modalWallet">
+        <Title></Title>
+    </HyperCube.Pages.ModalWallet>
+
+    <HyperCube.Pages.ModalInfo @ref="modalInfo">
+        <Title></Title>
+        <Body>
+        </Body>
+    </HyperCube.Pages.ModalInfo>
+
     </Authorized>
 </AuthorizeView>

Shared/Sidebar.razor.cs

@@ -4,70 +4,26 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Identity;
-using HyperCube.Models;
+using HyperCube.Pages;
 using Console = HyperCube.Utils.AdvConsole;
 
 namespace HyperCube.Shared
 {
     public partial class Sidebar : ComponentBase
     {
-        [Inject]
-        public AuthenticationStateProvider AuthenticationStateProvider { get; set; }
-        [Inject]
-        public UserManager<IdentityUser> UserManager { get; set; }
-
-        AccountModel account;
-        List<Role> roles;
-        //string rr = "";
-        //roles = account.roles;
+        ModalWallet modalWallet { get; set; }
+        ModalInfo modalInfo { get; set; }
 
         protected override async Task OnInitializedAsync()
         {
-            account = await GetCurrentAcc();
-            if (account != null)
-                account.RolesChanged += Change;
-        }
-
-        public async Task InitializeAccount()
-        {
-            AccountModel.Current = await GetCurrentAcc();
-            Console.WriteLine("InitializeAccount in Sidebar " + AccountModel.Current.Name);
-            await Rerender();
-        }
-
-        private async Task<AccountModel> GetCurrentAcc()
-        {
-            AccountModel account = new();
-
-            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
-            var user = authState.User;
-
-            if (user.Identity.IsAuthenticated)
-            {
-                var currentUser = await UserManager.GetUserAsync(user);
-                account.UUID = currentUser.Id;
-                //account.Name = currentUser.UserName;
-                //account.Email = currentUser.Email;
+            
 
-                var acc = AccountModel.Find(account.UUID);
-                if (acc != null)
-                    account = acc;
-                ///tmp
-
-                //account.AccRole = Role.User;
-                //account.Name = "test";
-                return account;
-            }
-
-            return null;
         }
 
-        private void Change(int count)
+        void WalletClick()
         {
-            Console.WriteLine($"Sidebar role changed, count: {count}");
-            Rerender();
+            modalWallet.Open();
+            //modalInfo.Open("Test");
         }
-
-        private async Task Rerender() { StateHasChanged(); }
     }
 }

Startup.cs

@@ -42,7 +42,6 @@ namespace HyperCube
             services.AddServerSideBlazor();
             services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();
             services.AddDatabaseDeveloperPageExceptionFilter();
-            services.AddSingleton<WeatherForecastService>();
             services.AddMvc(options => options.EnableEndpointRouting = false).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0);
         }
 

wwwroot/js/main.js

@@ -1,90 +1,105 @@
+function BodyScroll(mode)
+{
+    if (!mode)
+        $('body').css('overflow', 'hidden');
+    else
+        $('body').css('overflow', 'auto');
+}
+
+
 // Загрузка файлов
 
-$('.second-block__input__file').change(function(){
+//$('.second-block__input__file').change(function(){
 
-    var inputName  = $(this).attr('data-files');
+//    var inputName  = $(this).attr('data-files');
 
-    var fileName = $('.js-input-file[data-files="' + inputName + '"]');
+//    var fileName = $('.js-input-file[data-files="' + inputName + '"]');
 
-    fileName.html($(this)[0].files[0].name);
-});
+//    fileName.html($(this)[0].files[0].name);
+//});
 
 
 //Slider
 
-$(document).ready(function(){
-    $('.slider').slick({
+//$(document).ready(function(){
+//    $('.slider').slick({
 
-        prevArrow: $('.footer-block__left__button'),
-        nextArrow: $('.footer-block__right__button'),
-        dots: true
+//        prevArrow: $('.footer-block__left__button'),
+//        nextArrow: $('.footer-block__right__button'),
+//        dots: true
 
-    });
-});
+//    });
+//});
 
 
 // Логика работы модального окна
 
-$('.js-open-modal').click(function(e){
-    e.preventDefault();
-    e.stopPropagation();
+//$('.js-open-modal').click(function (e) {
+
+//    console.log('modal!!!')
 
-    var modalName  = $(this).attr('data-modal');
+//    e.preventDefault();
+//    e.stopPropagation();
 
-    var modal = $('.modal[data-modal="' + modalName + '"]');
+//    var modalName  = $(this).attr('data-modal');
 
+//    var modal = $('.modal[data-modal="' + modalName + '"]');
 
-    modal.fadeIn(600);
 
-    $('.modal_close').click(function(e){
-        e.preventDefault();
+//    modal.fadeIn(600);
+
+//    $('.modal_close').click(function(e){
+//        e.preventDefault();
         
-        modal.fadeOut(600);
-    })
+//        modal.fadeOut(600);
+//    })
     
 
-});
+//});
 
 // Работа вкладок на рабочем столе
 
-$('.tab-button').click(function(){
+//$('.tab-button').click(function(){
 
-    var tabName  = $(this).attr('data-content');
+//    var tabName  = $(this).attr('data-content');
 
-    var tab = $('.second-block__form[data-content="' + tabName + '"]');
+//    var tab = $('.second-block__form[data-content="' + tabName + '"]');
 
-    $(this).addClass('active');
-    $(".tab-button").not(this).removeClass('active');
+//    $(this).addClass('active');
+//    $(".tab-button").not(this).removeClass('active');
 
-    tab.addClass('visible');
-    $(".second-block__form").not(tab).removeClass('visible');
-});
+//    tab.addClass('visible');
+//    $(".second-block__form").not(tab).removeClass('visible');
+//});
 
 
-$("#sort_libary").click(function(e) {
-    e.preventDefault();
-    $(".third-block__dropbox").fadeToggle(200);
-});
+//$("#sort_libary").click(function(e) {
+//    e.preventDefault();
+//    $(".third-block__dropbox").fadeToggle(200);
+//});
 
 
 // Закрыть окно по клику вне его
 
-$(document).click(function (e){
-    const isModal = $(e.target).closest('.modal__body').length;
-    if (!isModal) {
-        $(".modal").fadeOut(600);
-        $('html').removeClass('no_scroll');
-    }
-});
+//$(document).click(function (e) {
+
+//    console.log('click out of modal!!!')
+
+//    const isModal = $(e.target).closest('.modal__body').length;
+//    if (!isModal) {
+//        $(".modal").fadeOut(600);
+//        $('html').removeClass('no_scroll');
+//    }
+//});
 
-$(document).click(function (e){
-    const isDropbox = $(e.target).closest('.header-block__span, .third-block__dropbox').length;
+//$(document).click(function (e){
+//    const isDropbox = $(e.target).closest('.header-block__span, .third-block__dropbox').length;
 
-    if (!isDropbox) {
-        $(".third-block__dropbox").fadeOut(200);
-    }
+//    if (!isDropbox) {
+//        $(".third-block__dropbox").fadeOut(200);
+//    }
     
-});
+//});
 
 // $(document).mouseup(function (e){
 //     var div = $(".header-block__span, .third-block__dropbox");