Basic WEB is working

This commit is contained in:
Michał Zieliński
2025-06-23 15:07:13 +02:00
parent acfc84fcd9
commit c1d0c0bd94
22 changed files with 184 additions and 112 deletions

2
.gitignore vendored
View File

@@ -70,7 +70,6 @@ project.fragment.lock.json
_ReSharper*/
*.resharper
*.dotCover
.idea/
*.coverage
*.coveragejson
TestResult.xml
@@ -81,7 +80,6 @@ nunit-*.xml
.DS_Store
# Rider logs/cache
.idea/
.idea/.idea.*
.idea/*workspace*
.idea/httpRequests

View File

@@ -1,4 +1,5 @@
using Microsoft.Extensions.Logging;
using MudBlazor.Services;
namespace Bimix.UI.Mobile;
@@ -18,6 +19,10 @@ public static class MauiProgram
builder.Logging.AddDebug();
#endif
builder.Services.AddMudBlazorDialog();
builder.Services.AddMudBlazorSnackbar();
builder.Services.AddMudBlazorResizeListener();
return builder.Build();
}
}

View File

@@ -13,6 +13,7 @@
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.17" />
<PackageReference Include="MudBlazor" Version="8.8.0" />
</ItemGroup>
<ItemGroup>
@@ -20,4 +21,8 @@
<ProjectReference Include="..\Bimix.Application\Bimix.Application.csproj" />
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
</Project>

View File

@@ -1,3 +0,0 @@
<div class="my-component">
This component is defined in the <strong>Bimix.UI.Shared</strong> library.
</div>

View File

@@ -1,6 +0,0 @@
.my-component {
border: 2px dashed red;
padding: 1em;
margin: 1em 0;
background-image: url('background.png');
}

View File

@@ -0,0 +1,5 @@
@page "/dashboard"
@using MudBlazor
<MudText Typo="Typo.h4">Dashboard</MudText>
<p>Tutaj znajdzie się panel ogólny aplikacji</p>

View File

@@ -0,0 +1,15 @@
@page "/"
@inject NavigationManager Navigation
@code
{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
Navigation.NavigateTo("/dashboard");
}
await base.OnAfterRenderAsync(firstRender);
}
}

View File

@@ -0,0 +1,10 @@
@using Microsoft.AspNetCore.Components.Routing
@using MudBlazor
<MudNavMenu>
<MudNavLink href="dashboard" Icon="@Icons.Material.Filled.Dashboard" Match="NavLinkMatch.All">
Dashboard
</MudNavLink>
<MudNavLink Href="products" Icon="@Icons.Material.Filled.List" Match="NavLinkMatch.All">
Produkty
</MudNavLink>
</MudNavMenu>

View File

@@ -0,0 +1,5 @@
@page "/products"
@using MudBlazor
<MudText Typo="Typo.h4">Produkty</MudText>
<p>Lista produktów zostanie tutaj zaimplementowana</p>

View File

@@ -0,0 +1,18 @@
@using Microsoft.AspNetCore.Components.Routing
@using MudBlazor
<Router AppAssembly="@typeof(Routes).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="routeData" Selector="h1" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<MudCard Elevation="0">
<MudText Typo="Typo.h6">
Strona nieznaleziona.
</MudText>
</MudCard>
</LayoutView>
</NotFound>
</Router>

View File

@@ -1,36 +0,0 @@
using Microsoft.JSInterop;
namespace Bimix.UI.Shared;
// This class provides an example of how JavaScript functionality can be wrapped
// in a .NET class for easy consumption. The associated JavaScript module is
// loaded on demand when first needed.
//
// This class can be registered as scoped DI service and then injected into Blazor
// components for use.
public class ExampleJsInterop : IAsyncDisposable
{
private readonly Lazy<Task<IJSObjectReference>> moduleTask;
public ExampleJsInterop(IJSRuntime jsRuntime)
{
moduleTask = new (() => jsRuntime.InvokeAsync<IJSObjectReference>(
"import", "./_content/Bimix.UI.Shared/exampleJsInterop.js").AsTask());
}
public async ValueTask<string> Prompt(string message)
{
var module = await moduleTask.Value;
return await module.InvokeAsync<string>("showPrompt", message);
}
public async ValueTask DisposeAsync()
{
if (moduleTask.IsValueCreated)
{
var module = await moduleTask.Value;
await module.DisposeAsync();
}
}
}

View File

@@ -0,0 +1,66 @@
@using MudBlazor
@inherits LayoutComponentBase
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
<MudLayout>
<MudBreakpointProvider OnBreakpointChanged="OnBreakpointChanged"></MudBreakpointProvider>
<MudAppBar Elevation="0">
<MudIconButton
Icon="@Icons.Material.Filled.Menu"
Color="Color.Inherit"
Edge="Edge.Start"
OnClick="ToggleDrawer"
Class="mud-hidden-md-up"/>
<MudSpacer/>
<MudText Typo="Typo.h6">Bimix</MudText>
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen"
Anchor="Anchor.Start"
Variant="@_drawerVariant"
Elevation="1"
ClipMode="DrawerClipMode.Always"
Class="mud-width-250">
<MudNavMenu>
<MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink>
<MudNavLink Href="/products" Icon="@Icons.Material.Filled.Inventory">Products</MudNavLink>
</MudNavMenu>
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="my-4">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
@code {
private bool _drawerOpen = true;
private DrawerVariant _drawerVariant = DrawerVariant.Persistent;
void ToggleDrawer()
{
Console.WriteLine($"ToogleDrawer clickkk {DateTime.Now}");
_drawerOpen = !_drawerOpen;
}
private void OnBreakpointChanged(Breakpoint breakpoint)
{
if (breakpoint < Breakpoint.Md)
{
_drawerVariant = DrawerVariant.Temporary;
_drawerOpen = false;
}
else
{
_drawerVariant = DrawerVariant.Persistent;
_drawerOpen = true;
}
StateHasChanged();
}
}

View File

@@ -1 +1,11 @@
@using Microsoft.AspNetCore.Components.Web
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Bimix.UI.Shared
@using Bimix.UI.Shared.Components
@using MudBlazor

Binary file not shown.

Before

Width:  |  Height:  |  Size: 378 B

View File

@@ -1,6 +0,0 @@
// This is a JavaScript module that is loaded on demand. It can export any number of
// functions, and may import other JavaScript modules if required.
export function showPrompt(message) {
return prompt(message, 'Type anything here');
}

View File

@@ -10,4 +10,8 @@
<ProjectReference Include="..\Bimix.UI.Shared\Bimix.UI.Shared.csproj" />
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\" />
</ItemGroup>
</Project>

View File

@@ -5,14 +5,31 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="app.css"/>
<link rel="stylesheet" href="Bimix.UI.Web.styles.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="Bimix.UI.Web.styles.css" rel="stylesheet" />
<HeadOutlet />
</head>
<body>
<Routes/>
<Bimix.UI.Shared.Components.Routes @rendermode="InteractiveServer" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.web.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>

View File

@@ -1,7 +0,0 @@
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.

View File

@@ -1,6 +0,0 @@
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
<FocusOnNavigate RouteData="routeData" Selector="h1"/>
</Found>
</Router>

View File

@@ -8,3 +8,6 @@
@using Microsoft.JSInterop
@using Bimix.UI.Web
@using Bimix.UI.Web.Components
@using Bimix.UI.Shared
@using Bimix.UI.Shared.Components
@using MudBlazor

View File

@@ -1,27 +1,31 @@
using Bimix.UI.Shared;
using Bimix.UI.Web.Components;
using MudBlazor.Services;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddMudServices();
builder.Services.AddHttpClient("BimixAPI", client =>
{
client.BaseAddress = new Uri("https://localhost:7071");
});
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
.AddInteractiveServerRenderMode()
.AddAdditionalAssemblies(typeof(MainLayout).Assembly);
app.Run();

View File

@@ -1,29 +0,0 @@
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}