mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-12-12 01:42:32 +00:00
Merge branch 'adminlte4' into develop
This commit is contained in:
James Cole
@@ -26,4 +26,5 @@
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
// Font awesome
|
||||
//@import "~font-awesome/css/font-awesome";
|
||||
//@import "~font-awesome/css/font-awesome";
|
||||
|
||||
|
||||
49
resources/assets/v2/api/v1/accounts/get.js
Normal file
49
resources/assets/v2/api/v1/accounts/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/v1/accounts/' + identifier);
|
||||
}
|
||||
return api.get('/api/v1/accounts/' + identifier, {params: params});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param identifier
|
||||
* @param page
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
transactions(identifier, page) {
|
||||
return api.get('/api/v1/accounts/' + identifier + '/transactions', {params: {page: page}});
|
||||
}
|
||||
}
|
||||
30
resources/assets/v2/api/v1/chart/account/overview.js
Normal file
30
resources/assets/v2/api/v1/chart/account/overview.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* overview.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";
|
||||
|
||||
export default class Overview {
|
||||
overview(start, end) {
|
||||
let startStr = format(start, 'y-MM-dd');
|
||||
let endStr = format(end, 'y-MM-dd');
|
||||
return api.get('/api/v1/chart/account/overview', {params: {start: startStr, end: endStr}});
|
||||
}
|
||||
}
|
||||
35
resources/assets/v2/api/v1/preferences/index.js
Normal file
35
resources/assets/v2/api/v1/preferences/index.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
* basic.js
|
||||
* Copyright (c) 2021 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";
|
||||
|
||||
export default class Preferences {
|
||||
getByName(name) {
|
||||
return api.get('/api/v1/preferences/' + name);
|
||||
}
|
||||
|
||||
getByNameNow(name) {
|
||||
return api.get('/api/v1/preferences/' + name);
|
||||
}
|
||||
|
||||
postByName(name, value) {
|
||||
return api.post('/api/v1/preferences', {name: name, data: value});
|
||||
}
|
||||
}
|
||||
28
resources/assets/v2/api/v1/preferences/post.js
Normal file
28
resources/assets/v2/api/v1/preferences/post.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* post.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";
|
||||
|
||||
export default class Post {
|
||||
post(name, value) {
|
||||
let url = '/api/v1/preferences';
|
||||
return api.post(url, {name: name, data: value});
|
||||
}
|
||||
}
|
||||
28
resources/assets/v2/api/v1/preferences/put.js
Normal file
28
resources/assets/v2/api/v1/preferences/put.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* post.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";
|
||||
|
||||
export default class Put {
|
||||
put(name, value) {
|
||||
let url = '/api/v1/preferences/' + name;
|
||||
return api.put(url, {data: value});
|
||||
}
|
||||
}
|
||||
28
resources/assets/v2/api/v1/summary/index.js
Normal file
28
resources/assets/v2/api/v1/summary/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* index.js
|
||||
* Copyright (c) 2023 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.js";
|
||||
|
||||
export default class Summary {
|
||||
get(start, end, code) {
|
||||
return api.get('/api/v1/summary/basic', {params: {start: start, end: end, code: code}});
|
||||
}
|
||||
}
|
||||
36
resources/assets/v2/api/v2/chart/account/dashboard.js
Normal file
36
resources/assets/v2/api/v2/chart/account/dashboard.js
Normal file
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
* overview.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";
|
||||
|
||||
export default class Dashboard {
|
||||
dashboard(start, end) {
|
||||
let startStr = format(start, 'y-MM-dd');
|
||||
let endStr = format(end, 'y-MM-dd');
|
||||
return api.get('/api/v2/chart/account/dashboard', {params: {start: startStr, end: endStr}});
|
||||
}
|
||||
|
||||
expense(start, end) {
|
||||
let startStr = format(start, 'y-MM-dd');
|
||||
let endStr = format(end, 'y-MM-dd');
|
||||
return api.get('/api/v2/chart/account/expense-dashboard', {params: {start: startStr, end: endStr}});
|
||||
}
|
||||
}
|
||||
30
resources/assets/v2/api/v2/chart/budget/dashboard.js
Normal file
30
resources/assets/v2/api/v2/chart/budget/dashboard.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* overview.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";
|
||||
|
||||
export default class Dashboard {
|
||||
dashboard(start, end) {
|
||||
let startStr = format(start, 'y-MM-dd');
|
||||
let endStr = format(end, 'y-MM-dd');
|
||||
return api.get('/api/v2/chart/budget/dashboard', {params: {start: startStr, end: endStr}});
|
||||
}
|
||||
}
|
||||
30
resources/assets/v2/api/v2/chart/category/dashboard.js
Normal file
30
resources/assets/v2/api/v2/chart/category/dashboard.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* overview.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";
|
||||
|
||||
export default class Dashboard {
|
||||
dashboard(start, end) {
|
||||
let startStr = format(start, 'y-MM-dd');
|
||||
let endStr = format(end, 'y-MM-dd');
|
||||
return api.get('/api/v2/chart/category/dashboard', {params: {start: startStr, end: endStr}});
|
||||
}
|
||||
}
|
||||
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}});
|
||||
}
|
||||
}
|
||||
35
resources/assets/v2/api/v2/model/piggy-bank/get.js
Normal file
35
resources/assets/v2/api/v2/model/piggy-bank/get.js
Normal file
@@ -0,0 +1,35 @@
|
||||
/*
|
||||
* get.js
|
||||
* Copyright (c) 2023 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";
|
||||
|
||||
export default class Get {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param params
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
get(params) {
|
||||
return api.get('/api/v2/piggy-banks', {params: params});
|
||||
}
|
||||
|
||||
}
|
||||
42
resources/assets/v2/api/v2/model/subscription/get.js
Normal file
42
resources/assets/v2/api/v2/model/subscription/get.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
* get.js
|
||||
* Copyright (c) 2023 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";
|
||||
|
||||
export default class Get {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param params
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
get(params) {
|
||||
return api.get('/api/v2/subscriptions', {params: params});
|
||||
}
|
||||
|
||||
paid(params) {
|
||||
return api.get('/api/v2/subscriptions/sum/paid', {params: params});
|
||||
}
|
||||
|
||||
unpaid(params) {
|
||||
return api.get('/api/v2/subscriptions/sum/unpaid', {params: params});
|
||||
}
|
||||
}
|
||||
34
resources/assets/v2/api/v2/model/transaction/get.js
Normal file
34
resources/assets/v2/api/v2/model/transaction/get.js
Normal file
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* get.js
|
||||
* Copyright (c) 2023 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";
|
||||
|
||||
export default class Get {
|
||||
|
||||
/**
|
||||
*
|
||||
* @param params
|
||||
* @returns {Promise<AxiosResponse<any>>}
|
||||
*/
|
||||
get(params) {
|
||||
return api.get('/api/v2/transactions', {params: params});
|
||||
}
|
||||
}
|
||||
28
resources/assets/v2/api/v2/summary/index.js
Normal file
28
resources/assets/v2/api/v2/summary/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* index.js
|
||||
* Copyright (c) 2023 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.js";
|
||||
|
||||
export default class Summary {
|
||||
get(start, end, code) {
|
||||
return api.get('/api/v2/summary/basic', {params: {start: start, end: end, code: code}});
|
||||
}
|
||||
}
|
||||
187
resources/assets/v2/app.js
Normal file
187
resources/assets/v2/app.js
Normal file
@@ -0,0 +1,187 @@
|
||||
// import './bootstrap';
|
||||
// import {
|
||||
// addMonths,
|
||||
// endOfDay,
|
||||
// endOfMonth,
|
||||
// endOfQuarter,
|
||||
// endOfWeek,
|
||||
// startOfDay,
|
||||
// startOfMonth,
|
||||
// startOfQuarter,
|
||||
// startOfWeek,
|
||||
// startOfYear,
|
||||
// subDays,
|
||||
// subMonths
|
||||
// } from "date-fns";
|
||||
// import format from './util/format'
|
||||
//
|
||||
// export default () => ({
|
||||
// range: {
|
||||
// start: null, end: null
|
||||
// },
|
||||
// defaultRange: {
|
||||
// start: null, end: null
|
||||
// },
|
||||
//
|
||||
// init() {
|
||||
// console.log('MainApp init');
|
||||
// // get values from store and use them accordingly.
|
||||
// // this.viewRange = window.BasicStore.get('viewRange');
|
||||
// // this.locale = window.BasicStore.get('locale');
|
||||
// // this.language = window.BasicStore.get('language');
|
||||
// // this.locale = 'equal' === this.locale ? this.language : this.locale;
|
||||
// // window.__localeId__ = this.language;
|
||||
// //
|
||||
// // // the range is always null but later on we will store it in BasicStore.
|
||||
// // if (null === this.range.start && null === this.range.end) {
|
||||
// // console.log('start + end = null, calling setDatesFromViewRange()');
|
||||
// // this.range = this.setDatesFromViewRange(new Date);
|
||||
// // }
|
||||
// // console.log('MainApp: set defaultRange');
|
||||
// // this.defaultRange = this.setDatesFromViewRange(new Date);
|
||||
// // // default range is always the current period (initialized ahead)
|
||||
// },
|
||||
//
|
||||
//
|
||||
// buildDateRange() {
|
||||
// console.log('MainApp: buildDateRange');
|
||||
// // generate ranges
|
||||
// let nextRange = this.getNextRange();
|
||||
// let prevRange = this.getPrevRange();
|
||||
// let last7 = this.lastDays(7);
|
||||
// let last30 = this.lastDays(30);
|
||||
// let mtd = this.mtd();
|
||||
// let ytd = this.ytd();
|
||||
//
|
||||
// // set the title:
|
||||
// let element = document.getElementsByClassName('daterange-holder')[0];
|
||||
// element.textContent = format(this.range.start) + ' - ' + format(this.range.end);
|
||||
// element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // set the current one
|
||||
// element = document.getElementsByClassName('daterange-current')[0];
|
||||
// element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end);
|
||||
// element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // generate next range
|
||||
// element = document.getElementsByClassName('daterange-next')[0];
|
||||
// element.textContent = format(nextRange.start) + ' - ' + format(nextRange.end);
|
||||
// element.setAttribute('data-start', format(nextRange.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(nextRange.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // previous range.
|
||||
// element = document.getElementsByClassName('daterange-prev')[0];
|
||||
// element.textContent = format(prevRange.start) + ' - ' + format(prevRange.end);
|
||||
// element.setAttribute('data-start', format(prevRange.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(prevRange.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // last 7
|
||||
// element = document.getElementsByClassName('daterange-7d')[0];
|
||||
// element.setAttribute('data-start', format(last7.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(last7.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // last 30
|
||||
// element = document.getElementsByClassName('daterange-90d')[0];
|
||||
// element.setAttribute('data-start', format(last30.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(last30.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // MTD
|
||||
// element = document.getElementsByClassName('daterange-mtd')[0];
|
||||
// element.setAttribute('data-start', format(mtd.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(mtd.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // YTD
|
||||
// element = document.getElementsByClassName('daterange-ytd')[0];
|
||||
// element.setAttribute('data-start', format(ytd.start, 'yyyy-MM-dd'));
|
||||
// element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd'));
|
||||
//
|
||||
// // custom range.
|
||||
// console.log('MainApp: buildDateRange end');
|
||||
// },
|
||||
//
|
||||
// getNextRange() {
|
||||
// let start = startOfMonth(this.range.start);
|
||||
// let nextMonth = addMonths(start, 1);
|
||||
// let end = endOfMonth(nextMonth);
|
||||
// return {start: nextMonth, end: end};
|
||||
// },
|
||||
//
|
||||
// getPrevRange() {
|
||||
// let start = startOfMonth(this.range.start);
|
||||
// let prevMonth = subMonths(start, 1);
|
||||
// let end = endOfMonth(prevMonth);
|
||||
// return {start: prevMonth, end: end};
|
||||
// },
|
||||
//
|
||||
// ytd() {
|
||||
// let end = new Date;
|
||||
// let start = startOfYear(this.range.start);
|
||||
// return {start: start, end: end};
|
||||
// },
|
||||
//
|
||||
// mtd() {
|
||||
//
|
||||
// let end = new Date;
|
||||
// let start = startOfMonth(this.range.start);
|
||||
// return {start: start, end: end};
|
||||
// },
|
||||
//
|
||||
// lastDays(days) {
|
||||
// let end = new Date;
|
||||
// let start = subDays(end, days);
|
||||
// return {start: start, end: end};
|
||||
// },
|
||||
//
|
||||
// changeDateRange(e) {
|
||||
// console.log('MainApp: changeDateRange');
|
||||
// let target = e.currentTarget;
|
||||
// //alert('OK 3');
|
||||
// let start = new Date(target.getAttribute('data-start'));
|
||||
// let end = new Date(target.getAttribute('data-end'));
|
||||
// console.log('MainApp: Change date range', start, end);
|
||||
// e.preventDefault();
|
||||
// // TODO send start + end to the store and trigger this again?
|
||||
// window.app.setStart(start);
|
||||
// window.app.setEnd(end);
|
||||
// window.app.buildDateRange();
|
||||
// console.log('MainApp: end changeDateRange');
|
||||
// return false;
|
||||
// },
|
||||
//
|
||||
// setStart(date) {
|
||||
// console.log('MainApp: setStart');
|
||||
// this.range.start = date;
|
||||
// window.BasicStore.store('start', date);
|
||||
// },
|
||||
//
|
||||
// setEnd(date) {
|
||||
// console.log('MainApp: setEnd');
|
||||
// this.range.end = date;
|
||||
// window.BasicStore.store('end', date);
|
||||
// },
|
||||
// });
|
||||
//
|
||||
// // let app = new MainApp();
|
||||
// //
|
||||
// // // Listen for the basic store, we need it to continue with the
|
||||
// // document.addEventListener("BasicStoreReady", (e) => {
|
||||
// // console.log('MainApp: app.js from event handler');
|
||||
// // app.init();
|
||||
// // app.buildDateRange();
|
||||
// // const event = new Event("AppReady");
|
||||
// // document.dispatchEvent(event);
|
||||
// // }, false,);
|
||||
// //
|
||||
// // if (window.BasicStore.isReady()) {
|
||||
// // console.log('MainApp: app.js from store ready');
|
||||
// // app.init();
|
||||
// // app.buildDateRange();
|
||||
// // const event = new Event("AppReady");
|
||||
// // document.dispatchEvent(event);
|
||||
// // }
|
||||
// //
|
||||
// // window.app = app;
|
||||
// //
|
||||
// // export default app;
|
||||
40
resources/assets/v2/boot/axios.js
Normal file
40
resources/assets/v2/boot/axios.js
Normal file
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
* axios.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 axios from 'axios'
|
||||
|
||||
// Be careful when using SSR for cross-request state pollution
|
||||
// due to creating a Singleton instance here;
|
||||
// If any client changes this (global) instance, it might be a
|
||||
// good idea to move this instance creation inside of the
|
||||
// "export default () => {}" function below (which runs individually
|
||||
// for each client)
|
||||
|
||||
|
||||
// for use inside Vue files (Options API) through this.$axios and this.$api
|
||||
|
||||
|
||||
const url = '/';
|
||||
const api = axios.create({baseURL: url, withCredentials: true});
|
||||
|
||||
axios.defaults.withCredentials = true;
|
||||
axios.defaults.baseURL = url;
|
||||
|
||||
export {api}
|
||||
51
resources/assets/v2/bootstrap.js
vendored
Normal file
51
resources/assets/v2/bootstrap.js
vendored
Normal file
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
// import things
|
||||
import axios from 'axios';
|
||||
import store from "store";
|
||||
import observePlugin from 'store/plugins/observe';
|
||||
import Alpine from "alpinejs";
|
||||
import * as bootstrap from 'bootstrap'
|
||||
|
||||
// add plugin to store and put in window
|
||||
store.addPlugin(observePlugin);
|
||||
window.store = store;
|
||||
|
||||
// import even more
|
||||
import {getVariable} from "./store/get-variable.js";
|
||||
import {getViewRange} from "./support/get-viewrange.js";
|
||||
|
||||
// wait for 3 promises, because we need those later on.
|
||||
window.bootstrapped = false;
|
||||
Promise.all([
|
||||
getVariable('viewRange'),
|
||||
getVariable('darkMode'),
|
||||
getVariable('locale'),
|
||||
getVariable('language'),
|
||||
]).then((values) => {
|
||||
if (!store.get('start') || !store.get('end')) {
|
||||
// calculate new start and end, and store them.
|
||||
const range = getViewRange(values[0], new Date);
|
||||
store.set('start', range.start);
|
||||
store.set('end', range.end);
|
||||
}
|
||||
|
||||
// save local in window.__ something
|
||||
window.__localeId__ = values[2];
|
||||
store.set('language', values[3]);
|
||||
store.set('locale', values[3]);
|
||||
|
||||
const event = new Event('firefly-iii-bootstrapped');
|
||||
document.dispatchEvent(event);
|
||||
window.bootstrapped = true;
|
||||
});
|
||||
|
||||
window.axios = axios;
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
|
||||
window.Alpine = Alpine
|
||||
98
resources/assets/v2/dashboard.js
Normal file
98
resources/assets/v2/dashboard.js
Normal file
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
* dashboard.js
|
||||
* Copyright (c) 2023 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 './bootstrap.js';
|
||||
import dates from './pages/shared/dates.js';
|
||||
import boxes from './pages/dashboard/boxes.js';
|
||||
import accounts from './pages/dashboard/accounts.js';
|
||||
import budgets from './pages/dashboard/budgets.js';
|
||||
import categories from './pages/dashboard/categories.js';
|
||||
import sankey from './pages/dashboard/sankey.js';
|
||||
import subscriptions from './pages/dashboard/subscriptions.js';
|
||||
import piggies from './pages/dashboard/piggies.js';
|
||||
|
||||
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
LineElement,
|
||||
PieController,
|
||||
BarController,
|
||||
BarElement,
|
||||
TimeScale,
|
||||
ArcElement,
|
||||
LinearScale,
|
||||
Legend,
|
||||
Filler,
|
||||
Colors,
|
||||
CategoryScale,
|
||||
PointElement,
|
||||
Tooltip
|
||||
} from "chart.js";
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
// register things
|
||||
Chart.register({
|
||||
LineController,
|
||||
LineElement,
|
||||
ArcElement,
|
||||
BarController,
|
||||
TimeScale,
|
||||
PieController,
|
||||
BarElement,
|
||||
Filler,
|
||||
Colors,
|
||||
LinearScale,
|
||||
CategoryScale,
|
||||
PointElement,
|
||||
Tooltip,
|
||||
Legend
|
||||
});
|
||||
|
||||
const comps = {
|
||||
dates,
|
||||
boxes,
|
||||
accounts,
|
||||
budgets,
|
||||
categories,
|
||||
sankey,
|
||||
subscriptions,
|
||||
piggies
|
||||
};
|
||||
|
||||
function loadPage(comps) {
|
||||
Object.keys(comps).forEach(comp => {
|
||||
console.log(`Loading page component "${comp}"`);
|
||||
let data = comps[comp]();
|
||||
Alpine.data(comp, () => data);
|
||||
});
|
||||
Alpine.start();
|
||||
}
|
||||
|
||||
// wait for load until bootstrapped event is received.
|
||||
document.addEventListener('firefly-iii-bootstrapped', () => {
|
||||
//console.log('Loaded through event listener.');
|
||||
loadPage(comps);
|
||||
});
|
||||
// or is bootstrapped before event is triggered.
|
||||
if (window.bootstrapped) {
|
||||
//console.log('Loaded through window variable.');
|
||||
loadPage(comps);
|
||||
}
|
||||
1
resources/assets/v2/index.js
Normal file
1
resources/assets/v2/index.js
Normal file
@@ -0,0 +1 @@
|
||||
// NOT IN USE
|
||||
241
resources/assets/v2/pages/dashboard/accounts.js
Normal file
241
resources/assets/v2/pages/dashboard/accounts.js
Normal file
@@ -0,0 +1,241 @@
|
||||
/*
|
||||
* accounts.js
|
||||
* Copyright (c) 2023 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 {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/v2/model/account/get.js";
|
||||
import {Chart} from 'chart.js';
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.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 afterPromises = false;
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
loadingAccounts: false,
|
||||
accountList: [],
|
||||
autoConversion: false,
|
||||
chartOptions: null,
|
||||
switchAutoConversion() {
|
||||
this.autoConversion = !this.autoConversion;
|
||||
setVariable('autoConversion', this.autoConversion);
|
||||
},
|
||||
getFreshData() {
|
||||
const dashboard = new Dashboard();
|
||||
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
|
||||
this.chartData = response.data;
|
||||
this.drawChart(this.generateOptions(this.chartData));
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
currencies = [];
|
||||
let options = getDefaultChartSettings('line');
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let yAxis = 'y';
|
||||
let current = data[i];
|
||||
let dataset = {};
|
||||
let collection = [];
|
||||
|
||||
// if index = 0, push all keys as labels:
|
||||
if (0 === i) {
|
||||
options.data.labels = Object.keys(current.entries);
|
||||
}
|
||||
dataset.label = current.label;
|
||||
|
||||
// use the "native" currency code and use the "native_entries" as array
|
||||
if (this.autoConversion) {
|
||||
currencies.push(current.native_code);
|
||||
dataset.currency_code = current.native_code;
|
||||
collection = Object.values(current.native_entries);
|
||||
yAxis = 'y' + current.native_code;
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
yAxis = 'y' + current.currency_code;
|
||||
dataset.currency_code = current.currency_code;
|
||||
currencies.push(current.currency_code);
|
||||
collection = Object.values(current.entries);
|
||||
}
|
||||
dataset.yAxisID = yAxis;
|
||||
dataset.data = collection;
|
||||
|
||||
// add data set to the correct Y Axis:
|
||||
|
||||
options.data.datasets.push(dataset);
|
||||
}
|
||||
}
|
||||
// for each entry in currencies, add a new y-axis:
|
||||
for (let currency in currencies) {
|
||||
if (currencies.hasOwnProperty(currency)) {
|
||||
let code = 'y' + currencies[currency];
|
||||
if (!options.options.scales.hasOwnProperty(code)) {
|
||||
options.options.scales[code] = {
|
||||
id: currency,
|
||||
type: 'linear',
|
||||
position: 1 === parseInt(currency) ? 'right' : 'left',
|
||||
ticks: {
|
||||
callback: function (value, index, values) {
|
||||
return formatMoney(value, currencies[currency]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
return options;
|
||||
},
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
if (null === chartData) {
|
||||
this.getFreshData();
|
||||
return;
|
||||
}
|
||||
this.drawChart(this.generateOptions(chartData));
|
||||
this.loading = false;
|
||||
|
||||
},
|
||||
drawChart(options) {
|
||||
if (null !== chart) {
|
||||
// chart already in place, refresh:
|
||||
chart.options = options.options;
|
||||
chart.data = options.data;
|
||||
chart.update();
|
||||
return;
|
||||
}
|
||||
chart = new Chart(document.querySelector("#account-chart"), options);
|
||||
},
|
||||
loadAccounts() {
|
||||
// console.log('loadAccounts');
|
||||
if (true === this.loadingAccounts) {
|
||||
// console.log('loadAccounts CANCELLED');
|
||||
return;
|
||||
}
|
||||
this.loadingAccounts = true;
|
||||
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 = [];
|
||||
Promise.all([getVariable('frontpageAccounts'),]).then((values) => {
|
||||
totalAccounts = values[0].length;
|
||||
//console.log(values[0]);
|
||||
for (let i in values[0]) {
|
||||
let account = values[0];
|
||||
if (account.hasOwnProperty(i)) {
|
||||
let accountId = account[i];
|
||||
// grab account info for box:
|
||||
(new Get).get(accountId, new Date(window.store.get('end'))).then((response) => {
|
||||
let parent = response.data.data;
|
||||
|
||||
// get groups for account:
|
||||
(new Get).transactions(parent.id, 1).then((response) => {
|
||||
let groups = [];
|
||||
for (let ii = 0; ii < response.data.data.length; ii++) {
|
||||
if (ii >= max) {
|
||||
break;
|
||||
}
|
||||
let current = response.data.data[ii];
|
||||
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),
|
||||
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),
|
||||
native_balance: formatMoney(parent.attributes.native_current_balance, parent.attributes.native_code),
|
||||
groups: groups,
|
||||
});
|
||||
count++;
|
||||
if (count === totalAccounts) {
|
||||
this.accountList = accounts;
|
||||
this.loadingAccounts = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
//this.loadingAccounts = false;
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
// console.log('accounts init');
|
||||
Promise.all([getVariable('viewRange', '1M'), getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
//console.log('accounts after promises');
|
||||
this.autoConversion = values[1];
|
||||
afterPromises = true;
|
||||
|
||||
// main dashboard chart:
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('accounts observe end');
|
||||
chartData = null;
|
||||
this.accountList = [];
|
||||
// main dashboard chart:
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
window.store.observe('autoConversion', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('accounts observe autoconversion');
|
||||
this.loadChart();
|
||||
this.loadAccounts();
|
||||
});
|
||||
},
|
||||
});
|
||||
218
resources/assets/v2/pages/dashboard/boxes.js
Normal file
218
resources/assets/v2/pages/dashboard/boxes.js
Normal file
@@ -0,0 +1,218 @@
|
||||
/*
|
||||
* dashboard.js
|
||||
* Copyright (c) 2023 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 Summary from "../../api/v2/summary/index.js";
|
||||
import {format} from "date-fns";
|
||||
import {getVariable} from "../../store/get-variable.js";
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
|
||||
let afterPromises = false;
|
||||
|
||||
export default () => ({
|
||||
balanceBox: {amounts: [], subtitles: []},
|
||||
billBox: {paid: [], unpaid: []},
|
||||
leftBox: {left: [], perDay: []},
|
||||
netBox: {net: []},
|
||||
autoConversion: false,
|
||||
loading: false,
|
||||
boxData: null,
|
||||
boxOptions: null,
|
||||
getFreshData() {
|
||||
// get stuff
|
||||
let getter = new Summary();
|
||||
let start = new Date(window.store.get('start'));
|
||||
let end = new Date(window.store.get('end'));
|
||||
|
||||
getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => {
|
||||
this.boxData = response.data;
|
||||
this.generateOptions(this.boxData);
|
||||
//this.drawChart();
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
this.balanceBox = {amounts: [], subtitles: []};
|
||||
this.billBox = {paid: [], unpaid: []};
|
||||
this.leftBox = {left: [], perDay: []};
|
||||
this.netBox = {net: []};
|
||||
let subtitles = {};
|
||||
|
||||
// process new content:
|
||||
for (const i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
const current = data[i];
|
||||
let key = current.key;
|
||||
// native (auto conversion):
|
||||
if (this.autoConversion) {
|
||||
if (key.startsWith('balance-in-native')) {
|
||||
this.balanceBox.amounts.push(formatMoney(current.value, current.currency_code));
|
||||
// prep subtitles (for later)
|
||||
if (!subtitles.hasOwnProperty(current.currency_code)) {
|
||||
subtitles[current.currency_code] = '';
|
||||
}
|
||||
continue;
|
||||
}
|
||||
// spent info is used in subtitle:
|
||||
if (key.startsWith('spent-in-native')) {
|
||||
// prep subtitles (for later)
|
||||
if (!subtitles.hasOwnProperty(current.currency_code)) {
|
||||
subtitles[current.currency_code] = '';
|
||||
}
|
||||
// append the amount spent.
|
||||
subtitles[current.currency_code] =
|
||||
subtitles[current.currency_code] +
|
||||
formatMoney(current.value, current.currency_code);
|
||||
continue;
|
||||
}
|
||||
// earned info is used in subtitle:
|
||||
if (key.startsWith('earned-in-native')) {
|
||||
// prep subtitles (for later)
|
||||
if (!subtitles.hasOwnProperty(current.currency_code)) {
|
||||
subtitles[current.currency_code] = '';
|
||||
}
|
||||
// prepend the amount earned.
|
||||
subtitles[current.currency_code] =
|
||||
formatMoney(current.value, current.currency_code) + ' + ' +
|
||||
subtitles[current.currency_code];
|
||||
continue;
|
||||
}
|
||||
|
||||
if (key.startsWith('bills-unpaid-in-native')) {
|
||||
this.billBox.unpaid.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('bills-paid-in-native')) {
|
||||
this.billBox.paid.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('left-to-spend-in-native')) {
|
||||
this.leftBox.left.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('left-per-day-to-spend-in-native')) { // per day
|
||||
this.leftBox.perDay.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('net-worth-in-native')) {
|
||||
this.netBox.net.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// not native
|
||||
if (!this.autoConversion && !key.endsWith('native')) {
|
||||
if (key.startsWith('balance-in-')) {
|
||||
this.balanceBox.amounts.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
// spent info is used in subtitle:
|
||||
if (key.startsWith('spent-in-')) {
|
||||
// prep subtitles (for later)
|
||||
if (!subtitles.hasOwnProperty(current.currency_code)) {
|
||||
subtitles[current.currency_code] = '';
|
||||
}
|
||||
// append the amount spent.
|
||||
subtitles[current.currency_code] =
|
||||
subtitles[current.currency_code] +
|
||||
formatMoney(current.value, current.currency_code);
|
||||
continue;
|
||||
}
|
||||
// earned info is used in subtitle:
|
||||
if (key.startsWith('earned-in-')) {
|
||||
// prep subtitles (for later)
|
||||
if (!subtitles.hasOwnProperty(current.currency_code)) {
|
||||
subtitles[current.currency_code] = '';
|
||||
}
|
||||
// prepend the amount earned.
|
||||
subtitles[current.currency_code] =
|
||||
formatMoney(current.value, current.currency_code) + ' + ' +
|
||||
subtitles[current.currency_code];
|
||||
continue;
|
||||
}
|
||||
|
||||
|
||||
if (key.startsWith('bills-unpaid-in-')) {
|
||||
this.billBox.unpaid.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('bills-paid-in-')) {
|
||||
this.billBox.paid.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('left-to-spend-in-')) {
|
||||
this.leftBox.left.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('left-per-day-to-spend-in-')) {
|
||||
this.leftBox.perDay.push(formatMoney(current.value, current.currency_code));
|
||||
continue;
|
||||
}
|
||||
if (key.startsWith('net-worth-in-')) {
|
||||
this.netBox.net.push(formatMoney(current.value, current.currency_code));
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let i in subtitles) {
|
||||
if (subtitles.hasOwnProperty(i)) {
|
||||
this.balanceBox.subtitles.push(subtitles[i]);
|
||||
}
|
||||
}
|
||||
this.loading = false;
|
||||
},
|
||||
loadBoxes() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
if (null === this.boxData) {
|
||||
this.getFreshData();
|
||||
return;
|
||||
}
|
||||
this.generateOptions(this.boxData);
|
||||
this.loading = false;
|
||||
},
|
||||
|
||||
// Getter
|
||||
init() {
|
||||
// console.log('boxes init');
|
||||
Promise.all([getVariable('viewRange'), getVariable('autoConversion', false)]).then((values) => {
|
||||
// console.log('boxes after promises');
|
||||
afterPromises = true;
|
||||
this.autoConversion = values[1];
|
||||
this.loadBoxes();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('boxes observe end');
|
||||
this.boxData = null;
|
||||
this.loadBoxes();
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('boxes observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
this.loadBoxes();
|
||||
});
|
||||
},
|
||||
});
|
||||
193
resources/assets/v2/pages/dashboard/budgets.js
Normal file
193
resources/assets/v2/pages/dashboard/budgets.js
Normal file
@@ -0,0 +1,193 @@
|
||||
/*
|
||||
* budgets.js
|
||||
* Copyright (c) 2023 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 {getVariable} from "../../store/get-variable.js";
|
||||
import Dashboard from "../../api/v2/chart/budget/dashboard.js";
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
import {Chart} from 'chart.js';
|
||||
import {I18n} from "i18n-js";
|
||||
import {loadTranslations} from "../../support/load-translations.js";
|
||||
|
||||
let currencies = [];
|
||||
let chart = null;
|
||||
let chartData = null;
|
||||
let afterPromises = false;
|
||||
|
||||
let i18n; // for translating items in the chart.
|
||||
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
if (null !== chartData) {
|
||||
this.drawChart(this.generateOptions(chartData));
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.getFreshData();
|
||||
},
|
||||
drawChart(options) {
|
||||
if (null !== chart) {
|
||||
chart.data.datasets = options.data.datasets;
|
||||
chart.update();
|
||||
return;
|
||||
}
|
||||
chart = new Chart(document.querySelector("#budget-chart"), options);
|
||||
},
|
||||
getFreshData() {
|
||||
const dashboard = new Dashboard();
|
||||
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
|
||||
chartData = response.data; // save chart data for later.
|
||||
this.drawChart(this.generateOptions(response.data));
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
currencies = [];
|
||||
let options = getDefaultChartSettings('column');
|
||||
options.options.locale = window.store.get('locale').replace('_', '-');
|
||||
options.options.plugins = {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function (context) {
|
||||
return context.label;
|
||||
},
|
||||
label: function (context) {
|
||||
let label = context.dataset.label || '';
|
||||
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
return label + ' ' + formatMoney(context.parsed.y, currencies[context.parsed.x] ?? 'EUR');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
options.data = {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{
|
||||
label: i18n.t('firefly.spent'),
|
||||
data: [],
|
||||
borderWidth: 1,
|
||||
stack: 1
|
||||
},
|
||||
{
|
||||
label: i18n.t('firefly.left'),
|
||||
data: [],
|
||||
borderWidth: 1,
|
||||
stack: 1
|
||||
},
|
||||
{
|
||||
label: i18n.t('firefly.overspent'),
|
||||
data: [],
|
||||
borderWidth: 1,
|
||||
stack: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
for (const i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
// // convert to EUR yes no?
|
||||
let label = current.label + ' (' + current.currency_code + ')';
|
||||
options.data.labels.push(label);
|
||||
if (this.autoConversion) {
|
||||
currencies.push(current.native_code);
|
||||
// series 0: spent
|
||||
options.data.datasets[0].data.push(parseFloat(current.native_entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.data.datasets[1].data.push(parseFloat(current.native_entries.left));
|
||||
// series 2: overspent
|
||||
options.data.datasets[2].data.push(parseFloat(current.native_entries.overspent));
|
||||
}
|
||||
if (!this.autoConversion) {
|
||||
currencies.push(current.currency_code);
|
||||
// series 0: spent
|
||||
options.data.datasets[0].data.push(parseFloat(current.entries.spent) * -1);
|
||||
// series 1: left
|
||||
options.data.datasets[1].data.push(parseFloat(current.entries.left));
|
||||
// series 2: overspent
|
||||
options.data.datasets[2].data.push(parseFloat(current.entries.overspent));
|
||||
}
|
||||
}
|
||||
}
|
||||
// the currency format callback for the Y axis is AlWAYS based on whatever the first currency is.
|
||||
|
||||
// start
|
||||
options.options.scales = {
|
||||
y: {
|
||||
ticks: {
|
||||
callback: function (context) {
|
||||
return formatMoney(context, currencies[0]);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
// end
|
||||
return options;
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
// console.log('budgets init');
|
||||
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
|
||||
i18n = new I18n();
|
||||
i18n.locale = values[1];
|
||||
loadTranslations(i18n, values[1]);
|
||||
|
||||
this.autoConversion = values[0];
|
||||
afterPromises = true;
|
||||
if (false === this.loading) {
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('boxes observe end');
|
||||
if (false === this.loading) {
|
||||
this.chartData = null;
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('boxes observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
if (false === this.loading) {
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
189
resources/assets/v2/pages/dashboard/categories.js
Normal file
189
resources/assets/v2/pages/dashboard/categories.js
Normal file
@@ -0,0 +1,189 @@
|
||||
/*
|
||||
* budgets.js
|
||||
* Copyright (c) 2023 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 {getVariable} from "../../store/get-variable.js";
|
||||
import Dashboard from "../../api/v2/chart/category/dashboard.js";
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
|
||||
import {Chart} from "chart.js";
|
||||
import formatMoney from "../../util/format-money.js";
|
||||
|
||||
let currencies = [];
|
||||
let chart = null;
|
||||
let chartData = null;
|
||||
let afterPromises = false;
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
generateOptions(data) {
|
||||
currencies = [];
|
||||
let options = getDefaultChartSettings('column');
|
||||
|
||||
// first, create "series" per currency.
|
||||
let series = {};
|
||||
for (const i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let current = data[i];
|
||||
let code = current.currency_code;
|
||||
// only use native code when doing auto conversion.
|
||||
if (this.autoConversion) {
|
||||
code = current.native_code;
|
||||
}
|
||||
|
||||
if (!series.hasOwnProperty(code)) {
|
||||
series[code] = {
|
||||
name: code,
|
||||
yAxisID: '',
|
||||
data: {},
|
||||
};
|
||||
currencies.push(code);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// loop data again to add amounts to each series.
|
||||
for (const i in data) {
|
||||
if (data.hasOwnProperty(i)) {
|
||||
let yAxis = 'y';
|
||||
let current = data[i];
|
||||
let code = current.currency_code;
|
||||
if (this.autoConversion) {
|
||||
code = current.native_code;
|
||||
}
|
||||
|
||||
// loop series, add 0 if not present or add actual amount.
|
||||
for (const ii in series) {
|
||||
if (series.hasOwnProperty(ii)) {
|
||||
let amount = 0.0;
|
||||
if (code === ii) {
|
||||
// this series' currency matches this column's currency.
|
||||
amount = parseFloat(current.amount);
|
||||
yAxis = 'y' + current.currency_code;
|
||||
if (this.autoConversion) {
|
||||
amount = parseFloat(current.native_amount);
|
||||
yAxis = 'y' + current.native_code;
|
||||
}
|
||||
}
|
||||
if (series[ii].data.hasOwnProperty(current.label)) {
|
||||
// there is a value for this particular currency. The amount from this column will be added.
|
||||
// (even if this column isn't recorded in this currency and a new filler value is written)
|
||||
// this is so currency conversion works.
|
||||
series[ii].data[current.label] = series[ii].data[current.label] + amount;
|
||||
}
|
||||
|
||||
if (!series[ii].data.hasOwnProperty(current.label)) {
|
||||
// this column's amount is not yet set in this series.
|
||||
series[ii].data[current.label] = amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
// add label to x-axis, not unimportant.
|
||||
if (!options.data.labels.includes(current.label)) {
|
||||
options.data.labels.push(current.label);
|
||||
}
|
||||
}
|
||||
}
|
||||
// loop the series and create ChartJS-compatible data sets.
|
||||
let count = 0;
|
||||
for (const i in series) {
|
||||
let yAxisID = 'y' + i;
|
||||
let dataset = {
|
||||
label: i,
|
||||
currency_code: i,
|
||||
yAxisID: yAxisID,
|
||||
data: [],
|
||||
}
|
||||
for (const ii in series[i].data) {
|
||||
dataset.data.push(series[i].data[ii]);
|
||||
}
|
||||
options.data.datasets.push(dataset);
|
||||
if (!options.options.scales.hasOwnProperty(yAxisID)) {
|
||||
options.options.scales[yAxisID] = {
|
||||
beginAtZero: true,
|
||||
type: 'linear',
|
||||
position: 1 === count ? 'right' : 'left',
|
||||
ticks: {
|
||||
callback: function (value, index, values) {
|
||||
return formatMoney(value, i);
|
||||
}
|
||||
}
|
||||
};
|
||||
count++;
|
||||
}
|
||||
}
|
||||
return options;
|
||||
},
|
||||
drawChart(options) {
|
||||
if (null !== chart) {
|
||||
chart.options = options.options;
|
||||
chart.data = options.data;
|
||||
chart.update();
|
||||
return;
|
||||
}
|
||||
chart = new Chart(document.querySelector("#category-chart"), options);
|
||||
|
||||
},
|
||||
getFreshData() {
|
||||
const dashboard = new Dashboard();
|
||||
dashboard.dashboard(new Date(window.store.get('start')), new Date(window.store.get('end')), null).then((response) => {
|
||||
chartData = response.data; // save chart data for later.
|
||||
this.drawChart(this.generateOptions(response.data));
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
if (null !== chartData) {
|
||||
this.drawChart(this.generateOptions(chartData));
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.getFreshData();
|
||||
},
|
||||
init() {
|
||||
// console.log('categories init');
|
||||
Promise.all([getVariable('autoConversion', false),]).then((values) => {
|
||||
this.autoConversion = values[0];
|
||||
afterPromises = true;
|
||||
this.loadChart();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
this.chartData = null;
|
||||
this.loadChart();
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
this.autoConversion = newValue;
|
||||
this.loadChart();
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
144
resources/assets/v2/pages/dashboard/piggies.js
Normal file
144
resources/assets/v2/pages/dashboard/piggies.js
Normal file
@@ -0,0 +1,144 @@
|
||||
/*
|
||||
* budgets.js
|
||||
* Copyright (c) 2023 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 {getVariable} from "../../store/get-variable.js";
|
||||
import Get from "../../api/v2/model/piggy-bank/get.js";
|
||||
import {I18n} from "i18n-js";
|
||||
import {loadTranslations} from "../../support/load-translations.js";
|
||||
|
||||
let apiData = {};
|
||||
let afterPromises = false;
|
||||
let i18n;
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
sankeyGrouping: 'account',
|
||||
piggies: [],
|
||||
getFreshData() {
|
||||
let params = {
|
||||
start: window.store.get('start').slice(0, 10),
|
||||
end: window.store.get('end').slice(0, 10),
|
||||
page: 1
|
||||
};
|
||||
this.downloadPiggyBanks(params);
|
||||
},
|
||||
downloadPiggyBanks(params) {
|
||||
// console.log('Downloading page ' + params.page + '...');
|
||||
const getter = new Get();
|
||||
getter.get(params).then((response) => {
|
||||
apiData = [...apiData, ...response.data.data];
|
||||
if (parseInt(response.data.meta.pagination.total_pages) > params.page) {
|
||||
params.page++;
|
||||
this.downloadPiggyBanks(params);
|
||||
return;
|
||||
}
|
||||
this.parsePiggies();
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
parsePiggies() {
|
||||
let dataSet = [];
|
||||
for (let i in apiData) {
|
||||
if (apiData.hasOwnProperty(i)) {
|
||||
let current = apiData[i];
|
||||
if (current.attributes.percentage >= 100) {
|
||||
continue;
|
||||
}
|
||||
if (0 === current.attributes.percentage) {
|
||||
continue;
|
||||
}
|
||||
let groupName = current.object_group_title ?? i18n.t('firefly.default_group_title_name_plain');
|
||||
if (!dataSet.hasOwnProperty(groupName)) {
|
||||
dataSet[groupName] = {
|
||||
id: current.object_group_id ?? 0,
|
||||
title: groupName,
|
||||
order: current.object_group_order ?? 0,
|
||||
piggies: [],
|
||||
};
|
||||
}
|
||||
let piggy = {
|
||||
id: current.id,
|
||||
name: current.attributes.name,
|
||||
percentage: parseInt(current.attributes.percentage),
|
||||
amount: this.autoConversion ? current.attributes.native_current_amount : current.attributes.current_amount,
|
||||
// left to save
|
||||
left_to_save: this.autoConversion ? current.attributes.native_left_to_save : current.attributes.left_to_save,
|
||||
// target amount
|
||||
target_amount: this.autoConversion ? current.attributes.native_target_amount : current.attributes.target_amount,
|
||||
// save per month
|
||||
save_per_month: this.autoConversion ? current.attributes.native_save_per_month : current.attributes.save_per_month,
|
||||
currency_code: this.autoConversion ? current.attributes.native_code : current.attributes.currency_code,
|
||||
|
||||
};
|
||||
dataSet[groupName].piggies.push(piggy);
|
||||
}
|
||||
}
|
||||
this.piggies = Object.values(dataSet);
|
||||
// console.log(this.piggies);
|
||||
},
|
||||
|
||||
loadPiggyBanks() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
if (0 !== this.piggies.length) {
|
||||
this.parsePiggies();
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.getFreshData();
|
||||
},
|
||||
init() {
|
||||
// console.log('piggies init');
|
||||
apiData = [];
|
||||
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
|
||||
i18n = new I18n();
|
||||
i18n.locale = values[1];
|
||||
loadTranslations(i18n, values[1]);
|
||||
|
||||
// console.log('piggies after promises');
|
||||
afterPromises = true;
|
||||
this.autoConversion = values[0];
|
||||
this.loadPiggyBanks();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('piggies observe end');
|
||||
apiData = [];
|
||||
this.loadPiggyBanks();
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('piggies observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
this.loadPiggyBanks();
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
378
resources/assets/v2/pages/dashboard/sankey.js
Normal file
378
resources/assets/v2/pages/dashboard/sankey.js
Normal file
@@ -0,0 +1,378 @@
|
||||
/*
|
||||
* budgets.js
|
||||
* Copyright (c) 2023 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 {getVariable} from "../../store/get-variable.js";
|
||||
import Get from "../../api/v2/model/transaction/get.js";
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
|
||||
import {Chart} from 'chart.js';
|
||||
import {Flow, SankeyController} from 'chartjs-chart-sankey';
|
||||
import {loadTranslations} from "../../support/load-translations.js";
|
||||
import {I18n} from "i18n-js";
|
||||
|
||||
Chart.register({SankeyController, Flow});
|
||||
|
||||
let i18n;
|
||||
let currencies = [];
|
||||
let afterPromises = false;
|
||||
let chart = null;
|
||||
let transactions = [];
|
||||
let translations = {
|
||||
category: null,
|
||||
unknown_category: null,
|
||||
in: null,
|
||||
out: null,
|
||||
// TODO
|
||||
unknown_source: null,
|
||||
unknown_dest: null,
|
||||
unknown_account: null,
|
||||
expense_account: null,
|
||||
revenue_account: null,
|
||||
budget: null,
|
||||
unknown_budget: null,
|
||||
all_money: null,
|
||||
};
|
||||
|
||||
const colors = {
|
||||
a: 'red',
|
||||
b: 'green',
|
||||
c: 'blue',
|
||||
d: 'gray'
|
||||
};
|
||||
|
||||
const getColor = function (key) {
|
||||
if (key.includes(translations.revenue_account)) {
|
||||
return 'forestgreen';
|
||||
}
|
||||
if (key.includes('(' + translations.in + ',')) {
|
||||
return 'green';
|
||||
}
|
||||
|
||||
if (key.includes(translations.budget) || key.includes(translations.unknown_budget)) {
|
||||
return 'Orchid';
|
||||
}
|
||||
if (key.includes('(' + translations.out + ',')) {
|
||||
return 'MediumOrchid';
|
||||
}
|
||||
|
||||
if (key.includes(translations.all_money)) {
|
||||
return 'blue';
|
||||
}
|
||||
return 'red';
|
||||
}
|
||||
|
||||
// little helper
|
||||
function getObjectName(type, name, direction, code) {
|
||||
|
||||
// category 4x
|
||||
if ('category' === type && null !== name && 'in' === direction) {
|
||||
return translations.category + ' "' + name + '" (' + translations.in + ', ' + code + ')';
|
||||
}
|
||||
if ('category' === type && null === name && 'in' === direction) {
|
||||
return translations.unknown_category + ' (' + translations.in + ', ' + code + ')';
|
||||
}
|
||||
if ('category' === type && null !== name && 'out' === direction) {
|
||||
return translations.category + ' "' + name + '" (' + translations.out + ', ' + code + ')';
|
||||
}
|
||||
if ('category' === type && null === name && 'out' === direction) {
|
||||
return translations.unknown_category + ' (' + translations.out + ', ' + code + ')';
|
||||
}
|
||||
// account 4x
|
||||
if ('account' === type && null === name && 'in' === direction) {
|
||||
return translations.unknown_source + ' (' + code + ')';
|
||||
}
|
||||
if ('account' === type && null !== name && 'in' === direction) {
|
||||
return translations.revenue_account + '"' + name + '" (' + code + ')';
|
||||
}
|
||||
if ('account' === type && null === name && 'out' === direction) {
|
||||
return translations.unknown_dest + ' (' + code + ')';
|
||||
}
|
||||
if ('account' === type && null !== name && 'out' === direction) {
|
||||
return translations.expense_account + ' "' + name + '" (' + code + ')';
|
||||
}
|
||||
|
||||
// budget 2x
|
||||
if ('budget' === type && null !== name) {
|
||||
return translations.budget + ' "' + name + '" (' + code + ')';
|
||||
}
|
||||
if ('budget' === type && null === name) {
|
||||
return translations.unknown_budget + ' (' + code + ')';
|
||||
}
|
||||
console.error('Cannot handle: type:"' + type + '", dir: "' + direction + '"');
|
||||
}
|
||||
|
||||
function getLabelName(type, name, code) {
|
||||
// category
|
||||
if ('category' === type && null !== name) {
|
||||
return translations.category + ' "' + name + '" (' + code + ')';
|
||||
}
|
||||
if ('category' === type && null === name) {
|
||||
return translations.unknown_category + ' (' + code + ')';
|
||||
}
|
||||
// account
|
||||
if ('account' === type && null === name) {
|
||||
return translations.unknown_account + ' (' + code + ')';
|
||||
}
|
||||
if ('account' === type && null !== name) {
|
||||
return name + ' (' + code + ')';
|
||||
}
|
||||
|
||||
// budget 2x
|
||||
if ('budget' === type && null !== name) {
|
||||
return translations.budget + ' "' + name + '" (' + code + ')';
|
||||
}
|
||||
if ('budget' === type && null === name) {
|
||||
return translations.unknown_budget + ' (' + code + ')';
|
||||
}
|
||||
console.error('Cannot handle: type:"' + type + '"');
|
||||
}
|
||||
|
||||
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
generateOptions() {
|
||||
let options = getDefaultChartSettings('sankey');
|
||||
|
||||
// reset currencies
|
||||
currencies = [];
|
||||
|
||||
// variables collected for the sankey chart:
|
||||
let amounts = {};
|
||||
let labels = {};
|
||||
for (let i in transactions) {
|
||||
if (transactions.hasOwnProperty(i)) {
|
||||
let group = transactions[i];
|
||||
for (let ii in group.attributes.transactions) {
|
||||
if (group.attributes.transactions.hasOwnProperty(ii)) {
|
||||
// properties of the transaction, used in the generation of the chart:
|
||||
let transaction = group.attributes.transactions[ii];
|
||||
let currencyCode = this.autoConversion ? transaction.native_code : transaction.currency_code;
|
||||
let amount = this.autoConversion ? parseFloat(transaction.native_amount) : parseFloat(transaction.amount);
|
||||
let flowKey;
|
||||
|
||||
/*
|
||||
Two entries in the sankey diagram for deposits:
|
||||
1. From the revenue account (source) to a category (in).
|
||||
2. From the category (in) to the big inbox.
|
||||
*/
|
||||
if ('deposit' === transaction.type) {
|
||||
// nr 1
|
||||
let category = getObjectName('category', transaction.category_name, 'in', currencyCode);
|
||||
let revenueAccount = getObjectName('account', transaction.source_name, 'in', currencyCode);
|
||||
labels[category] = getLabelName('category', transaction.category_name, currencyCode);
|
||||
labels[revenueAccount] = getLabelName('account', transaction.source_name, currencyCode);
|
||||
flowKey = revenueAccount + '-' + category + '-' + currencyCode;
|
||||
if (!amounts.hasOwnProperty(flowKey)) {
|
||||
amounts[flowKey] = {
|
||||
from: revenueAccount,
|
||||
to: category,
|
||||
amount: 0
|
||||
};
|
||||
}
|
||||
amounts[flowKey].amount += amount;
|
||||
|
||||
// nr 2
|
||||
flowKey = category + '-' + translations.all_money + '-' + currencyCode;
|
||||
if (!amounts.hasOwnProperty(flowKey)) {
|
||||
amounts[flowKey] = {
|
||||
from: category,
|
||||
to: translations.all_money + ' (' + currencyCode + ')',
|
||||
amount: 0
|
||||
};
|
||||
}
|
||||
amounts[flowKey].amount += amount;
|
||||
}
|
||||
/*
|
||||
Three entries in the sankey diagram for withdrawals:
|
||||
1. From the big box to a budget.
|
||||
2. From a budget to a category.
|
||||
3. From a category to an expense account.
|
||||
*/
|
||||
if ('withdrawal' === transaction.type) {
|
||||
// 1.
|
||||
let budget = getObjectName('budget', transaction.budget_name, 'out', currencyCode);
|
||||
labels[budget] = getLabelName('budget', transaction.budget_name, currencyCode);
|
||||
flowKey = translations.all_money + '-' + budget + '-' + currencyCode;
|
||||
|
||||
if (!amounts.hasOwnProperty(flowKey)) {
|
||||
amounts[flowKey] = {
|
||||
from: translations.all_money + ' (' + currencyCode + ')',
|
||||
to: budget,
|
||||
amount: 0
|
||||
};
|
||||
}
|
||||
amounts[flowKey].amount += amount;
|
||||
|
||||
|
||||
// 2.
|
||||
let category = getObjectName('category', transaction.category_name, 'out', currencyCode);
|
||||
labels[category] = getLabelName('category', transaction.category_name, currencyCode);
|
||||
flowKey = budget + '-' + category + '-' + currencyCode;
|
||||
|
||||
if (!amounts.hasOwnProperty(flowKey)) {
|
||||
amounts[flowKey] = {
|
||||
from: budget,
|
||||
to: category,
|
||||
amount: 0
|
||||
};
|
||||
}
|
||||
amounts[flowKey].amount += amount;
|
||||
|
||||
// 3.
|
||||
let expenseAccount = getObjectName('account', transaction.destination_name, 'out', currencyCode);
|
||||
labels[expenseAccount] = getLabelName('account', transaction.destination_name, currencyCode);
|
||||
flowKey = category + '-' + expenseAccount + '-' + currencyCode;
|
||||
|
||||
if (!amounts.hasOwnProperty(flowKey)) {
|
||||
amounts[flowKey] = {
|
||||
from: category,
|
||||
to: expenseAccount,
|
||||
amount: 0
|
||||
};
|
||||
}
|
||||
amounts[flowKey].amount += amount;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let dataSet =
|
||||
// sankey chart has one data set.
|
||||
{
|
||||
label: 'My sankey',
|
||||
data: [],
|
||||
colorFrom: (c) => getColor(c.dataset.data[c.dataIndex].from),
|
||||
colorTo: (c) => getColor(c.dataset.data[c.dataIndex].to),
|
||||
colorMode: 'gradient', // or 'from' or 'to'
|
||||
labels: labels,
|
||||
size: 'min', // or 'min' if flow overlap is preferred
|
||||
};
|
||||
for (let i in amounts) {
|
||||
if (amounts.hasOwnProperty(i)) {
|
||||
let amount = amounts[i];
|
||||
dataSet.data.push({from: amount.from, to: amount.to, flow: amount.amount});
|
||||
}
|
||||
}
|
||||
options.data.datasets.push(dataSet);
|
||||
|
||||
return options;
|
||||
},
|
||||
drawChart(options) {
|
||||
if (null !== chart) {
|
||||
chart.data.datasets = options.data.datasets;
|
||||
chart.update();
|
||||
return;
|
||||
}
|
||||
chart = new Chart(document.querySelector("#sankey-chart"), options);
|
||||
|
||||
},
|
||||
getFreshData() {
|
||||
let params = {
|
||||
start: window.store.get('start').slice(0, 10),
|
||||
end: window.store.get('end').slice(0, 10),
|
||||
type: 'withdrawal,deposit',
|
||||
page: 1
|
||||
};
|
||||
this.downloadTransactions(params);
|
||||
},
|
||||
downloadTransactions(params) {
|
||||
//console.log('Downloading page ' + params.page + '...');
|
||||
const getter = new Get();
|
||||
getter.get(params).then((response) => {
|
||||
transactions = [...transactions, ...response.data.data];
|
||||
//this.drawChart(this.generateOptions(response.data));
|
||||
//this.loading = false;
|
||||
if (parseInt(response.data.meta.pagination.total_pages) > params.page) {
|
||||
// continue to next page.
|
||||
params.page++;
|
||||
this.downloadTransactions(params);
|
||||
return;
|
||||
}
|
||||
// continue to next step.
|
||||
//console.log('Final page!');
|
||||
//console.log(transactions);
|
||||
this.drawChart(this.generateOptions());
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
if (0 !== transactions.length) {
|
||||
this.drawChart(this.generateOptions());
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.getFreshData();
|
||||
},
|
||||
init() {
|
||||
// console.log('sankey init');
|
||||
transactions = [];
|
||||
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
|
||||
i18n = new I18n();
|
||||
i18n.locale = values[1];
|
||||
loadTranslations(i18n, values[1]).then(() => {
|
||||
// some translations:
|
||||
translations.all_money = i18n.t('firefly.all_money');
|
||||
translations.category = i18n.t('firefly.category');
|
||||
translations.in = i18n.t('firefly.money_flowing_in');
|
||||
translations.out = i18n.t('firefly.money_flowing_out');
|
||||
translations.unknown_category = i18n.t('firefly.unknown_category_plain');
|
||||
translations.unknown_source = i18n.t('firefly.unknown_source_plain');
|
||||
translations.unknown_dest = i18n.t('firefly.unknown_dest_plain');
|
||||
translations.unknown_account = i18n.t('firefly.unknown_any_plain');
|
||||
translations.unknown_budget = i18n.t('firefly.unknown_budget_plain');
|
||||
translations.expense_account = i18n.t('firefly.expense_account');
|
||||
translations.revenue_account = i18n.t('firefly.revenue_account');
|
||||
translations.budget = i18n.t('firefly.budget');
|
||||
});
|
||||
|
||||
|
||||
// console.log('sankey after promises');
|
||||
afterPromises = true;
|
||||
this.autoConversion = values[0];
|
||||
this.loadChart();
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('sankey observe end');
|
||||
this.transactions = [];
|
||||
this.loadChart();
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('sankey observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
this.loadChart();
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
172
resources/assets/v2/pages/dashboard/subscriptions.js
Normal file
172
resources/assets/v2/pages/dashboard/subscriptions.js
Normal file
@@ -0,0 +1,172 @@
|
||||
/*
|
||||
* budgets.js
|
||||
* Copyright (c) 2023 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 {getVariable} from "../../store/get-variable.js";
|
||||
import Get from "../../api/v2/model/subscription/get.js";
|
||||
import {getDefaultChartSettings} from "../../support/default-chart-settings.js";
|
||||
import {format} from "date-fns";
|
||||
import {Chart} from 'chart.js';
|
||||
import {I18n} from "i18n-js";
|
||||
import {loadTranslations} from "../../support/load-translations.js";
|
||||
|
||||
let chart = null;
|
||||
let chartData = null;
|
||||
let afterPromises = false;
|
||||
let i18n; // for translating items in the chart.
|
||||
export default () => ({
|
||||
loading: false,
|
||||
autoConversion: false,
|
||||
loadChart() {
|
||||
if (true === this.loading) {
|
||||
return;
|
||||
}
|
||||
this.loading = true;
|
||||
|
||||
if (null !== chartData) {
|
||||
this.drawChart(this.generateOptions(chartData));
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
this.getFreshData();
|
||||
},
|
||||
drawChart(options) {
|
||||
if (null !== chart) {
|
||||
chart.data.datasets = options.data.datasets;
|
||||
chart.update();
|
||||
return;
|
||||
}
|
||||
chart = new Chart(document.querySelector("#subscriptions-chart"), options);
|
||||
},
|
||||
getFreshData() {
|
||||
const getter = new Get();
|
||||
let params = {
|
||||
start: format(new Date(window.store.get('start')), 'y-MM-dd'),
|
||||
end: format(new Date(window.store.get('end')), 'y-MM-dd')
|
||||
};
|
||||
|
||||
getter.paid(params).then((response) => {
|
||||
let paidData = response.data;
|
||||
getter.unpaid(params).then((response) => {
|
||||
let unpaidData = response.data;
|
||||
let chartData = {paid: paidData, unpaid: unpaidData};
|
||||
this.drawChart(this.generateOptions(chartData));
|
||||
this.loading = false;
|
||||
});
|
||||
});
|
||||
},
|
||||
generateOptions(data) {
|
||||
let options = getDefaultChartSettings('pie');
|
||||
// console.log(data);
|
||||
options.data.labels = [i18n.t('firefly.paid'), i18n.t('firefly.unpaid')];
|
||||
options.data.datasets = [];
|
||||
let collection = {};
|
||||
for (let i in data.paid) {
|
||||
if (data.paid.hasOwnProperty(i)) {
|
||||
let current = data.paid[i];
|
||||
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
|
||||
let amount = this.autoConversion ? current.native_sum : current.sum;
|
||||
if (!collection.hasOwnProperty(currencyCode)) {
|
||||
collection[currencyCode] = {
|
||||
paid: 0,
|
||||
unpaid: 0,
|
||||
};
|
||||
}
|
||||
// in case of paid, add to "paid":
|
||||
collection[currencyCode].paid += (parseFloat(amount) * -1);
|
||||
}
|
||||
}
|
||||
// unpaid
|
||||
for (let i in data.unpaid) {
|
||||
if (data.unpaid.hasOwnProperty(i)) {
|
||||
let current = data.unpaid[i];
|
||||
let currencyCode = this.autoConversion ? current.native_code : current.currency_code;
|
||||
let amount = this.autoConversion ? current.native_sum : current.sum;
|
||||
if (!collection.hasOwnProperty(currencyCode)) {
|
||||
collection[currencyCode] = {
|
||||
paid: 0,
|
||||
unpaid: 0,
|
||||
};
|
||||
}
|
||||
// console.log(current);
|
||||
// in case of paid, add to "paid":
|
||||
collection[currencyCode].unpaid += parseFloat(amount);
|
||||
}
|
||||
}
|
||||
for (let currencyCode in collection) {
|
||||
if (collection.hasOwnProperty(currencyCode)) {
|
||||
let current = collection[currencyCode];
|
||||
options.data.datasets.push(
|
||||
{
|
||||
label: currencyCode,
|
||||
data: [current.paid, current.unpaid],
|
||||
backgroundColor: [
|
||||
'rgb(54, 162, 235)', // green (paid)
|
||||
'rgb(255, 99, 132)', // red (unpaid_
|
||||
],
|
||||
//hoverOffset: 4
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
// console.log('subscriptions init');
|
||||
Promise.all([getVariable('autoConversion', false), getVariable('language', 'en-US')]).then((values) => {
|
||||
// console.log('subscriptions after promises');
|
||||
this.autoConversion = values[0];
|
||||
afterPromises = true;
|
||||
|
||||
i18n = new I18n();
|
||||
i18n.locale = values[1];
|
||||
loadTranslations(i18n, values[1]);
|
||||
|
||||
|
||||
if (false === this.loading) {
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
window.store.observe('end', () => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('subscriptions observe end');
|
||||
if (false === this.loading) {
|
||||
this.chartData = null;
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
window.store.observe('autoConversion', (newValue) => {
|
||||
if (!afterPromises) {
|
||||
return;
|
||||
}
|
||||
// console.log('subscriptions observe autoConversion');
|
||||
this.autoConversion = newValue;
|
||||
if (false === this.loading) {
|
||||
this.loadChart();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
177
resources/assets/v2/pages/shared/dates.js
Normal file
177
resources/assets/v2/pages/shared/dates.js
Normal file
@@ -0,0 +1,177 @@
|
||||
import {
|
||||
addMonths,
|
||||
endOfDay,
|
||||
endOfMonth,
|
||||
endOfQuarter,
|
||||
endOfWeek,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfQuarter,
|
||||
startOfWeek,
|
||||
startOfYear,
|
||||
subDays,
|
||||
subMonths
|
||||
} from "date-fns";
|
||||
import format from '../../util/format'
|
||||
|
||||
export default () => ({
|
||||
range: {
|
||||
start: null, end: null
|
||||
},
|
||||
defaultRange: {
|
||||
start: null, end: null
|
||||
},
|
||||
language: 'en-US',
|
||||
|
||||
init() {
|
||||
// console.log('Dates init');
|
||||
|
||||
this.range = {
|
||||
start: new Date(window.store.get('start')),
|
||||
end: new Date(window.store.get('end'))
|
||||
};
|
||||
this.defaultRange = {
|
||||
start: new Date(window.store.get('start')),
|
||||
end: new Date(window.store.get('end'))
|
||||
};
|
||||
this.language = window.store.get('language');
|
||||
this.locale = window.store.get('locale');
|
||||
this.locale = 'equal' === this.locale ? this.language : this.locale;
|
||||
window.__localeId__ = this.language;
|
||||
this.buildDateRange();
|
||||
|
||||
window.store.observe('start', (newValue) => {
|
||||
this.range.start = new Date(newValue);
|
||||
});
|
||||
window.store.observe('end', (newValue) => {
|
||||
this.range.end = new Date(newValue);
|
||||
this.buildDateRange();
|
||||
});
|
||||
|
||||
//this.range = this.setDatesFromViewRange(this.range.start);
|
||||
// get values from store and use them accordingly.
|
||||
// this.viewRange = window.BasicStore.get('viewRange');
|
||||
// this.locale = window.BasicStore.get('locale');
|
||||
// this.language = window.BasicStore.get('language');
|
||||
// this.locale = 'equal' === this.locale ? this.language : this.locale;
|
||||
// window.__localeId__ = this.language;
|
||||
//
|
||||
// // the range is always null but later on we will store it in BasicStore.
|
||||
// if (null === this.range.start && null === this.range.end) {
|
||||
// console.log('start + end = null, calling setDatesFromViewRange()');
|
||||
// this.range = this.setDatesFromViewRange(new Date);
|
||||
// }
|
||||
// console.log('MainApp: set defaultRange');
|
||||
// this.defaultRange = this.setDatesFromViewRange(new Date);
|
||||
// // default range is always the current period (initialized ahead)
|
||||
},
|
||||
|
||||
|
||||
buildDateRange() {
|
||||
// console.log('Dates buildDateRange');
|
||||
|
||||
// generate ranges
|
||||
let nextRange = this.getNextRange();
|
||||
let prevRange = this.getPrevRange();
|
||||
let last7 = this.lastDays(7);
|
||||
let last30 = this.lastDays(30);
|
||||
let mtd = this.mtd();
|
||||
let ytd = this.ytd();
|
||||
|
||||
// set the title:
|
||||
let element = document.getElementsByClassName('daterange-holder')[0];
|
||||
element.textContent = format(this.range.start) + ' - ' + format(this.range.end);
|
||||
element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd'));
|
||||
|
||||
// set the current one
|
||||
element = document.getElementsByClassName('daterange-current')[0];
|
||||
element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end);
|
||||
element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd'));
|
||||
|
||||
// generate next range
|
||||
element = document.getElementsByClassName('daterange-next')[0];
|
||||
element.textContent = format(nextRange.start) + ' - ' + format(nextRange.end);
|
||||
element.setAttribute('data-start', format(nextRange.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(nextRange.end, 'yyyy-MM-dd'));
|
||||
|
||||
// previous range.
|
||||
element = document.getElementsByClassName('daterange-prev')[0];
|
||||
element.textContent = format(prevRange.start) + ' - ' + format(prevRange.end);
|
||||
element.setAttribute('data-start', format(prevRange.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(prevRange.end, 'yyyy-MM-dd'));
|
||||
|
||||
// last 7
|
||||
element = document.getElementsByClassName('daterange-7d')[0];
|
||||
element.setAttribute('data-start', format(last7.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(last7.end, 'yyyy-MM-dd'));
|
||||
|
||||
// last 30
|
||||
element = document.getElementsByClassName('daterange-90d')[0];
|
||||
element.setAttribute('data-start', format(last30.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(last30.end, 'yyyy-MM-dd'));
|
||||
|
||||
// MTD
|
||||
element = document.getElementsByClassName('daterange-mtd')[0];
|
||||
element.setAttribute('data-start', format(mtd.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(mtd.end, 'yyyy-MM-dd'));
|
||||
|
||||
// YTD
|
||||
element = document.getElementsByClassName('daterange-ytd')[0];
|
||||
element.setAttribute('data-start', format(ytd.start, 'yyyy-MM-dd'));
|
||||
element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd'));
|
||||
|
||||
// custom range.
|
||||
// console.log('MainApp: buildDateRange end');
|
||||
},
|
||||
|
||||
getNextRange() {
|
||||
let start = startOfMonth(this.range.start);
|
||||
let nextMonth = addMonths(start, 1);
|
||||
let end = endOfMonth(nextMonth);
|
||||
return {start: nextMonth, end: end};
|
||||
},
|
||||
|
||||
getPrevRange() {
|
||||
let start = startOfMonth(this.range.start);
|
||||
let prevMonth = subMonths(start, 1);
|
||||
let end = endOfMonth(prevMonth);
|
||||
return {start: prevMonth, end: end};
|
||||
},
|
||||
|
||||
ytd() {
|
||||
let end = new Date;
|
||||
let start = startOfYear(this.range.start);
|
||||
return {start: start, end: end};
|
||||
},
|
||||
|
||||
mtd() {
|
||||
|
||||
let end = new Date;
|
||||
let start = startOfMonth(this.range.start);
|
||||
return {start: start, end: end};
|
||||
},
|
||||
|
||||
lastDays(days) {
|
||||
let end = new Date;
|
||||
let start = subDays(end, days);
|
||||
return {start: start, end: end};
|
||||
},
|
||||
|
||||
changeDateRange(e) {
|
||||
e.preventDefault();
|
||||
// console.log('MainApp: changeDateRange');
|
||||
let target = e.currentTarget;
|
||||
|
||||
let start = new Date(target.getAttribute('data-start'));
|
||||
let end = new Date(target.getAttribute('data-end'));
|
||||
// console.log('MainApp: Change date range', start, end);
|
||||
|
||||
window.store.set('start', start);
|
||||
window.store.set('end', end);
|
||||
//this.buildDateRange();
|
||||
return false;
|
||||
},
|
||||
|
||||
});
|
||||
32
resources/assets/v2/sass/app.scss
Normal file
32
resources/assets/v2/sass/app.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
/*!
|
||||
* app.scss
|
||||
* Copyright (c) 2019 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/>.
|
||||
*/
|
||||
|
||||
$color-mode-type: media-query;
|
||||
|
||||
// Bootstrap
|
||||
//@import "~bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
|
||||
// Font awesome
|
||||
//@import "~font-awesome/css/font-awesome";
|
||||
$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
|
||||
@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
|
||||
@import "@fortawesome/fontawesome-free/scss/solid.scss";
|
||||
@import "@fortawesome/fontawesome-free/scss/brands.scss";
|
||||
@import "@fortawesome/fontawesome-free/scss/regular.scss";
|
||||
100
resources/assets/v2/store/Basic.js
Normal file
100
resources/assets/v2/store/Basic.js
Normal file
@@ -0,0 +1,100 @@
|
||||
// basic store for preferred date range and some other vars.
|
||||
// used in layout.
|
||||
import Get from '../api/preferences/index.js';
|
||||
import store from 'store';
|
||||
|
||||
|
||||
/**
|
||||
* A basic store for Firefly III persistent UI data and preferences.
|
||||
*/
|
||||
const Basic = () => {
|
||||
|
||||
// currently availabel variables:
|
||||
const viewRange = '1M';
|
||||
const darkMode = 'browser';
|
||||
const language = 'en-US';
|
||||
const locale = 'en-US';
|
||||
|
||||
// start and end are used by most pages to allow the user to browse back and forth.
|
||||
const start = null;
|
||||
const end = null;
|
||||
|
||||
// others, to be used in the future.
|
||||
const listPageSize = 10;
|
||||
const currencyCode = 'AAA';
|
||||
const currencyId = '0';
|
||||
const ready = false;
|
||||
//
|
||||
// a very basic way to signal the store now contains all variables.
|
||||
const count = 0;
|
||||
const readyCount = 4;
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
const init = () => {
|
||||
this.loadVariable('viewRange')
|
||||
this.loadVariable('darkMode')
|
||||
this.loadVariable('language')
|
||||
this.loadVariable('locale')
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a variable, fresh or from storage.
|
||||
* @param name
|
||||
*/
|
||||
const loadVariable = (name) => {
|
||||
|
||||
// currently unused, window.X can be used by the blade template
|
||||
// to make things available quicker than if the store has to grab it through the API.
|
||||
// then again, it's not that slow.
|
||||
if (window.hasOwnProperty(name)) {
|
||||
this[name] = window[name];
|
||||
this.triggerReady();
|
||||
return;
|
||||
}
|
||||
// load from store
|
||||
if (store.get(name)) {
|
||||
this[name] = store.get(name);
|
||||
this.triggerReady();
|
||||
return;
|
||||
}
|
||||
// grab
|
||||
let getter = (new Get);
|
||||
getter.getByName(name).then((response) => this.parseResponse(name, response));
|
||||
}
|
||||
//
|
||||
const parseResponse = (name, response) => {
|
||||
let value = response.data.data.attributes.data;
|
||||
this[name] = value;
|
||||
// TODO store.
|
||||
store.set(name, value);
|
||||
this.triggerReady();
|
||||
}
|
||||
//
|
||||
// set(name, value) {
|
||||
// this[name] = value;
|
||||
// store.set(name, value);
|
||||
// }
|
||||
//
|
||||
// get(name) {
|
||||
// return store.get(name, this[name]);
|
||||
// }
|
||||
//
|
||||
const isReady = () => {
|
||||
return this.count === this.readyCount;
|
||||
}
|
||||
|
||||
const triggerReady = () => {
|
||||
this.count++;
|
||||
if (this.count === this.readyCount) {
|
||||
// trigger event:
|
||||
const event = new Event("BasicStoreReady");
|
||||
document.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
return {
|
||||
init
|
||||
};
|
||||
}
|
||||
export const basic = Basic();
|
||||
58
resources/assets/v2/store/get-variable.js
Normal file
58
resources/assets/v2/store/get-variable.js
Normal file
@@ -0,0 +1,58 @@
|
||||
/*
|
||||
* get-variable.js
|
||||
* Copyright (c) 2023 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 Get from "../api/v1/preferences/index.js";
|
||||
import Post from "../api/v1/preferences/post.js";
|
||||
|
||||
export function getVariable(name, defaultValue = null) {
|
||||
|
||||
// currently unused, window.X can be used by the blade template
|
||||
// to make things available quicker than if the store has to grab it through the API.
|
||||
// then again, it's not that slow.
|
||||
if (window.hasOwnProperty(name)) {
|
||||
// console.log('Get from window');
|
||||
return Promise.resolve(window[name]);
|
||||
}
|
||||
// load from store2, if it's present.
|
||||
if (window.store.get(name)) {
|
||||
// console.log('Get from store');
|
||||
return Promise.resolve(window.store.get(name));
|
||||
}
|
||||
let getter = (new Get);
|
||||
return getter.getByName(name).then((response) => {
|
||||
// console.log('Get from API');
|
||||
return Promise.resolve(parseResponse(name, response));
|
||||
}).catch(() => {
|
||||
// preference does not exist (yet).
|
||||
// POST it and then return it anyway.
|
||||
let poster = (new Post);
|
||||
poster.post(name, defaultValue).then((response) => {
|
||||
return Promise.resolve(parseResponse(name, response));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function parseResponse(name, response) {
|
||||
let value = response.data.data.attributes.data;
|
||||
window.store.set(name, value);
|
||||
// console.log('Store from API');
|
||||
return value;
|
||||
}
|
||||
|
||||
46
resources/assets/v2/store/set-variable.js
Normal file
46
resources/assets/v2/store/set-variable.js
Normal file
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
* get-variable.js
|
||||
* Copyright (c) 2023 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 Put from "../api/v1/preferences/put.js";
|
||||
import Post from "../api/v1/preferences/post.js";
|
||||
|
||||
export function setVariable(name, value = null) {
|
||||
|
||||
// currently unused, window.X can be used by the blade template
|
||||
// to make things available quicker than if the store has to grab it through the API.
|
||||
// then again, it's not that slow.
|
||||
|
||||
// set in window.x
|
||||
// window[name] = value;
|
||||
|
||||
// set in store:
|
||||
window.store.set(name, value);
|
||||
|
||||
// post to user preferences (because why not):
|
||||
let putter = new Put();
|
||||
putter.put(name, value).then((response) => {
|
||||
}).catch(() => {
|
||||
// preference does not exist (yet).
|
||||
// POST it
|
||||
let poster = (new Post);
|
||||
poster.post(name, value).then((response) => {
|
||||
});
|
||||
});
|
||||
}
|
||||
100
resources/assets/v2/support/default-chart-settings.js
Normal file
100
resources/assets/v2/support/default-chart-settings.js
Normal file
@@ -0,0 +1,100 @@
|
||||
/*
|
||||
* default-chart-settings.js
|
||||
* Copyright (c) 2023 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 formatMoney from "../util/format-money.js";
|
||||
|
||||
function getDefaultChartSettings(type) {
|
||||
if ('sankey' === type) {
|
||||
return {
|
||||
type: 'sankey',
|
||||
data: {
|
||||
datasets: [],
|
||||
},
|
||||
}
|
||||
}
|
||||
if ('pie' === type) {
|
||||
return {
|
||||
type: 'pie',
|
||||
data: {
|
||||
datasets: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
if ('column' === type) {
|
||||
return {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [],
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (tooltipItem) {
|
||||
// console.log(tooltipItem);
|
||||
let currency = tooltipItem.dataset.currency_code;
|
||||
return formatMoney(tooltipItem.raw, currency);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {}
|
||||
},
|
||||
};
|
||||
}
|
||||
if ('line' === type) {
|
||||
return {
|
||||
options: {
|
||||
plugins: {
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (tooltipItem) {
|
||||
// console.log(tooltipItem);
|
||||
let currency = tooltipItem.dataset.currency_code;
|
||||
return formatMoney(tooltipItem.raw, currency);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
x: {
|
||||
// The axis for this scale is determined from the first letter of the id as `'x'`
|
||||
// It is recommended to specify `position` and / or `axis` explicitly.
|
||||
type: 'time',
|
||||
time: {
|
||||
tooltipFormat: 'PP',
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: []
|
||||
},
|
||||
};
|
||||
}
|
||||
return {};
|
||||
}
|
||||
|
||||
export {getDefaultChartSettings};
|
||||
106
resources/assets/v2/support/get-viewrange.js
Normal file
106
resources/assets/v2/support/get-viewrange.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import {
|
||||
endOfDay, endOfMonth, endOfQuarter,
|
||||
endOfWeek,
|
||||
startOfDay,
|
||||
startOfMonth,
|
||||
startOfQuarter,
|
||||
startOfWeek,
|
||||
startOfYear,
|
||||
subDays
|
||||
} from "date-fns";
|
||||
|
||||
function getViewRange(viewRange, today) {
|
||||
let start;
|
||||
let end;
|
||||
|
||||
// console.log('getViewRange: ' + viewRange);
|
||||
|
||||
switch (viewRange) {
|
||||
case 'last365':
|
||||
start = startOfDay(subDays(today, 365));
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'last90':
|
||||
start = startOfDay(subDays(today, 90));
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'last30':
|
||||
start = startOfDay(subDays(today, 30));
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'last7':
|
||||
start = startOfDay(subDays(today, 7));
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'YTD':
|
||||
start = startOfYear(today);
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'QTD':
|
||||
start = startOfQuarter(today);
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case 'MTD':
|
||||
start = startOfMonth(today);
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case '1D':
|
||||
// today:
|
||||
start = startOfDay(today);
|
||||
end = endOfDay(today);
|
||||
break;
|
||||
case '1W':
|
||||
// this week:
|
||||
start = startOfDay(startOfWeek(today, {weekStartsOn: 1}));
|
||||
end = endOfDay(endOfWeek(today, {weekStartsOn: 1}));
|
||||
break;
|
||||
case '1M':
|
||||
// this month:
|
||||
start = startOfDay(startOfMonth(today));
|
||||
end = endOfDay(endOfMonth(today));
|
||||
break;
|
||||
case '3M':
|
||||
// this quarter
|
||||
start = startOfDay(startOfQuarter(today));
|
||||
end = endOfDay(endOfQuarter(today));
|
||||
break;
|
||||
case '6M':
|
||||
// this half-year
|
||||
if (today.getMonth() <= 5) {
|
||||
start = new Date(today);
|
||||
start.setMonth(0);
|
||||
start.setDate(1);
|
||||
start = startOfDay(start);
|
||||
end = new Date(today);
|
||||
end.setMonth(5);
|
||||
end.setDate(30);
|
||||
end = endOfDay(start);
|
||||
}
|
||||
if (today.getMonth() > 5) {
|
||||
start = new Date(today);
|
||||
start.setMonth(6);
|
||||
start.setDate(1);
|
||||
start = startOfDay(start);
|
||||
end = new Date(today);
|
||||
end.setMonth(11);
|
||||
end.setDate(31);
|
||||
end = endOfDay(start);
|
||||
}
|
||||
break;
|
||||
case '1Y':
|
||||
// this year
|
||||
start = new Date(today);
|
||||
start.setMonth(0);
|
||||
start.setDate(1);
|
||||
start = startOfDay(start);
|
||||
|
||||
end = new Date(today);
|
||||
end.setMonth(11);
|
||||
end.setDate(31);
|
||||
end = endOfDay(end);
|
||||
break;
|
||||
}
|
||||
return {start: start, end: end};
|
||||
}
|
||||
|
||||
export {getViewRange};
|
||||
27
resources/assets/v2/support/load-translations.js
Normal file
27
resources/assets/v2/support/load-translations.js
Normal file
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
* load-translations.js
|
||||
* Copyright (c) 2023 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/>.
|
||||
*/
|
||||
|
||||
async function loadTranslations(i18n, locale) {
|
||||
const response = await fetch(`./v2/i18n/${locale}.json`);
|
||||
const translations = await response.json();
|
||||
i18n.store(translations);
|
||||
}
|
||||
|
||||
export {loadTranslations};
|
||||
30
resources/assets/v2/util/format-money.js
Normal file
30
resources/assets/v2/util/format-money.js
Normal file
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* format-money.js
|
||||
* Copyright (c) 2023 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 {format} from "date-fns";
|
||||
|
||||
export default function (amount, currencyCode) {
|
||||
let locale = window.__localeId__.replace('_', '-');
|
||||
|
||||
return Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency: currencyCode
|
||||
}).format(amount);
|
||||
}
|
||||
99
resources/assets/v2/util/format.js
Normal file
99
resources/assets/v2/util/format.js
Normal file
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* format.js
|
||||
* Copyright (c) 2023 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 {format} from 'date-fns'
|
||||
import {
|
||||
bg,
|
||||
cs,
|
||||
da,
|
||||
de,
|
||||
el,
|
||||
enGB,
|
||||
enUS,
|
||||
es,
|
||||
ca,
|
||||
fi,
|
||||
fr,
|
||||
hu,
|
||||
id,
|
||||
it,
|
||||
ja,
|
||||
ko,
|
||||
nb,
|
||||
nn,
|
||||
nl,
|
||||
pl,
|
||||
ptBR,
|
||||
pt,
|
||||
ro,
|
||||
ru,
|
||||
sk,
|
||||
sl,
|
||||
sv,
|
||||
tr,
|
||||
uk,
|
||||
vi,
|
||||
zhTW,
|
||||
zhCN
|
||||
} from 'date-fns/locale'
|
||||
|
||||
const locales = {
|
||||
bg,
|
||||
cs,
|
||||
da,
|
||||
de,
|
||||
el,
|
||||
enGB,
|
||||
enUS,
|
||||
es,
|
||||
ca,
|
||||
fi,
|
||||
fr,
|
||||
hu,
|
||||
id,
|
||||
it,
|
||||
ja,
|
||||
ko,
|
||||
nb,
|
||||
nn,
|
||||
nl,
|
||||
pl,
|
||||
ptBR,
|
||||
pt,
|
||||
ro,
|
||||
ru,
|
||||
sk,
|
||||
sl,
|
||||
sv,
|
||||
tr,
|
||||
uk,
|
||||
vi,
|
||||
zhTW,
|
||||
zhCN
|
||||
}
|
||||
|
||||
// by providing a default string of 'PP' or any of its variants for `formatStr`
|
||||
// it will format dates in whichever way is appropriate to the locale
|
||||
export default function (date, formatStr = 'PP') {
|
||||
let locale = window.__localeId__.replace('_', '');
|
||||
return format(date, formatStr, {
|
||||
locale: locales[locale] ?? locales[locale.slice(0, 2)] ?? locales['enUS'] // or global.__localeId__
|
||||
})
|
||||
}
|
||||
24
resources/assets/v2/util/index.js
Normal file
24
resources/assets/v2/util/index.js
Normal file
@@ -0,0 +1,24 @@
|
||||
|
||||
const domContentLoadedCallbacks = [];
|
||||
// from admin LTE
|
||||
const onDOMContentLoaded = (callback) => {
|
||||
if (document.readyState === 'loading') {
|
||||
// add listener on the first call when the document is in loading state
|
||||
if (!domContentLoadedCallbacks.length) {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
for (const callback of domContentLoadedCallbacks) {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
domContentLoadedCallbacks.push(callback)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export {
|
||||
onDOMContentLoaded,
|
||||
}
|
||||
@@ -1363,6 +1363,7 @@ return [
|
||||
|
||||
// Financial administrations
|
||||
'administration_index' => 'Financial administration',
|
||||
'administrations_index_menu' => 'Financial administration(s)',
|
||||
|
||||
// profile:
|
||||
'purge_data_title' => 'Purge data from Firefly III',
|
||||
@@ -2306,6 +2307,7 @@ return [
|
||||
'invite_user' => 'Invite user',
|
||||
'user_is_invited' => 'Email address ":address" was invited to Firefly III',
|
||||
'administration' => 'Administration',
|
||||
'system_settings' => 'System settings',
|
||||
'code_already_used' => 'Invite code has been used',
|
||||
'user_administration' => 'User administration',
|
||||
'list_all_users' => 'All users',
|
||||
|
||||
96
resources/views/v2/errors/FireflyException.twig
Normal file
96
resources/views/v2/errors/FireflyException.twig
Normal file
@@ -0,0 +1,96 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ trans('config.html_language') }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
|
||||
<title>Firefly III Exception :(</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
|
||||
<base href="{{ route('index') }}/">
|
||||
|
||||
{# CSS things #}
|
||||
|
||||
{# libraries #}
|
||||
<link href="v1/lib/bs/css/bootstrap.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"
|
||||
nonce="{{ JS_NONCE }}">
|
||||
<link href="v1/lib/fa/css/font-awesome.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"
|
||||
nonce="{{ JS_NONCE }}">
|
||||
|
||||
{# the theme #}
|
||||
<link href="v1/lib/adminlte/css/AdminLTE.min.css?v={{ FF_VERSION }}" rel="stylesheet" type="text/css"
|
||||
nonce="{{ JS_NONCE }}">
|
||||
|
||||
{# favicons #}
|
||||
{% include('partials.favicons') %}
|
||||
|
||||
</head>
|
||||
<body class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
|
||||
<h1><a href="{{ route('index') }}"><strong>Firefly</strong>III</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
|
||||
<h3 class="text-info">{{ trans('errors.error_occurred') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
|
||||
<p>
|
||||
{{ trans('errors.error_not_recoverable') }}
|
||||
</p>
|
||||
<p class="text-danger">
|
||||
{{ exception.getMessage |default('General unknown errror') }}
|
||||
</p>
|
||||
<p>
|
||||
{{ trans('errors.error_location', {file: exception.getFile, line: exception.getLine, code: exception.getCode })|raw }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% if not debug %}
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
|
||||
<h4>
|
||||
{{ trans('errors.more_info') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ trans('errors.collect_info')|raw }}
|
||||
{{ trans('errors.collect_info_more')|raw }}
|
||||
</p>
|
||||
<h4>
|
||||
{{ trans('errors.github_help') }}
|
||||
</h4>
|
||||
<p>
|
||||
{{ trans('errors.github_instructions')|raw }}
|
||||
</p>
|
||||
<ol>
|
||||
<li>{{ trans('errors.use_search') }}</li>
|
||||
<li>{{ trans('errors.include_info', { link: route('debug') })|raw }}</li>
|
||||
<li>{{ trans('errors.tell_more') }}</li>
|
||||
<li>{{ trans('errors.include_logs') }}</li>
|
||||
<li>{{ trans('errors.what_did_you_do') }}</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if debug %}
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
|
||||
<h4>{{ trans('errors.error') }}</h4>
|
||||
<p>
|
||||
{{ trans('errors.error_location', {file: exception.getFile, line: exception.getLine, code: exception.getCode })|raw }}
|
||||
</p>
|
||||
<h4>
|
||||
{{ trans('errors.stacktrace') }}
|
||||
</h4>
|
||||
<div style="font-family: monospace;font-size:11px;">
|
||||
{{ exception.getTraceAsString|nl2br }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
225
resources/views/v2/index.blade.php
Normal file
225
resources/views/v2/index.blade.php
Normal file
@@ -0,0 +1,225 @@
|
||||
@extends('layout.v2')
|
||||
@section('vite')
|
||||
@vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/dashboard.js'])
|
||||
@endsection
|
||||
@section('content')
|
||||
|
||||
<div class="app-content">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
@include('partials.dashboard.boxes')
|
||||
|
||||
<!-- row with account data -->
|
||||
<div class="row mb-2" x-data="accounts">
|
||||
<div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('accounts.index',['asset']) }}"
|
||||
title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.yourAccounts') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:400px;">
|
||||
<canvas id="account-chart"></canvas>
|
||||
</div>
|
||||
<div class="card-footer text-end">
|
||||
<template x-if="autoConversion">
|
||||
<button type="button" @click="switchAutoConversion"
|
||||
class="btn btn-outline-info btm-sm">
|
||||
<span
|
||||
class="fa-solid fa-comments-dollar"></span> {{ __('firefly.disable_auto_convert') }}
|
||||
</button>
|
||||
</template>
|
||||
<template x-if="!autoConversion">
|
||||
<button type="button" @click="switchAutoConversion"
|
||||
class="btn btn-outline-info btm-sm">
|
||||
<span
|
||||
class="fa-solid fa-comments-dollar"></span> {{ __('firefly.enable_auto_convert') }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2" x-data="budgets">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('budgets.index') }}"
|
||||
title="{{ __('firefly.go_to_budgets') }}">{{ __('firefly.budgetsAndSpending') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:350px;">
|
||||
<canvas id="budget-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" x-data="categories">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="{{ route('categories.index') }}"
|
||||
title="{{ __('firefly.yourAccounts') }}">{{ __('firefly.categories') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body p-0" style="position: relative;height:350px;">
|
||||
<canvas id="category-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
|
||||
<div class="row">
|
||||
<template x-if="loadingAccounts">
|
||||
<p class="text-center">
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-for="account in accountList">
|
||||
<div class="col-12 mb-2" x-model="account">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<a :href="'{{ route('accounts.show','') }}/' + account.id"
|
||||
x-text="account.name"></a>
|
||||
|
||||
<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">
|
||||
{{ __('firefly.no_transactions_period') }}
|
||||
</p>
|
||||
<table class="table table-sm" x-show="account.groups.length > 0">
|
||||
<tbody>
|
||||
<template x-for="group in account.groups">
|
||||
<tr>
|
||||
<td>
|
||||
<template x-if="group.title">
|
||||
<span><a
|
||||
:href="'{{route('transactions.show', '') }}/' + group.id"
|
||||
x-text="group.title"></a><br/></span>
|
||||
</template>
|
||||
<template x-for="transaction in group.transactions">
|
||||
<span>
|
||||
<template x-if="group.title">
|
||||
<span>-
|
||||
<span
|
||||
x-text="transaction.description"></span><br>
|
||||
</span>
|
||||
</template>
|
||||
<template x-if="!group.title">
|
||||
<span><a
|
||||
:href="'{{route('transactions.show', '') }}/' + group.id"
|
||||
x-text="transaction.description"></a><br>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
<td style="width:30%;" class="text-end">
|
||||
<template x-if="group.title">
|
||||
<span><br/></span>
|
||||
</template>
|
||||
<template x-for="transaction in group.transactions">
|
||||
<span>
|
||||
<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>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="#"
|
||||
title="{{ route('reports.index') }}">{{ __('firefly.income_and_expense') }}</a>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body" x-data="sankey">
|
||||
<canvas id="sankey-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="#" title="Something">Subscriptions</a></h3>
|
||||
</div>
|
||||
<div class="card-body" x-data="subscriptions">
|
||||
<canvas id="subscriptions-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title"><a href="#" title="Something">recurring? rules? tags?</a></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>
|
||||
TODO
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@endsection
|
||||
132
resources/views/v2/layout/v2.blade.php
Normal file
132
resources/views/v2/layout/v2.blade.php
Normal file
@@ -0,0 +1,132 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ trans('config.html_language') }}">
|
||||
<!-- data-bs-theme="dark" -->
|
||||
<!--begin::Head-->
|
||||
@include('partials.layout.head')
|
||||
<!--end::Head-->
|
||||
|
||||
<!--begin::Body-->
|
||||
<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
|
||||
<!--begin::App Wrapper-->
|
||||
<div class="app-wrapper">
|
||||
<!--begin::Header-->
|
||||
<nav class="app-header navbar navbar-expand bg-body">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Start Navbar Links-->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
|
||||
<em class="fa-solid fa-bars"></em>
|
||||
</a>
|
||||
</li>
|
||||
<!--begin::Navbar Search-->
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
|
||||
<em class="fa-solid fa-magnifying-glass"></em>
|
||||
</a>
|
||||
</li>
|
||||
<!--end::Navbar Search-->
|
||||
</ul>
|
||||
<!--end::Start Navbar Links-->
|
||||
|
||||
<!--begin::End Navbar Links-->
|
||||
<ul class="navbar-nav ms-auto" x-data="dates">
|
||||
|
||||
<!-- begin date range drop down -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<a href="#" class="dropdown-item daterange-current" @click="changeDateRange">
|
||||
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" @click="changeDateRange" class="dropdown-item daterange-next">
|
||||
next
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item daterange-prev" @click="changeDateRange">
|
||||
prev
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item daterange-7d" @click="changeDateRange">
|
||||
{{ __('firefly.last_seven_days') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item daterange-90d" @click="changeDateRange">
|
||||
{{ __('firefly.last_thirty_days') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item daterange-mtd" @click="changeDateRange">
|
||||
{{ __('firefly.month_to_date') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item daterange-ytd" @click="changeDateRange">
|
||||
{{ __('firefly.year_to_date') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer daterange-custom" @click="app.doCustomRange">
|
||||
TODO {{ __('firefly.customRange') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- end date range drop down -->
|
||||
<!-- user menu -->
|
||||
@include('partials.layout.topbar')
|
||||
</ul>
|
||||
<!--end::End Navbar Links-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</nav>
|
||||
<!--end::Header-->
|
||||
<!--begin::Sidebar-->
|
||||
@include('partials.layout.sidebar')
|
||||
<!--end::Sidebar-->
|
||||
<!--begin::App Main-->
|
||||
<main class="app-main">
|
||||
<!--begin::App Content Header-->
|
||||
<div class="app-content-header">
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<h3 class="mb-0">
|
||||
@if($mainTitleIcon)
|
||||
<em class="fa {{ $mainTitleIcon }}"></em>
|
||||
@endif
|
||||
{{ $title }} @if($subTitle)
|
||||
<small class="text-muted">
|
||||
{{$subTitle}}</small>
|
||||
@endif</h3>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<!-- find me -->
|
||||
{{ Breadcrumbs::render('home') }}
|
||||
</div>
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</div>
|
||||
<!--end::Container-->
|
||||
</div>
|
||||
<!--end::App Content Header-->
|
||||
<!--begin::App Content-->
|
||||
@yield('content')
|
||||
<!--end::App Content-->
|
||||
</main>
|
||||
<!--end::App Main-->
|
||||
|
||||
<!--begin::Footer-->
|
||||
@include('partials.layout.footer')
|
||||
|
||||
<!--end::Footer-->
|
||||
</div>
|
||||
<!--end::App Wrapper-->
|
||||
<!--begin::Script-->
|
||||
@include('partials.layout.scripts')
|
||||
<!--end::Script-->
|
||||
|
||||
</body>
|
||||
<!--end::Body-->
|
||||
|
||||
</html>
|
||||
153
resources/views/v2/partials/dashboard/boxes.blade.php
Normal file
153
resources/views/v2/partials/dashboard/boxes.blade.php
Normal file
@@ -0,0 +1,153 @@
|
||||
<div class="row" x-data="boxes">
|
||||
<!--begin::Col-->
|
||||
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
|
||||
<!--begin::Small Box Widget 1-->
|
||||
<div class="small-box text-bg-primary">
|
||||
<div class="inner">
|
||||
<h3 id="balanceAmount">
|
||||
<template x-for="(amount, index) in balanceBox.amounts" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (balanceBox.amounts.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</h3>
|
||||
<template x-if="loading">
|
||||
<p>
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-if="!loading">
|
||||
<p>
|
||||
<a href="{{ route('reports.report.default', ['allAssetAccounts',$start->format('Ymd'),$end->format('Ymd')]) }}">{{ __('firefly.in_out_period') }}</a>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<span class="small-box-icon">
|
||||
<i class="fa-solid fa-scale-balanced"></i>
|
||||
</span>
|
||||
|
||||
<span class="small-box-footer">
|
||||
<template x-for="(subtitle, index) in balanceBox.subtitles" :key="index">
|
||||
<span>
|
||||
<span x-text="subtitle"></span><span
|
||||
:class="{ 'invisible': (balanceBox.amounts.length == index+1) }"> & </span>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<!--end::Small Box Widget 1-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
|
||||
<!--begin::Small Box Widget 2-->
|
||||
<div class="small-box text-bg-success">
|
||||
<div class="inner">
|
||||
<h3>
|
||||
<template x-for="(amount, index) in billBox.unpaid" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (billBox.unpaid.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</h3>
|
||||
|
||||
<template x-if="loading">
|
||||
<p>
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-if="!loading">
|
||||
<p><a href="{{ route('bills.index') }}">{{ __('firefly.bills_to_pay') }}</a></p>
|
||||
</template>
|
||||
</div>
|
||||
<span class="small-box-icon">
|
||||
<em class="fa-regular fa-calendar"></em>
|
||||
</span>
|
||||
<span class="small-box-footer">
|
||||
{{ __('firefly.paid') }}:
|
||||
<template x-for="(amount, index) in billBox.paid" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (billBox.paid.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<!--end::Small Box Widget 2-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
|
||||
<!--begin::Small Box Widget 3-->
|
||||
<div class="small-box text-bg-warning">
|
||||
<div class="inner">
|
||||
<h3>
|
||||
<template x-for="(amount, index) in leftBox.left" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (leftBox.left.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</h3>
|
||||
|
||||
<template x-if="loading">
|
||||
<p>
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-if="!loading">
|
||||
<p><a href="{{ route('budgets.index') }}">{{ __('firefly.left_to_spend') }}</a></p>
|
||||
</template>
|
||||
</div>
|
||||
<span class="small-box-icon">
|
||||
<em class="fa-solid fa-money-check-dollar"></em>
|
||||
</span>
|
||||
<span class="small-box-footer">
|
||||
{{ __('firefly.per_day') }}:
|
||||
<template x-for="(amount, index) in leftBox.perDay" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (leftBox.perDay.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<!--end::Small Box Widget 3-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
<div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
|
||||
<!--begin::Small Box Widget 4-->
|
||||
<div class="small-box text-bg-danger">
|
||||
<div class="inner">
|
||||
<h3>
|
||||
<template x-for="(amount, index) in netBox.net" :key="index">
|
||||
<span>
|
||||
<span x-text="amount"></span><span
|
||||
:class="{ 'invisible': (netBox.net.length == index+1) }">, </span>
|
||||
</span>
|
||||
</template>
|
||||
</h3>
|
||||
|
||||
<template x-if="loading">
|
||||
<p>
|
||||
<em class="fa-solid fa-spinner fa-spin"></em>
|
||||
</p>
|
||||
</template>
|
||||
<template x-if="!loading">
|
||||
<p>
|
||||
<a href="{{ route('reports.report.default', ['allAssetAccounts','currentYearStart','currentYearEnd']) }}">{{ __('firefly.net_worth') }}</a>
|
||||
</p>
|
||||
</template>
|
||||
</div>
|
||||
<span class="small-box-icon">
|
||||
<i class="fa-solid fa-chart-line"></i>
|
||||
</span>
|
||||
<span class="small-box-footer">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<!--end::Small Box Widget 4-->
|
||||
</div>
|
||||
<!--end::Col-->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
11
resources/views/v2/partials/favicons.twig
Normal file
11
resources/views/v2/partials/favicons.twig
Normal file
@@ -0,0 +1,11 @@
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png?v=3e8AboOwbd">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png?v=3e8AboOwbd">
|
||||
<link rel="manifest" href="manifest.webmanifest?v=3e8AboOwbd">
|
||||
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#3c8dbc">
|
||||
<link rel="shortcut icon" href="favicon.ico?v=3e8AboOwbd">
|
||||
<meta name="apple-mobile-web-app-title" content="Firefly III">
|
||||
<meta name="application-name" content="Firefly III">
|
||||
<meta name="msapplication-TileColor" content="#3c8dbc">
|
||||
<meta name="msapplication-TileImage" content="mstile-144x144.png?v=3e8AboOwbd">
|
||||
<meta name="theme-color" content="#3c8dbc">
|
||||
11
resources/views/v2/partials/layout/breadcrumbs.blade.php
Normal file
11
resources/views/v2/partials/layout/breadcrumbs.blade.php
Normal file
@@ -0,0 +1,11 @@
|
||||
@if(count($breadcrumbs) > 0)
|
||||
<ol class="breadcrumb float-sm-end">
|
||||
@foreach ($breadcrumbs as $bc)
|
||||
@if($bc->url and !$loop->last)
|
||||
<li><a href="{{ $bc->url }}">{{ $bc->title }}</a></li>
|
||||
@else
|
||||
<li class="active">{{ $bc->title }}</li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ol>
|
||||
@endif
|
||||
11
resources/views/v2/partials/layout/footer.blade.php
Normal file
11
resources/views/v2/partials/layout/footer.blade.php
Normal file
@@ -0,0 +1,11 @@
|
||||
<footer class="app-footer">
|
||||
<!--begin::To the end-->
|
||||
<div class="float-end d-none d-sm-inline">
|
||||
<a href="{{ route('debug') }}">v{{ $FF_VERSION }}</a>
|
||||
</div>
|
||||
<!--end::To the end-->
|
||||
<!--begin::Copyright-->
|
||||
<a href="https://github.com/firefly-iii/firefly-iii/">Firefly III</a> © James Cole,
|
||||
<a href="https://github.com/firefly-iii/firefly-iii/blob/main/LICENSE">AGPL-3.0-or-later</a>
|
||||
<!--end::Copyright-->
|
||||
</footer>
|
||||
78
resources/views/v2/partials/layout/head.blade.php
Normal file
78
resources/views/v2/partials/layout/head.blade.php
Normal file
@@ -0,0 +1,78 @@
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<base href="{{ route('index') }}/">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, noodp, NoImageIndex, noydir">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
|
||||
<script type="text/javascript">
|
||||
/*!
|
||||
* Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
|
||||
* Copyright 2011-2023 The Bootstrap Authors
|
||||
* Licensed under the Creative Commons Attribution 3.0 Unported License.
|
||||
*/
|
||||
|
||||
(() => {
|
||||
'use strict'
|
||||
// todo store just happens to store in localStorage but if not, this would break.
|
||||
const getStoredTheme = () => JSON.parse(localStorage.getItem('darkMode'))
|
||||
|
||||
const getPreferredTheme = () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme) {
|
||||
return storedTheme
|
||||
}
|
||||
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
const setTheme = theme => {
|
||||
if (theme === 'browser' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||
return;
|
||||
}
|
||||
if (theme === 'browser' && window.matchMedia('(prefers-color-scheme: light)').matches) {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'light')
|
||||
return;
|
||||
}
|
||||
document.documentElement.setAttribute('data-bs-theme', theme)
|
||||
}
|
||||
|
||||
setTheme(getPreferredTheme())
|
||||
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
const storedTheme = getStoredTheme()
|
||||
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
||||
setTheme(getPreferredTheme())
|
||||
}
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
|
||||
<title>
|
||||
@if($subTitle)
|
||||
{{ $subTitle }} »
|
||||
@endif
|
||||
|
||||
@if($title !== 'Firefly III')
|
||||
{{ $title }} »
|
||||
@endif
|
||||
Firefly III
|
||||
</title>
|
||||
|
||||
<!--begin::Primary Meta Tags-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!--begin::Fonts-->
|
||||
<link href="v2/css/fonts.css" rel="stylesheet">
|
||||
<!--end::Fonts-->
|
||||
|
||||
<!--begin::Required Plugin(AdminLTE)-->
|
||||
<link rel="stylesheet" href="v2/css/adminlte.css">
|
||||
<!--end::Required Plugin(AdminLTE)-->
|
||||
@yield('vite')
|
||||
|
||||
</head>
|
||||
3
resources/views/v2/partials/layout/scripts.blade.php
Normal file
3
resources/views/v2/partials/layout/scripts.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<!--begin::Required Plugin(AdminLTE)-->
|
||||
<script src="v2/js/adminlte.js"></script>
|
||||
<!--end::Required Plugin(AdminLTE)-->
|
||||
208
resources/views/v2/partials/layout/sidebar.blade.php
Normal file
208
resources/views/v2/partials/layout/sidebar.blade.php
Normal file
@@ -0,0 +1,208 @@
|
||||
<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
|
||||
<!--begin::Sidebar Brand-->
|
||||
<div class="sidebar-brand">
|
||||
<!--begin::Brand Link-->
|
||||
<a href="{{route('index') }}" class="brand-link">
|
||||
<!--begin::Brand Image-->
|
||||
<img src="v2/i/logo.png" alt="Firefly III Logo"
|
||||
class="brand-image opacity-75 shadow">
|
||||
<!--end::Brand Image-->
|
||||
<!--begin::Brand Text-->
|
||||
<span class="brand-text fw-light">Firefly III</span>
|
||||
<!--end::Brand Text-->
|
||||
</a>
|
||||
<!--end::Brand Link-->
|
||||
</div>
|
||||
<!--end::Sidebar Brand-->
|
||||
<!--begin::Sidebar Wrapper-->
|
||||
|
||||
<div class="sidebar-wrapper">
|
||||
<nav class="mt-2">
|
||||
<!--begin::Sidebar Menu-->
|
||||
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu"
|
||||
data-accordion="false">
|
||||
<li class="nav-item menu-open">
|
||||
<a href="#" class="nav-link active">
|
||||
<em class="nav-icon fa-solid fa-gauge-high"></em>
|
||||
<p>
|
||||
{{ __('firefly.dashboard') }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">{{ strtoupper(__('firefly.financial_control')) }}</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('budgets.index') }}" class="nav-link">
|
||||
<em class="nav-icon fa-solid fa-chart-pie"></em>
|
||||
<p>{{ __('firefly.budgets') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('bills.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-calendar"></i>
|
||||
<p>{{ __('firefly.bills') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('piggy-banks.index') }}" class="nav-link">
|
||||
<em class="nav-icon fa-solid fa-bullseye"></em>
|
||||
<p>{{ __('firefly.piggy_banks') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">{{ strtoupper(__('firefly.accounting')) }}</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<em class="nav-icon fa-solid fa-arrow-right-arrow-left"></em>
|
||||
<p>
|
||||
{{ __('firefly.transactions') }}
|
||||
<i class="nav-arrow fa-solid fa-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('transactions.index',['withdrawal']) }}" class="nav-link">
|
||||
<em class="nav-icon fa-solid fa-arrow-left"></em>
|
||||
<p>{{ __('firefly.expenses') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('transactions.index', ['deposit']) }}" class="nav-link">
|
||||
<em class="nav-icon fa-solid fa-arrow-right"></em>
|
||||
<p>{{ __('firefly.income') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('transactions.index', ['transfers']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-arrows-rotate"></i>
|
||||
<p>{{ __('firefly.transfers') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('transactions.index', ['all']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-arrows-turn-to-dots"></i>
|
||||
<p>{{ __('firefly.all_transactions') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-microchip"></i>
|
||||
<p>
|
||||
{{ __('firefly.automation') }}
|
||||
<i class="nav-arrow fa-solid fa-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('rules.index') }}" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>{{ __('firefly.rules') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('recurring.index') }}" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>{{ __('firefly.recurrences') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('webhooks.index') }}" class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>{{ __('firefly.webhooks') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">{{ strtoupper(__('firefly.others')) }}</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-credit-card"></i>
|
||||
<p>
|
||||
{{ __('firefly.accounts') }}
|
||||
<i class="nav-arrow fa-solid fa-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('accounts.index', ['asset']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-money-bills"></i>
|
||||
<p>{{ __('firefly.asset_accounts') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('accounts.index', ['expense']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-cart-shopping"></i>
|
||||
<p>{{ __('firefly.expense_accounts') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('accounts.index', ['revenue']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-money-bill-trend-up"></i>
|
||||
<p>{{ __('firefly.revenue_accounts') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('accounts.index', ['liabilities']) }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-landmark"></i>
|
||||
<p>{{ __('firefly.liabilities') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-tags"></i>
|
||||
<p>
|
||||
{{ __('firefly.classification') }}
|
||||
<i class="nav-arrow fa-solid fa-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('categories.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-bookmark"></i>
|
||||
<p>{{ __('firefly.categories') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('tags.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-tag"></i>
|
||||
<p>{{ __('firefly.tags') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('object-groups.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-regular fa-envelope"></i>
|
||||
<p>{{ __('firefly.object_groups') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('reports.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-chart-column"></i>
|
||||
<p>{{ __('firefly.reports') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('export.index') }}" class="nav-link">
|
||||
<i class="nav-icon fa-solid fa-upload"></i>
|
||||
<p>{{ __('firefly.export_data_menu') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a href="{{ route('logout') }}" class="nav-link logout-link">
|
||||
<i class="nav-icon fa-solid fa-arrow-right-from-bracket"></i>
|
||||
<p>TODO {{ __('firefly.logout') }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<!--end::Sidebar Menu-->
|
||||
</nav>
|
||||
</div>
|
||||
<!--end::Sidebar Wrapper-->
|
||||
</aside>
|
||||
|
||||
<!-- simple script for logout thing -->
|
||||
100
resources/views/v2/partials/layout/topbar.blade.php
Normal file
100
resources/views/v2/partials/layout/topbar.blade.php
Normal file
@@ -0,0 +1,100 @@
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-solid fa-gears"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<a href="{{ route('admin.index') }}" class="dropdown-item">
|
||||
<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-euro-sign me-2 fa-fw"></em>
|
||||
{{ __('firefly.currencies') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<span class="dropdown-item dropdown-header">{{ auth()->user()->email }}</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="{{ route('profile.index') }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-user me-2"></em>
|
||||
{{ __('firefly.profile') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="{{ route('preferences.index') }}" class="dropdown-item">
|
||||
<em class="fa-solid fa-user-gear me-2"></em>
|
||||
{{ __('firefly.preferences') }}
|
||||
</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') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-bs-toggle="dropdown" href="#">
|
||||
<i class="fa-solid fa-plus-circle"></i>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
|
||||
<!-- withdrawal, deposit, transfer -->
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
{{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<!-- asset, liability -->
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<!-- budget, category, piggy -->
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
<!-- contract, rule, recurring -->
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
<a href="{{ route('transactions.create', ['withdrawal']) }}" class="dropdown-item">
|
||||
<em class="fa-regular fa-plus me-2"></em>
|
||||
TODO {{ __('firefly.create_new_transaction') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
Reference in New Issue
Block a user