93 lines
3.5 KiB
Plaintext
93 lines
3.5 KiB
Plaintext
@using Microsoft.AspNetCore.Components.Web
|
||
|
||
|
||
@attribute [StreamRendering]
|
||
@rendermode InteractiveServer
|
||
|
||
<div class="container" > @* @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="card rounded-3">
|
||
<div class="card-header mb-3 text-center fw-bold">
|
||
Temperature Blanket Colors
|
||
</div>
|
||
|
||
@for (int i = 0; i < TempRanges.Count; i++)
|
||
{
|
||
var localIndex = i;
|
||
@* if (i == 0)
|
||
{
|
||
<div class="row align-items-center mb-2">
|
||
<div class="col-6 text-end pe-2">
|
||
<label class="form-label mb-0">
|
||
@TempRanges[i].Max°
|
||
</label>
|
||
</div>
|
||
<div class="col-6 ps-2">
|
||
<input type="color"
|
||
value="@TempRanges[i].Color"
|
||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||
</div>
|
||
</div>
|
||
}
|
||
else if (i == 10)
|
||
{
|
||
<div class="row align-items-center mb-2">
|
||
<div class="col-6 text-end pe-2">
|
||
<label class="form-label mb-0">
|
||
@TempRanges[i].Min° +
|
||
</label>
|
||
</div>
|
||
<div class="col-6 ps-2">
|
||
<input type="color"
|
||
value="@TempRanges[i].Color"
|
||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="row align-items-center mb-2">
|
||
<div class="col-6 text-end pe-2">
|
||
<label class="form-label mb-0">
|
||
@TempRanges[i].Min° – @TempRanges[i].Max°
|
||
</label>
|
||
</div>
|
||
<div class="col-6 ps-2">
|
||
<input type="color"
|
||
value="@TempRanges[i].Color"
|
||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||
</div>
|
||
</div>
|
||
} *@
|
||
|
||
<div class="row align-items-center mb-2 ms-1">
|
||
<div class="col-6 text-end pe-2">
|
||
<label class="form-label mb-0">
|
||
@TempRanges[i].Min° – @TempRanges[i].Max°
|
||
</label>
|
||
</div>
|
||
<div class="col-6 ps-2">
|
||
<input type="color"
|
||
value="@TempRanges[i].Color"
|
||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div> |