IntenseFinance/firefly-iii
3
0
Fork 0
mirror of https://github.com/firefly-iii/firefly-iii.git synced 2025-02-25 18:45:27 -06:00
Code Issues Packages Projects Releases Wiki Activity

Continued work on v4

Browse Source
This commit is contained in:
James Cole 2023-07-23 07:10:31 +02:00
parent 190508fa54
commit be531d777e
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
13 changed files with 503 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/Api/V1/Controllers/Summary/BasicController.php
View File

@ -322,16 +322,11 @@ class BasicController extends Controller
'currency_decimal_places' => $row['currency_decimal_places'], 'currency_decimal_places' => $row['currency_decimal_places'],
'value_parsed' => app('amount')->formatFlat($row['currency_symbol'], $row['currency_decimal_places'], $leftToSpend, false), 'value_parsed' => app('amount')->formatFlat($row['currency_symbol'], $row['currency_decimal_places'], $leftToSpend, false),
'local_icon' => 'money', 'local_icon' => 'money',
'sub_title' => (string)trans( 'sub_title' => app('amount')->formatFlat(
'firefly.box_spend_per_day', $row['currency_symbol'],
[ $row['currency_decimal_places'],
'amount' => app('amount')->formatFlat( $perDay,
$row['currency_symbol'], false
$row['currency_decimal_places'],
$perDay,
false
),
]
), ),
]; ];
} }

21
package-lock.json generated
View File

@ -10,7 +10,7 @@
"alpinejs": "^3.12.3", "alpinejs": "^3.12.3",
"bootstrap": "^5.3.0", "bootstrap": "^5.3.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"store2": "^2.14.2" "store": "^2.0.12"
}, },
"devDependencies": { "devDependencies": {
"axios": "^1.1.2", "axios": "^1.1.2",
@ -885,10 +885,13 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/store2": { "node_modules/store": {
"version": "2.14.2", "version": "2.0.12",
"resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz", "resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
"integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==" "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw==",
"engines": {
"node": "*"
}
}, },
"node_modules/to-regex-range": { "node_modules/to-regex-range": {
"version": "5.0.1", "version": "5.0.1",
@ -1466,10 +1469,10 @@
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
"dev": true "dev": true
}, },
"store2": { "store": {
"version": "2.14.2", "version": "2.0.12",
"resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz", "resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
"integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==" "integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw=="
}, },
"to-regex-range": { "to-regex-range": {
"version": "5.0.1", "version": "5.0.1",

2
package.json
View File

@ -17,6 +17,6 @@
"alpinejs": "^3.12.3", "alpinejs": "^3.12.3",
"bootstrap": "^5.3.0", "bootstrap": "^5.3.0",
"date-fns": "^2.30.0", "date-fns": "^2.30.0",
"store2": "^2.14.2" "store": "^2.0.12"
} }
} }

393
resources/assets/v4/app.js
View File

@ -1,206 +1,187 @@
import './bootstrap'; // import './bootstrap';
import { // import {
addMonths, // addMonths,
endOfDay, // endOfDay,
endOfMonth, // endOfMonth,
endOfQuarter, // endOfQuarter,
endOfWeek, // endOfWeek,
startOfDay, // startOfDay,
startOfMonth, // startOfMonth,
startOfQuarter, // startOfQuarter,
startOfWeek, // startOfWeek,
startOfYear, // startOfYear,
subDays, // subDays,
subMonths // subMonths
} from "date-fns"; // } from "date-fns";
import format from './util/format' // import format from './util/format'
//
class MainApp { // export default () => ({
range = { // range: {
start: null, end: null // start: null, end: null
}; // },
defaultRange = { // defaultRange: {
start: null, end: null // start: null, end: null
}; // },
viewRange = '1M'; //
locale = 'en-US'; // init() {
language = 'en-US'; // console.log('MainApp init');
// // get values from store and use them accordingly.
constructor() { // // this.viewRange = window.BasicStore.get('viewRange');
console.log('MainApp constructor'); // // this.locale = window.BasicStore.get('locale');
let start = window.BasicStore.get('start'); // // this.language = window.BasicStore.get('language');
let end = window.BasicStore.get('end'); // // this.locale = 'equal' === this.locale ? this.language : this.locale;
if (null !== start && null !== end) { // // window.__localeId__ = this.language;
console.log('start + end is not null, recycle it.'); // //
this.range = { // // // the range is always null but later on we will store it in BasicStore.
start: new Date(start), // // if (null === this.range.start && null === this.range.end) {
end: new Date(end), // // console.log('start + end = null, calling setDatesFromViewRange()');
}; // // this.range = this.setDatesFromViewRange(new Date);
return; // // }
} // // console.log('MainApp: set defaultRange');
console.log('start + end = null!'); // // this.defaultRange = this.setDatesFromViewRange(new Date);
// // // default range is always the current period (initialized ahead)
} // },
//
init() { //
console.log('MainApp init'); // buildDateRange() {
// get values from store and use them accordingly. // console.log('MainApp: buildDateRange');
this.viewRange = window.BasicStore.get('viewRange'); // // generate ranges
this.locale = window.BasicStore.get('locale'); // let nextRange = this.getNextRange();
this.language = window.BasicStore.get('language'); // let prevRange = this.getPrevRange();
this.locale = 'equal' === this.locale ? this.language : this.locale; // let last7 = this.lastDays(7);
window.__localeId__ = this.language; // let last30 = this.lastDays(30);
// let mtd = this.mtd();
// the range is always null but later on we will store it in BasicStore. // let ytd = this.ytd();
if (null === this.range.start && null === this.range.end) { //
console.log('start + end = null, calling setDatesFromViewRange()'); // // set the title:
this.range = this.setDatesFromViewRange(new Date); // let element = document.getElementsByClassName('daterange-holder')[0];
} // element.textContent = format(this.range.start) + ' - ' + format(this.range.end);
console.log('MainApp: set defaultRange'); // element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd'));
this.defaultRange = this.setDatesFromViewRange(new Date); // element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd'));
// default range is always the current period (initialized ahead) //
} // // set the current one
// element = document.getElementsByClassName('daterange-current')[0];
// element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end);
buildDateRange() { // element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd'));
console.log('MainApp: buildDateRange'); // element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd'));
// generate ranges //
let nextRange = this.getNextRange(); // // generate next range
let prevRange = this.getPrevRange(); // element = document.getElementsByClassName('daterange-next')[0];
let last7 = this.lastDays(7); // element.textContent = format(nextRange.start) + ' - ' + format(nextRange.end);
let last30 = this.lastDays(30); // element.setAttribute('data-start', format(nextRange.start, 'yyyy-MM-dd'));
let mtd = this.mtd(); // element.setAttribute('data-end', format(nextRange.end, 'yyyy-MM-dd'));
let ytd = this.ytd(); //
// // previous range.
// set the title: // element = document.getElementsByClassName('daterange-prev')[0];
let element = document.getElementsByClassName('daterange-holder')[0]; // element.textContent = format(prevRange.start) + ' - ' + format(prevRange.end);
element.textContent = format(this.range.start) + ' - ' + format(this.range.end); // element.setAttribute('data-start', format(prevRange.start, 'yyyy-MM-dd'));
element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd')); // element.setAttribute('data-end', format(prevRange.end, 'yyyy-MM-dd'));
element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd')); //
// // last 7
// set the current one // element = document.getElementsByClassName('daterange-7d')[0];
element = document.getElementsByClassName('daterange-current')[0]; // element.setAttribute('data-start', format(last7.start, 'yyyy-MM-dd'));
element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end); // element.setAttribute('data-end', format(last7.end, 'yyyy-MM-dd'));
element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd')); //
element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd')); // // last 30
// element = document.getElementsByClassName('daterange-90d')[0];
// generate next range // element.setAttribute('data-start', format(last30.start, 'yyyy-MM-dd'));
element = document.getElementsByClassName('daterange-next')[0]; // element.setAttribute('data-end', format(last30.end, 'yyyy-MM-dd'));
element.textContent = format(nextRange.start) + ' - ' + format(nextRange.end); //
element.setAttribute('data-start', format(nextRange.start, 'yyyy-MM-dd')); // // MTD
element.setAttribute('data-end', format(nextRange.end, 'yyyy-MM-dd')); // element = document.getElementsByClassName('daterange-mtd')[0];
// element.setAttribute('data-start', format(mtd.start, 'yyyy-MM-dd'));
// previous range. // element.setAttribute('data-end', format(mtd.end, 'yyyy-MM-dd'));
element = document.getElementsByClassName('daterange-prev')[0]; //
element.textContent = format(prevRange.start) + ' - ' + format(prevRange.end); // // YTD
element.setAttribute('data-start', format(prevRange.start, 'yyyy-MM-dd')); // element = document.getElementsByClassName('daterange-ytd')[0];
element.setAttribute('data-end', format(prevRange.end, 'yyyy-MM-dd')); // element.setAttribute('data-start', format(ytd.start, 'yyyy-MM-dd'));
// element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd'));
// last 7 //
element = document.getElementsByClassName('daterange-7d')[0]; // // custom range.
element.setAttribute('data-start', format(last7.start, 'yyyy-MM-dd')); // console.log('MainApp: buildDateRange end');
element.setAttribute('data-end', format(last7.end, 'yyyy-MM-dd')); // },
//
// last 30 // getNextRange() {
element = document.getElementsByClassName('daterange-90d')[0]; // let start = startOfMonth(this.range.start);
element.setAttribute('data-start', format(last30.start, 'yyyy-MM-dd')); // let nextMonth = addMonths(start, 1);
element.setAttribute('data-end', format(last30.end, 'yyyy-MM-dd')); // let end = endOfMonth(nextMonth);
// return {start: nextMonth, end: end};
// MTD // },
element = document.getElementsByClassName('daterange-mtd')[0]; //
element.setAttribute('data-start', format(mtd.start, 'yyyy-MM-dd')); // getPrevRange() {
element.setAttribute('data-end', format(mtd.end, 'yyyy-MM-dd')); // let start = startOfMonth(this.range.start);
// let prevMonth = subMonths(start, 1);
// YTD // let end = endOfMonth(prevMonth);
element = document.getElementsByClassName('daterange-ytd')[0]; // return {start: prevMonth, end: end};
element.setAttribute('data-start', format(ytd.start, 'yyyy-MM-dd')); // },
element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd')); //
// ytd() {
// custom range. // let end = new Date;
console.log('MainApp: buildDateRange end'); // let start = startOfYear(this.range.start);
} // return {start: start, end: end};
// },
getNextRange() { //
let start = startOfMonth(this.range.start); // mtd() {
let nextMonth = addMonths(start, 1); //
let end = endOfMonth(nextMonth); // let end = new Date;
return {start: nextMonth, end: end}; // let start = startOfMonth(this.range.start);
} // return {start: start, end: end};
// },
getPrevRange() { //
let start = startOfMonth(this.range.start); // lastDays(days) {
let prevMonth = subMonths(start, 1); // let end = new Date;
let end = endOfMonth(prevMonth); // let start = subDays(end, days);
return {start: prevMonth, end: end}; // return {start: start, end: end};
} // },
//
ytd() { // changeDateRange(e) {
let end = new Date; // console.log('MainApp: changeDateRange');
let start = startOfYear(this.range.start); // let target = e.currentTarget;
return {start: start, end: end}; // //alert('OK 3');
} // let start = new Date(target.getAttribute('data-start'));
// let end = new Date(target.getAttribute('data-end'));
mtd() { // console.log('MainApp: Change date range', start, end);
// e.preventDefault();
let end = new Date; // // TODO send start + end to the store and trigger this again?
let start = startOfMonth(this.range.start); // window.app.setStart(start);
return {start: start, end: end}; // window.app.setEnd(end);
} // window.app.buildDateRange();
// console.log('MainApp: end changeDateRange');
lastDays(days) { // return false;
let end = new Date; // },
let start = subDays(end, days); //
return {start: start, end: end}; // setStart(date) {
} // console.log('MainApp: setStart');
// this.range.start = date;
changeDateRange(e) { // window.BasicStore.store('start', date);
console.log('MainApp: changeDateRange'); // },
let target = e.currentTarget; //
//alert('OK 3'); // setEnd(date) {
let start = new Date(target.getAttribute('data-start')); // console.log('MainApp: setEnd');
let end = new Date(target.getAttribute('data-end')); // this.range.end = date;
console.log('MainApp: Change date range', start, end); // window.BasicStore.store('end', date);
e.preventDefault(); // },
// TODO send start + end to the store and trigger this again? // });
window.app.setStart(start); //
window.app.setEnd(end); // // let app = new MainApp();
window.app.buildDateRange(); // //
console.log('MainApp: end changeDateRange'); // // // Listen for the basic store, we need it to continue with the
return false; // // document.addEventListener("BasicStoreReady", (e) => {
} // // console.log('MainApp: app.js from event handler');
// // app.init();
setStart(date) { // // app.buildDateRange();
console.log('MainApp: setStart'); // // const event = new Event("AppReady");
this.range.start = date; // // document.dispatchEvent(event);
window.BasicStore.store('start', date); // // }, false,);
} // //
// // if (window.BasicStore.isReady()) {
setEnd(date) { // // console.log('MainApp: app.js from store ready');
console.log('MainApp: setEnd'); // // app.init();
this.range.end = date; // // app.buildDateRange();
window.BasicStore.store('end', date); // // const event = new Event("AppReady");
} // // document.dispatchEvent(event);
} // // }
// //
let app = new MainApp(); // // window.app = app;
// //
// Listen for the basic store, we need it to continue with the // // export default app;
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;

15
resources/assets/v4/bootstrap.js vendored
View File

@ -4,9 +4,17 @@
* CSRF token as a header based on the value of the "XSRF" token cookie. * CSRF token as a header based on the value of the "XSRF" token cookie.
*/ */
// import things
import axios from 'axios'; import axios from 'axios';
import store from 'store2'; import store from "store";
import observePlugin from 'store/plugins/observe';
import Alpine from "alpinejs"; import Alpine from "alpinejs";
// 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 {getVariable} from "./store/get-variable.js";
import {getViewRange} from "./support/get-viewrange.js"; import {getViewRange} from "./support/get-viewrange.js";
@ -15,9 +23,10 @@ window.bootstrapped = false;
Promise.all([ Promise.all([
getVariable('viewRange'), getVariable('viewRange'),
getVariable('darkMode'), getVariable('darkMode'),
getVariable('locale') getVariable('locale'),
getVariable('language'),
]).then((values) => { ]).then((values) => {
if (!store.has('start') || !store.has('end')) { if (!store.get('start') || !store.get('end')) {
// calculate new start and end, and store them. // calculate new start and end, and store them.
const range = getViewRange(values[0], new Date); const range = getViewRange(values[0], new Date);
store.set('start', range.start); store.set('start', range.start);

3
resources/assets/v4/dashboard.js
View File

@ -19,9 +19,10 @@
*/ */
import './bootstrap.js'; import './bootstrap.js';
import dates from './pages/shared/dates.js';
import boxes from './pages/dashboard/boxes.js'; import boxes from './pages/dashboard/boxes.js';
const comps = {boxes}; const comps = {dates, boxes};
function loadPage(comps) { function loadPage(comps) {
Object.keys(comps).forEach(comp => { Object.keys(comps).forEach(comp => {

97
resources/assets/v4/pages/dashboard/boxes.js
View File

@ -18,20 +18,64 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import Summary from "../../api/summary/index.js"; import Summary from "../../api/summary/index.js";
import {format} from "date-fns"; import {format} from "date-fns";
import {getVariable} from "../../store/get-variable.js"; import {getVariable} from "../../store/get-variable.js";
import store from 'store2';
export default () => ({ export default () => ({
balanceBox: {amounts: [], subtitles: []}, balanceBox: {amounts: [], subtitles: []},
billBox: {paid: [], unpaid: []}, billBox: {paid: [], unpaid: []},
leftBox: {left: [], perDay: []}, leftBox: {left: [], perDay: []},
netBox: {net: []}, netBox: {net: []},
constructor() { loadBoxes() {
console.log('DashboardClass constructor'); console.log('loadboxes');
//
// 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) => {
// reset boxes:
this.balanceBox = {amounts: [], subtitles: []};
this.billBox = {paid: [], unpaid: []};
this.leftBox = {left: [], perDay: []};
this.netBox = {net: []};
// process new content:
for (const i in response.data) {
if (response.data.hasOwnProperty(i)) {
const current = response.data[i];
if (i.startsWith('balance-in-')) {
this.balanceBox.amounts.push(current.value_parsed);
this.balanceBox.subtitles.push(current.sub_title);
continue;
}
if (i.startsWith('bills-unpaid-in-')) {
this.billBox.unpaid.push(current.value_parsed);
continue;
}
if (i.startsWith('bills-paid-in-')) {
this.billBox.paid.push(current.value_parsed);
continue;
}
if (i.startsWith('spent-in-')) {
this.leftBox.left.push(current.value_parsed);
continue;
}
if (i.startsWith('left-to-spend-in-')) { // per day
this.leftBox.perDay.push(current.sub_title);
continue;
}
if (i.startsWith('net-worth-in-')) {
this.netBox.net.push(current.value_parsed);
}
//console.log('Next up: ', current);
}
}
});
}, },
@ -41,42 +85,13 @@ export default () => ({
Promise.all([ Promise.all([
getVariable('viewRange'), getVariable('viewRange'),
]).then((values) => { ]).then((values) => {
let getter = new Summary(); this.loadBoxes();
let start = new Date(store.get('start')); });
let end = new Date(store.get('end')); window.store.observe('start', (newValue, oldValue) => {
// this.loadBoxes();
getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => { });
for (const i in response.data) { window.store.observe('end', (newValue, oldValue) => {
if (response.data.hasOwnProperty(i)) { this.loadBoxes();
const current = response.data[i];
if (i.startsWith('balance-in-')) {
this.balanceBox.amounts.push(current.value_parsed);
this.balanceBox.subtitles.push(current.sub_title);
continue;
}
if (i.startsWith('bills-unpaid-in-')) {
this.billBox.unpaid.push(current.value_parsed);
continue;
}
if (i.startsWith('bills-paid-in-')) {
this.billBox.paid.push(current.value_parsed);
continue;
}
if (i.startsWith('spent-in-')) {
this.leftBox.left.push(current.value_parsed);
}
if (i.startsWith('net-worth-in-')) {
this.netBox.net.push(current.value_parsed);
}
console.log('Next up: ', current);
}
}
});
}); });
}, },
}); });

177
resources/assets/v4/pages/shared/dates.js Normal file
View 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;
},
});

6
resources/assets/v4/store/Basic.js
View File

@ -1,7 +1,7 @@
// basic store for preferred date range and some other vars. // basic store for preferred date range and some other vars.
// used in layout. // used in layout.
import Get from '../api/preferences/index.js'; import Get from '../api/preferences/index.js';
import store from 'store2'; import store from 'store';
/** /**
@ -54,8 +54,8 @@ const Basic = () => {
this.triggerReady(); this.triggerReady();
return; return;
} }
// load from store2 // load from store
if (store.has(name)) { if (store.get(name)) {
this[name] = store.get(name); this[name] = store.get(name);
this.triggerReady(); this.triggerReady();
return; return;

12
resources/assets/v4/store/get-variable.js
View File

@ -18,7 +18,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import store from "store2";
import Get from "../api/preferences/index.js"; import Get from "../api/preferences/index.js";
export function getVariable(name) { export function getVariable(name) {
@ -27,16 +26,17 @@ export function getVariable(name) {
// to make things available quicker than if the store has to grab it through the API. // to make things available quicker than if the store has to grab it through the API.
// then again, it's not that slow. // then again, it's not that slow.
if (window.hasOwnProperty(name)) { if (window.hasOwnProperty(name)) {
console.log('Store from window'); console.log('Get from window');
return Promise.resolve(window[name]); return Promise.resolve(window[name]);
} }
// load from store2, if it's present. // load from store2, if it's present.
if (store.has(name)) { if (window.store.get(name)) {
console.log('Store from store2'); console.log('Get from store');
return Promise.resolve(store.get(name)); return Promise.resolve(window.store.get(name));
} }
let getter = (new Get); let getter = (new Get);
return getter.getByName(name).then((response) => { return getter.getByName(name).then((response) => {
console.log('Get from API');
return Promise.resolve(parseResponse(name, response)); return Promise.resolve(parseResponse(name, response));
}); });
@ -44,7 +44,7 @@ export function getVariable(name) {
function parseResponse(name, response) { function parseResponse(name, response) {
let value = response.data.data.attributes.data; let value = response.data.data.attributes.data;
store.set(name, value); window.store.set(name, value);
console.log('Store from API'); console.log('Store from API');
return value; return value;
} }

23
resources/views/index.blade.php
View File

@ -8,8 +8,29 @@
<!--begin::Container--> <!--begin::Container-->
<div class="container-fluid"> <div class="container-fluid">
@include('partials.dashboard.boxes') @include('partials.dashboard.boxes')
<!-- row with account data -->
<div class="row">
<div class="col-xl-8 col-lg-12 col-sm-12 col-xs-12">
Graph
</div>
<div class="col-xl-4 col-lg-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-12">
Account1
</div>
<div class="col-12">
Account2
</div>
<div class="col-12">
Account3
</div>
<div class="col-12">
Account4
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>

18
resources/views/layout/v4/default.blade.php
View File

@ -30,37 +30,37 @@
<!--end::Start Navbar Links--> <!--end::Start Navbar Links-->
<!--begin::End Navbar Links--> <!--begin::End Navbar Links-->
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto" x-data="dates">
<!-- begin date range drop down --> <!-- begin date range drop down -->
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a> <a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" x-data=""> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<a href="#" class="dropdown-item daterange-current" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-current" @click="changeDateRange">
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" @click="app.changeDateRange" class="dropdown-item daterange-next"> <a href="#" @click="changeDateRange" class="dropdown-item daterange-next">
next next
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-prev" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-prev" @click="changeDateRange">
prev prev
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-7d" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-7d" @click="changeDateRange">
{{ __('firefly.last_seven_days') }} {{ __('firefly.last_seven_days') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-90d" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-90d" @click="changeDateRange">
{{ __('firefly.last_thirty_days') }} {{ __('firefly.last_thirty_days') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-mtd" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-mtd" @click="changeDateRange">
{{ __('firefly.month_to_date') }} {{ __('firefly.month_to_date') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-ytd" @click="app.changeDateRange"> <a href="#" class="dropdown-item daterange-ytd" @click="changeDateRange">
{{ __('firefly.year_to_date') }} {{ __('firefly.year_to_date') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>

16
resources/views/partials/dashboard/boxes.blade.php
View File

@ -1,6 +1,6 @@
<div class="row" x-data="boxes"> <div class="row" x-data="boxes">
<!--begin::Col--> <!--begin::Col-->
<div class="col-lg-3 col-6"> <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<!--begin::Small Box Widget 1--> <!--begin::Small Box Widget 1-->
<div class="small-box text-bg-primary"> <div class="small-box text-bg-primary">
<div class="inner"> <div class="inner">
@ -33,7 +33,7 @@
<!--end::Small Box Widget 1--> <!--end::Small Box Widget 1-->
</div> </div>
<!--end::Col--> <!--end::Col-->
<div class="col-lg-3 col-6"> <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<!--begin::Small Box Widget 2--> <!--begin::Small Box Widget 2-->
<div class="small-box text-bg-success"> <div class="small-box text-bg-success">
<div class="inner"> <div class="inner">
@ -64,7 +64,7 @@
<!--end::Small Box Widget 2--> <!--end::Small Box Widget 2-->
</div> </div>
<!--end::Col--> <!--end::Col-->
<div class="col-lg-3 col-6"> <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<!--begin::Small Box Widget 3--> <!--begin::Small Box Widget 3-->
<div class="small-box text-bg-warning"> <div class="small-box text-bg-warning">
<div class="inner"> <div class="inner">
@ -83,13 +83,19 @@
<em class="fa-solid fa-money-check-dollar"></em> <em class="fa-solid fa-money-check-dollar"></em>
</span> </span>
<span class="small-box-footer"> <span class="small-box-footer">
{{ __('firefly.per_day') }}: TODO amount {{ __('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> </span>
</div> </div>
<!--end::Small Box Widget 3--> <!--end::Small Box Widget 3-->
</div> </div>
<!--end::Col--> <!--end::Col-->
<div class="col-lg-3 col-6"> <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12">
<!--begin::Small Box Widget 4--> <!--begin::Small Box Widget 4-->
<div class="small-box text-bg-danger"> <div class="small-box text-bg-danger">
<div class="inner"> <div class="inner">