Adding a toast and making the buttons at the bottom take the entire w…

…idth.
runxc1 · Mar 22, 2024 · ea820e6 · ea820e6
1 parent 073291e
commit ea820e6
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 31 deletions.
diff --git a/Layout/MainLayout.razor b/Layout/MainLayout.razor
@@ -5,7 +5,8 @@
     <FluentHeader Style="height:40px; padding-top:0">
     </FluentHeader>
     <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
-        <NavMenu />
+        <NavMenu />        
+        <FluentToastProvider MaxToastCount="5"  Timeout="5000"/>
         <FluentBodyContent Class="body-content">
             <ErrorBoundary>
                 <ChildContent>

diff --git a/Pages/History.razor b/Pages/History.razor
@@ -24,7 +24,7 @@ else
             <FluentDataGrid Items="@iRes">
                 <PropertyColumn Property="@(r => r.Name)" Sortable="true" />
                 <PropertyColumn Property="@(r => r.Number)" Sortable="true" />
-                <PropertyColumn Property="@(r => r.Ellapsed)" Format="@timeFormat" Sortable="true" />
+                <PropertyColumn Property="@(r => r.SplitTime)" Format="@timeFormat" Sortable="true" />
                 <PropertyColumn Property="@(r => r.Ellapsed)" Format="@timeFormat" Sortable="true" />
             </FluentDataGrid>
 

diff --git a/Pages/Home.razor b/Pages/Home.razor
@@ -2,6 +2,8 @@
 @using TrackBlazor.Framework
 @using System.Diagnostics
 @inject Blazored.LocalStorage.ILocalStorageService localStorage
+@inject IToastService ToastService
+@inject NavigationManager Navigation
 
 <PageTitle>Multi Athlete Track Timer</PageTitle>
 <div class="minimalPadding" style="@(editMode ? "display:none;":"")">
@@ -10,30 +12,33 @@
             @foreach (var timer in timers)
             {
                 <FluentGridItem xs="6">
-                    <FluentCard MinimalStyle="true">
-                        <h6 style="text-align: center; margin-bottom:2px">@timer.Name</h6>
-                        <div class="flexCont" style="justify-content:space-between;">
-                            <div style="min-width:100px; font-size:26px;">@timer.Stopwatch.Elapsed.ToString(timeFormat)</div>
-                        </div>
-                        <hr style="margin:4px; 2px;" />
-                        <div class="splitCont" @onclick="() => TryTakeSplit(timer)">
-                            <div class="flexCont">
-                                <div class="num"></div>
-                                <div class="column">@timer.ElapsedSinceLast.ToString(timeFormat)</div>
-                                <div class="column"></div>
+                    <FluentCard MinimalStyle="true" Class="take-split">
+                        <div @onclick="() => TryTakeSplit(timer)">
+                            <h6 style="text-align: center; margin-bottom:2px">@timer.Name</h6>
+                            <div class="flexCont" style="justify-content:space-between;">
+                                <div style="min-width:100px; font-size:26px;">@timer.Stopwatch.Elapsed.ToString(timeFormat)</div>
                             </div>
-                            @for (var s = timer.Splits.Count; s > 0; s--)
-                            {
-                                var split = timer.Splits[s - 1];
+                            <hr style="margin:4px 2px;" />
+                            <div class="splitCont">
                                 <div class="flexCont">
-                                    <div class="num">@s</div>
-                                    <div class="column">@split.SplitTime.ToString(timeFormat)</div>
-                                    <div class="column">@split.Ellapsed.ToString(timeFormat)</div>
+                                    <div class="num"></div>
+                                    <div class="column">@timer.ElapsedSinceLast.ToString(timeFormat)</div>
+                                    <div class="column"></div>
                                 </div>
-                            }
+                                @for (var s = timer.Splits.Count; s > 0; s--)
+                                {
+                                    var split = timer.Splits[s - 1];
+                                    <div class="flexCont">
+                                        <div class="num">@s</div>
+                                        <div class="column">@split.SplitTime.ToString(timeFormat)</div>
+                                        <div class="column">@split.Ellapsed.ToString(timeFormat)</div>
+                                    </div>
+                                }
+                            </div>
                         </div>
+
                         <hr style="margin:4px; 2px;" />
-                        <div class="flexCont" style="justify-content:space-between;">
+                        <div class="flexCont ind-buttons" style="justify-content:space-between;">
                             <div>
                                 @if (@timer.Stopwatch.IsRunning)
                                 {
@@ -62,16 +67,15 @@
                 </FluentGridItem>
             }
         </FluentGrid>
-        <div>
-            <FluentButton Appearance="Appearance.Accent" @onclick="AddTimer" IconStart="new Icons.Regular.Size24.AddCircle()">Add Timer</FluentButton>
-        </div>
-    </div>
 
-    <div class="flexCont" style="gap:15px; justify-content:space-between">
-        <FluentButton Class="bottom-button" Appearance="Appearance.Accent" @onclick="ResetAll" IconStart="new Icons.Regular.Size24.ArrowReset()">Reset</FluentButton>
-        <FluentButton Class="bottom-button" Appearance="Appearance.Accent" @onclick="switchEditMode" IconStart="new Icons.Regular.Size24.LauncherSettings()">Settings</FluentButton>
-        <FluentButton Class="bottom-button" Appearance="Appearance.Accent" @onclick="StartStopAll" IconStart="StartStopIcon"> @StartStop</FluentButton>
+    </div>
 
+    <div class="flexCont" style="gap:9px; justify-content:space-between">
+        <FluentButton Class="bottom-button" Appearance="Appearance.Accent" @onclick="ResetAll" IconStart="new Icons.Regular.Size24.ArrowReset()">Save</FluentButton>
+        <div style="flex:1 0;">
+            <FluentButton Style="width:100%" Class="bottom-button" Appearance="Appearance.Accent" @onclick="StartStopAll" IconStart="StartStopIcon">@StartStop All</FluentButton>
+        </div>
+        <FluentButton Style="width:50px;" Class="bottom-button" Appearance="Appearance.Accent" @onclick="switchEditMode" IconEnd="new Icons.Regular.Size24.LauncherSettings()"></FluentButton>
     </div>
 </div>
 
@@ -207,6 +211,9 @@
         }
         allStarted = false;
         await AddSplitResult(sr);
+
+        ToastService.ShowSuccess("Saved to History", topAction: "History", 
+        callback: EventCallback.Factory.Create<ToastResult>(this, () => Navigation.NavigateTo("history")));
     }
     private void switchEditMode()
     {

diff --git a/hot-reload.ps1 b/hot-reload.ps1
@@ -0,0 +1 @@
+dotnet watch run --non-interactive
diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css
@@ -70,8 +70,13 @@ body {
     flex-wrap: nowrap;
     align-content: flex-start;
 }
-
-div.splitCont{
+div.take-split {
+    border: 1px solid var(--accent-fill-rest);
+}
+div.ind-buttons fluent-button {
+    width: 75px;
+}
+div.splitCont {
     min-height: var(--track-split-min-height);
 }
 .bottom-button {