77 lines
2.6 KiB
HTML
77 lines
2.6 KiB
HTML
{% 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">
|
|
{{ 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">
|
|
{{ select_field( "Scenario", "consumption-form-scenario",
|
|
name="scenario_id", options=scenarios, required=True, placeholder="Select a
|
|
scenario", placeholder_disabled=True ) }}
|
|
<label for="consumption-form-unit">
|
|
Unit
|
|
<select id="consumption-form-unit" name="unit_name" required>
|
|
<option value="" disabled selected>Select unit</option>
|
|
{% for unit in unit_options %}
|
|
<option value="{{ unit.name }}" data-symbol="{{ unit.symbol }}">
|
|
{{ unit.name }} ({{ unit.symbol }})
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<input id="consumption-form-unit-symbol" type="hidden" name="unit_symbol" />
|
|
<label for="consumption-form-amount">
|
|
Amount
|
|
<input
|
|
id="consumption-form-amount"
|
|
type="number"
|
|
name="amount"
|
|
min="0"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</label>
|
|
<label for="consumption-form-description">
|
|
Description (optional)
|
|
<textarea
|
|
id="consumption-form-description"
|
|
name="description"
|
|
rows="3"
|
|
></textarea>
|
|
</label>
|
|
<button type="submit" class="btn primary">Add Record</button>
|
|
</form>
|
|
{{ feedback("consumption-feedback") }} {% else %}
|
|
<p class="empty-state">
|
|
Create a <a href="scenarios">scenario</a> before adding consumption records.
|
|
</p>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% endblock %} {% block scripts %} {{ super() }}
|
|
<script id="consumption-data" type="application/json">
|
|
{{ {"scenarios": scenarios, "consumption": consumption_by_scenario, "unit_options": unit_options} | tojson }}
|
|
</script>
|
|
<script src="/static/js/consumption.js"></script>
|
|
{% endblock %}
|