kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor
View File

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

26
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
View File

@ -4,11 +4,11 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @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 --> <!-- 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++) @for (int i = 0; i < TempRanges.Count; i++)
{ {
var left = i == 0 ? 0 : TempRanges[i - 1].Max; var left = i == 0 ? 0 : TempRanges[i - 1].Max;
@ -19,16 +19,26 @@
@onmousedown="(e) => OnMouseDown(i, e)" @onmousedown="(e) => OnMouseDown(i, e)"
title="@left°F"> title="@left°F">
</div> </div>
} } *@
<!-- Color pickers for each range --> <!-- Color pickers for each range -->
<div class="flex gap-2 mt-6"> <div class="container">
@for (int i = 0; i < TempRanges.Count; i++) @for (int i = 0; i < TempRanges.Count; i++)
{ {
var localIndex = i; var localIndex = i;
<input type="color"
value="@TempRanges[i].Color" <div class="d-flex justify-content-between align-items-center mb-2 gx-2">
@onchange="e => HandleColorChange(e, localIndex)" /> <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>
</div> </div>

9
Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor
View File

@ -3,7 +3,14 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @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" /> <TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
</div>

2
Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs
View File

@ -38,7 +38,7 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
double maxAvgTemp = 84.0; double maxAvgTemp = 84.0;
double amplitude = (maxAvgTemp - minAvgTemp) / 2.0; // 32.5 double amplitude = (maxAvgTemp - minAvgTemp) / 2.0; // 32.5
double avgAnnualTemp = (maxAvgTemp + minAvgTemp) / 2.0; // 52.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++) for (int i = 0; i < daysInYear; i++)
{ {