Expand views

This commit is contained in:
James Cole
2023-08-11 06:03:31 +02:00
parent f010ffefc1
commit 27d07d5807
9 changed files with 175 additions and 767 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -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"
},

View 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}});
}
}

View File

@@ -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();
});
},
});

View File

@@ -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() {

View File

@@ -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);
}

View File

@@ -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>

View File

@@ -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>