Used AI to restructure the razor pages into distinct nodes.

Pages/Nodes/BatterySimulationNode.razor

@@ -1 +1,104 @@
- <!-- html/razor layout specifically for the second battery block and also the code specific for this block. It should feedback to the shared data arrays in home.  -->
+ @using Radzen
+@using Radzen.Blazor
+@using BattSim.Models
+@using BattSim.Services
+
+<div class="pipeline-box @GetPipelineStepClasses(StepData)">
+    <div class="box-header" @onclick="ToggleBox">
+        <div class="step-number">2</div>
+        <div class="step-title">Batterij Simulatie</div>
+        <div class="status-indicator"></div>
+    </div>
+    <div class="box-content">
+        <div class="box-content-inner">
+            <p class="box-description">Test verschillende batterijconfiguraties</p>
+            
+            @if (FluviusDataRaw.Length == 0)
+            {
+                <div class="info-text">
+                    <p>Upload eerst je Fluvius data (stap 1) om deze stap te kunnen uitvoeren.</p>
+                </div>
+            }
+            else
+            {
+                <div class="form-section">
+                    <div style="display: flex; gap: 1rem;">
+                        <div class="input-group" style="flex: 1;">
+                            <label>Batterijcapaciteit (kWh):</label>
+                            <InputNumber @bind-value="BatteryCapacity" T="double" min="0.1" max="100" step="0.1" />
+                        </div>
+                        <div class="input-group" style="flex: 1;">
+                            <label>Round-trip Efficiëntie (%):</label>
+                            <InputNumber @bind-value="Efficiency" T="double" min="0" max="100" step="1" />
+                        </div>
+                    </div>
+                    <p style="font-size: 0.85rem; color: var(--text-clr); margin-top: 1rem;">
+                        Efficiëntie is het percentage van opgeslagen energie dat terug kan worden gebruikt.
+                    </p>
+                </div>
+                
+                <div style="display: flex; justify-content: center; margin-top: 1.5rem;">
+                    <button @onclick="SimulateBattery" @onclick:stopPropagation disabled="@(StepData.isProcessing || FluviusDataRaw.Length == 0)">
+                        @if (StepData.isProcessing)
+                        {
+                            <text>Simuleren...</text>
+                        }
+                        else
+                        {
+                            <text>Simuleer Batterij</text>
+                        }
+                    </button>
+                </div>
+                
+                @if (StepData.Completed)
+                {
+                    <div class="success-message">
+                        Simulatie voltooid! @SimulationData.Length kwartieren gesimuleerd.
+                    </div>
+                }
+            }
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public EnergyData[] FluviusDataRaw { get; set; } = [];
+    
+    [Parameter]
+    public EnergyData[] SimulationData { get; set; } = [];
+    
+    [Parameter]
+    public PipelineStep StepData { get; set; }
+    
+    [Parameter]
+    public double BatteryCapacity { get; set; } = 7.5;
+    
+    [Parameter]
+    public double Efficiency { get; set; } = 90;
+    
+    [Parameter]
+    public EventCallback OnSimulateBatteryCallback { get; set; }
+    
+    [Parameter]
+    public EventCallback OnToggleBoxCallback { get; set; }
+    
+    private string GetPipelineStepClasses(PipelineStep step)
+    {
+        var classes = new List<string>();
+        if (step.Expanded) classes.Add("expanded");
+        if (step.Completed) classes.Add("completed");
+        if (step.isProcessing) classes.Add("running");
+        return string.Join(" ", classes);
+    }
+    
+    private void SimulateBattery()
+    {
+        OnSimulateBatteryCallback.InvokeAsync();
+    }
+    
+    private void ToggleBox()
+    {
+        OnToggleBoxCallback.InvokeAsync();
+    }
+}