feat: splash screen and dialog navigation event

This commit is contained in:
Mikhail Shabanov committed 2021-04-06 18:17:22 +02:00
1 parent 38c631bc44
commit 2fba32b5b4
17 files changed
+138 -13

No files matched your search

+1 -1
View File
@@ -8,7 +8,7 @@ Detailed player & tank statistics and history for [World of Tanks: Blitz](ht
## Technologies used:
- Backend - GraphQL API based on .NET 5.0 Web server ([GraphQL HotChocolate](https://hotchocolate.io/) + MongoDB)
- Frontent - Blazor WebAssembly (coming soon)
- Frontent - Blazor WebAssembly + [Radzen components](https://blazor.radzen.com/)
## Local MongoDB Installation for debugging ([Docker desktop for Windows](https://www.docker.com/products/docker-desktop))
For the developing and debugging purposes, you have to istall MongoDB locally on your dev machine and run it as a service. Alternatively, if you have istalled [Docker desktop for Windows](https://www.docker.com/products/docker-desktop), you can deploy MongoDB inside the container. To do so, create an empty folder and make 2 files there: ```docker-compose.yml``` and ```.env```. Second one will contain sensitive data.
@@ -0,0 +1,9 @@
using MediatR;
namespace WotBlitzStatisticsPro.Blazor.Messages
{
public class LoginToWgMessage: INotification
{
}
}
@@ -0,0 +1,16 @@
using MediatR;
namespace WotBlitzStatisticsPro.Blazor.Messages
{
public class OpenPlayerInfoMessage: INotification
{
public long AccountId { get; }
public bool IsLoggedIn { get; }
public OpenPlayerInfoMessage(long accountId, bool isLoggedIn)
{
AccountId = accountId;
IsLoggedIn = isLoggedIn;
}
}
}
+21 -2
View File
@@ -1,6 +1,25 @@
@page "/"
@using MediatR
@using WotBlitzStatisticsPro.Blazor.Messages
@using WotBlitzStatisticsPro.Blazor.Model
@inject IMediator Mediator
<div class="splash">
<div class="splash-content">
<RadzenLabel Text="Welcome to WOT Blitz statistics application!" Style="margin: 30px 0px 100px 0px"></RadzenLabel>
<h1>Hello, world!</h1>
<RadzenButton Click=@(async args => { await Mediator.Publish(new LoginToWgMessage()); })
Icon="vpn_key"
Text="Login with WG.net ID"
Style="width: 250px; margin: 30px" />
<RadzenButton Click=@(async args => { await Mediator.Publish(new OpenSearchDialogMessage(DialogType.FindPlayer)); })
Icon="person_search"
Text="Search player"
Style="width: 250px; margin: 30px" />
<RadzenButton Click=@(async args => { await Mediator.Publish(new OpenSearchDialogMessage(DialogType.FindClan)); })
Icon="screen_search_desktop"
Text="Search clan"
Style="width: 250px; margin: 30px" />
Welcome to your new app.
</div>
</div>
@@ -0,0 +1,17 @@
.splash {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.splash-content {
background-image: url('/Berlin.png');
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 375px;
height: 667px;
}
@@ -0,0 +1,5 @@
@page "/player/{AccountId:long}"
@inherits PlayerInfoLayoutBase
<h3>PlayerInfoLayout</h3>
AccountId: @AccountId
@@ -0,0 +1,11 @@
using Microsoft.AspNetCore.Components;
namespace WotBlitzStatisticsPro.Blazor.Pages
{
public class PlayerInfoLayoutBase: ComponentBase
{
[Parameter]
public long AccountId { get; set; }
}
}
@@ -1,8 +1,4 @@
@using WotBlitzStatisticsPro.Blazor.Model
@inherits SearchDialogTypeBase
<h3>SearchDialog</h3>
@DialogType
@code {
[Parameter]
public DialogType DialogType { get; set; }
}
<RadzenButton Click=@(args => OnClick()) Text="Ok" Style="margin-bottom: 20px; width: 150px" />
@@ -0,0 +1,27 @@
using System.Threading.Tasks;
using MediatR;
using Microsoft.AspNetCore.Components;
using Radzen;
using WotBlitzStatisticsPro.Blazor.Messages;
using WotBlitzStatisticsPro.Blazor.Model;
namespace WotBlitzStatisticsPro.Blazor.Pages
{
public class SearchDialogTypeBase: ComponentBase
{
[Inject]
private DialogService DialogService { get; set; }
[Inject]
private IMediator Mediator { get; set; }
[Parameter]
public DialogType DialogType { get; set; }
public async Task OnClick()
{
await Mediator.Publish(new OpenPlayerInfoMessage(123456789, false));
DialogService.Close(true);
}
}
}
+2
View File
@@ -23,6 +23,8 @@ namespace WotBlitzStatisticsPro.Blazor
builder.Services.AddMediatR(typeof(Program));
builder.Services.AddSingleton<NavigationMessagesInterceptor>();
await builder.Build().RunAsync();
}
}
@@ -0,0 +1,23 @@
using System.Threading;
using System.Threading.Tasks;
using MediatR;
using Microsoft.AspNetCore.Components;
using WotBlitzStatisticsPro.Blazor.Messages;
namespace WotBlitzStatisticsPro.Blazor.Services
{
public class NavigationMessagesInterceptor: INotificationHandler<OpenPlayerInfoMessage>
{
private readonly NavigationManager _navigationManager;
public NavigationMessagesInterceptor(NavigationManager navigationManager)
{
_navigationManager = navigationManager;
}
public Task Handle(OpenPlayerInfoMessage notification, CancellationToken cancellationToken)
{
_navigationManager.NavigateTo($"/player/{notification.AccountId}");
return Task.CompletedTask;
}
}
}
@@ -2,6 +2,7 @@
<div>
<RadzenPanelMenu Click="@(MenuClicked)">
<RadzenPanelMenuItem Text="Home" Icon="home"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Login with WG.net ID" Icon="vpn_key"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Search player" Icon="person_search"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Search clan" Icon="screen_search_desktop"></RadzenPanelMenuItem>
</RadzenPanelMenu>
@@ -30,6 +30,9 @@ namespace WotBlitzStatisticsPro.Blazor.Shared
case "Home":
NavManager.NavigateTo("/");
break;
case "Login with WG.net ID":
await Mediator.Publish(new LoginToWgMessage());
break;
case "Search player":
await Mediator.Publish(new OpenSearchDialogMessage(DialogType.FindPlayer));
//await SearchDialogService.OpenSearchDialog(DialogType.FindPlayer);
@@ -18,8 +18,4 @@
<ServiceWorker Include="wwwroot\service-worker.js" PublishedContent="wwwroot\service-worker.published.js" />
</ItemGroup>
<ItemGroup>
<Folder Include="Messages\" />
</ItemGroup>
</Project>
Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.