mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-18 07:38:29 +00:00
Update frontend layout.
This commit is contained in:
James Cole
95
frontend/src/components/dashboard/Calendar.vue
Normal file
95
frontend/src/components/dashboard/Calendar.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<!--
|
||||
- Calendar.vue
|
||||
- Copyright (c) 2020 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">Start</div>
|
||||
<div class="col-8">{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(range.start) }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">End</div>
|
||||
<div class="col-8">{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(range.end) }}</div>
|
||||
</div>
|
||||
<date-picker
|
||||
v-model="range"
|
||||
mode="date"
|
||||
:masks="masks"
|
||||
rows="2"
|
||||
is-range
|
||||
>
|
||||
<template v-slot="{ inputValue, inputEvents, isDragging, togglePopover }">
|
||||
<div class="btn-group btn-group-sm btn-group-justified">
|
||||
<button
|
||||
class="btn btn-secondary btn-sm"
|
||||
@click="togglePopover({ placement: 'auto-start', positionFixed:true })"
|
||||
><i class="fas fa-calendar-alt"></i></button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
><i class="fas fa-history"></i></button>
|
||||
|
||||
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fas fa-list"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">(prev period)</a>
|
||||
<a class="dropdown-item" href="#">(next period)</a>
|
||||
<a class="dropdown-item" href="#">(this week?)</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<input type="hidden"
|
||||
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
|
||||
:value="inputValue.start"
|
||||
v-on="inputEvents.start"
|
||||
/>
|
||||
<input type="hidden"
|
||||
:class="isDragging ? 'text-gray-600' : 'text-gray-900'"
|
||||
:value="inputValue.end"
|
||||
v-on="inputEvents.end"
|
||||
/>
|
||||
</template>
|
||||
</date-picker>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Calendar",
|
||||
mounted() {
|
||||
this.locale = localStorage.locale ?? 'en-US';
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
locale: 'en-US',
|
||||
range: {
|
||||
start: new Date(window.sessionStart),
|
||||
end: new Date(window.sessionEnd),
|
||||
},
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown-item {color:#212529;}
|
||||
.dropdown-item:hover {color:#212529;}
|
||||
</style>
|
||||
@@ -20,25 +20,29 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<main-budget-list/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<top-boxes/>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
|
||||
<div class="col">
|
||||
<main-account/>
|
||||
</div>
|
||||
</div>
|
||||
<main-account-list/>
|
||||
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-budget/>
|
||||
</div>
|
||||
<!--
|
||||
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
||||
<main-category />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
|
||||
<!--
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
|
||||
<main-debit/>
|
||||
|
||||
76
frontend/src/components/dashboard/MainBudgetList.vue
Normal file
76
frontend/src/components/dashboard/MainBudgetList.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<!--
|
||||
- MainBudgetList.vue
|
||||
- Copyright (c) 2020 james@firefly-iii.org
|
||||
-
|
||||
- This file is part of Firefly III (https://github.com/firefly-iii).
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as
|
||||
- published by the Free Software Foundation, either version 3 of the
|
||||
- License, or (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Weekly budgets</h3>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
<table class="table table-sm">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:25%;">Boodschappen (EUR)</td>
|
||||
<td style="vertical-align: middle">
|
||||
<div class="progress progress active">
|
||||
<div class="progress-bar bg-success progress-bar-striped" role="progressbar"
|
||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
|
||||
<span>Spent X of X</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width:10%;">Left or blank</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width:25%;">Boodschappen (EUR)</td>
|
||||
<td style="vertical-align: middle">
|
||||
<div class="progress progress active">
|
||||
<div class="progress-bar bg-success progress-bar-striped" role="progressbar"
|
||||
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
|
||||
<span>Spent X of X</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td style="width:10%;">Left or blank</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="./budgets" class="btn btn-default button-sm"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_budgets') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MainBudgetList"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -26,13 +26,13 @@
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t("firefly.balance") }}</span>
|
||||
<!-- only preferred currency -->
|
||||
<!-- balance in preferred currency -->
|
||||
<span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">{{ balance.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-info">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- all others -->
|
||||
<!-- balance in not preferred currency -->
|
||||
<span class="progress-description">
|
||||
<span v-for="(balance, index) in notPrefCurrencyBalances" :title="balance.sub_title">
|
||||
{{ balance.value_parsed }}<span v-if="index+1 !== notPrefCurrencyBalances.length">, </span>
|
||||
@@ -48,15 +48,15 @@
|
||||
<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"><span>{{ $t('firefly.bills_to_pay') }}</span></span>
|
||||
<span class="info-box-text">{{ $t('firefly.bills_to_pay') }}</span>
|
||||
|
||||
<!-- only preferred currencies -->
|
||||
<!-- bills unpaid, in preferred currency. -->
|
||||
<span class="info-box-number" v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-teal">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- all others -->
|
||||
<!-- bills unpaid, in other currencies. -->
|
||||
<span class="progress-description">
|
||||
<span v-for="(bill, index) in notPrefBillsUnpaid">
|
||||
{{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
|
||||
@@ -67,9 +67,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- altijd iets in bold -->
|
||||
<!-- subtitle verschilt -->
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<!-- left to spend -->
|
||||
@@ -78,13 +75,15 @@
|
||||
<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"><span>{{ $t('firefly.left_to_spend') }}</span></span>
|
||||
<span class="info-box-text">{{ $t('firefly.left_to_spend') }}</span>
|
||||
|
||||
<!-- left to spend in preferred currency -->
|
||||
<span class="info-box-number" v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- others-->
|
||||
<!-- other currencies-->
|
||||
<span class="progress-description">
|
||||
<span v-for="(left, index) in notPrefLeftToSpend">
|
||||
{{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
|
||||
@@ -144,6 +143,7 @@ export default {
|
||||
notPrefCurrencyBalances: function () {
|
||||
return this.filterOnNotCurrency(this.balances);
|
||||
},
|
||||
|
||||
// contains only bills unpaid in preferred currency or first one.
|
||||
prefBillsUnpaid: function () {
|
||||
return this.filterOnCurrency(this.billsUnpaid);
|
||||
@@ -151,6 +151,7 @@ export default {
|
||||
notPrefBillsUnpaid: function () {
|
||||
return this.filterOnNotCurrency(this.billsUnpaid);
|
||||
},
|
||||
|
||||
// left to spend
|
||||
prefLeftToSpend: function () {
|
||||
return this.filterOnCurrency(this.leftToSpend);
|
||||
@@ -158,6 +159,7 @@ export default {
|
||||
notPrefLeftToSpend: function () {
|
||||
return this.filterOnNotCurrency(this.leftToSpend);
|
||||
},
|
||||
|
||||
// net worth
|
||||
prefNetWorth: function () {
|
||||
return this.filterOnCurrency(this.netWorth);
|
||||
|
||||
@@ -40,10 +40,10 @@
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="tr in transaction.attributes.transactions">
|
||||
<a :href="'accounts/show/' + transaction.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
|
||||
<br />
|
||||
</span>
|
||||
</td>
|
||||
@@ -65,12 +65,12 @@
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="tr in transaction.attributes.transactions">
|
||||
<a :href="'categories/show/' + transaction.category_id" v-if="0!==tr.category_id">{{ tr.category_name }}</a><br />
|
||||
<a :href="'categories/show/' + tr.category_id" v-if="0!==tr.category_id">{{ tr.category_name }}</a><br />
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="tr in transaction.attributes.transactions">
|
||||
<a :href="'budgets/show/' + transaction.budget_id" v-if="0!==tr.budget_id">{{ tr.budget_name }}</a><br />
|
||||
<a :href="'budgets/show/' + tr.budget_id" v-if="0!==tr.budget_id">{{ tr.budget_name }}</a><br />
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -38,10 +38,10 @@
|
||||
</td>
|
||||
<td>
|
||||
<span v-for="tr in transaction.attributes.transactions">
|
||||
<a :href="'accounts/show/' + transaction.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + transaction.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.destination_id" v-if="'withdrawal' === tr.type">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.source_id" v-if="'deposit' === tr.type">{{ tr.source_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.destination_id" v-if="'transfer' === tr.type && tr.source_id === account_id">{{ tr.destination_name }}</a>
|
||||
<a :href="'accounts/show/' + tr.source_id" v-if="'transfer' === tr.type && tr.destination_id === account_id">{{ tr.source_name }}</a>
|
||||
<br />
|
||||
</span>
|
||||
</td>
|
||||
|
||||
Reference in New Issue
Block a user