douwe/wattif
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Used AI to restructure the razor pages into distinct nodes.

Browse Source
This commit is contained in:
Douwe Ravers
2026-08-12 13:18:16 +02:00
parent 610468effc
commit ae3b61c6fb
5 changed files with 423 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
Pages/Nodes/CostCalculationNode.razor
View File

@@ -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();
}
}