maximuss/point_of_sale_v2
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Made home page and startet the layout for settings home page

Browse Source
This commit is contained in:
Alex Pedersen
2026-07-30 15:21:59 +02:00
parent 2e537337f5
commit 03594bba3f
11 changed files with 241 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
PointOfSale/Pos.Web/Components/Layout/MainLayout.razor
View File

@@ -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>

8
PointOfSale/Pos.Web/Components/Layout/NavMenu.razor
View File

@@ -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 {
}

20
PointOfSale/Pos.Web/Components/Pages/Counter.razor
View File

@@ -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++;
}
}

59
PointOfSale/Pos.Web/Components/Pages/Home.razor
View File

@@ -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
View 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;
}

21
PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor Normal file
View File

@@ -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
View 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();
}
}

24
PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor.css Normal file
View File

@@ -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;
}

48
PointOfSale/Pos.Web/Components/Pages/Weather.razor
View File

@@ -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);
}
}

201
PointOfSale/Pos.Web/wwwroot/app.css
View File

@@ -1,192 +1,89 @@
@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
body {
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
font-family: var(--body-font);
font-size: var(--type-ramp-base-font-size);
line-height: var(--type-ramp-base-line-height);
margin: 0;
}
.navmenu-icon {
display: none;
--body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
margin: 0;
font-family: var(--body-font);
font-size: var(--type-ramp-base-font-size);
line-height: var(--type-ramp-base-line-height);
}
.main {
min-height: calc(100dvh - 86px);
color: var(--neutral-foreground-rest);
align-items: stretch !important;
}
nav {
align-self: stretch;
height: calc(100dvh - 80px) !important;
display: flex;
min-height: 100dvh;
color: var(--neutral-foreground-rest);
align-items: stretch !important;
}
.content {
padding: 0.5rem 1.5rem;
align-self: stretch !important;
width: 100%;
box-sizing: border-box;
width: 100%;
padding: 0.5rem 1.5rem;
align-self: stretch !important;
}
.manage {
width: 100dvw;
}
.fluent-layout-item[area="footer"] {
background: var(--neutral-layer-4);
color: var(--neutral-foreground-rest);
align-items: center;
padding: 10px 10px;
}
.fluent-layout-item[area="footer"] fluent-link {
color: var(--neutral-foreground-rest);
text-decoration: none;
}
.fluent-layout-item[area="footer"] fluent-link:focus {
outline: 1px dashed;
outline-offset: 3px;
}
.fluent-layout-item[area="footer"] fluent-link:hover {
text-decoration: underline;
}
.alert {
border: 1px dashed var(--accent-fill-rest);
padding: 5px;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
margin: 20px 0;
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
box-sizing: border-box;
display: none;
width: 100%;
padding: 0.6rem 1.25rem 0.7rem;
background: lightyellow;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}
#blazor-error-ui .dismiss {
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
}
.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;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
}
.blazor-error-boundary::before {
content: "An error has occurred. "
}
.blazor-error-boundary::before {
content: "An error has occurred. ";
}
.loading-progress {
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem auto;
position: relative;
display: block;
width: 8rem;
height: 8rem;
margin: 20vh auto 1rem;
}
.loading-progress circle {
.loading-progress circle {
fill: none;
stroke: #e0e0e0;
stroke-width: 0.6rem;
transform-origin: 50% 50%;
transform: rotate(-90deg);
}
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress circle:last-child {
stroke: #1b6ec2;
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
position: absolute;
text-align: center;
font-weight: bold;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
position: absolute;
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
font-weight: bold;
text-align: center;
}
.loading-progress-text:after {
.loading-progress-text::after {
content: var(--blazor-load-percentage-text, "Loading");
}
}
code {
color: #c02d76;
}
@media (max-width: 600px) {
.header-gutters {
margin: 0.5rem 3rem 0.5rem 1.5rem !important;
}
[dir="rtl"] .header-gutters {
margin: 0.5rem 1.5rem 0.5rem 3rem !important;
}
.main {
flex-direction: column !important;
row-gap: 0 !important;
}
nav.sitenav {
width: 100%;
height: 100%;
}
#main-menu {
width: 100% !important;
}
#main-menu > div:first-child:is(.expander) {
display: none;
}
.navmenu {
width: 100%;
}
#navmenu-toggle {
appearance: none;
}
#navmenu-toggle ~ nav {
display: none;
}
#navmenu-toggle:checked ~ nav {
display: block;
}
.navmenu-icon {
cursor: pointer;
z-index: 10;
display: block;
position: absolute;
top: 15px;
left: unset;
right: 20px;
width: 20px;
height: 20px;
border: none;
}
[dir="rtl"] .navmenu-icon {
left: 20px;
right: unset;
}
color: #c02d76;
}