mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-18 07:38:29 +00:00
Expand new layout code.
This commit is contained in:
James Cole
@@ -19,28 +19,43 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<top-boxes />
|
||||
|
||||
|
||||
<div class="container">
|
||||
<div>
|
||||
<top-boxes/>
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example Component</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<main-account />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<main-account-list/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown button
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-budget-chart/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-category-chart/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-debit-chart/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-credit-chart/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-bills-chart/>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-piggy-list/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
74
frontend/src/components/dashboard/MainAccount.vue
Normal file
74
frontend/src/components/dashboard/MainAccount.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ $t('firefly.yourAccounts') }}</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="main-account-chart">
|
||||
<main-account-chart :styles="myStyles" :options="datacollection.options" :chart-data="datacollection"></main-account-chart>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="./accounts/asset" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MainAccountChart from "./MainAccountChart";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
MainAccountChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
datacollection: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fillData()
|
||||
},
|
||||
methods: {
|
||||
fillData() {
|
||||
this.datacollection = {
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
},
|
||||
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}, {
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
getRandomInt() {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
myStyles() {
|
||||
return {
|
||||
height: '400px',
|
||||
'max-height': '400px',
|
||||
position: 'relative',
|
||||
display: 'block',
|
||||
}
|
||||
}
|
||||
},
|
||||
name: "MainAccount"
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main-account-chart {
|
||||
}
|
||||
|
||||
</style>
|
||||
19
frontend/src/components/dashboard/MainAccountChart.vue
Normal file
19
frontend/src/components/dashboard/MainAccountChart.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
|
||||
<script>
|
||||
import { Line } from 'vue-chartjs'
|
||||
export default {
|
||||
extends: Line,
|
||||
props: ['options'],
|
||||
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin.
|
||||
// If you want to pass options please create a local options object
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainAccountList.vue
Normal file
22
frontend/src/components/dashboard/MainAccountList.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainAccountList"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainBillsChart.vue
Normal file
22
frontend/src/components/dashboard/MainBillsChart.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainBillsChart"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainBudgetChart.vue
Normal file
22
frontend/src/components/dashboard/MainBudgetChart.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainBudgetChart"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainCategoryChart.vue
Normal file
22
frontend/src/components/dashboard/MainCategoryChart.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainCategoryChart"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainCrebitChart.vue
Normal file
22
frontend/src/components/dashboard/MainCrebitChart.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainCrebitChart"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainDebitChart.vue
Normal file
22
frontend/src/components/dashboard/MainDebitChart.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainDebitChart"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
22
frontend/src/components/dashboard/MainPiggyList.vue
Normal file
22
frontend/src/components/dashboard/MainPiggyList.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">I am a card</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
I am card body
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainPiggyList"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,70 +1,162 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon bg-info elevation-1"><i class="fas fa-cog"></i></span>
|
||||
<span class="info-box-icon"><i class="far fa-bookmark text-info"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t("firefly.balance") }}</span>
|
||||
<span class="info-box-number">
|
||||
xxxxxxx
|
||||
<small>xx</small>
|
||||
</span>
|
||||
<!-- dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="balances.length > 0">{{ balances[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-info">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<span v-for="balance in balances">{{ balance.sub_title }}<br></span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box mb-3">
|
||||
<span class="info-box-icon bg-danger elevation-1"><i class="fas fa-thumbs-up"></i></span>
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="far fa-calendar-alt text-teal"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t('firefly.bills_to_pay') }}</span>
|
||||
<span class="info-box-number">xxxxxx</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<span class="info-box-text"><span>{{ $t('firefly.bills_to_pay') }}</span></span>
|
||||
<!-- dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="1 === billsUnpaid.length && billsPaid.length > 0">{{ billsUnpaid[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-teal">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- dont take the first, take default currency OR first -->
|
||||
<span v-if="1 === billsUnpaid.length && 1 === billsPaid.length">{{ $t('firefly.paid') }}: {{ billsPaid[0].value_parsed }}</span>
|
||||
<span v-if="billsUnpaid.length > 1">
|
||||
<span v-for="(bill, index) in billsUnpaid" :key="bill.key">
|
||||
{{ bill.value_parsed }}<span v-if="index+1 !== billsUnpaid.length">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- altijd iets in bold -->
|
||||
<!-- subtitle verschilt -->
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<!-- left to spend -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box mb-3">
|
||||
<span class="info-box-icon bg-success elevation-1"><i class="fas fa-shopping-cart"></i></span>
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t('firefly.left_to_spend') }}</span>
|
||||
<span class="info-box-number">xxxxx</span>
|
||||
<span class="info-box-text"><span>{{ $t('firefly.left_to_spend') }}</span></span>
|
||||
<!-- dont take the first, take default currency OR first -->
|
||||
<!-- change color if negative -->
|
||||
<span class="info-box-number" v-if="leftToSpend.length > 0">{{ leftToSpend[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- list all EXCEPT default currency -->
|
||||
<span v-for="(spent, index) in leftToSpend" :key="spent.key">
|
||||
{{ spent.value_parsed }}<span v-if="index+1 !== leftToSpend.length">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
<!-- net worth -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box mb-3">
|
||||
<span class="info-box-icon bg-warning elevation-1"><i class="fas fa-users"></i></span>
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t('firefly.net_worth') }}</span>
|
||||
<span class="info-box-number">xxxxx</span>
|
||||
<span class="info-box-text"><span>{{ $t('firefly.net_worth') }}</span></span>
|
||||
<!-- dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="netWorth.length > 0">{{ netWorth[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- list all EXCEPT default currency -->
|
||||
<span v-for="(net, index) in netWorth" :key="net.key">
|
||||
{{ net.value_parsed }}<span v-if="index+1 !== net.length">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- /.info-box-content -->
|
||||
</div>
|
||||
<!-- /.info-box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TopBoxes"
|
||||
name: "TopBoxes",
|
||||
data() {
|
||||
return {
|
||||
summary: [],
|
||||
balances: [],
|
||||
billsPaid: [],
|
||||
billsUnpaid: [],
|
||||
leftToSpend: [],
|
||||
netWorth: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Prepare the component.
|
||||
*/
|
||||
prepareComponent() {
|
||||
axios.get('./api/v1/summary/basic?start=' + window.sessionStart + '&end=' + window.sessionEnd)
|
||||
.then(response => {
|
||||
this.summary = response.data;
|
||||
this.buildComponent();
|
||||
});
|
||||
},
|
||||
buildComponent() {
|
||||
this.getBalanceEntries();
|
||||
this.getBillsEntries();
|
||||
this.getLeftToSpend();
|
||||
this.getNetWorth();
|
||||
},
|
||||
getBalanceEntries() {
|
||||
this.balances = this.getKeyedEntries('balance-in-');
|
||||
},
|
||||
getNetWorth() {
|
||||
this.netWorth = this.getKeyedEntries('net-worth-in-');
|
||||
},
|
||||
getLeftToSpend() {
|
||||
this.leftToSpend = this.getKeyedEntries('left-to-spend-in-');
|
||||
},
|
||||
getBillsEntries() {
|
||||
this.billsPaid = this.getKeyedEntries('bills-paid-in-');
|
||||
this.billsUnpaid = this.getKeyedEntries('bills-unpaid-in-');
|
||||
},
|
||||
getKeyedEntries(expected) {
|
||||
let result = [];
|
||||
for (const key in this.summary) {
|
||||
if (this.summary.hasOwnProperty(key)) {
|
||||
if (expected === key.substr(0, expected.length)) {
|
||||
result.push(this.summary[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user