124 lines
3.8 KiB
HTML
124 lines
3.8 KiB
HTML
{% 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">
|
|
{{ 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">
|
|
{% 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>
|
|
|
|
<section class="panel">
|
|
<h2>Add CAPEX Entry</h2>
|
|
{% if scenarios %}
|
|
<form id="capex-form" class="form-grid">
|
|
{{ 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
|
|
id="capex-form-amount"
|
|
type="number"
|
|
name="amount"
|
|
min="0"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</label>
|
|
<label for="capex-form-description">
|
|
Description (optional)
|
|
<textarea
|
|
id="capex-form-description"
|
|
name="description"
|
|
rows="3"
|
|
></textarea>
|
|
</label>
|
|
<button type="submit" class="btn primary">Add CAPEX</button>
|
|
</form>
|
|
{{ 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">
|
|
{{ 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
|
|
id="opex-form-amount"
|
|
type="number"
|
|
name="amount"
|
|
min="0"
|
|
step="0.01"
|
|
required
|
|
/>
|
|
</label>
|
|
<label for="opex-form-description">
|
|
Description (optional)
|
|
<textarea
|
|
id="opex-form-description"
|
|
name="description"
|
|
rows="3"
|
|
></textarea>
|
|
</label>
|
|
<button type="submit" class="btn primary">Add OPEX</button>
|
|
</form>
|
|
{{ feedback("opex-feedback") }} {% else %} {{ empty_state( "opex-form-empty",
|
|
"Create a scenario before adding OPEX entries." ) }} {% endif %}
|
|
</section>
|
|
|
|
{% endblock %} {% block scripts %} {{ super() }}
|
|
<script id="costs-payload" type="application/json">
|
|
{{ {"capex": capex_by_scenario, "opex": opex_by_scenario} | tojson }}
|
|
</script>
|
|
<script src="/static/js/costs.js"></script>
|
|
{% endblock %}
|