feat: Introduce reusable template components and enhance styling utilities for consistent UI
This commit is contained in:
@@ -1,47 +1,33 @@
|
||||
{% extends "base.html" %} {% block title %}Consumption · CalMiner{% endblock %}
|
||||
{% block content %}
|
||||
{% extends "base.html" %} {% from "partials/components.html" import
|
||||
select_field, feedback, empty_state, table_container with context %} {% block
|
||||
title %}Consumption · CalMiner{% endblock %} {% block content %}
|
||||
<section class="panel">
|
||||
<h2>Consumption Tracking</h2>
|
||||
<div class="form-grid">
|
||||
<label for="consumption-scenario-filter">
|
||||
Scenario filter
|
||||
<select id="consumption-scenario-filter">
|
||||
<option value="">Select a scenario</option>
|
||||
{% for scenario in scenarios %}
|
||||
<option value="{{ scenario.id }}">{{ scenario.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div id="consumption-empty" class="empty-state">
|
||||
Choose a scenario to review its consumption records.
|
||||
</div>
|
||||
<div id="consumption-table-wrapper" class="table-container hidden">
|
||||
<table aria-label="Scenario consumption records">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="consumption-table-body"></tbody>
|
||||
</table>
|
||||
{{ select_field( "Scenario filter", "consumption-scenario-filter",
|
||||
options=scenarios, placeholder="Select a scenario" ) }}
|
||||
</div>
|
||||
{{ empty_state( "consumption-empty", "Choose a scenario to review its
|
||||
consumption records." ) }} {% call table_container(
|
||||
"consumption-table-wrapper", hidden=True, aria_label="Scenario consumption
|
||||
records" ) %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Amount</th>
|
||||
<th scope="col">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="consumption-table-body"></tbody>
|
||||
{% endcall %}
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Add Consumption Record</h2>
|
||||
{% if scenarios %}
|
||||
<form id="consumption-form" class="form-grid">
|
||||
<label for="consumption-form-scenario">
|
||||
Scenario
|
||||
<select id="consumption-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", "consumption-form-scenario",
|
||||
name="scenario_id", options=scenarios, required=True, placeholder="Select a
|
||||
scenario", placeholder_disabled=True ) }}
|
||||
<label for="consumption-form-amount">
|
||||
Amount
|
||||
<input
|
||||
@@ -63,8 +49,7 @@
|
||||
</label>
|
||||
<button type="submit" class="btn primary">Add Record</button>
|
||||
</form>
|
||||
<p id="consumption-feedback" class="feedback hidden" role="status"></p>
|
||||
{% else %}
|
||||
{{ feedback("consumption-feedback") }} {% else %}
|
||||
<p class="empty-state">
|
||||
Create a scenario before adding consumption records.
|
||||
</p>
|
||||
|
||||
@@ -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() }}
|
||||
|
||||
37
templates/partials/components.html
Normal file
37
templates/partials/components.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{% macro select_field(label_text, select_id, name=None, options=[], placeholder="Select an option", required=False, include_blank=True, value_attr="id", label_attr="name", placeholder_disabled=False, placeholder_selected=True, selected_value=None) %}
|
||||
<label for="{{ select_id }}">
|
||||
{{ label_text }}
|
||||
<select id="{{ select_id }}"{% if name %} name="{{ name }}"{% endif %}{% if required %} required{% endif %}>
|
||||
{% if include_blank %}
|
||||
<option value=""{% if placeholder_disabled %} disabled{% endif %}{% if placeholder_selected %} selected{% endif %}>{{ placeholder }}</option>
|
||||
{% endif %}
|
||||
{% for option in options %}
|
||||
{% if option is mapping %}
|
||||
{% set option_value = option[value_attr] %}
|
||||
{% set option_label = option[label_attr] %}
|
||||
{% else %}
|
||||
{% set option_value = attribute(option, value_attr) %}
|
||||
{% set option_label = attribute(option, label_attr) %}
|
||||
{% endif %}
|
||||
<option value="{{ option_value }}"{% if selected_value is not none and option_value|string == selected_value|string %} selected{% endif %}>{{ option_label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro feedback(id, hidden=True, role="status", extra_classes="") %}
|
||||
<p id="{{ id }}" class="feedback{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}" role="{{ role }}"></p>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro empty_state(id, text, hidden=False, extra_classes="") %}
|
||||
<p id="{{ id }}" class="empty-state{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}">{{ text }}</p>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro table_container(wrapper_id, hidden=False, aria_label=None, extra_classes="", heading=None, heading_level="h3") %}
|
||||
<div id="{{ wrapper_id }}" class="table-container{% if hidden %} hidden{% endif %}{% if extra_classes %} {{ extra_classes }}{% endif %}">
|
||||
{% if heading %}<{{ heading_level }}>{{ heading }}</{{ heading_level }}>{% endif %}
|
||||
<table{% if aria_label %} aria-label="{{ aria_label }}"{% endif %}>
|
||||
{{ caller() }}
|
||||
</table>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Reference in New Issue
Block a user