PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add timer for slider input
All checks were successful
Game Ideas build for PR / build_test (pull_request) Successful in 55s
Details

Browse Source
This commit is contained in:
Egamorf
2025-04-29 21:38:39 +02:00
parent 926ea6dceb
commit ba2c065753
8 changed files with 53 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
View File

@@ -47,8 +47,7 @@
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
@bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
@bind-Value="Value.Interest" @bind-Value:after="HandleValueChanged" />
</div>
</div>

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
View File

@@ -12,8 +12,7 @@ public class GameFilterParams
public List<TagDto>? Tags { get; set; }
public List<PublisherDto>? Publishers { get; set; }
public List<DeveloperDto>? 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<int>? ReleaseYears { get; set; }
public List<int>? StorageSpaceIds { get; set; }
}

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs
View File

@@ -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(),

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
View File

@@ -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,
};

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
View File

@@ -1,13 +1,13 @@
<div class="container">
<div class="slider-track" style="@FillColor()"></div>
<input type="range" id="min-range" style="@StatusColor(Min)" min="@Params.Min" max="@Params.Max"
@bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max"
@bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<input type="range" id="min-range" style="@StatusColor(Value.Min)" min="@Params.Min" max="@Params.Max"
@bind="@Value.Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Value.Max)" min="@Params.Min" max="@Params.Max"
@bind="@Value.Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<div class="values">
<span class="value">@Min</span>
<span class="value">@Max</span>
<span class="value">@Value.Min</span>
<span class="value">@Value.Max</span>
</div>
</div>

50
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
View File

@@ -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<int> MaxChanged { get; set; }
[Parameter] public int Min { get; set; }
[Parameter] public EventCallback<int> MinChanged { get; set; }
[Parameter] public MinMaxDto Value { get; set; } = new() { Min = 1, Max = 5 };
[Parameter] public EventCallback<MinMaxDto> 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});";

3
src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs
View File

@@ -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;
}

7
src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Dto;
public class MinMaxDto
{
public int? Min { get; set; }
public int? Max { get; set; }
}