allucanget/calminer
2
0
Fork 0
Code Pull Requests Actions Packages Releases Activity

feat: Introduce reusable template components and enhance styling utilities for consistent UI

Browse Source
This commit is contained in:
zwitschi
2025-10-21 07:43:10 +02:00
parent 18f4ae7278
commit ae4b9c136f
5 changed files with 175 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
templates/costs.html
View File

@@ -1,71 +1,52 @@
{% extends "base.html" %} {% block title %}Costs · CalMiner{% endblock %} {%
block content %}
{% extends "base.html" %} {% from "partials/components.html" import
select_field, feedback, empty_state, table_container with context %} {% block
title %}Costs · CalMiner{% endblock %} {% block content %}
<section class="panel">
<h2>Cost Overview</h2>
{% if scenarios %}
<div class="form-grid">
<label for="costs-scenario-filter">
Scenario filter
<select id="costs-scenario-filter">
<option value="">Select a scenario</option>
{% for scenario in scenarios %}
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
{% endfor %}
</select>
</label>
</div>
{% else %}
<p class="empty-state">Create a scenario to review cost information.</p>
{% endif %}
<div id="costs-empty" class="empty-state">
Choose a scenario to review CAPEX and OPEX details.
{{ select_field( "Scenario filter", "costs-scenario-filter",
options=scenarios, placeholder="Select a scenario" ) }}
</div>
{% else %} {{ empty_state( "costs-scenario-empty", "Create a scenario to
review cost information." ) }} {% endif %} {{ empty_state( "costs-empty",
"Choose a scenario to review CAPEX and OPEX details." ) }}
<div id="costs-data" class="hidden">
<div class="table-container">
<h3>Capital Expenditures (CAPEX)</h3>
<table aria-label="Scenario CAPEX records">
<thead>
<tr>
<th scope="col">Amount</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="capex-table-body"></tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<th id="capex-total">—</th>
</tr>
</tfoot>
</table>
<p id="capex-empty" class="empty-state hidden">
No CAPEX records for this scenario yet.
</p>
</div>
<div class="table-container">
<h3>Operational Expenditures (OPEX)</h3>
<table aria-label="Scenario OPEX records">
<thead>
<tr>
<th scope="col">Amount</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="opex-table-body"></tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<th id="opex-total">—</th>
</tr>
</tfoot>
</table>
<p id="opex-empty" class="empty-state hidden">
No OPEX records for this scenario yet.
</p>
</div>
{% call table_container( "capex-table-container", aria_label="Scenario CAPEX
records", heading="Capital Expenditures (CAPEX)" ) %}
<thead>
<tr>
<th scope="col">Amount</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="capex-table-body"></tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<th id="capex-total">—</th>
</tr>
</tfoot>
{% endcall %} {{ empty_state( "capex-empty", "No CAPEX records for this
scenario yet.", hidden=True ) }} {% call table_container(
"opex-table-container", aria_label="Scenario OPEX records",
heading="Operational Expenditures (OPEX)" ) %}
<thead>
<tr>
<th scope="col">Amount</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody id="opex-table-body"></tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<th id="opex-total">—</th>
</tr>
</tfoot>
{% endcall %} {{ empty_state( "opex-empty", "No OPEX records for this
scenario yet.", hidden=True ) }}
</div>
</section>
@@ -73,15 +54,9 @@ block content %}
<h2>Add CAPEX Entry</h2>
{% if scenarios %}
<form id="capex-form" class="form-grid">
<label for="capex-form-scenario">
Scenario
<select id="capex-form-scenario" name="scenario_id" required>
<option value="" disabled selected>Select a scenario</option>
{% for scenario in scenarios %}
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
{% endfor %}
</select>
</label>
{{ select_field( "Scenario", "capex-form-scenario", name="scenario_id",
options=scenarios, required=True, placeholder="Select a scenario",
placeholder_disabled=True ) }}
<label for="capex-form-amount">
Amount
<input
@@ -103,25 +78,18 @@ block content %}
</label>
<button type="submit" class="btn primary">Add CAPEX</button>
</form>
<p id="capex-feedback" class="feedback hidden" role="status"></p>
{% else %}
<p class="empty-state">Create a scenario before adding CAPEX entries.</p>
{% endif %}
{{ feedback("capex-feedback") }} {% else %} {{ empty_state(
"capex-form-empty", "Create a scenario before adding CAPEX entries." ) }} {%
endif %}
</section>
<section class="panel">
<h2>Add OPEX Entry</h2>
{% if scenarios %}
<form id="opex-form" class="form-grid">
<label for="opex-form-scenario">
Scenario
<select id="opex-form-scenario" name="scenario_id" required>
<option value="" disabled selected>Select a scenario</option>
{% for scenario in scenarios %}
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
{% endfor %}
</select>
</label>
{{ select_field( "Scenario", "opex-form-scenario", name="scenario_id",
options=scenarios, required=True, placeholder="Select a scenario",
placeholder_disabled=True ) }}
<label for="opex-form-amount">
Amount
<input
@@ -143,10 +111,8 @@ block content %}
</label>
<button type="submit" class="btn primary">Add OPEX</button>
</form>
<p id="opex-feedback" class="feedback hidden" role="status"></p>
{% else %}
<p class="empty-state">Create a scenario before adding OPEX entries.</p>
{% endif %}
{{ feedback("opex-feedback") }} {% else %} {{ empty_state( "opex-form-empty",
"Create a scenario before adding OPEX entries." ) }} {% endif %}
</section>
{% endblock %} {% block scripts %} {{ super() }}