Made home page and startet the layout for settings home page
This commit is contained in:
Alex Pedersen
@@ -1,30 +1,11 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<FluentLayout>
|
||||
<FluentLayoutItem Area="LayoutArea.Header">
|
||||
<FluentLayoutHamburger />
|
||||
Pos.Web
|
||||
</FluentLayoutItem>
|
||||
<FluentLayoutItem Area="LayoutArea.Navigation">
|
||||
<NavMenu />
|
||||
</FluentLayoutItem>
|
||||
<FluentLayoutItem Area="LayoutArea.Content" Class="main">
|
||||
<div class="content">
|
||||
@Body
|
||||
</div>
|
||||
</FluentLayoutItem>
|
||||
|
||||
<FluentLayoutItem Area="LayoutArea.Footer">
|
||||
<div style="display: flex">
|
||||
<FluentLink Href="https://www.fluentui-blazor.net" Target="LinkTarget.Blank" IconEnd="@(new Icons.Regular.Size16.ArrowExit())">
|
||||
Documentation and demos
|
||||
</FluentLink>
|
||||
<FluentSpacer />
|
||||
<FluentLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor" Target="LinkTarget.Blank" IconEnd="@(new Icons.Regular.Size16.ArrowExit())">
|
||||
About Blazor
|
||||
</FluentLink>
|
||||
</div>
|
||||
</FluentLayoutItem>
|
||||
</FluentLayout>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<FluentNav Id="main-menu" Width="260px">
|
||||
<FluentNavItem Href="/" Match="NavLinkMatch.All" IconRest="@(new Icons.Regular.Size20.Home())" IconActive="@(new Icons.Filled.Size20.Home())">Home</FluentNavItem>
|
||||
<FluentNavItem Href="counter" IconRest="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconActive="@(new Icons.Filled.Size20.NumberSymbolSquare())">Counter</FluentNavItem>
|
||||
<FluentNavItem Href="weather" IconRest="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconActive="@(new Icons.Filled.Size20.WeatherPartlyCloudyDay())">Weather</FluentNavItem>
|
||||
</FluentNav>
|
||||
|
||||
@code {
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
@page "/counter"
|
||||
|
||||
<PageTitle>Counter</PageTitle>
|
||||
|
||||
<h1>Counter</h1>
|
||||
|
||||
<div role="status" style="display: flex; align-items: center; gap: 12px; padding-bottom: 1em;">
|
||||
Current count: <FluentBadge Shape="BadgeShape.Rounded" Content="@($"{currentCount}")" />
|
||||
</div>
|
||||
|
||||
<FluentButton Appearance="ButtonAppearance.Primary" OnClick="@IncrementCount">Click me</FluentButton>
|
||||
|
||||
@code {
|
||||
private int currentCount = 0;
|
||||
|
||||
private void IncrementCount()
|
||||
{
|
||||
currentCount++;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,58 @@
|
||||
@page "/"
|
||||
@rendermode InteractiveServer
|
||||
@implements IDisposable
|
||||
@using System.Globalization
|
||||
@inject NavigationManager Nav
|
||||
@page "/"
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
<header class="top-nav">
|
||||
<div class="brand">Indstilinger</div>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
<time datetime="@_currentTime.ToString("O")">
|
||||
@_currentTime.ToString(
|
||||
"dddd d. MMMM yyyy · HH:mm",
|
||||
_danishCulture)
|
||||
</time>
|
||||
</header>
|
||||
|
||||
Welcome to your new Fluent Blazor app.
|
||||
<div class="home-container">
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large">
|
||||
Kassesalg
|
||||
</FluentButton>
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large">
|
||||
Dagens salg
|
||||
</FluentButton>
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large">
|
||||
Print Bon
|
||||
</FluentButton>
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large" onclick="@(() => Nav.NavigateTo("/settings"))">
|
||||
Indstillinger
|
||||
</FluentButton>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private readonly CultureInfo _danishCulture =
|
||||
CultureInfo.GetCultureInfo("da-DK");
|
||||
|
||||
private readonly Timer _timer;
|
||||
private DateTime _currentTime = DateTime.Now;
|
||||
|
||||
public Home()
|
||||
{
|
||||
_timer = new Timer(
|
||||
UpdateTime,
|
||||
null,
|
||||
TimeSpan.FromMinutes(1),
|
||||
TimeSpan.FromMinutes(1));
|
||||
}
|
||||
|
||||
private void UpdateTime(object? state)
|
||||
{
|
||||
_currentTime = DateTime.Now;
|
||||
_ = InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_timer.Dispose();
|
||||
}
|
||||
}
|
||||
38
PointOfSale/Pos.Web/Components/Pages/Home.razor.css
Normal file
38
PointOfSale/Pos.Web/Components/Pages/Home.razor.css
Normal file
@@ -0,0 +1,38 @@
|
||||
.top-nav {
|
||||
min-height: 72px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 0 32px;
|
||||
background: var(--colorNeutralBackground1);
|
||||
border-bottom: 1px solid var(--colorNeutralStroke2);
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: var(--colorNeutralForeground1);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--colorNeutralForeground2);
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.home-container {
|
||||
width: min(100%, 1100px);
|
||||
margin: 32px auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.home-container ::deep .menu-button {
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
@page "/settings/employees"
|
||||
@rendermode InteractiveServer
|
||||
|
||||
|
||||
<h1>Medarbejder</h1>
|
||||
|
||||
<FluentButton Appearance="@ButtonAppearance.Primary"
|
||||
OnClick="@CreateEmployee">
|
||||
Opret medarbejder
|
||||
</FluentButton>
|
||||
|
||||
<p>@_message</p>
|
||||
|
||||
@code {
|
||||
private string _message = "";
|
||||
|
||||
public void CreateEmployee()
|
||||
{
|
||||
_message = "Medarbejder blev oprettet";
|
||||
}
|
||||
}
|
||||
54
PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor
Normal file
54
PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor
Normal file
@@ -0,0 +1,54 @@
|
||||
@using System.Globalization
|
||||
@rendermode InteractiveServer
|
||||
@implements IDisposable
|
||||
@page "/settings"
|
||||
|
||||
<header class="top-nav">
|
||||
<div class="brand">Blomster POS</div>
|
||||
|
||||
<time datetime="@_currentTime.ToString("O")">
|
||||
@_currentTime.ToString(
|
||||
"dddd d. MMMM yyyy · HH:mm",
|
||||
_danishCulture)
|
||||
</time>
|
||||
</header>
|
||||
|
||||
<p>Administer data, der bruges i kassesalget</p>
|
||||
<div class="home-container">
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large">
|
||||
Medarbejder
|
||||
</FluentButton>
|
||||
<FluentButton Class="menu-button" Size="ButtonSize.Large">
|
||||
Vare
|
||||
</FluentButton>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@code {
|
||||
private readonly CultureInfo _danishCulture =
|
||||
CultureInfo.GetCultureInfo("da-DK");
|
||||
|
||||
private readonly Timer _timer;
|
||||
private DateTime _currentTime = DateTime.Now;
|
||||
|
||||
public Settings()
|
||||
{
|
||||
_timer = new Timer(
|
||||
UpdateTime,
|
||||
null,
|
||||
TimeSpan.FromMinutes(1),
|
||||
TimeSpan.FromMinutes(1));
|
||||
}
|
||||
|
||||
private void UpdateTime(object? state)
|
||||
{
|
||||
_currentTime = DateTime.Now;
|
||||
_ = InvokeAsync(StateHasChanged);
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
{
|
||||
_timer.Dispose();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
/* CSS for Settings component */
|
||||
.top-nav {
|
||||
min-height: 72px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
padding: 0 32px;
|
||||
background: var(--colorNeutralBackground1);
|
||||
border-bottom: 1px solid var(--colorNeutralStroke2);
|
||||
}
|
||||
|
||||
.brand {
|
||||
color: var(--colorNeutralForeground1);
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
time {
|
||||
color: var(--colorNeutralForeground2);
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
@page "/weather"
|
||||
|
||||
<PageTitle>Weather</PageTitle>
|
||||
|
||||
<h1>Weather</h1>
|
||||
|
||||
<p>This component demonstrates showing data.</p>
|
||||
|
||||
@if (forecasts == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<FluentDataGrid Id="weathergrid" Items="@forecasts" GridTemplateColumns="1fr 1fr 1fr 2fr" TGridItem="WeatherForecast">
|
||||
<PropertyColumn Title="Date" Property="@(c => c!.Date)" Sortable="true" Align="DataGridCellAlignment.Start"/>
|
||||
<PropertyColumn Title="Temp. (C)" Property="@(c => c!.TemperatureC)" Sortable="true" Align="DataGridCellAlignment.Center"/>
|
||||
<PropertyColumn Title="Temp. (F)" Property="@(c => c!.TemperatureF)" Sortable="true" Align="DataGridCellAlignment.Center"/>
|
||||
<PropertyColumn Title="Summary" Property="@(c => c!.Summary)" Sortable="true" Align="DataGridCellAlignment.End"/>
|
||||
</FluentDataGrid>
|
||||
}
|
||||
|
||||
@code {
|
||||
private IQueryable<WeatherForecast>? forecasts;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate a loading indicator
|
||||
await Task.Delay(500);
|
||||
|
||||
var startDate = DateOnly.FromDateTime(DateTime.Now);
|
||||
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
|
||||
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
|
||||
{
|
||||
Date = startDate.AddDays(index),
|
||||
TemperatureC = Random.Shared.Next(-20, 55),
|
||||
Summary = summaries[Random.Shared.Next(summaries.Length)]
|
||||
}).AsQueryable();
|
||||
}
|
||||
|
||||
private class WeatherForecast
|
||||
{
|
||||
public DateOnly Date { get; set; }
|
||||
public int TemperatureC { get; set; }
|
||||
public string? Summary { get; set; }
|
||||
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user