rearranged page
This commit is contained in:
parent
2100c2c893
commit
f7b99f228e
1 changed files with 79 additions and 75 deletions
|
@ -21,81 +21,85 @@
|
||||||
</md-toolbar>
|
</md-toolbar>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div layout="vertical">
|
<div layout="vertical" layout-md="horizontal" layout-padding>
|
||||||
<table class="table" style="width: 100%">
|
<div flex="50">
|
||||||
<thead>
|
<table class="table" style="width: 100%">
|
||||||
<tr>
|
<thead>
|
||||||
<th style="width: 11%">Account</th>
|
<tr>
|
||||||
<th style="width: 3%">Spent</th>
|
<th style="width: 11%">Account</th>
|
||||||
<th style="width: 3%">Budgeted</th>
|
<th style="width: 3%">Spent</th>
|
||||||
<th style="width: 3%">Percentage</th>
|
<th style="width: 3%">Budgeted</th>
|
||||||
<th>Progress</th>
|
<th style="width: 3%">Percentage</th>
|
||||||
</tr>
|
<th>Progress</th>
|
||||||
</thead>
|
</tr>
|
||||||
<tbody>
|
</thead>
|
||||||
<tr data-ng-repeat="account in budget"
|
<tbody>
|
||||||
data-ng-class="{'even': $even, 'odd': $odd}">
|
<tr data-ng-repeat="account in budget"
|
||||||
<td>
|
data-ng-class="{'even': $even, 'odd': $odd}">
|
||||||
{{account.account}}
|
<td>
|
||||||
</td>
|
{{account.account}}
|
||||||
<td style="text-align: right;">
|
</td>
|
||||||
{{account.amount | number:2}}{{account.currency}}
|
<td style="text-align: right;">
|
||||||
</td>
|
{{account.amount | number:2}}{{account.currency}}
|
||||||
<td style="text-align: right;">
|
</td>
|
||||||
<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
|
<td style="text-align: right;">
|
||||||
<span data-ng-if="account.percentage < 0">
|
<span data-ng-if="account.percentage >= 0">{{account.budget | number:2}}{{account.currency}}</span>
|
||||||
{{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
|
<span data-ng-if="account.percentage < 0">
|
||||||
</span>
|
{{balance.buckets[1].raw_total - total_budget | number:2}}{{account.currency}}
|
||||||
</td>
|
</span>
|
||||||
<td style="text-align: right;">
|
</td>
|
||||||
<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
|
<td style="text-align: right;">
|
||||||
<span data-ng-if="account.percentage < 0">
|
<span data-ng-if="account.percentage >= 0">{{account.percentage | number:2}}%</span>
|
||||||
{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
|
<span data-ng-if="account.percentage < 0">
|
||||||
</span>
|
{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100 | number:2}}%
|
||||||
</td>
|
</span>
|
||||||
<td>
|
</td>
|
||||||
<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
|
<td>
|
||||||
data-ng-if="account.percentage > 100"></md-progress-linear>
|
<md-progress-linear md-theme="red" mode="determinate" value="{{account.percentage}}"
|
||||||
<md-progress-linear md-theme="brown" mode="determinate"
|
data-ng-if="account.percentage > 100"></md-progress-linear>
|
||||||
value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
|
<md-progress-linear md-theme="brown" mode="determinate"
|
||||||
data-ng-if="account.percentage < 0"></md-progress-linear>
|
value="{{( account.amount / ( balance.buckets[1].raw_total - total_budget ) ) * 100}}"
|
||||||
<md-progress-linear mode="determinate" value="{{account.percentage}}"
|
data-ng-if="account.percentage < 0"></md-progress-linear>
|
||||||
data-ng-if="account.percentage <= 100"></md-progress-linear>
|
<md-progress-linear mode="determinate" value="{{account.percentage}}"
|
||||||
</td>
|
data-ng-if="account.percentage <= 100"></md-progress-linear>
|
||||||
</tr>
|
</td>
|
||||||
</tbody>
|
</tr>
|
||||||
</table>
|
</tbody>
|
||||||
<table class="table" style="width: 100%">
|
</table>
|
||||||
<thead>
|
</div>
|
||||||
<tr>
|
<div flex="50">
|
||||||
<th style="width: 11%">Account</th>
|
<table class="table" style="width: 100%">
|
||||||
<th style="width: 3%">Can be saved</th>
|
<thead>
|
||||||
<th style="width: 3%">Total income</th>
|
<tr>
|
||||||
<th style="width: 3%">Percentage</th>
|
<th style="width: 11%">Account</th>
|
||||||
<th>Progress</th>
|
<th style="width: 3%">Savable</th>
|
||||||
</tr>
|
<th style="width: 3%">Income</th>
|
||||||
</thead>
|
<th style="width: 3%">Percentage</th>
|
||||||
<tbody>
|
<th>Progress</th>
|
||||||
<tr>
|
</tr>
|
||||||
<td>
|
</thead>
|
||||||
Potential savings
|
<tbody>
|
||||||
</td>
|
<tr class="odd">
|
||||||
<td style="text-align: right;">
|
<td>
|
||||||
{{balance.buckets[1].raw_total - total_budget - total_unbudgeted | number:2}}{{budget[0].currency}}
|
Potential savings
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: right;">
|
<td style="text-align: right;">
|
||||||
{{balance.buckets[1].raw_total | number:2}}{{budget[0].currency}}
|
{{balance.buckets[1].raw_total - total_budget - total_unbudgeted | number:2}}{{budget[0].currency}}
|
||||||
</td>
|
</td>
|
||||||
<td style="text-align: right;">
|
<td style="text-align: right;">
|
||||||
{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100 | number:2}}%
|
{{balance.buckets[1].raw_total | number:2}}{{budget[0].currency}}
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td style="text-align: right;">
|
||||||
<md-progress-linear md-theme="green" mode="determinate"
|
{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100 | number:2}}%
|
||||||
value="{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
|
</td>
|
||||||
</td>
|
<td>
|
||||||
</tr>
|
<md-progress-linear md-theme="green" mode="determinate"
|
||||||
</tbody>
|
value="{{( ( balance.buckets[1].raw_total - total_budget - total_unbudgeted ) / balance.buckets[1].raw_total ) * 100}}"></md-progress-linear>
|
||||||
</table>
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div layout="vertical" layout-md="horizontal" layout-padding>
|
<div layout="vertical" layout-md="horizontal" layout-padding>
|
||||||
|
|
Loading…
Add table
Reference in a new issue