51 lines
1.7 KiB
HTML
51 lines
1.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Add Fuel Purchase{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2 class="uk-heading-line"><span>Add Fuel Purchase</span></h2>
|
|
|
|
<form method="post" class="uk-form-stacked">
|
|
{% csrf_token %}
|
|
|
|
{% for field in form %}
|
|
<div class="uk-margin">
|
|
<label class="uk-form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
|
|
<div class="uk-form-controls">
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<p class="uk-text-meta">{{ field.help_text }}</p>
|
|
{% endif %}
|
|
{% for error in field.errors %}
|
|
<p class="uk-text-danger">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<button type="submit" class="uk-button uk-button-primary">Save</button>
|
|
<a href="{% url 'fuelpurchase_list_current' %}" class="uk-button uk-button-default">Cancel</a>
|
|
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const totalCostInput = document.getElementById("id_total_cost");
|
|
const pricePerLitreInput = document.getElementById("id_price_per_litre");
|
|
const amountLitresInput = document.getElementById("id_amount_litres");
|
|
|
|
function updateAmountLitres() {
|
|
const total = parseFloat(totalCostInput.value);
|
|
const price = parseFloat(pricePerLitreInput.value);
|
|
if (!isNaN(total) && !isNaN(price) && price > 0) {
|
|
amountLitresInput.value = (total / price).toFixed(2);
|
|
} else {
|
|
amountLitresInput.value = "";
|
|
}
|
|
}
|
|
|
|
totalCostInput.addEventListener("input", updateAmountLitres);
|
|
pricePerLitreInput.addEventListener("input", updateAmountLitres);
|
|
});
|
|
</script>
|
|
{% endblock %}
|