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

57
templates/consumption.html
View File

@@ -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>