kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-10-21 11:48:53 +00:00
Code Issues Projects Releases Wiki Activity

Rebuild FP

Browse Source
This commit is contained in:
James Cole
2020-12-22 19:29:44 +01:00
parent 1a8fd25ec3
commit 6be1f5819f
21 changed files with 306 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
frontend/src/components/dashboard/MainPiggyList.vue
View File

@@ -19,82 +19,94 @@
-->
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.piggy_banks') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.piggy_banks') }}</caption>
<thead>
<tr>
<th scope="col" style="width:35%;">{{ $t('list.piggy_bank') }}</th>
<th scope="col" style="width:40%;">{{ $t('list.percentage') }}</th>
<th scope="col" style="width:25%;text-align: right;">{{ $t('list.amount') }}</th>
</tr>
</thead>
<tbody>
<tr v-for="piggy in this.piggy_banks">
<td>{{ piggy.attributes.name }}
<br /><small class="text-muted">{{ piggy.attributes.object_group_title }}</small>
</td>
<td>
<div class="progress-group">
<div class="progress progress-sm">
<div class="progress-bar primary" v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}"></div>
<div class="progress-bar bg-success" v-if="100 === piggy.attributes.pct" :style="{'width': piggy.attributes.pct + '%'}"></div>
</div>
</div>
</td>
<td style="text-align: right;">
<span class="text-success">
{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.current_amount) }}
</span>
of
<span class="text-success">{{ Intl.NumberFormat('en-US', {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.target_amount) }}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="./piggy-banks" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ $t('firefly.piggy_banks') }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-striped">
<caption style="display:none;">{{ $t('firefly.piggy_banks') }}</caption>
<thead>
<tr>
<th scope="col" style="width:35%;">{{ $t('list.piggy_bank') }}</th>
<th scope="col" style="width:40%;">{{ $t('list.percentage') }} <small>/ {{ $t('list.amount') }}</small></th>
</tr>
</thead>
<tbody>
<tr v-for="piggy in this.piggy_banks">
<td>{{ piggy.attributes.name }}
<small v-if="piggy.attributes.object_group_title" class="text-muted">
<br/>
{{ piggy.attributes.object_group_title }}
</small>
</td>
<td>
<div class="progress-group">
<div class="progress progress-sm">
<div class="progress-bar progress-bar-striped primary" v-if="piggy.attributes.pct < 100" :style="{'width': piggy.attributes.pct + '%'}"></div>
<div class="progress-bar progress-bar-striped bg-success" v-if="100 === piggy.attributes.pct" :style="{'width': piggy.attributes.pct + '%'}"></div>
</div>
</div>
<span class="text-success">
{{
Intl.NumberFormat(locale, {style: 'currency', currency: piggy.attributes.currency_code}).format(piggy.attributes.current_amount)
}}
</span>
of
<span class="text-success">{{
Intl.NumberFormat(locale, {
style: 'currency',
currency: piggy.attributes.currency_code
}).format(piggy.attributes.target_amount)
}}</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer">
<a href="./piggy-banks" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
</div>
</div>
</template>
<script>
export default {
name: "MainPiggyList",
created() {
axios.get('./api/v1/piggy_banks')
.then(response => {
this.loadPiggyBanks(response.data.data);
}
);
},
methods: {
loadPiggyBanks(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let piggy = data[key];
if(0.0 !== parseFloat(piggy.attributes.left_to_save)) {
piggy.attributes.pct = (parseFloat(piggy.attributes.current_amount) / parseFloat(piggy.attributes.target_amount)) * 100;
this.piggy_banks.push(piggy);
}
}
}
this.piggy_banks.sort(function(a, b) {
return b.attributes.pct - a.attributes.pct;
});
}
},
data() {
return {
piggy_banks: []
}
}
export default {
name: "MainPiggyList",
created() {
axios.get('./api/v1/piggy_banks')
.then(response => {
this.loadPiggyBanks(response.data.data);
}
);
},
computed: {
locale() {
return this.$store.getters.locale;
}
},
methods: {
loadPiggyBanks(data) {
for (let key in data) {
if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let piggy = data[key];
if (0.0 !== parseFloat(piggy.attributes.left_to_save)) {
piggy.attributes.pct = (parseFloat(piggy.attributes.current_amount) / parseFloat(piggy.attributes.target_amount)) * 100;
this.piggy_banks.push(piggy);
}
}
}
this.piggy_banks.sort(function (a, b) {
return b.attributes.pct - a.attributes.pct;
});
}
},
data() {
return {
piggy_banks: []
}
}
}
</script>
<style scoped>