Used AI to restructure the razor pages into distinct nodes.
This commit is contained in:
@@ -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();
|
||||
}
|
||||
}
|
||||
@@ -1 +1,180 @@
|
||||
<!-- html/razor layout specifically for the third cost calculation 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">3</div>
|
||||
<div class="step-title">Kosten Berekenen</div>
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-inner">
|
||||
<p class="box-description">Vergelijk kosten met en zonder batterij</p>
|
||||
|
||||
<!-- Contractuele Kosten -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Contractuele Kosten
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Vaste vergoeding (€/jaar):</label>
|
||||
<InputNumber @bind-value="Calculator.BasePayment" T="double" min="0" step="1" />
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Databeheer tarief (€/jaar):</label>
|
||||
<InputNumber @bind-value="Calculator.DataManagementCost" T="double" min="0" step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vaste Kosten Subbox (Collapsed by Default) -->
|
||||
<details class="collapsible-section" style="margin-top: 1rem;">
|
||||
<summary class="collapsible-header">Vaste Kosten</summary>
|
||||
<div class="collapsible-content">
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Vlaamse energieheffing (€/jaar):</label>
|
||||
<InputNumber @bind-value="Calculator.FlemishEnergyTariff" T="double" min="0" step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heffingen Groene Stroom -->
|
||||
<div style="margin-top: 1rem;">
|
||||
<h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Heffingen Groene Stroom</h5>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Groene stroomcertificaten (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.GreenCertificateCost" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Warmtekracht certificaten (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.HeatingCertificateCost" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Net- en distributiekosten -->
|
||||
<div style="margin-top: 1rem;">
|
||||
<h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Net- en distributiekosten</h5>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Capaciteitstarief (€/kWh/jaar):</label>
|
||||
<InputNumber @bind-value="Calculator.CapacityCost" T="double" min="0" step="0.01" />
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Afnametarief (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.UsageTariff" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Heffingen en Toeslagen -->
|
||||
<div style="margin-top: 1rem;">
|
||||
<h5 style="color: var(--green-clr); margin-bottom: 0.5rem;">Heffingen en Toeslagen</h5>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Energiebijdrage (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.EnergyContribution" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Bijzondere accijns (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.SpecialTariffs" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Energiekosten -->
|
||||
<div style="margin-bottom: 1.5rem;">
|
||||
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
|
||||
Energiekosten
|
||||
</h4>
|
||||
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Energiekost (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.EnergyCost" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
<div class="input-group" style="flex: 1;">
|
||||
<label>Terugleveringsvergoeding (c€/kWh):</label>
|
||||
<InputNumber @bind-value="Calculator.ReturnCost" T="double" min="0" step="0.0001" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; margin-top: 1.5rem;">
|
||||
<button @onclick="Calculate" @onclick:stopPropagation disabled="@(StepData.isProcessing || SimulationData.Length == 0)">
|
||||
@if (StepData.isProcessing)
|
||||
{
|
||||
<text>Berekenen...</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>Bereken Kosten</text>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (StepData.Completed)
|
||||
{
|
||||
<div class="results">
|
||||
<p><strong>Originele kosten:</strong> <span class="result-value">€@NormalCost.ToString("0.00")</span></p>
|
||||
<p><strong>Gesimuleerde kosten:</strong> <span class="result-value">€@SimulatedCost.ToString("0.00")</span></p>
|
||||
<p><strong>Besparing:</strong> <span class="result-value">€@((NormalCost - SimulatedCost).ToString("0.00"))</span></p>
|
||||
@if (NormalCost > 0)
|
||||
{
|
||||
<p><strong>Besparingspercent:</strong> <span class="result-value">@(((NormalCost - SimulatedCost) / NormalCost * 100).ToString("0.00"))%</span></p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public EnergyData[] SimulationData { get; set; } = [];
|
||||
|
||||
[Parameter]
|
||||
public EnergyData[] FluviusDataRaw { get; set; } = [];
|
||||
|
||||
[Parameter]
|
||||
public PipelineStep StepData { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EnergyCostCalculator Calculator { get; set; } = new();
|
||||
|
||||
[Parameter]
|
||||
public double NormalCost { get; set; } = 0.0;
|
||||
|
||||
[Parameter]
|
||||
public double SimulatedCost { get; set; } = 0.0;
|
||||
|
||||
[Parameter]
|
||||
public EventCallback OnCalculateCallback { 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 Calculate()
|
||||
{
|
||||
OnCalculateCallback.InvokeAsync();
|
||||
}
|
||||
|
||||
private void ToggleBox()
|
||||
{
|
||||
OnToggleBoxCallback.InvokeAsync();
|
||||
}
|
||||
}
|
||||
@@ -1 +1,103 @@
|
||||
<!-- html/razor layout specifically for the first fluvious 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">1</div>
|
||||
<div class="step-title">Fluvius Data</div>
|
||||
<div class="status-indicator"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-inner">
|
||||
<p class="box-description">Upload je Fluvius kwartierdata om te beginnen</p>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="file-input-wrapper">
|
||||
<InputFile type="file" id="fileUpload" accept=".csv" onchange="async (e) => await OnFileUploaded(e)" />
|
||||
<label for="fileUpload" class="file-input-label">
|
||||
@if (StepData.isProcessing)
|
||||
{
|
||||
<div class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<span style="margin-left: 10px;">Data aan het inladen...</span>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
@if (FluviusDataRaw.Length == 0)
|
||||
{
|
||||
<text>Kies CSV bestand</text>
|
||||
}
|
||||
else
|
||||
{
|
||||
<text>OK @FluviusDataRaw.Length kwartieren geladen</text>
|
||||
}
|
||||
}
|
||||
</label>
|
||||
@if (FluviusDataRaw.Length > 0 && !StepData.isProcessing)
|
||||
{
|
||||
<p class="file-name">@UploadedFileName</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (StepData.Completed)
|
||||
{
|
||||
<div class="success-message">
|
||||
Data succesvol ingeladen en verwerkt!
|
||||
</div>
|
||||
}
|
||||
@if (UploadError != null)
|
||||
{
|
||||
<div class="error-message">
|
||||
@UploadError
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-text">
|
||||
<p><strong>Tip:</strong> Download een volledig jaar aan kwartierdata voor de meest accurate resultaten.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public EnergyData[] FluviusDataRaw { get; set; } = [];
|
||||
|
||||
[Parameter]
|
||||
public PipelineStep StepData { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public string UploadedFileName { get; set; } = string.Empty;
|
||||
|
||||
[Parameter]
|
||||
public string? UploadError { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<InputFileChangeEventArgs> OnFileUploadedCallback { 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 async Task OnFileUploaded(InputFileChangeEventArgs e)
|
||||
{
|
||||
await OnFileUploadedCallback.InvokeAsync(e);
|
||||
}
|
||||
|
||||
private void ToggleBox()
|
||||
{
|
||||
OnToggleBoxCallback.InvokeAsync();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user