Basic layout homescreen
This commit is contained in:
@@ -1,59 +1,226 @@
|
||||
@page "/"
|
||||
@using MudBlazor
|
||||
@inject ISnackbar Snackbar
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
<PageTitle>Dashboard | OnProf</PageTitle>
|
||||
|
||||
<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
|
||||
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor and the .NET 10 Template!</MudText>
|
||||
<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mt-8">
|
||||
<MudGrid>
|
||||
<MudItem xs="12">
|
||||
<div class="d-flex align-center">
|
||||
<MudText Typo="Typo.h4" Class="fw-bold">Hallo, Marc!</MudText>
|
||||
<MudChip T="string" Color="Color.Primary" Variant="Variant.Text" Class="ml-4">März 2026</MudChip>
|
||||
</div>
|
||||
<MudText Typo="Typo.body1" Color="Color.Secondary">Hier ist deine Übersicht für die aktuelle Woche.</MudText>
|
||||
</MudItem>
|
||||
|
||||
<MudAlert Severity="Severity.Normal" ContentAlignment="HorizontalAlignment.Start">
|
||||
You can find documentation and examples on our website here:
|
||||
<MudLink Href="https://mudblazor.com" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
|
||||
<b>www.mudblazor.com</b>
|
||||
</MudLink>
|
||||
</MudAlert>
|
||||
<MudItem xs="12" sm="6" md="3">
|
||||
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-primary);">
|
||||
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Heute gebucht</MudText>
|
||||
<div class="d-flex align-end justify-space-between">
|
||||
<MudText Typo="Typo.h3">6,5 <small style="font-size: 1rem">h</small></MudText>
|
||||
<MudIcon Icon="@Icons.Material.Filled.HistoryToggleOff" Color="Color.Primary" Size="Size.Large" />
|
||||
</div>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<br />
|
||||
<MudText Typo="Typo.h5" GutterBottom="true">Interactivity in this Template</MudText>
|
||||
<br />
|
||||
<MudText Typo="Typo.body2">
|
||||
When you opt for the "Global" Interactivity Location, <br />
|
||||
the render modes are defined in App.razor and consequently apply to all child components.<br />
|
||||
In this case, providers are globally set in the MainLayout.<br />
|
||||
<br />
|
||||
On the other hand, if you choose the "Per page/component" Interactivity Location,<br />
|
||||
it is necessary to include the <br />
|
||||
<br />
|
||||
<MudPopoverProvider /> <br />
|
||||
<MudDialogProvider /> <br />
|
||||
<MudSnackbarProvider /> <br />
|
||||
<br />
|
||||
components on every interactive page.<br />
|
||||
<br />
|
||||
If a render mode is not specified for a page, it defaults to Server-Side Rendering (SSR),<br />
|
||||
similar to this page. While MudBlazor allows pages to be rendered in SSR,<br />
|
||||
please note that interactive features, such as buttons and dropdown menus, will not be functional.
|
||||
</MudText>
|
||||
<MudItem xs="12" sm="6" md="3">
|
||||
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-success);">
|
||||
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Wochenfortschritt</MudText>
|
||||
<MudText Typo="Typo.h3">32 <small style="font-size: 1rem">/ 40h</small></MudText>
|
||||
<MudProgressLinear Color="Color.Success" Value="80" Class="mt-2" />
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<br />
|
||||
<MudText Typo="Typo.h5" GutterBottom="true">What's New in Blazor with the Release of .NET 10</MudText>
|
||||
<br />
|
||||
<MudItem xs="12" sm="6" md="3">
|
||||
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-info);">
|
||||
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Aktuelles Projekt</MudText>
|
||||
<MudText Typo="Typo.h6" Class="mt-2" Style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
|
||||
00000001 - Gleitzeit
|
||||
</MudText>
|
||||
<MudLink Typo="Typo.caption" Color="Color.Info">Projekt wechseln</MudLink>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<MudText Typo="Typo.h6" GutterBottom="true">Prerendering</MudText>
|
||||
<MudText Typo="Typo.body2" GutterBottom="true">
|
||||
If you're exploring the features of .NET 10 Blazor,<br /> you might be pleasantly surprised to learn that each page is prerendered on the server,<br /> regardless of the selected render mode.<br /><br />
|
||||
This means that you'll need to inject all necessary services on the server,<br /> even when opting for the wasm (WebAssembly) render mode.<br /><br />
|
||||
This prerendering functionality is crucial to ensuring that WebAssembly mode feels fast and responsive,<br /> especially when it comes to initial page load times.<br /><br />
|
||||
For more information on how to detect prerendering and leverage the RenderContext, you can refer to the following link:
|
||||
<MudLink Href="https://github.com/dotnet/aspnetcore/issues/51468#issuecomment-1783568121" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
|
||||
More details
|
||||
</MudLink>
|
||||
</MudText>
|
||||
<MudItem xs="12" sm="6" md="3">
|
||||
<MudPaper Elevation="2" Class="pa-4" Style="height: 120px; border-left: 6px solid var(--mud-palette-warning);">
|
||||
<MudText Typo="Typo.subtitle2" Color="Color.Secondary">Urlaub / Überstunden</MudText>
|
||||
<div class="d-flex gap-4 mt-2">
|
||||
<div>
|
||||
<MudText Typo="Typo.h6">12</MudText>
|
||||
<MudText Typo="Typo.caption">Urlaub</MudText>
|
||||
</div>
|
||||
<MudDivider Vertical="true" FlexItem="true" />
|
||||
<div>
|
||||
<MudText Typo="Typo.h6">+14,5</MudText>
|
||||
<MudText Typo="Typo.caption">Gleitzeit</MudText>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
</MudItem>
|
||||
|
||||
<br />
|
||||
<MudText Typo="Typo.h6" GutterBottom="true">InteractiveAuto</MudText>
|
||||
<MudText Typo="Typo.body2">
|
||||
A discussion on how to achieve this can be found here:
|
||||
<MudLink Href="https://github.com/dotnet/aspnetcore/issues/51468#issue-1950424116" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
|
||||
More details
|
||||
</MudLink>
|
||||
</MudText>
|
||||
<MudItem xs="12">
|
||||
<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6" Color="Color.Primary">
|
||||
|
||||
<MudTabPanel Icon="@Icons.Material.Filled.ViewWeek" Text="Wochenansicht">
|
||||
<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item, dropzone) => item.Status == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-column flex-grow-1">
|
||||
<ChildContent>
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<MudButtonGroup Color="Color.Default" Variant="Variant.Outlined">
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" />
|
||||
<MudButton>KW 12</MudButton>
|
||||
<MudIconButton Icon="@Icons.Material.Filled.ChevronRight" />
|
||||
</MudButtonGroup>
|
||||
|
||||
<div class="d-flex gap-4">
|
||||
<MudPaper Variant="Variant.Outlined" Class="pa-2 d-flex gap-2 align-center" Style="background-color: var(--mud-palette-background-grey);">
|
||||
<MudText Typo="Typo.caption" Class="px-2"><b>Projekt-Stapel:</b></MudText>
|
||||
<MudDropZone T="DropItem" Identifier="Backlog" Class="d-flex gap-2" />
|
||||
</MudPaper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 overflow-x-auto pb-4">
|
||||
@foreach (var day in _weekDays)
|
||||
{
|
||||
<div class="flex-1" style="min-width: 180px;">
|
||||
<MudPaper Elevation="0" Class="pa-3 mb-2" Style="@(day.IsToday ? "background: var(--mud-palette-primary-hover);" : "background: transparent;")">
|
||||
<MudText Typo="Typo.subtitle2" Align="Align.Center"><b>@day.Name</b></MudText>
|
||||
<MudText Typo="Typo.caption" Align="Align.Center" Class="d-block">@day.Date.ToShortDateString()</MudText>
|
||||
</MudPaper>
|
||||
|
||||
<MudDropZone T="DropItem" Identifier="@day.Name" Class="rounded-lg d-flex flex-column gap-2"
|
||||
Style="min-height: 400px; border: 2px dashed var(--mud-palette-divider); padding: 8px;">
|
||||
</MudDropZone>
|
||||
|
||||
<div class="mt-2 d-flex justify-center">
|
||||
<MudText Typo="Typo.caption" Color="Color.Secondary">Summe: @(_items.Where(i => i.Status == day.Name).Sum(i => i.Hours))h</MudText>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</ChildContent>
|
||||
<ItemRenderer>
|
||||
<MudPaper Elevation="2" Class="pa-3 rounded-lg border-l-4" Style="@($"border-left: 6px solid {context.Color}; cursor: grab; width: 160px;")">
|
||||
<div class="d-flex flex-column">
|
||||
<MudText Typo="Typo.caption" Class="mud-text-secondary" Style="font-size: 0.7rem">@context.Project</MudText>
|
||||
<MudText Typo="Typo.body2"><b>@context.Task</b></MudText>
|
||||
<div class="d-flex align-center justify-space-between mt-2">
|
||||
<MudNumericField @bind-Value="context.Hours" Variant="Variant.Text" Margin="Margin.Dense" Style="width: 50px;" T="double" />
|
||||
<MudIcon Icon="@Icons.Material.Filled.DragIndicator" Size="Size.Small" Color="Color.Error" />
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
</ItemRenderer>
|
||||
</MudDropContainer>
|
||||
</MudTabPanel>
|
||||
|
||||
<MudTabPanel Icon="@Icons.Material.Filled.List" Text="Alle Buchungen">
|
||||
<MudDataGrid T="BookingPlaceholder" Items="@_dummyBookings" Hover="true" Bordered="false" Striped="true" QuickFilter="@_quickFilter">
|
||||
<ToolBarContent>
|
||||
<MudText Typo="Typo.h6">Verlauf</MudText>
|
||||
<MudSpacer />
|
||||
<MudTextField @bind-Value="_searchString" Placeholder="Suchen..." Adornment="Adornment.Start" Immediate="true"
|
||||
AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
|
||||
</ToolBarContent>
|
||||
<Columns>
|
||||
<PropertyColumn Property="x => x.Date" Title="Datum" Format="dd.MM.yyyy" />
|
||||
<PropertyColumn Property="x => x.Project" Title="Auftrag" />
|
||||
<PropertyColumn Property="x => x.Task" Title="Tätigkeit" />
|
||||
<PropertyColumn Property="x => x.Hours" Title="Stunden" />
|
||||
<TemplateColumn CellClass="d-flex justify-end">
|
||||
<CellTemplate>
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" Color="Color.Default" />
|
||||
<MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Delete" Color="Color.Error" />
|
||||
</CellTemplate>
|
||||
</TemplateColumn>
|
||||
</Columns>
|
||||
</MudDataGrid>
|
||||
</MudTabPanel>
|
||||
</MudTabs>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudContainer>
|
||||
|
||||
<MudFab Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" Style="position: fixed; bottom: 24px; right: 24px;" OnClick="OpenBookingDialog" />
|
||||
|
||||
@code {
|
||||
private string _searchString = "";
|
||||
private List<DayInfo> _weekDays = new();
|
||||
private List<DropItem> _items = new();
|
||||
|
||||
// Datenstrukturen
|
||||
public class DropItem
|
||||
{
|
||||
public string Project { get; set; } = string.Empty;
|
||||
public string Task { get; set; } = string.Empty;
|
||||
public double Hours { get; set; }
|
||||
public string Color { get; set; } = "#7e6fff";
|
||||
public string Status { get; set; } = "Backlog";
|
||||
}
|
||||
|
||||
public record DayInfo(string Name, DateTime Date, bool IsToday);
|
||||
public record BookingPlaceholder(DateTime Date, string Project, string Task, double Hours);
|
||||
|
||||
// Dummy Daten für das DataGrid
|
||||
private List<BookingPlaceholder> _dummyBookings = new()
|
||||
{
|
||||
new(DateTime.Now, "00000001 - Gleitzeit", "Projektarbeit", 8.0),
|
||||
new(DateTime.Now.AddDays(-1), "00000001 - Gleitzeit", "Meeting", 4.5),
|
||||
new(DateTime.Now.AddDays(-2), "00000010 - Allg. Besprechung", "Jour Fixe", 1.0),
|
||||
};
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
// Wochentage generieren (Mo-Fr)
|
||||
var startOfWeek = DateTime.Now.AddDays(-(int)DateTime.Now.DayOfWeek + (int)DayOfWeek.Monday);
|
||||
for (int i = 0; i < 5; i++)
|
||||
{
|
||||
var date = startOfWeek.AddDays(i);
|
||||
_weekDays.Add(new DayInfo(date.ToString("dddd"), date, date.Date == DateTime.Today));
|
||||
}
|
||||
|
||||
// Stapel an Vorlagen im Backlog
|
||||
_items.Add(new DropItem { Project = "00001", Task = "Gleitzeit", Hours = 8, Color = "#7e6fff", Status = "Backlog" });
|
||||
_items.Add(new DropItem { Project = "00010", Task = "Meeting", Hours = 1, Color = "#3dcb6c", Status = "Backlog" });
|
||||
_items.Add(new DropItem { Project = "00500", Task = "Entwicklung", Hours = 4, Color = "#ffb545", Status = "Backlog" });
|
||||
|
||||
// Initialer Datenbestand für die Ansicht
|
||||
_items.Add(new DropItem { Project = "00001", Task = "Gleitzeit", Hours = 4, Color = "#7e6fff", Status = "Montag" });
|
||||
}
|
||||
|
||||
private void ItemUpdated(MudItemDropInfo<DropItem> dropInfo)
|
||||
{
|
||||
if (dropInfo.DropzoneIdentifier != "Backlog" && dropInfo.Item.Status == "Backlog")
|
||||
{
|
||||
// Erstelle eine echte Kopie vom Template
|
||||
var newItem = new DropItem
|
||||
{
|
||||
Project = dropInfo.Item.Project,
|
||||
Task = dropInfo.Item.Task,
|
||||
Hours = dropInfo.Item.Hours,
|
||||
Color = dropInfo.Item.Color,
|
||||
Status = dropInfo.DropzoneIdentifier
|
||||
};
|
||||
_items.Add(newItem);
|
||||
Snackbar.Add($"{newItem.Task} zum {dropInfo.DropzoneIdentifier} hinzugefügt", Severity.Success);
|
||||
}
|
||||
else
|
||||
{
|
||||
// Einfaches Verschieben zwischen den Tagen
|
||||
dropInfo.Item.Status = dropInfo.DropzoneIdentifier;
|
||||
}
|
||||
}
|
||||
|
||||
private Func<BookingPlaceholder, bool> _quickFilter => x =>
|
||||
{
|
||||
if (string.IsNullOrWhiteSpace(_searchString)) return true;
|
||||
return x.Project.Contains(_searchString, StringComparison.OrdinalIgnoreCase) ||
|
||||
x.Task.Contains(_searchString, StringComparison.OrdinalIgnoreCase);
|
||||
};
|
||||
|
||||
private void OpenBookingDialog()
|
||||
{
|
||||
Snackbar.Add("Dialog für manuelle Buchung wird implementiert...", Severity.Info);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user