Mudblazor components for TuningComponent (#29)

* working on: fixing unit testing generator component * working on generator unit testing * fixed unit testig for components * fixes for generator unit testing * removed 'id' from Generator component, working on replacement of form elements for TuningComponent * replaced html tags with mudblazor components for tuning component --------- Co-authored-by: blfuentes <[email protected]>
blfuentes · Jun 2, 2024 · 6ad70f1 · 6ad70f1
1 parent 5b4e001
commit 6ad70f1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 40 deletions.
diff --git a/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor b/src/GuitarStringTensionCalculator/Components/Pages/Generator.razor
@@ -47,15 +47,14 @@ else
     <MudChip Color="Color.Tertiary">@(selectedTuning?.Name ?? "Select tuning")</MudChip>
 </div>
 
-<label for="_tuningDisplay" class="col-2 font-weight-bold">Editor: </label>
 @if (string.IsNullOrWhiteSpace(numberOfStrings) || string.IsNullOrWhiteSpace(scaleLength) || string.IsNullOrWhiteSpace(semitones))
 {
     <p><em>Please select &lt;number of strings&gt;, &lt;scale&gt; and &lt;tuning&gt;</em></p>
 }
 else
 {
     <div class="col-10">
-        <TuningComponent id="component-tuning" NumberOfStrings="@_numOfStrings" ScaleLength="@_scaleLength" Tuning="@selectedTuning" />
+        <TuningComponent NumberOfStrings="@_numOfStrings" ScaleLength="@_scaleLength" Tuning="@selectedTuning" />
     </div>
 }
 

diff --git a/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor b/src/GuitarStringTensionCalculator/Components/Parts/DisplayChartComponent.razor
@@ -3,15 +3,7 @@
 @rendermode InteractiveServer
 
 <div>
-    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="100%" Height="350px" ChartOptions="@Options" />
-    <MudGrid>
-        <MudItem xs="6">
-            <MudText Typo="Typo.body1" Class="py-3">Selected: @(Index < 0 ? "None" : Series[Index].Name)</MudText>
-        </MudItem>
-        <MudItem xs="6">
-            <MudSlider @bind-Value="Options.LineStrokeWidth" Min="1" Max="10" Color="Color.Info">Line Width: @Options.LineStrokeWidth.ToString()</MudSlider>
-        </MudItem>
-    </MudGrid>
+    <MudChart ChartType="ChartType.Line" ChartSeries="@Series" @bind-SelectedIndex="Index" XAxisLabels="@XAxisLabels" Width="800px" Height="350px" ChartOptions="@Options" />
 </div>
 
 @code {

diff --git a/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor b/src/GuitarStringTensionCalculator/Components/Parts/TuningComponent.razor
@@ -1,5 +1,6 @@
 @using System.Reflection;
 @using System.ComponentModel;
+@using Calculator.DLL
 @using Calculator = Calculator.DLL
 @using System.Threading.Tasks
 
@@ -15,47 +16,45 @@
     {
         <div class="row">
             <div class="col-2"><span style="font-weight:bold;">Note</span></div>
-            <div class="col-3"><span style="font-weight:bold;">Scale ("/mm)</span></div>
+            <div class="col-2"><span style="font-weight:bold;">Scale ("/mm)</span></div>
             <div class="col-2"><span style="font-weight:bold" class="bi bi-slash-circle">Type</span></div>
-            <div class="col-1"><span style="font-weight:bold;">Tension</span></div>
+            <div class="col-2"><span style="font-weight:bold;">Tension</span></div>
         </div>
+
         foreach (var gString in StringSet.StringCollection)
         {
             <div class="row">
                 <div class="col-2">
-                    <select id="_stringnoteselector" class="form-select" value="@gString.Note.FullName" @onchange="args => SelectNote(gString.Position, args)">
+                    <MudSelect id="_stringnoteselector" T="string" Value="@gString.Note.FullName" Text="@gString.Note.FullName"
+                               ValueChanged="@(note=>SelectNote(gString.Position, note))">
                         @foreach (var note in Notes)
                         {
-                            <option value=@note.FullName>@note.FullName</option>
+                            <MudSelectItem Value="@(note.FullName)">@note.FullName</MudSelectItem>
                         }
-                    </select>
+                    </MudSelect>
                 </div>
-                <div class="col-3">
-                    <div class="row">
-                        <div class="col">
-                            <input style="width:60px;" id="_stringlengthinch" value="@gString.Length_INCH"
-                                @onchange="args => SetStringLength(gString.Position, true, args)" />
-                        </div>
-                        <div class="col">
-                            <input style="width:60px;" id="_stringlengthmm" value="@Math.Round(@gString.Length_MM, 0)"
-                                @onchange="args => SetStringLength(gString.Position, false, args)" />
-                        </div>
-                    </div>
+                <div class="col-2">
+                    <MudNumericField T="double" id="_stringlengthinch" Value="@gString.Length_INCH" Label="@($"{Math.Round(@gString.Length_MM, 0)}mm")"
+                                     ValueChanged="@(scaleLength => SetStringLength(gString.Position, scaleLength))" />
                 </div>
                 <div class="col-2">
-                    <select id="_prefixdiameterselector" class="form-select" value="@gString.UW.FullName" 
-                        @onchange="args => SelectPrefixDiameter(gString.Position, args)">
+                    <MudSelect id="_prefixdiameterselector" T="string" Value="@gString.UW.FullName" Text="@gString.UW.FullName"
+                               ValueChanged="@(diameter => SelectPrefixDiameter(gString.Position, diameter))">
                         @foreach (var pd in PrefixDiameters)
                         {
-                            <option value=@pd>@pd</option>
+                            <MudSelectItem Value="@(pd)">@pd</MudSelectItem>
                         }
-                    </select>
+                    </MudSelect>
+                </div>
+                <div class="col-2">
+                    <MudField id="_stringtensiondisplay" Label="@gString.TensionDisplay" />
                 </div>
-                <div class="col-1"><label for="@gString.TensionDisplay">@gString.TensionDisplay</label></div>
             </div>
         }
 
-        <DisplayChartComponent StringSet="@StringSet"/>
+        <div class="row">
+            <DisplayChartComponent StringSet="@StringSet" />
+        </div>
     }
 </div>
 
@@ -114,28 +113,28 @@
 
         return await obTask;
     }
-    async Task SelectNote(int position, ChangeEventArgs e)
+
+    async Task SelectNote(int position, string noteValue)
     {
-        Calculator.MusicalNote newNote = new Calculator.MusicalNote(e.Value?.ToString());
+        Calculator.MusicalNote newNote = new Calculator.MusicalNote(noteValue);
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
         oldString.Note = newNote;
         await StringSetChanged.InvokeAsync(StringSet);
     }
 
-    async Task SelectPrefixDiameter(int position, ChangeEventArgs e)
+    async Task SelectPrefixDiameter(int position, string value)
     {
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
-        var newUW = Calculator.UnitWeightRepo.Repository.FirstOrDefault(_s => _s.FullName == e.Value?.ToString());
+        var newUW = Calculator.UnitWeightRepo.Repository.FirstOrDefault(_s => _s.FullName == value);
         oldString.UW = newUW;
         oldString.Diameter = newUW.StringDiameter_INCH;
         await StringSetChanged.InvokeAsync(StringSet);
     }
 
-    async Task SetStringLength(int position, bool isInches, ChangeEventArgs e)
+    async Task SetStringLength(int position, double value)
     {
         var oldString = StringSet.StringCollection.First(_n => _n.Position == position);
-        var newLength = isInches ? double.Parse(e.Value?.ToString()) : Math.Round(double.Parse(e.Value?.ToString()) / 25.4, 1);
-        oldString.Length_INCH = newLength;
+        oldString.Length_INCH = value;
         await StringSetChanged.InvokeAsync(StringSet);
     }