exciting-aftermath/Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor

44 lines
1.5 KiB
Plaintext

@using Microsoft.AspNetCore.Components.Web
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="position-relative" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
<!-- Base number line -->
@* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@
@* <!-- Draggable nodes for adjusting range breakpoints -->
@for (int i = 0; i < TempRanges.Count; i++)
{
var left = i == 0 ? 0 : TempRanges[i - 1].Max;
var leftPercent = (left / 100.0) * 100;
<div class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 rounded-full bg-blue-600 cursor-pointer"
style="left: @leftPercent%"
@onmousedown="(e) => OnMouseDown(i, e)"
title="@left°F">
</div>
} *@
<!-- Color pickers for each range -->
<div class="container">
@for (int i = 0; i < TempRanges.Count; i++)
{
var localIndex = i;
<div class="d-flex justify-content-between align-items-center mb-2 gx-2">
<div class="col-10">
<label class="form-label mb-0 me-2">
@TempRanges[i].Min&deg; - @TempRanges[i].Max&deg;
</label>
</div>
<div class="col">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
}
</div>
</div>