IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2024-12-29 02:11:12 -06:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup budget view.

Browse Source
This commit is contained in:
James Cole 2015-05-24 22:54:59 +02:00
parent 8e1f493daf
commit 4a93bb35f8
3 changed files with 302 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/Http/Controllers/BudgetController.php
View File

@ -1,5 +1,6 @@
<?php namespace FireflyIII\Http\Controllers; <?php namespace FireflyIII\Http\Controllers;
use Amount;
use Auth; use Auth;
use Carbon\Carbon; use Carbon\Carbon;
use FireflyIII\Http\Requests; use FireflyIII\Http\Requests;
@ -45,6 +46,9 @@ class BudgetController extends Controller
$amount = intval(Input::get('amount')); $amount = intval(Input::get('amount'));
$date = Session::get('start', Carbon::now()->startOfMonth()); $date = Session::get('start', Carbon::now()->startOfMonth());
$limitRepetition = $repository->updateLimitAmount($budget, $date, $amount); $limitRepetition = $repository->updateLimitAmount($budget, $date, $amount);
if ($amount == 0) {
$limitRepetition = null;
}
return Response::json(['name' => $budget->name, 'repetition' => $limitRepetition ? $limitRepetition->id : 0]); return Response::json(['name' => $budget->name, 'repetition' => $limitRepetition ? $limitRepetition->id : 0]);
@ -126,7 +130,9 @@ class BudgetController extends Controller
{ {
$budgets = $repository->getActiveBudgets(); $budgets = $repository->getActiveBudgets();
$inactive = $repository->getInactiveBudgets(); $inactive = $repository->getInactiveBudgets();
$spent = '0';
$budgeted = '0';
bcscale(2);
/** /**
* Do some cleanup: * Do some cleanup:
*/ */
@ -134,24 +140,28 @@ class BudgetController extends Controller
// loop the budgets: // loop the budgets:
$budgets->each( /** @var Budget $budget */
function (Budget $budget) use ($repository) { foreach ($budgets as $budget) {
$date = Session::get('start', Carbon::now()->startOfMonth()); $date = Session::get('start', Carbon::now()->startOfMonth());
$end = Session::get('end', Carbon::now()->endOfMonth()); $end = Session::get('end', Carbon::now()->endOfMonth());
$budget->spent = $repository->spentInPeriodCorrected($budget, $date, $end); $budget->spent = $repository->spentInPeriodCorrected($budget, $date, $end);
$budget->currentRep = $repository->getCurrentRepetition($budget, $date); $budget->currentRep = $repository->getCurrentRepetition($budget, $date);
if ($budget->currentRep) {
$budgeted = bcadd($budgeted, $budget->currentRep->amount);
} }
$spent = bcadd($spent, $budget->spent);
}
$dateAsString = Session::get('start', Carbon::now()->startOfMonth())->format('FY');
$budgetIncomeTotal = Preferences::get('budgetIncomeTotal' . $dateAsString, 1000)->data;
$spentPercentage = ($spent > $budgeted) ? ceil($budgeted / $spent * 100) : ceil($spent / $budgeted * 100);
$budgetMaximum = Preferences::get('budgetMaximum', 1000)->data;
$defaultCurrency = Amount::getDefaultCurrency();
return view(
'budgets.index', compact('budgetMaximum', 'budgetIncomeTotal', 'defaultCurrency', 'inactive', 'budgets', 'spent', 'spentPercentage', 'budgeted')
); );
$dateAsString = Session::get('start', Carbon::now()->startOfMonth())->format('FY');
$spent = $budgets->sum('spent');
$amount = Preferences::get('budgetIncomeTotal' . $dateAsString, 1000)->data;
$overspent = $spent > $amount;
$spentPCT = $overspent ? ceil($amount / $spent * 100) : ceil($spent / $amount * 100);
$budgetMax = Preferences::get('budgetMaximum', 1000);
$budgetMaximum = $budgetMax->data;
return view('budgets.index', compact('budgetMaximum', 'inactive', 'budgets', 'spent', 'spentPCT', 'overspent', 'amount'));
} }
/** /**

352
public/js/budgets.js
View File

@ -1,15 +1,101 @@
/* globals $, token, budgetID, repetitionID */ /* globals $, budgeted, currencySymbol, overspent, budgetIncomeTotal ,budgetedMuch, budgetedPercentage, token, budgetID, repetitionID, spent, budgeted, overspent, spentPercentage */
function drawSpentBar() {
"use strict";
if (overspent) {
// draw overspent bar
$('.spentBar .progress-bar-warning').css('width', spentPercentage + '%');
$('.spentBar .progress-bar-danger').css('width', (100 - spentPercentage) + '%');
} else {
// draw normal bar:
$('.spentBar .progress-bar-info').css('width', spentPercentage + '%');
}
}
function drawBudgetedBar() {
"use strict";
var budgetedMuch = budgeted > budgetIncomeTotal;
// recalculate percentage:
var pct;
if (budgetedMuch) {
// budgeted too much.
pct = (budgetIncomeTotal / budgeted) * 100;
console.log('Budgeted TOO much. Pct is ' + pct)
$('.budgetedBar .progress-bar-warning').css('width', pct + '%');
$('.budgetedBar .progress-bar-danger').css('width', (100 - pct) + '%');
$('.budgetedBar .progress-bar-info').css('width', 0);
} else {
pct = (budgeted / budgetIncomeTotal) * 100;
console.log('Not budgeted too much. Pct is ' + pct)
$('.budgetedBar .progress-bar-warning').css('width', 0);
$('.budgetedBar .progress-bar-danger').css('width', 0);
$('.budgetedBar .progress-bar-info').css('width', pct + '%');
}
$('#budgetedAmount').html(currencySymbol + ' ' + budgeted.toFixed(2));
}
function updateBudgetedAmounts(e) {
"use strict";
var target = $(e.target);
var id = target.data('id');
var value = target.val();
var original = target.data('original');
var difference = value - original;
if (difference !== 0) {
// add difference to 'budgeted' var
budgeted = budgeted + difference;
// update original:
target.data('original', value);
// run drawBudgetedBar() again:
drawBudgetedBar();
// send a post to Firefly to update the amount:
$.post('budgets/amount/' + id, {amount: value, _token: token}).success(function (data) {
// update the link if relevant:
if (data.repetition > 0) {
$('.budget-link[data-id="' + id + '"]').attr('href', 'budgets/show/' + id + '/' + data.repetition);
} else {
$('.budget-link[data-id="' + id + '"]').attr('href', 'budgets/show/' + id);
}
});
}
console.log('Budget id is ' + id);
console.log('Difference = ' + (value - original ));
}
$(function () { $(function () {
"use strict"; "use strict";
updateRanges();
//$('input[type="range"]').change(updateSingleRange);
$('input[type="range"]').on('input', updateSingleRange);
//$('input[type="number"]').on('change', updateSingleRange);
$('input[type="number"]').on('input', updateSingleRange);
$('.updateIncome').on('click', updateIncome); $('.updateIncome').on('click', updateIncome);
/*
On start, fill the "spent"-bar using the content from the page.
*/
drawSpentBar();
drawBudgetedBar();
/*
When the input changes, update the percentages for the budgeted bar:
*/
$('input[type="number"]').on('input', updateBudgetedAmounts);
//updateRanges();
//$('input[type="range"]').on('input', updateSingleRange);
//$('input[type="number"]').on('input', updateSingleRange);
/*
Draw the charts, if necessary:
*/
if (typeof budgetID !== 'undefined' && typeof repetitionID === 'undefined') { if (typeof budgetID !== 'undefined' && typeof repetitionID === 'undefined') {
googleColumnChart('chart/budget/' + budgetID, 'budgetOverview'); googleColumnChart('chart/budget/' + budgetID, 'budgetOverview');
} }
@ -20,85 +106,85 @@ $(function () {
}); });
function updateSingleRange(e) { //function updateSingleRange(e) {
"use strict"; // "use strict";
// get some values: // // get some values:
var input = $(e.target); // var input = $(e.target);
var id = input.data('id'); // var id = input.data('id');
var value = parseInt(input.val()); // var value = parseInt(input.val());
var spent = parseFloat($('#spent-' + id).data('value')); // var spent = parseFloat($('#spent-' + id).data('value'));
//
// update small display: // // update small display:
if (value > 0) { // if (value > 0) {
// show the input: // // show the input:
$('#budget-info-' + id + ' span').show(); // $('#budget-info-' + id + ' span').show();
$('#budget-info-' + id + ' input').show(); // $('#budget-info-' + id + ' input').show();
//
// update the text: // // update the text:
$('#budget-description-' + id).text('Budgeted: '); // $('#budget-description-' + id).text('Budgeted: ');
} else { // } else {
// hide the input: // // hide the input:
$('#budget-info-' + id + ' span').hide(); // $('#budget-info-' + id + ' span').hide();
$('#budget-info-' + id + ' input').hide(); // $('#budget-info-' + id + ' input').hide();
//
// update the text: // // update the text:
$('#budget-description-' + id).html('<em>No budget</em>'); // $('#budget-description-' + id).html('<em>No budget</em>');
} // }
//
// update the range display text: // // update the range display text:
$('#budget-range-display-' + id).text('\u20AC ' + value.toFixed(2)); // $('#budget-range-display-' + id).text('\u20AC ' + value.toFixed(2));
//
// send a post to Firefly to update the amount: // // send a post to Firefly to update the amount:
$.post('budgets/amount/' + id, {amount: value, _token: token}).success(function (data) { // $.post('budgets/amount/' + id, {amount: value, _token: token}).success(function (data) {
// update the link if relevant: // // update the link if relevant:
$('#budget-link-' + id).attr('href', 'budgets/show/' + id + '/' + data.repetition); // $('#budget-link-' + id).attr('href', 'budgets/show/' + id + '/' + data.repetition);
}); // });
if (input.attr('type') === 'number') { // if (input.attr('type') === 'number') {
// update the range-input: // // update the range-input:
$('#budget-range-' + id).val(value); // $('#budget-range-' + id).val(value);
} else { // } else {
// update the number-input: // // update the number-input:
$('#budget-info-' + id + ' input').val(value); // $('#budget-info-' + id + ' input').val(value);
} // }
//
// update or hide the bar, whichever is necessary. // // update or hide the bar, whichever is necessary.
updateTotal(); // updateTotal();
return value; // return value;
} //}
//
function updateTotal() { //function updateTotal() {
"use strict"; // "use strict";
var sum = 0; // var sum = 0;
$('input[type="range"]').each(function (i, v) { // $('input[type="range"]').each(function (i, v) {
// get some values: // // get some values:
sum += parseInt($(v).val()); // sum += parseInt($(v).val());
}); // });
//
/** // /**
* Update total sum: // * Update total sum:
*/ // */
var totalAmount = parseInt($('#totalAmount').data('value')); // var totalAmount = parseInt($('#totalAmount').data('value'));
var pct; // var pct;
if (sum <= totalAmount) { // if (sum <= totalAmount) {
pct = sum / totalAmount * 100; // pct = sum / totalAmount * 100;
$('#progress-bar-default').css('width', pct + '%'); // $('#progress-bar-default').css('width', pct + '%');
$('#progress-bar-warning').css('width', '0'); // $('#progress-bar-warning').css('width', '0');
$('#progress-bar-danger').css('width', '0'); // $('#progress-bar-danger').css('width', '0');
$('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-success').removeClass('text-danger'); // $('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-success').removeClass('text-danger');
} else { // } else {
// we gaan er X overheen, // // we gaan er X overheen,
//
pct = totalAmount / sum * 100; // pct = totalAmount / sum * 100;
var danger = 100 - pct; // var danger = 100 - pct;
var err = 100 - danger; // var err = 100 - danger;
$('#progress-bar-default').css('width', 0); // $('#progress-bar-default').css('width', 0);
$('#progress-bar-warning').css('width', err + '%'); // $('#progress-bar-warning').css('width', err + '%');
$('#progress-bar-danger').css('width', danger + '%'); // $('#progress-bar-danger').css('width', danger + '%');
$('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-danger').removeClass('text-success'); // $('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-danger').removeClass('text-success');
} // }
//
} //}
//
function updateIncome() { function updateIncome() {
"use strict"; "use strict";
$('#monthlyBudgetModal').empty().load('budgets/income', function () { $('#monthlyBudgetModal').empty().load('budgets/income', function () {
@ -107,51 +193,51 @@ function updateIncome() {
return false; return false;
} }
//
function updateRanges() { //function updateRanges() {
"use strict"; // "use strict";
//
//
var sum = 0; // var sum = 0;
$('input[type="range"]').each(function (i, v) { // $('input[type="range"]').each(function (i, v) {
// get some values: // // get some values:
var input = $(v); // var input = $(v);
var id = input.data('id'); // var id = input.data('id');
var value = parseInt(input.val()); // var value = parseInt(input.val());
//
// calculate sum: // // calculate sum:
sum += value; // sum += value;
//
// update small display: // // update small display:
$('#budget-range-display-' + id).text('\u20AC ' + value.toFixed(2)); // $('#budget-range-display-' + id).text('\u20AC ' + value.toFixed(2));
//
// send a post to Firefly to update the amount: // // send a post to Firefly to update the amount:
$.post('budgets/amount/' + id, {amount: value, _token: token}); // $.post('budgets/amount/' + id, {amount: value, _token: token});
//
}); // });
//
/** // /**
* Update total sum: // * Update total sum:
*/ // */
var totalAmount = parseInt($('#totalAmount').data('value')); // var totalAmount = parseInt($('#totalAmount').data('value'));
var pct; // var pct;
if (sum <= totalAmount) { // if (sum <= totalAmount) {
pct = sum / totalAmount * 100; // pct = sum / totalAmount * 100;
$('#progress-bar-default').css('width', pct + '%'); // $('#progress-bar-default').css('width', pct + '%');
$('#progress-bar-warning').css('width', '0'); // $('#progress-bar-warning').css('width', '0');
$('#progress-bar-danger').css('width', '0'); // $('#progress-bar-danger').css('width', '0');
$('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-success').removeClass('text-danger'); // $('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-success').removeClass('text-danger');
} else { // } else {
// we gaan er X overheen, // // we gaan er X overheen,
//
pct = totalAmount / sum * 100; // pct = totalAmount / sum * 100;
var danger = 100 - pct; // var danger = 100 - pct;
var err = 100 - danger; // var err = 100 - danger;
$('#progress-bar-default').css('width', 0); // $('#progress-bar-default').css('width', 0);
$('#progress-bar-warning').css('width', err + '%'); // $('#progress-bar-warning').css('width', err + '%');
$('#progress-bar-danger').css('width', danger + '%'); // $('#progress-bar-danger').css('width', danger + '%');
$('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-danger').removeClass('text-success'); // $('#budgetedAmount').text('\u20AC ' + sum.toFixed(2)).addClass('text-danger').removeClass('text-success');
} // }
//
//
} //}

137
resources/twig/budgets/index.twig
View File

@ -11,23 +11,20 @@
<div class="panel-body"> <div class="panel-body">
<div class="row"> <div class="row">
<div class="col-lg-6 col-md-4 col-sm-3"> <div class="col-lg-6 col-md-4 col-sm-3">
<small>{{ 'budgeted'|_ }}: <span id="budgetedAmount" data-value="300"></span></small> <small>{{ 'budgeted'|_ }}: <span id="budgetedAmount" class="text-success">{{ budgeted|formatAmountPlain }}</span></small>
</div> </div>
<div class="col-lg-6 col-md-4 col-sm-3" style="text-align:right;"> <div class="col-lg-6 col-md-4 col-sm-3" style="text-align:right;">
<small>{{ trans('firefly.availableIn',{date : Session.get('start').formatLocalized(monthFormat) }) }}: <small>{{ trans('firefly.availableIn',{date : Session.get('start').formatLocalized(monthFormat) }) }}:
<a href="#" class="updateIncome"><span id="totalAmount" data-value="{{ amount }}">{{ amount|formatAmount }}</span></a></small> <a href="#" class="updateIncome"><span id="budgetIncomeTotal" data-value="{{ budgetIncomeTotal }}">{{ budgetIncomeTotal|formatAmount }}</span></a></small>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <div class="col-lg-12 col-md-12 col-sm-12">
<div class="progress progress-striped"> <div class="progress progress-striped budgetedBar">
<div class="progress-bar progress-bar-info" id="progress-bar-default" role="progressbar" aria-valuenow="0" aria-valuemin="0" <div class="progress-bar progress-bar-danger" id="progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
aria-valuemax="100" style="width: 0;"></div> <div class="progress-bar progress-bar-warning" id="progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
<div class="progress-bar progress-bar-danger" id="progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" <div class="progress-bar progress-bar-info" id="progress-bar-default" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
aria-valuemax="100" style="width: 0;"></div>
<div class="progress-bar progress-bar-warning" id="progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0"
aria-valuemax="100" style="width: 0;"></div>
</div> </div>
</div> </div>
</div> </div>
@ -38,16 +35,10 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-12 col-md-12 col-sm-12"> <div class="col-lg-12 col-md-12 col-sm-12">
<div class="progress progress-striped"> <div class="progress progress-striped spentBar">
{% if overspent %} <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ spentPCT }}" aria-valuemin="0" <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
aria-valuemax="100" style="width: {{ spentPCT }}%;"></div> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="{{ 100-spentPCT }}" aria-valuemin="0"
aria-valuemax="100" style="width: {{ 100-spentPCT }}%;"></div>
{% else %}
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="{{ spentPCT }}" aria-valuemin="0"
aria-valuemax="100" style="width: {{ spentPCT }}%;"></div>
{% endif %}
</div> </div>
</div> </div>
</div> </div>
@ -80,76 +71,48 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
<i class="fa fa-fw fa-tasks"></i> <i class="fa fa-fw fa-tasks"></i>
<!-- link in header -->
{% if budget.currentRep %} {% if budget.currentRep %}
<a href="{{ route('budgets.show', [budget.id, budget.currentRep.id]) }}" id="budget-link-{{ budget.id }}">{{ budget.name }}</a> <a href="{{ route('budgets.show', [budget.id, budget.currentRep.id]) }}" class="budget-link" data-id="{{ budget.id }}">{{ budget.name }}</a>
{% else %} {% else %}
<a href="{{ route('budgets.show',budget.id) }}" id="budget-link-{{ budget.id }}">{{ budget.name }}</a> <a href="{{ route('budgets.show',budget.id) }}" class="budget-link" data-id="{{ budget.id }}">{{ budget.name }}</a>
{% endif %} {% endif %}
<!-- ACTIONS MENU --> <!-- ACTIONS MENU -->
<div class="pull-right"> <div class="pull-right">
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
{{ 'actions'|_ }} {{ 'actions'|_ }}
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li><a href="{{ route('budgets.edit',budget.id) }}"><i class="fa fa-pencil fa-fw"></i> {{ 'edit'|_ }}</a></li> <li><a href="{{ route('budgets.edit',budget.id) }}"><i class="fa fa-pencil fa-fw"></i> {{ 'edit'|_ }}</a></li>
<li><a href="{{ route('budgets.delete',budget.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li> <li><a href="{{ route('budgets.delete',budget.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li>
</ul> </ul>
</div>
</div>
</div> </div>
<table class="table">
<tr>
<td style="width:40%;">{{ 'budgeted'|_ }}</td>
<td>
<div class="form-group" style="margin-bottom:0;">
<div class="input-group">
<div class="input-group-addon">{{ defaultCurrency.symbol|raw }}</div>
<input type="hidden" name="balance_currency_id" value="1" />
<input class="form-control budgetAmount" data-original="{{ budget.currentRep.amount|number_format(0,'','') }}" data-id="{{ budget.id }}" value="{{ budget.currentRep.amount|number_format(0,'','') }}" autocomplete="off" step="1" min="0" max="{{ budgetMaximum }}" name="amount" type="number">
</div>
</div>
</td>
</tr>
<tr>
<td style="width:50%;">{{ 'spent'|_ }}</td>
<td>{{ budget.spent|formatAmount }}</td>
</tr>
</table>
</div> </div>
</div>
</div>
<div class="panel-body">
<!-- the range in which the budget can be set -->
<p>
{% if budget.currentRep %}
<input type="range" data-id="{{ budget.id }}" data-spent="{{ budget.spent }}" id="budget-range-{{ budget.id }}"
max="{{ budgetMaximum }}" min="0" value="{{ budget.currentRep.amount }}"/>
{% else %}
<input type="range" data-id="{{ budget.id }}" data-spent="{{ budget.spent }}" id="budget-range-{{ budget.id }}"
max="{{ budgetMaximum }}" min="0" value="0"/>
{% endif %}
</p>
<!-- some textual info about the budget. Updates dynamically. -->
<p>
<!-- budget-holder-X holds all the elements -->
<span id="budget-holder-{{ budget.id }}">
{% if budget.currentRep %}
<!-- budget-description-X holds the description. -->
<span id="budget-description-{{ budget.id }}">Budgeted: </span>
<!-- budget-info-X holds the input and the euro-sign: -->
<span id="budget-info-{{ budget.id }}">
{% if budget.currentRep.amount > budget.spent %}
<span class="text-success">{{ getCurrencySymbol()|raw }}</span> <input type="number" min="0" max="{{ budgetMaximum }}" data-id="{{ budget.id }}"
step="1" value="{{ budget.currentRep.amount }}"
style="width:90px;color:#3c763d;"/>
{% else %}
<span class="text-danger">{{ getCurrencySymbol()|raw }}</span> <input type="number" min="0" max="{{ budgetMaximum }}" data-id="{{ budget.id }}"
step="1" value="{{ budget.currentRep.amount }}"
style="width:90px;color:#a94442;"/>
{% endif %}
</span>
{% else %}
<span id="budget-description-{{ budget.id }}"><em>No budget</em></span>
<span id="budget-info-{{ budget.id }}">
<span class="text-success" style="display:none;">{{ getCurrencySymbol()|raw }}</span> <input data-id="{{ budget.id }}" type="number"
min="0" max="{{ budgetMaximum }}" step="1"
value="0"
style="width:50px;color:#3c763d;display:none;"/>
</span>
{% endif %}
</span>
</p>
<p>
<span id="spent-{{ budget.id }}" data-value="{{ budget.spent }}">{{ 'spent'|_ }}: {{ budget.spent|formatAmount }}</span>
</p>
</div>
</div>
</div>
{% endfor %} {% endfor %}
<div class="col-lg-3 col-sm-4 col-md-6"> <div class="col-lg-3 col-sm-4 col-md-6">
<div class="panel panel-default"> <div class="panel panel-default">
@ -191,5 +154,17 @@
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
<script type="text/javascript">
// actually spent bar data:
var spent = {{ spent }};
var overspent = {{ spent }} > {{ budgeted }};
var spentPercentage = {{ spentPercentage }};
var currencySymbol = "{{ getCurrencySymbol()|raw }}";
// budgeted data:
var budgeted = {{ budgeted }};
var budgetIncomeTotal = {{ budgetIncomeTotal }};
</script>
<script type="text/javascript" src="js/budgets.js"></script> <script type="text/javascript" src="js/budgets.js"></script>
{% endblock %} {% endblock %}