From ba2c0657530f15c2874527b818ff943696d955b2 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Tue, 29 Apr 2025 21:38:39 +0200 Subject: [PATCH] Add timer for slider input --- .../Pages/Games/Filter/GameFilter.razor | 3 +- .../Pages/Games/Filter/GameFilterParams.cs | 3 +- .../Pages/Games/Gateways/GameGateway.cs | 4 +- .../Components/Search/SearchInput.razor.cs | 3 +- .../Components/SliderRange/SliderRange.razor | 12 ++--- .../SliderRange/SliderRange.razor.cs | 50 ++++++++++++------- .../Constants/GlobalConstants.cs | 3 +- .../GameIdeas.Shared/Dto/MinMaxDto.cs | 7 +++ 8 files changed, 53 insertions(+), 32 deletions(-) create mode 100644 src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor index d128e8f..6faba54 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor @@ -47,8 +47,7 @@
+ @bind-Value="Value.Interest" @bind-Value:after="HandleValueChanged" />
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs index e2ae78a..b05fd87 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs @@ -12,8 +12,7 @@ public class GameFilterParams public List? Tags { get; set; } public List? Publishers { get; set; } public List? Developers { get; set; } - public int MinInterest { get; set; } = 1; - public int MaxInterest { get; set; } = 5; + public MinMaxDto Interest { get; set; } = new() { Min = 1, Max = 5 }; public List? ReleaseYears { get; set; } public List? StorageSpaceIds { get; set; } } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs index 6494a4f..978d19b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs @@ -43,8 +43,8 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway { CurrentPage = currentPage, Title = filterParams.Title, - MaxInterest = filterParams.MaxInterest, - MinInterest = filterParams.MinInterest, + MaxInterest = filterParams.Interest.Max, + MinInterest = filterParams.Interest.Min, StorageSpaces = filterParams.StorageSpaceIds, DeveloperIds = filterParams.Developers?.Select(d => d.Id ?? 0).ToList(), PublisherIds = filterParams.Publishers?.Select(d => d.Id ?? 0).ToList(), diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs index f6521df..139726c 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs @@ -1,4 +1,5 @@ using GameIdeas.BlazorApp.Shared.Constants; +using GameIdeas.Shared.Constants; using Microsoft.AspNetCore.Components; namespace GameIdeas.BlazorApp.Shared.Components.Search; @@ -21,7 +22,7 @@ public partial class SearchInput Text = string.Empty; Timer = new() { - Interval = 500, + Interval = GlobalConstants.DELAY_INPUT_MS, AutoReset = false, }; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor index ca54e27..c143332 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor @@ -1,13 +1,13 @@ 
- - + +
- @Min - @Max + @Value.Min + @Value.Max
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs index 2fee237..64ce34a 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs @@ -1,44 +1,58 @@ +using GameIdeas.Shared.Constants; +using GameIdeas.Shared.Dto; using Microsoft.AspNetCore.Components; -using System.Threading.Tasks; - namespace GameIdeas.BlazorApp.Shared.Components.SliderRange; public partial class SliderRange { [Parameter] public SliderRangeParams Params { get; set; } = new(); - [Parameter] public int Max { get; set; } - [Parameter] public EventCallback MaxChanged { get; set; } - [Parameter] public int Min { get; set; } - [Parameter] public EventCallback MinChanged { get; set; } + [Parameter] public MinMaxDto Value { get; set; } = new() { Min = 1, Max = 5 }; + [Parameter] public EventCallback ValueChanged { get; set; } - private async Task HandleSlideTwoInput() + private System.Timers.Timer? Timer; + + protected override void OnInitialized() { - if (Max - Min <= Params.Gap) + Timer = new() { - Min = Max - Params.Gap; - } + Interval = GlobalConstants.DELAY_INPUT_MS, + AutoReset = false, + }; - await MaxChanged.InvokeAsync(Max); + Timer.Elapsed += async (_, _) => await ValueChanged.InvokeAsync(Value); + base.OnInitialized(); } - private async Task HandleSlideOnInput() + private void HandleSlideTwoInput() { - if (Max - Min <= Params.Gap) + if (Value.Max - Value.Min <= Params.Gap) { - Max = Min + Params.Gap; + Value.Min = Value.Max - Params.Gap; } - await MinChanged.InvokeAsync(Min); + Timer?.Stop(); + Timer?.Start(); + } + + private void HandleSlideOnInput() + { + if (Value.Max - Value.Min <= Params.Gap) + { + Value.Max = Value.Min + Params.Gap; + } + + Timer?.Stop(); + Timer?.Start(); } private string FillColor() { - var percent1 = (double)(Min - Params.Min) / (Params.Max - Params.Min) * 100; - var percent2 = (double)(Max - Params.Min) / (Params.Max - Params.Min) * 100; + var percent1 = (double?)(Value.Min - Params.Min) / (Params.Max - Params.Min) * 100; + var percent2 = (double?)(Value.Max - Params.Min) / (Params.Max - Params.Min) * 100; return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)"; } - private string StatusColor(int value) + private string StatusColor(int? value) { string str = "--thumb-color: var({0});"; diff --git a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs index 6bacc90..81e99e6 100644 --- a/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs +++ b/src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs @@ -20,5 +20,6 @@ public class GlobalConstants public const int API_PORT = 8000; public const string SUB_DOMAIN_NAME = "api-"; + + public const double DELAY_INPUT_MS = 500; } - \ No newline at end of file diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs new file mode 100644 index 0000000..81de49d --- /dev/null +++ b/src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.Shared.Dto; + +public class MinMaxDto +{ + public int? Min { get; set; } + public int? Max { get; set; } +}