Implement reset button with styling and export button improvements
Co-authored-by: clayschaad <11883505+clayschaad@users.noreply.github.com>
This commit is contained in:
parent
fe050182eb
commit
c596a21b74
3 changed files with 66 additions and 8 deletions
|
|
@ -25,7 +25,11 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
<div class="export-buttons">
|
||||
<button class="btn" @onclick="ExportToIcs">Export to ICS</button>
|
||||
<button class="btn" @onclick="ExportToPdf">Export to PDF</button>
|
||||
<div class="reset-section">
|
||||
<button class="reset-btn" @onclick="ResetSchedule">Reset Schedule</button>
|
||||
</div>
|
||||
|
||||
<div class="export-buttons">
|
||||
<button class="btn export-btn" @onclick="ExportToIcs">Export to ICS</button>
|
||||
<button class="btn export-btn" @onclick="ExportToPdf">Export to PDF</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -107,5 +107,22 @@ namespace ShiftScheduler.Client.Pages
|
|||
SelectedSchedule = new Dictionary<DateTime, string>();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task ResetSchedule()
|
||||
{
|
||||
// Clear the in-memory schedule
|
||||
SelectedSchedule.Clear();
|
||||
|
||||
// Remove from localStorage
|
||||
try
|
||||
{
|
||||
var storageKey = $"ShiftSchedule_{EditYear}_{EditMonth:D2}";
|
||||
await JSRuntime.InvokeVoidAsync("localStorage.removeItem", storageKey);
|
||||
}
|
||||
catch (Exception)
|
||||
{
|
||||
// ignored
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,14 +52,51 @@
|
|||
}
|
||||
|
||||
/* Export button */
|
||||
.export-btn {
|
||||
margin-top: 20px;
|
||||
.btn.export-btn {
|
||||
margin: 5px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
background-color: #ADD8E6; /* Light blue */
|
||||
color: #333;
|
||||
border: 2px solid #87CEEB; /* Slightly darker blue border */
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.btn.export-btn:hover {
|
||||
background-color: #87CEEB;
|
||||
border-color: #4682B4;
|
||||
}
|
||||
|
||||
/* Reset button */
|
||||
.reset-btn {
|
||||
margin: 5px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background-color: #FFB6C1; /* Light red/pink */
|
||||
color: #333;
|
||||
border: 2px solid #FF91A4; /* Slightly darker red border */
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background-color: #FF91A4;
|
||||
border-color: #FF69B4;
|
||||
}
|
||||
|
||||
/* Reset section - separate from export buttons */
|
||||
.reset-section {
|
||||
margin: 30px 0 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Export buttons section */
|
||||
.export-buttons {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Tooltip container */
|
||||
|
|
|
|||
Loading…
Reference in a new issue