Made the TemperatureRangeEditor component better, but REALLY need to get off master.

This commit is contained in:
Kira Jiroux 2025-06-11 12:33:19 -04:00
parent 7b3761d6a5
commit b1a9567d31
4 changed files with 41 additions and 22 deletions

View File

@ -9,20 +9,22 @@
else
{
<div>
<h3 class="text-xl font-bold mb-4">Temperature Blanket Reviewer</h3>
<div class="">
<h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
<div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
@foreach (var day in TemperatureDays)
{
var color = GetColorForTemp(day.AvgTemp);
<div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
</div>
}
<div class="d-flex">
<div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
@foreach (var day in TemperatureDays)
{
var color = GetColorForTemp(day.AvgTemp);
<div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
</div>
}
</div>
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
</div>
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
</div>
}
</div>

View File

@ -4,11 +4,11 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
<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>
@* <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 -->
@* <!-- Draggable nodes for adjusting range breakpoints -->
@for (int i = 0; i < TempRanges.Count; i++)
{
var left = i == 0 ? 0 : TempRanges[i - 1].Max;
@ -19,16 +19,26 @@
@onmousedown="(e) => OnMouseDown(i, e)"
title="@left°F">
</div>
}
} *@
<!-- Color pickers for each range -->
<div class="flex gap-2 mt-6">
<div class="container">
@for (int i = 0; i < TempRanges.Count; i++)
{
var localIndex = i;
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
<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>

View File

@ -3,7 +3,14 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<h3 class="text-xl font-bold mb-4">Crochet</h3>
<PageTitle>Crochet Tools</PageTitle>
<head>
<link rel="stylesheet" href="bootstrap/bootstrap-cosmo.css" /> <!-- app.css -->
</head>
<h3 class="text-xl font-bold mb-4">Crochet</h3>
<div class="container">
<TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
</div>

View File

@ -38,7 +38,7 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
double maxAvgTemp = 84.0;
double amplitude = (maxAvgTemp - minAvgTemp) / 2.0; // 32.5
double avgAnnualTemp = (maxAvgTemp + minAvgTemp) / 2.0; // 52.5
double noiseMax = 4.0; // Small daily variation
double noiseMax = 3.0; // Small daily variation
for (int i = 0; i < daysInYear; i++)
{