Expand v2 layout with experimental view.

This commit is contained in:
James Cole
2024-01-07 12:51:42 +01:00
parent 70b60f756b
commit 75a32b2f94
66 changed files with 770 additions and 134 deletions

View File

@@ -45,9 +45,6 @@ import {
Tooltip
} from "chart.js";
import 'chartjs-adapter-date-fns';
import {loadTranslations} from "../../support/load-translations.js";
import {getVariable} from "../../store/get-variable.js";
import i18next from "i18next";
// register things
Chart.register({
@@ -81,26 +78,20 @@ const comps = {
//let i18n;
function loadPage(comps) {
Promise.all([getVariable('language', 'en_US')]).then((values) => {
loadTranslations(values[0]).then(() => {
Object.keys(comps).forEach(comp => {
let data = comps[comp]();
Alpine.data(comp, () => data);
});
Alpine.start();
});
Object.keys(comps).forEach(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.');
console.log('Loaded through event listener.');
loadPage(comps);
});
// or is bootstrapped before event is triggered.
if (window.bootstrapped) {
//console.log('Loaded through window variable.');
console.log('Loaded through window variable.');
loadPage(comps);
}

View File

@@ -22,7 +22,6 @@ 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 {getCacheKey} from "../../support/get-cache-key.js";
import {format} from "date-fns";
import i18next from "i18next";

View File

@@ -45,7 +45,6 @@ export default () => ({
language: 'en_US',
init() {
console.log(`Loading page component "DATES" with language "${i18next.t('key')}".`);
this.range = {
start: new Date(window.store.get('start')),
end: new Date(window.store.get('end'))

View File

@@ -0,0 +1,58 @@
/*
* template.js
* Copyright (c) 2024 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 '../../boot/bootstrap.js';
import dates from "./shared/dates.js";
let somethings = function() {
return {
pageProperties: {},
functionName() {
},
init() {
}
}
}
let comps = {somethings, dates};
function loadPage() {
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();
});
// or is bootstrapped before event is triggered.
if (window.bootstrapped) {
console.log('Loaded through window variable.');
loadPage();
}

View File

@@ -24,8 +24,6 @@ import {createEmptySplit, defaultErrorSet} from "./shared/create-empty-split.js"
import {parseFromEntries} from "./shared/parse-from-entries.js";
import formatMoney from "../../util/format-money.js";
import Post from "../../api/v2/model/transaction/post.js";
import {getVariable} from "../../store/get-variable.js";
import {loadTranslations} from "../../support/load-translations.js";
import {loadCurrencies} from "./shared/load-currencies.js";
import {loadBudgets} from "./shared/load-budgets.js";
import {loadPiggyBanks} from "./shared/load-piggy-banks.js";

View File

@@ -20,8 +20,6 @@
import '../../boot/bootstrap.js';
import dates from '../../pages/shared/dates.js';
import {getVariable} from "../../store/get-variable.js";
import {loadTranslations} from "../../support/load-translations.js";
import formatMoney from "../../util/format-money.js";
import Get from "../../api/v2/model/transaction/get.js";
import {parseDownloadedSplits} from "./shared/parse-downloaded-splits.js";

View File

@@ -83,21 +83,8 @@ export function parseDownloadedSplits(downloads) {
current.longitude = download.longitude;
current.zoomLevel = download.zoom_level;
}
// hasLocation: false
// latitude: null
// longitude: null
// piggy_bank_id: null
// zoomLevel: null
// console.log('download:');
// console.log(download);
// console.log('current:');
// console.log(current);
console.log(current.tags);
returnArray.push(current);
}
}
return returnArray;
}

View File

@@ -0,0 +1,129 @@
/*
* show.js
* Copyright (c) 2024 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 '../../boot/bootstrap.js';
import dates from "../shared/dates.js";
import i18next from "i18next";
import Get from "../../api/v2/model/transaction/get.js";
import {parseDownloadedSplits} from "./shared/parse-downloaded-splits.js";
import {format} from "date-fns";
import formatMoney from "../../util/format-money.js";
let show = function () {
return {
// notifications
notifications: {
error: {
show: false, text: '', url: '',
}, success: {
show: false, text: '', url: '',
}, wait: {
show: false, text: '',
}
},
groupProperties: {
id: 0,
transactionType: '',
transactionTypeTranslated: '',
title: '',
totalAmount: 0,
date: new Date,
},
// parse amounts per currency
amounts: {},
entries: [],
pageProperties: {},
formatMoney(amount, currencyCode) {
return formatMoney(amount, currencyCode);
},
format(date) {
return format(date, i18next.t('config.date_time_fns'));
},
init() {
this.notifications.wait.show = true;
this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
const page = window.location.href.split('/');
const groupId = parseInt(page[page.length - 1]);
const getter = new Get();
getter.show(groupId, {}).then((response) => {
const data = response.data.data;
this.groupProperties.id = parseInt(data.id);
this.groupProperties.transactionType = data.attributes.transactions[0].type;
this.groupProperties.transactionTypeTranslated = i18next.t('firefly.' + data.attributes.transactions[0].type);
this.groupProperties.title = data.attributes.title ?? data.attributes.transactions[0].description;
this.groupProperties.totalAmount = 0;
this.entries = parseDownloadedSplits(data.attributes.transactions);
// remove waiting thing.
this.notifications.wait.show = false;
}).then(() => {
for (let i in this.entries) {
if (this.entries.hasOwnProperty(i)) {
const currencyCode = this.entries[i].currency_code;
const foreignCurrencyCode = this.entries[i].foreign_currency_code;
if (undefined === this.amounts[currencyCode]) {
this.amounts[currencyCode] = 0;
this.amounts[currencyCode] += parseFloat(this.entries[i].amount);
}
if (null !== foreignCurrencyCode && '' !== foreignCurrencyCode && undefined === this.amounts[foreignCurrencyCode]) {
this.amounts[foreignCurrencyCode] = 0;
this.amounts[foreignCurrencyCode] += parseFloat(this.entries[i].foreign_amount);
}
this.groupProperties.totalAmount = this.groupProperties.totalAmount + parseFloat(this.entries[i].amount);
if(0 === parseInt(i)) {
this.groupProperties.date = this.entries[i].date;
}
}
}
}).catch((error) => {
// todo auto generated.
this.notifications.error.show = true;
this.notifications.error.text = error.message;
});
}
}
}
let comps = {show, dates};
function loadPage() {
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();
});
// or is bootstrapped before event is triggered.
if (window.bootstrapped) {
console.log('Loaded through window variable.');
loadPage();
}