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

Compacted the kosten with only the contractual variable visible.

Browse Source
This commit is contained in:
Douwe Ravers
2026-08-10 14:43:19 +02:00
parent ef61cddb7b
commit d701b49789
4 changed files with 50399 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
Pages/Home.razor
View File

@@ -143,96 +143,100 @@
<div class="box-content">
<div class="box-content-inner">
<p class="box-description">Vergelijk kosten met en zonder batterij</p>
<!-- Vaste Kosten -->
<!-- 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;">
Vaste Kosten
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;">
<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 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>
<!-- 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;">
<!-- Vlaamse energieheffing (moved here) -->
<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;">
<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;">
<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>
<!-- Heffingen Groene Stroom -->
<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;">
Heffingen Groene Stroom
</h4>
<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-bottom: 1.5rem;">
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
Net- en distributiekosten
</h4>
<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-bottom: 1.5rem;">
<h4 style="color: var(--green-clr); margin-bottom: 0.75rem; border-bottom: 1px solid var(--border-clr); padding-bottom: 0.5rem;">
Heffingen en Toeslagen
</h4>
<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 style="display: flex; justify-content: center; margin-top: 1.5rem;">
<button @onclick="Calculate" @onclick:stopPropagation disabled="@(StepData[2].isProcessing || SimulationData.Length == 0)">
@if (StepData[2].isProcessing)
@@ -245,7 +249,7 @@
}
</button>
</div>
@if (StepData[2].Completed)
{
<div class="results">