ShiftScheduler/Client/Pages/Index.razor
Copilot a25d8f1cc2
Add PNG icon support for shift types (#18)
* Initial plan

* Add PNG icon support for shifts with sample coffee cup icon

Co-authored-by: clayschaad <11883505+clayschaad@users.noreply.github.com>

* Add more icons

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: clayschaad <11883505+clayschaad@users.noreply.github.com>
Co-authored-by: Claudio Schaad <c.schaad@pog.ch>
2025-08-21 23:09:45 +02:00

69 lines
2.5 KiB
Text

@page "/"
<div class="top-nav-buttons">
<button class="reset-btn" @onclick="ResetSchedule" disabled="@_isLoadingInitial">Reset Schedule</button>
<button class="btn export-btn" @onclick="ExportToIcs" disabled="@_isLoadingInitial">Export to ICS</button>
<button class="btn export-btn" @onclick="ExportToPdf" disabled="@_isLoadingInitial">Export to PDF</button>
</div>
<h3>Shift Scheduler - @CurrentMonthYear</h3>
@if (_isLoadingInitial)
{
<div class="loading-overlay">
<div class="loading-content">
<div class="loading-spinner">⏳</div>
<p>Loading shifts and transport data...</p>
</div>
</div>
}
else
{
<div class="calendar-grid">
@foreach (var day in DaysInMonth)
{
<div class="day-cell">
<div class="day-header">
@day.ToString("dd.MM.yyyy") (@day.ToString("dddd"))
</div>
<div class="shifts">
@foreach (var shift in Shifts)
{
<div class="tooltip-wrapper">
<button class="shift-button @(SelectedSchedule.ContainsKey(day) && SelectedSchedule[day] == shift.Name ? "selected" : "")"
@onclick="() => SelectShift(day, shift.Name)"
disabled="@_isLoadingTransport">
@if (_isLoadingTransport && SelectedSchedule.ContainsKey(day) && SelectedSchedule[day] == shift.Name)
{
<span class="loading-spinner">⏳</span>
}
else
{
@if (shift.IsPngIcon)
{
<img src="icons\@shift.Icon" alt="@shift.Name" style="width: 24px; height: 24px;" />
}
else
{
@shift.Icon
}
}
</button>
<span class="tooltip">@shift.Name</span>
</div>
}
</div>
@if (SelectedSchedule.ContainsKey(day))
{
<div class="shift-times">
<small>@GetShiftTimes(day)</small>
</div>
<div class="transport-info">
<small>@GetTransportSummary(day)</small>
</div>
}
</div>
}
</div>
}