mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-25 21:16:47 +00:00
Cleanup budget view.
This commit is contained in:
James Cole
@@ -11,23 +11,20 @@
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<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 class="col-lg-6 col-md-4 col-sm-3" style="text-align:right;">
|
||||
<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 class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="progress progress-striped">
|
||||
<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>
|
||||
<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>
|
||||
<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 progress-striped budgetedBar">
|
||||
<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>
|
||||
<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-info" id="progress-bar-default" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -38,16 +35,10 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="progress progress-striped">
|
||||
{% if overspent %}
|
||||
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="{{ spentPCT }}" aria-valuemin="0"
|
||||
aria-valuemax="100" style="width: {{ spentPCT }}%;"></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 class="progress progress-striped spentBar">
|
||||
<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-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
|
||||
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,76 +71,48 @@
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-fw fa-tasks"></i>
|
||||
<!-- link in header -->
|
||||
{% 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 %}
|
||||
<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 %}
|
||||
|
||||
|
||||
<!-- ACTIONS MENU -->
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
{{ 'actions'|_ }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<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.delete',budget.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li>
|
||||
</ul>
|
||||
<div class="pull-right">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||
{{ 'actions'|_ }}
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<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.delete',budget.id) }}"><i class="fa fa-trash fa-fw"></i> {{ 'delete'|_ }}</a></li>
|
||||
</ul>
|
||||
</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 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>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-lg-3 col-sm-4 col-md-6">
|
||||
<div class="panel panel-default">
|
||||
@@ -191,5 +154,17 @@
|
||||
|
||||
{% endblock %}
|
||||
{% 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>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user