kenmirrors/firefly-iii
1
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-11-18 07:38:29 +00:00
Code Issues Projects Releases Wiki Activity

Rebuild frontend

Browse Source
This commit is contained in:
James Cole
2020-11-21 12:06:43 +01:00
parent 2eee4cfcf8
commit e1c242326a
12 changed files with 526 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
frontend/src/components/dashboard/BudgetLimitRow.vue Normal file
View File

@@ -0,0 +1,111 @@
<!--
- BudgetRow.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>
<tr>
<td style="width:25%;">
<a :href="'./budgets/show/' + budgetLimit.budget_id">{{ budgetLimit.budget_name }}</a>
</td>
<td style="vertical-align: middle">
<div class="progress progress active">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctGreen" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctGreen + '%;'">
<span v-if="budgetLimit.pctGreen > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount) }}
</span>
</div>
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctOrange" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctOrange + '%;'">
<span v-if="budgetLimit.pctRed <= 50 && budgetLimit.pctOrange > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount) }}
</span>
</div>
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimit.pctRed" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimit.pctRed + '%;'">
<span v-if="budgetLimit.pctOrange <= 50 && budgetLimit.pctRed > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(budgetLimit.amount) }}
</span>
</div>
</div>
<small class="d-none d-lg-block">
{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(budgetLimit.start) }}
&rarr;
{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(budgetLimit.end) }}
</small>
</td>
<td style="width:10%;" class="align-middle d-none d-lg-table-cell">
<span class="text-success" v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) > 0">
{{
Intl.NumberFormat(locale, {
style: 'currency',
currency: budgetLimit.currency_code
}).format(parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent))
}}
</span>
<span class="text-muted" v-if="0.0 === parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent)">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimit.currency_code}).format(0) }}
</span>
<span class="text-danger" v-if="parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent) < 0">
{{
Intl.NumberFormat(locale, {
style: 'currency',
currency: budgetLimit.currency_code
}).format(parseFloat(budgetLimit.amount) + parseFloat(budgetLimit.spent))
}}
</span>
</td>
</tr>
</template>
<script>
export default {
name: "BudgetLimitRow",
props: {
budgetLimit: {
type: Object,
default: {}
},
budget: {
type: Object,
default: {}
}
}
}
</script>
<style scoped>
</style>

56
frontend/src/components/dashboard/BudgetListGroup.vue Normal file
View File

@@ -0,0 +1,56 @@
<!--
- BudgetListGroup.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 class="card">
<div class="card-header">
<h3 class="card-title">{{ title }}</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<BudgetLimitRow v-bind:key="budgetLimit.id" v-for="budgetLimit in budgetLimits" :budgetLimit="budgetLimit" />
<BudgetRow v-bind:key="budget.id" v-for="budget in budgets" :budget="budget" />
</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>
</template>
<script>
import BudgetLimitRow from "./BudgetLimitRow";
import BudgetRow from "./BudgetRow";
export default {
name: "BudgetListGroup",
components: {BudgetLimitRow, BudgetRow},
props: {
title: String,
budgetLimits: Array,
budgets: Array,
},
}
</script>
<style scoped>
</style>

48
frontend/src/components/dashboard/BudgetRow.vue Normal file
View File

@@ -0,0 +1,48 @@
<!--
- BudgetRow.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>
<tr>
<td style="width:25%;">
<a :href="'./budgets/show/' + budget.id">{{ budget.name }}</a>
</td>
<td class="align-middle text-right">
<span class="text-danger">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budget.currency_code}).format(parseFloat(budget.spent)) }}
</span>
</td>
</tr>
</template>
<script>
export default {
name: "BudgetRow",
props: {
budget: {
type: Object,
default: {}
}
}
}
</script>
<style scoped>
</style>

24
frontend/src/components/dashboard/Dashboard.vue
View File

@@ -21,13 +21,6 @@
<template>
<div>
<div class="row">
<div class="col">
<main-budget-list/>
</div>
</div>
<top-boxes/>
<div class="row">
<div class="col">
@@ -36,11 +29,18 @@
</div>
<main-account-list/>
<!--
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-category />
</div>
-->
<div class="row">
<div class="col">
<main-budget-list/>
</div>
</div>
<!--
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<main-category />
</div>
-->
<!--
<div class="row">

244
frontend/src/components/dashboard/MainBudgetList.vue
View File

@@ -20,90 +20,47 @@
<template>
<div>
<!-- loop budget things: -->
<div class="row" v-for="budgetType in budgetList">
<div class="col" v-if="budgetLimits[budgetType].length > 0">
<div class="card">
<div class="card-header">
<h3 class="card-title">{{ budgetType }} budgets</h3>
</div>
<div class="card-body table-responsive p-0">
<table class="table table-sm">
<tbody>
<tr v-for="budgetLimitKey in budgetLimits[budgetType]">
<td style="width:25%;">
{{ budgets[budgetLimitKey.budget_id].name }}<br/>
<small>
{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(budgetLimitKey.start) }}
&rarr;
{{ new Intl.DateTimeFormat(locale, {year: 'numeric', month: 'long', day: 'numeric'}).format(budgetLimitKey.end) }}
</small>
</td>
<td style="vertical-align: middle">
<div class="progress progress active">
<!-- green bar -->
<div class="progress-bar bg-success progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimitKey.pctGreen" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimitKey.pctGreen + '%;'">
<span v-if="budgetLimitKey.pctGreen > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.amount) }}
</span>
</div>
<!-- orange bar -->
<div class="progress-bar bg-warning progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimitKey.pctOrange" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimitKey.pctOrange + '%;'">
<span v-if="budgetLimitKey.pctRed <= 50 && budgetLimitKey.pctOrange > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.amount) }}
</span>
</div>
<!-- red bar -->
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar"
:aria-valuenow="budgetLimitKey.pctRed" aria-valuemin="0" aria-valuemax="100" :style="'width: '+ budgetLimitKey.pctRed + '%;'">
<span v-if="budgetLimitKey.pctOrange <= 50 && budgetLimitKey.pctRed > 35">
Spent
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.spent) }}
of
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(budgetLimitKey.amount) }}
</span>
</div>
</div>
</td>
<td style="width:10%;" class="align-middle">
{{ }}
<span class="text-success" v-if="parseFloat(budgetLimitKey.amount) + parseFloat(budgetLimitKey.spent) > 0">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(parseFloat(budgetLimitKey.amount) + parseFloat(budgetLimitKey.spent)) }}
</span>
<span class="text-muted" v-if="0.0 === parseFloat(budgetLimitKey.amount) + parseFloat(budgetLimitKey.spent)">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(0) }}
</span>
<span class="text-danger" v-if="parseFloat(budgetLimitKey.amount) + parseFloat(budgetLimitKey.spent) < 0">
{{ Intl.NumberFormat(locale, {style: 'currency', currency: budgetLimitKey.currency_code}).format(parseFloat(budgetLimitKey.amount) + parseFloat(budgetLimitKey.spent)) }}
</span>
</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>
<!-- daily budgets (will be the exception, I expect) -->
<div class="row">
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.daily.length > 0">
<BudgetListGroup :title="$t('firefly.daily_budgets')" :budgetLimits=budgetLimits.daily
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.weekly.length > 0">
<BudgetListGroup :title="$t('firefly.weekly_budgets')" :budgetLimits=budgetLimits.weekly
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.monthly.length > 0">
<BudgetListGroup :title="$t('firefly.monthly_budgets')" :budgetLimits=budgetLimits.monthly
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.quarterly.length > 0">
<BudgetListGroup :title="$t('firefly.quarterly_budgets')" :budgetLimits=budgetLimits.quarterly
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.half_year.length > 0">
<BudgetListGroup :title="$t('firefly.half_year_budgets')" :budgetLimits=budgetLimits.half_year
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.yearly.length > 0">
<BudgetListGroup :title="$t('firefly.yearly_budgets')" :budgetLimits=budgetLimits.yearly
/>
</div>
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12 col-xs-12" v-if="budgetLimits.other.length > 0 || rawBudgets.length > 0">
<BudgetListGroup :title="$t('firefly.other_budgets')" :budgetLimits=budgetLimits.other :budgets="rawBudgets"
/>
</div>
</div>
</div>
</template>
<script>
import BudgetListGroup from "./BudgetListGroup";
export default {
name: "MainBudgetList",
components: {BudgetListGroup},
data() {
return {
budgetList: ['daily', 'weekly', 'monthly', 'quarterly', 'half_year', 'yearly', 'other'],
@@ -117,60 +74,103 @@ export default {
other: [],
},
budgets: {},
rawBudgets: [],
locale: 'en-US',
}
},
mounted() {
this.getBudgets();
this.locale = localStorage.locale ?? 'en-US';
console.log('Mounted.')
this.collectData();
},
methods:
{
collectData() {
console.log('collectData');
this.getBudgets();
},
getBudgets() {
axios.get('./api/v1/budgets/limits?start=' + window.sessionStart + '&end=' + window.sessionEnd)
console.log('getBudgets()');
axios.get('./api/v1/budgets?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
console.log('Go to parseBudgets');
this.parseBudgets(response.data);
}
);
},
parseBudgets(data) {
// loop budgets (and do what?)
console.log('in parseBudgets');
for (let key in data.data) {
if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let current = data.data[key];
for (let subKey in current.attributes.spent) {
if (current.attributes.spent.hasOwnProperty(subKey) && /^0$|^[1-9]\d*$/.test(subKey) && subKey <= 4294967294) {
let spentData = current.attributes.spent[subKey];
this.rawBudgets.push(
{
id: parseInt(current.id),
name: current.attributes.name,
currency_id: parseInt(spentData.currency_id),
currency_code: spentData.currency_code,
spent: spentData.sum
}
);
}
}
}
}
console.log('Found ' + this.rawBudgets.length + ' budgets + expense info.');
this.getBudgetLimits();
},
getBudgetLimits() {
console.log('getBudgetLimits');
axios.get('./api/v1/budgets/limits?start=' + window.sessionStart + '&end=' + window.sessionEnd)
.then(response => {
console.log('Go to parse budget limits.');
this.parseBudgetLimits(response.data);
}
);
},
parseBudgetLimits(data) {
console.log('parsebudgetlimits');
for (let key in data.included) {
if (data.included.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let obj = {
name: data.included[key].attributes.name,
id: data.included[key].id,
};
this.budgets[data.included[key].id] = obj;
this.budgets[data.included[key].id] =
{
id: data.included[key].id,
name: data.included[key].attributes.name,
};
}
}
// loop budget limits:
for (let key in data.data) {
if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
let pctGreen = 0;
let pctOrange = 0;
let pctRed = 0;
// remove budget info from rawBudgets if it's there:
this.filterBudgets(data.data[key].attributes.budget_id, data.data[key].attributes.currency_id);
// spent within budget:
if (0.0 !== parseFloat(data.data[key].attributes.spent) && (parseFloat(data.data[key].attributes.spent) * -1) < parseFloat(data.data[key].attributes.amount)) {
pctGreen = (parseFloat(data.data[key].attributes.spent) * -1 / parseFloat(data.data[key].attributes.amount) * 100);
}
// spent over budget
if (0.0 !== parseFloat(data.data[key].attributes.spent) && (parseFloat(data.data[key].attributes.spent) * -1) > parseFloat(data.data[key].attributes.amount)) {
pctOrange = (parseFloat(data.data[key].attributes.amount) / parseFloat(data.data[key].attributes.spent) * -1) * 100;
pctRed = 100 - pctOrange;
//amount / spent
}
// if(pctGreen > 100) {
// pctGreen = 100;
// }
let obj = {
id: data.data[key].id,
amount: data.data[key].attributes.amount,
budget_id: data.data[key].attributes.budget_id,
budget_name: this.budgets[data.data[key].attributes.budget_id].name,
currency_id: data.data[key].attributes.currency_id,
currency_code: data.data[key].attributes.currency_code,
period: data.data[key].attributes.period,
@@ -182,15 +182,71 @@ export default {
pctRed: pctRed,
};
console.log(data.data[key]);
let period = data.data[key].attributes.period ?? 'other';
this.budgetLimits[period].push(obj);
}
}
// // loop budgets (and do what?)
// for (let key in data.included) {
// if (data.included.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
// let obj = {
// name: data.included[key].attributes.name,
// id: data.included[key].id,
// };
// this.budgets[data.included[key].id] = obj;
// }
// }
// loop budget limits:
// for (let key in data.data) {
// if (data.data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
// let pctGreen = 0;
// let pctOrange = 0;
// let pctRed = 0;
//
//
// let obj = {
// id: data.data[key].id,
// amount: data.data[key].attributes.amount,
// budget_id: data.data[key].attributes.budget_id,
// currency_id: data.data[key].attributes.currency_id,
// currency_code: data.data[key].attributes.currency_code,
// period: data.data[key].attributes.period,
// start: new Date(data.data[key].attributes.start),
// end: new Date(data.data[key].attributes.end),
// spent: data.data[key].attributes.spent,
// pctGreen: pctGreen,
// pctOrange: pctOrange,
// pctRed: pctRed,
// };
//
//
// console.log(data.data[key]);
//
// let period = data.data[key].attributes.period ?? 'other';
// this.budgetLimits[period].push(obj);
// }
// }
},
filterBudgets(budgetId, currencyId) {
//console.log('filterBudgets(' + budgetId + ',' + currencyId + ')');
for (let key in this.rawBudgets) {
if (this.rawBudgets.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
if (this.rawBudgets[key].currency_id === currencyId && this.rawBudgets[key].id === budgetId) {
//console.log('found! (' + budgetId + ',' + currencyId + ')');
this.rawBudgets.splice(key, 1);
}
}
}
console.log('Budgets to display left: ' + this.rawBudgets.length);
}
}
}
</script>