mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-03 11:08:28 +00:00
Better list for piggy banks.
This commit is contained in:
James Cole
@@ -5,14 +5,24 @@ $(function () {
|
|||||||
if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
|
if (typeof(googleLineChart) === 'function' && typeof(piggyBankID) !== 'undefined') {
|
||||||
googleLineChart('chart/piggy-history/' + piggyBankID, 'piggy-bank-history');
|
googleLineChart('chart/piggy-history/' + piggyBankID, 'piggy-bank-history');
|
||||||
}
|
}
|
||||||
$('#sortable').sortable(
|
|
||||||
|
$('#sortable tbody').sortable(
|
||||||
{
|
{
|
||||||
|
helper: fixHelper,
|
||||||
stop: stopSorting,
|
stop: stopSorting,
|
||||||
handle: '.handle'
|
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) {
|
function addMoney(e) {
|
||||||
var pigID = parseInt($(e.target).data('id'));
|
var pigID = parseInt($(e.target).data('id'));
|
||||||
$('#moneyManagementModal').empty().load('piggy-banks/add/' + pigID, function () {
|
$('#moneyManagementModal').empty().load('piggy-banks/add/' + pigID, function () {
|
||||||
@@ -33,7 +43,7 @@ function removeMoney(e) {
|
|||||||
function stopSorting() {
|
function stopSorting() {
|
||||||
$('.loadSpin').addClass('fa fa-refresh fa-spin');
|
$('.loadSpin').addClass('fa fa-refresh fa-spin');
|
||||||
var order = [];
|
var order = [];
|
||||||
$.each($('#sortable>div'), function(i,v) {
|
$.each($('#sortable>tr'), function(i,v) {
|
||||||
var holder = $(v);
|
var holder = $(v);
|
||||||
var id = holder.data('id');
|
var id = holder.data('id');
|
||||||
order.push(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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" id="sortable">
|
|
||||||
@foreach($piggyBanks as $piggyBank)
|
<div class="row">
|
||||||
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
|
<div class="col-lg-12 col-md-12 col-sm-12">
|
||||||
<div class="panel panel-default">
|
<div class="panel panel-default">
|
||||||
<div class="panel-heading">
|
<div class="panel-heading">Piggy banks</div>
|
||||||
<i class="loadSpin"></i>
|
@include('list.piggy-banks')
|
||||||
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ACTIONS MENU -->
|
{{--
|
||||||
<div class="pull-right">
|
<div class="row" id="sortable">
|
||||||
<div class="btn-group">
|
@foreach($piggyBanks as $piggyBank)
|
||||||
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12" data-id="{{$piggyBank->id}}">
|
||||||
Actions
|
<div class="panel panel-default">
|
||||||
<span class="caret"></span>
|
<div class="panel-heading">
|
||||||
</button>
|
<i class="loadSpin"></i>
|
||||||
<ul class="dropdown-menu pull-right" role="menu">
|
<i class="fa fa-fw fa-bars handle"></i> <a href="{{route('piggy-banks.show',$piggyBank->id)}}" title="{{{$piggyBank->order}}}">{{{$piggyBank->name}}}</a>
|
||||||
<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>
|
<!-- ACTIONS MENU -->
|
||||||
<div class="panel-body">
|
<div class="pull-right">
|
||||||
<div class="row">
|
<div class="btn-group">
|
||||||
<!-- One block (remove money) -->
|
<button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
|
||||||
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-4">
|
Actions
|
||||||
@if($piggyBank->savedSoFar > 0)
|
<span class="caret"></span>
|
||||||
<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>
|
</button>
|
||||||
@endif
|
<ul class="dropdown-menu pull-right" role="menu">
|
||||||
</div>
|
<li><a href="{{route('piggy-banks.edit',$piggyBank->id)}}"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
|
||||||
<!-- Some blocks (bar) -->
|
<li><a href="{{route('piggy-banks.delete',$piggyBank->id)}}"><i class="fa fa-trash fa-fw"></i> Delete</a></li>
|
||||||
<div class="col-lg-8 col-md-8 col-sm-4 col-xs-4">
|
</ul>
|
||||||
<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>
|
||||||
</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>
|
||||||
<div class="row">
|
<div class="panel-body">
|
||||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
<div class="row">
|
||||||
<span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
|
<!-- 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>
|
||||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
|
<div class="row">
|
||||||
<span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
|
||||||
</div>
|
<span title="Saved so far">{!! Amount::format($piggyBank->savedSoFar,true) !!}</span>
|
||||||
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: right;">
|
</div>
|
||||||
@if($piggyBank->leftToSave > 0)
|
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" style="text-align: center;">
|
||||||
<span title="Left to save">{!! Amount::format($piggyBank->leftToSave) !!}</span>
|
<span title="Target amount">{!! Amount::format($piggyBank->targetamount,true) !!}</span>
|
||||||
@endif
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
@endforeach
|
||||||
@endforeach
|
|
||||||
</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">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
Reference in New Issue
Block a user