mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Better list for piggy banks.
This commit is contained in:
James Cole
parent
e7165a526b
commit
da1bc18a47
@ -5,14 +5,24 @@ $(function () {
|
||||
if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
|
||||
googleLineChart('chart/piggy-history/' + piggyBankID, 'piggy-bank-history');
|
||||
}
|
||||
$('#sortable').sortable(
|
||||
|
||||
$('#sortable tbody').sortable(
|
||||
{
|
||||
helper: fixHelper,
|
||||
stop: stopSorting,
|
||||
handle: '.handle'
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Return a helper with preserved width of cells
|
||||
var fixHelper = function (e, ui) {
|
||||
ui.children().each(function () {
|
||||
$(this).width($(this).width());
|
||||
});
|
||||
return ui;
|
||||
};
|
||||
|
||||
function addMoney(e) {
|
||||
var pigID = parseInt($(e.target).data('id'));
|
||||
$('#moneyManagementModal').empty().load('piggy-banks/add/' + pigID, function () {
|
||||
@ -33,7 +43,7 @@ function removeMoney(e) {
|
||||
function stopSorting() {
|
||||
$('.loadSpin').addClass('fa fa-refresh fa-spin');
|
||||
var order = [];
|
||||
$.each($('#sortable>div'), function(i,v) {
|
||||
$.each($('#sortable>tr'), function(i,v) {
|
||||
var holder = $(v);
|
||||
var id = holder.data('id');
|
||||
order.push(id);
|
||||
|
||||
56
resources/views/list/piggy-banks.blade.php
Normal file
56
resources/views/list/piggy-banks.blade.php
Normal file
@ -0,0 +1,56 @@
|
||||
<table class="table table-striped" id="sortable">
|
||||
<tbody>
|
||||
@foreach($piggyBanks as $piggyBank)
|
||||
<tr data-id="{{$piggyBank->id}}">
|
||||
<td style="width:60px;">
|
||||
<i class="fa fa-fw fa-bars handle"></i>
|
||||
<i class="loadSpin"></i>
|
||||
</td>
|
||||
<td style="width:80px;">
|
||||
<div class="btn-group btn-group-xs">
|
||||
<a href="{{route('piggy-banks.edit',$piggyBank->id)}}" class="btn btn-default btn-xs"><i class="fa fa-pencil fa-fw"></i></a>
|
||||
<a href="{{route('piggy-banks.delete',$piggyBank->id)}}" class="btn btn-default btn-xs"><i class="fa fa-trash fa-fw"></i></a>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
|
||||
</td>
|
||||
<td>
|
||||
<span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
|
||||
</td>
|
||||
<td style="text-align:right;width:40px;">
|
||||
@if($piggyBank->savedSoFar > 0)
|
||||
<a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="progress progress-striped" style="margin-bottom:0;">
|
||||
<div
|
||||
@if($piggyBank->percentage == 100)
|
||||
class="progress-bar progress-bar-success"
|
||||
@else
|
||||
class="progress-bar progress-bar-info"
|
||||
@endif
|
||||
role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
|
||||
{{$piggyBank->percentage}}%
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
|
||||
<td style="width:40px;">
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
|
||||
@endif
|
||||
</td>
|
||||
<td style="width:200px;">
|
||||
<span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<span title="Left to save">({!! Amount::format($piggyBank->leftToSave) !!})</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
@ -8,81 +8,94 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="sortable">
|
||||
@foreach($piggyBanks as $piggyBank)
|
||||
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="loadSpin"></i>
|
||||
<i class="fa fa-fw fa-bars handle"></i> <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
|
||||
<div class="panel-heading">Piggy banks</div>
|
||||
@include('list.piggy-banks')
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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('piggy-banks.edit',$piggyBank->id)}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
|
||||
<li><a href="{{route('piggy-banks.delete',$piggyBank->id)}}"><i class="fa fa-trash fa-fw"></i> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{--
|
||||
<div class="row" id="sortable">
|
||||
@foreach($piggyBanks as $piggyBank)
|
||||
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<i class="loadSpin"></i>
|
||||
<i class="fa fa-fw fa-bars handle"></i> <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
|
||||
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<!-- One block (remove money) -->
|
||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
|
||||
@if($piggyBank->savedSoFar > 0)
|
||||
<a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Some blocks (bar) -->
|
||||
<div class="col-lg-8 col-md-8 col-sm-4 col-xs-4">
|
||||
<div class="progress progress-striped">
|
||||
<div
|
||||
@if($piggyBank->percentage == 100)
|
||||
class="progress-bar progress-bar-success"
|
||||
@else
|
||||
class="progress-bar progress-bar-info"
|
||||
@endif
|
||||
role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
|
||||
{{$piggyBank->percentage}}%
|
||||
</div>
|
||||
<!-- 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('piggy-banks.edit',$piggyBank->id)}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
|
||||
<li><a href="{{route('piggy-banks.delete',$piggyBank->id)}}"><i class="fa fa-trash fa-fw"></i> Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- One block (add money) -->
|
||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
||||
<span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<!-- One block (remove money) -->
|
||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
|
||||
@if($piggyBank->savedSoFar > 0)
|
||||
<a href="{{route('piggy-banks.removeMoney',$piggyBank->id)}}" class="btn btn-default btn-xs removeMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-minus"></span></a>
|
||||
@endif
|
||||
</div>
|
||||
<!-- Some blocks (bar) -->
|
||||
<div class="col-lg-8 col-md-8 col-sm-4 col-xs-4">
|
||||
<div class="progress progress-striped">
|
||||
<div
|
||||
@if($piggyBank->percentage == 100)
|
||||
class="progress-bar progress-bar-success"
|
||||
@else
|
||||
class="progress-bar progress-bar-info"
|
||||
@endif
|
||||
role="progressbar" aria-valuenow="{{$piggyBank->percentage}}" aria-valuemin="0" aria-valuemax="100" style="min-width: 40px;width: {{$piggyBank->percentage}}%;">
|
||||
{{$piggyBank->percentage}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- One block (add money) -->
|
||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<a href="{{route('piggy-banks.addMoney',$piggyBank->id)}}" class="btn btn-default btn-xs addMoney" data-id="{{{$piggyBank->id}}}"><span data-id="{{{$piggyBank->id}}}" class="glyphicon glyphicon-plus"></span></a>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
|
||||
<span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: right;">
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<span title="Left to save">{!! Amount::format($piggyBank->leftToSave) !!}</span>
|
||||
@endif
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
||||
<span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
|
||||
<span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: right;">
|
||||
@if($piggyBank->leftToSave > 0)
|
||||
<span title="Left to save">{!! Amount::format($piggyBank->leftToSave) !!}</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
--}}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||
<p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user