mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-10-25 05:03:13 +00:00
Expand v2 layout with experimental view.
This commit is contained in:
20
resources/assets/v2/boot/bootstrap.js
vendored
20
resources/assets/v2/boot/bootstrap.js
vendored
@@ -31,13 +31,12 @@ import observePlugin from 'store/plugins/observe';
|
||||
import Alpine from "alpinejs";
|
||||
import * as bootstrap from 'bootstrap';
|
||||
import {getFreshVariable} from "../store/get-fresh-variable.js";
|
||||
|
||||
store.addPlugin(observePlugin);
|
||||
|
||||
|
||||
// import even more
|
||||
import {getVariable} from "../store/get-variable.js";
|
||||
import {getViewRange} from "../support/get-viewrange.js";
|
||||
import {loadTranslations} from "../support/load-translations.js";
|
||||
|
||||
store.addPlugin(observePlugin);
|
||||
|
||||
window.bootstrapped = false;
|
||||
window.store = store;
|
||||
@@ -69,16 +68,13 @@ getFreshVariable('lastActivity').then((serverValue) => {
|
||||
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;
|
||||
loadTranslations(values[3]).then(() => {
|
||||
const event = new Event('firefly-iii-bootstrapped');
|
||||
document.dispatchEvent(event);
|
||||
window.bootstrapped = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
// wait for 3 promises, because we need those later on.
|
||||
|
||||
window.axios = axios;
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
|
||||
window.Alpine = Alpine
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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'))
|
||||
|
||||
58
resources/assets/v2/pages/template.js
Normal file
58
resources/assets/v2/pages/template.js
Normal 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();
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
129
resources/assets/v2/pages/transactions/show.js
Normal file
129
resources/assets/v2/pages/transactions/show.js
Normal 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();
|
||||
}
|
||||
@@ -28,21 +28,19 @@ import LocalStorageBackend from "i18next-localstorage-backend";
|
||||
|
||||
|
||||
let loaded = false;
|
||||
let count = 0;
|
||||
|
||||
function loadTranslations(locale) {
|
||||
if (false === loaded && 0 === count) {
|
||||
console.log('Loading translations: ' + count);
|
||||
if (false === loaded) {
|
||||
const replacedLocale = locale.replace('-', '_');
|
||||
loaded = true;
|
||||
count++;
|
||||
|
||||
console.log(import.meta.env.MODE);
|
||||
const expireTime = import.meta.env.MODE === 'development' ? 1 : 7 * 24 * 60 * 60 * 1000;
|
||||
return i18next
|
||||
.use(ChainedBackend)
|
||||
.init({
|
||||
fallbackLng: "en_US",
|
||||
lng: replacedLocale,
|
||||
debug: true,
|
||||
debug: import.meta.env.MODE === 'development',
|
||||
// ... your i18next config
|
||||
backend: {
|
||||
backends: [
|
||||
@@ -50,7 +48,7 @@ function loadTranslations(locale) {
|
||||
HttpBackend
|
||||
],
|
||||
backendOptions: [{
|
||||
expirationTime: 7 * 24 * 60 * 60 * 1000 // 7 days
|
||||
expirationTime: expireTime
|
||||
}, {
|
||||
// const response = await fetch(`./v2/i18n/${locale}.json`);
|
||||
loadPath: './v2/i18n/{{lng}}.json'
|
||||
@@ -58,8 +56,7 @@ function loadTranslations(locale) {
|
||||
}
|
||||
});
|
||||
}
|
||||
count++;
|
||||
console.warn('Loading translations skipped because count is:' + count);
|
||||
console.warn('Loading translations skipped.');
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user