mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-12 23:45:10 +00:00
Expand views
This commit is contained in:
File diff suppressed because one or more lines are too long
40
public/build/assets/dashboard-9172f6d4.js
Normal file
40
public/build/assets/dashboard-9172f6d4.js
Normal file
File diff suppressed because one or more lines are too long
@@ -24,7 +24,7 @@
|
||||
"src": "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"
|
||||
},
|
||||
"resources/assets/v2/dashboard.js": {
|
||||
"file": "assets/dashboard-3896887c.js",
|
||||
"file": "assets/dashboard-9172f6d4.js",
|
||||
"isEntry": true,
|
||||
"src": "resources/assets/v2/dashboard.js"
|
||||
},
|
||||
|
49
resources/assets/v2/api/v2/model/account/get.js
Normal file
49
resources/assets/v2/api/v2/model/account/get.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* list.js
|
||||
* Copyright (c) 2022 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/>.
|
||||
*/
|
||||
|
||||
import {api} from "../../../../boot/axios";
|
||||
import format from "date-fns/format";
|
||||
|
||||
export default class Get {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param identifier
|
||||
* @param date
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
get(identifier, date) {
|
||||
let params = {date: format(date, 'y-MM-d').slice(0, 10)};
|
||||
if (!date) {
|
||||
return api.get('/api/v2/accounts/' + identifier);
|
||||
}
|
||||
return api.get('/api/v2/accounts/' + identifier, {params: params});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param identifier
|
||||
* @param page
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
transactions(identifier, page) {
|
||||
return api.get('/api/v2/accounts/' + identifier + '/transactions', {params: {page: page}});
|
||||
}
|
||||
}
|
@@ -23,16 +23,15 @@ import {getVariable} from "../../store/get-variable.js";
|
||||
import {setVariable} from "../../store/set-variable.js";
|
||||
import Dashboard from "../../api/v2/chart/account/dashboard.js";
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
import Get from "../../api/v1/accounts/get.js";
|
||||
import Get from "../../api/v2/model/account/get.js";
|
||||
//import Chart from "chart.js/auto";
|
||||
import {Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale} from "chart.js";
|
||||
import {Chart} from "chart.js";
|
||||
|
||||
// this is very ugly, but I have no better ideas at the moment to save the currency info
|
||||
// for each series.
|
||||
let currencies = [];
|
||||
let chart = null;
|
||||
let chartData = null;
|
||||
|
||||
let chart = null;
|
||||
let chartData = null;
|
||||
export default () => ({
|
||||
loading: false,
|
||||
loadingAccounts: false,
|
||||
@@ -51,7 +50,7 @@ export default () => ({
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
currencies = [];
|
||||
currencies = [];
|
||||
let options = {
|
||||
type: 'line',
|
||||
data: {
|
||||
@@ -62,8 +61,8 @@ export default () => ({
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
let dataset = {};
|
||||
let current = data[i];
|
||||
let dataset = {};
|
||||
let collection = [];
|
||||
|
||||
// if index = 0, push all keys as labels:
|
||||
@@ -116,14 +115,22 @@ export default () => ({
|
||||
chart = new Chart(document.querySelector("#account-chart"), options);
|
||||
},
|
||||
loadAccounts() {
|
||||
console.log('loadAccounts');
|
||||
if (true === this.loadingAccounts) {
|
||||
console.log('loadAccounts CANCELLED');
|
||||
return;
|
||||
}
|
||||
this.loadingAccounts = true;
|
||||
const max = 10;
|
||||
if (this.accountList.length > 0) {
|
||||
console.log('NO need to load account data');
|
||||
this.loadingAccounts = false;
|
||||
return;
|
||||
}
|
||||
console.log('loadAccounts continue!');
|
||||
const max = 10;
|
||||
let totalAccounts = 0;
|
||||
let count = 0;
|
||||
let accounts = [];
|
||||
let count = 0;
|
||||
let accounts = [];
|
||||
Promise.all([getVariable('frontpageAccounts'),]).then((values) => {
|
||||
totalAccounts = values[0].length;
|
||||
for (let i in values[0]) {
|
||||
@@ -142,27 +149,31 @@ export default () => ({
|
||||
break;
|
||||
}
|
||||
let current = response.data.data[ii];
|
||||
let group = {
|
||||
let group = {
|
||||
title: null === current.attributes.group_title ? '' : current.attributes.group_title,
|
||||
id: current.id,
|
||||
transactions: [],
|
||||
};
|
||||
for (let iii = 0; iii < current.attributes.transactions.length; iii++) {
|
||||
let currentTransaction = current.attributes.transactions[iii];
|
||||
//console.log(currentTransaction);
|
||||
group.transactions.push({
|
||||
description: currentTransaction.description,
|
||||
id: current.id,
|
||||
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
|
||||
});
|
||||
description: currentTransaction.description,
|
||||
id: current.id,
|
||||
amount: formatMoney(currentTransaction.amount, currentTransaction.currency_code),
|
||||
native_amount: formatMoney(currentTransaction.native_amount, currentTransaction.native_code),
|
||||
});
|
||||
}
|
||||
groups.push(group);
|
||||
}
|
||||
console.log(parent);
|
||||
accounts.push({
|
||||
name: parent.attributes.name,
|
||||
id: parent.id,
|
||||
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
|
||||
groups: groups,
|
||||
});
|
||||
name: parent.attributes.name,
|
||||
id: parent.id,
|
||||
balance: formatMoney(parent.attributes.current_balance, parent.attributes.currency_code),
|
||||
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
|
||||
groups: groups,
|
||||
});
|
||||
count++;
|
||||
if (count === totalAccounts) {
|
||||
this.accountList = accounts;
|
||||
@@ -183,10 +194,15 @@ export default () => ({
|
||||
this.loadAccounts();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
chartData = null;
|
||||
chartData = null;
|
||||
this.accountList = [];
|
||||
// main dashboard chart:
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
window.store.observe('autoConversion', () => {
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
},
|
||||
});
|
||||
|
@@ -38,7 +38,7 @@ export default () => ({
|
||||
this.downloadPiggyBanks(params);
|
||||
},
|
||||
downloadPiggyBanks(params) {
|
||||
console.log('Downloading page ' + params.page + '...');
|
||||
// console.log('Downloading page ' + params.page + '...');
|
||||
const getter = new Get();
|
||||
getter.get(params).then((response) => {
|
||||
apiData = [...apiData, ...response.data.data];
|
||||
@@ -89,7 +89,7 @@ export default () => ({
|
||||
}
|
||||
}
|
||||
this.piggies = Object.values(dataSet);
|
||||
console.log(this.piggies);
|
||||
// console.log(this.piggies);
|
||||
},
|
||||
|
||||
loadPiggyBanks() {
|
||||
|
@@ -70,8 +70,8 @@ export default () => ({
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
let options = getDefaultChartSettings('pie');
|
||||
console.log(data);
|
||||
let options = getDefaultChartSettings('pie');
|
||||
// console.log(data);
|
||||
options.data.labels = ['TODO paid', 'TODO unpaid'];
|
||||
options.data.datasets = [];
|
||||
let collection = {};
|
||||
@@ -102,7 +102,7 @@ export default () => ({
|
||||
unpaid: 0,
|
||||
};
|
||||
}
|
||||
console.log(current);
|
||||
// console.log(current);
|
||||
// in case of paid, add to "paid":
|
||||
collection[currencyCode].unpaid += parseFloat(amount);
|
||||
}
|
||||
|
@@ -85,14 +85,17 @@
|
||||
<a :href="'{{ route('accounts.show','') }}/' + account.id"
|
||||
x-text="account.name"></a>
|
||||
|
||||
<span class="small text-muted">(<span
|
||||
x-text="account.balance"></span>)</span>
|
||||
<span class="small text-muted">(<template x-if="autoConversion">
|
||||
<span x-text="account.native_balance"></span><br>
|
||||
</template>
|
||||
<template x-if="!autoConversion">
|
||||
<span x-text="account.balance"></span><br>
|
||||
</template>)</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<p class="text-center small" x-show="account.groups.length < 1">
|
||||
TODO No transactions
|
||||
|
||||
{{ __('firefly.no_transactions_period') }}
|
||||
</p>
|
||||
<table class="table table-sm" x-show="account.groups.length > 0">
|
||||
<tbody>
|
||||
@@ -127,7 +130,12 @@
|
||||
</template>
|
||||
<template x-for="transaction in group.transactions">
|
||||
<span>
|
||||
<span x-text="transaction.amount"></span><br>
|
||||
<template x-if="autoConversion">
|
||||
<span x-text="transaction.native_amount"></span><br>
|
||||
</template>
|
||||
<template x-if="!autoConversion">
|
||||
<span x-text="transaction.amount"></span><br>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
@@ -168,15 +176,30 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="#" title="Something">Spaarpotjes</a></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="col" x-data="piggies">
|
||||
|
||||
<template x-for="group in piggies">
|
||||
<div class="card mb-2">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="#" title="Something">Spaarpotjes (<span
|
||||
x-text="group.title"></span>)</a></h3>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<template x-for="piggy in group.piggies">
|
||||
<li class="list-group-item">
|
||||
<strong x-text="piggy.name"></strong>
|
||||
<div class="progress" role="progressbar" aria-label="Info example"
|
||||
:aria-valuenow="piggy.percentage" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar bg-info text-dark"
|
||||
:style="'width: ' + piggy.percentage +'%'">
|
||||
<span x-text="piggy.percentage + '%'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
@@ -184,7 +207,9 @@
|
||||
<h3 class="card-title"><a href="#" title="Something">recurring? rules? tags?</a></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
||||
<p>
|
||||
TODO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@@ -3,20 +3,14 @@
|
||||
<i class="fa-solid fa-gears"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="{{ route('admin.index') }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-user me-2"></em>
|
||||
TODO {{ __('firefly.admin') }}
|
||||
<em class="fa-regular fa-user me-2 fa-fw"></em>
|
||||
{{ __('firefly.system_settings') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="{{ route('currencies.index') }}" class="dropdown-item">
|
||||
<em class="fa-solid fa-user-gear me-2"></em>
|
||||
TODO {{ __('firefly.currencies') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<em class="fa-solid fa-money-bill-transfer me-2"></em>
|
||||
TODO {{ __('firefly.administrations_index_menu') }}
|
||||
<em class="fa-solid fa-euro-sign me-2 fa-fw"></em>
|
||||
{{ __('firefly.currencies') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
Reference in New Issue
Block a user