mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-02-25 18:45:27 -06:00
Continued work on v4
This commit is contained in:
James Cole
parent
190508fa54
commit
be531d777e
@ -322,16 +322,11 @@ class BasicController extends Controller
|
||||
'currency_decimal_places' => $row['currency_decimal_places'],
|
||||
'value_parsed' => app('amount')->formatFlat($row['currency_symbol'], $row['currency_decimal_places'], $leftToSpend, false),
|
||||
'local_icon' => 'money',
|
||||
'sub_title' => (string)trans(
|
||||
'firefly.box_spend_per_day',
|
||||
[
|
||||
'amount' => app('amount')->formatFlat(
|
||||
$row['currency_symbol'],
|
||||
$row['currency_decimal_places'],
|
||||
$perDay,
|
||||
false
|
||||
),
|
||||
]
|
||||
'sub_title' => app('amount')->formatFlat(
|
||||
$row['currency_symbol'],
|
||||
$row['currency_decimal_places'],
|
||||
$perDay,
|
||||
false
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
21
package-lock.json
generated
21
package-lock.json
generated
@ -10,7 +10,7 @@
|
||||
"alpinejs": "^3.12.3",
|
||||
"bootstrap": "^5.3.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"store2": "^2.14.2"
|
||||
"store": "^2.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^1.1.2",
|
||||
@ -885,10 +885,13 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/store2": {
|
||||
"version": "2.14.2",
|
||||
"resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
|
||||
"integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
|
||||
"node_modules/store": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
|
||||
"integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
@ -1466,10 +1469,10 @@
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true
|
||||
},
|
||||
"store2": {
|
||||
"version": "2.14.2",
|
||||
"resolved": "https://registry.npmjs.org/store2/-/store2-2.14.2.tgz",
|
||||
"integrity": "sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w=="
|
||||
"store": {
|
||||
"version": "2.0.12",
|
||||
"resolved": "https://registry.npmjs.org/store/-/store-2.0.12.tgz",
|
||||
"integrity": "sha512-eO9xlzDpXLiMr9W1nQ3Nfp9EzZieIQc10zPPMP5jsVV7bLOziSFFBP0XoDXACEIFtdI+rIz0NwWVA/QVJ8zJtw=="
|
||||
},
|
||||
"to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
|
||||
@ -17,6 +17,6 @@
|
||||
"alpinejs": "^3.12.3",
|
||||
"bootstrap": "^5.3.0",
|
||||
"date-fns": "^2.30.0",
|
||||
"store2": "^2.14.2"
|
||||
"store": "^2.0.12"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,206 +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'
|
||||
|
||||
class MainApp {
|
||||
range = {
|
||||
start: null, end: null
|
||||
};
|
||||
defaultRange = {
|
||||
start: null, end: null
|
||||
};
|
||||
viewRange = '1M';
|
||||
locale = 'en-US';
|
||||
language = 'en-US';
|
||||
|
||||
constructor() {
|
||||
console.log('MainApp constructor');
|
||||
let start = window.BasicStore.get('start');
|
||||
let end = window.BasicStore.get('end');
|
||||
if (null !== start && null !== end) {
|
||||
console.log('start + end is not null, recycle it.');
|
||||
this.range = {
|
||||
start: new Date(start),
|
||||
end: new Date(end),
|
||||
};
|
||||
return;
|
||||
}
|
||||
console.log('start + 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;
|
||||
// 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;
|
||||
|
||||
15
resources/assets/v4/bootstrap.js
vendored
15
resources/assets/v4/bootstrap.js
vendored
@ -4,9 +4,17 @@
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
// import things
|
||||
import axios from 'axios';
|
||||
import store from 'store2';
|
||||
import store from "store";
|
||||
import observePlugin from 'store/plugins/observe';
|
||||
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 {getViewRange} from "./support/get-viewrange.js";
|
||||
|
||||
@ -15,9 +23,10 @@ window.bootstrapped = false;
|
||||
Promise.all([
|
||||
getVariable('viewRange'),
|
||||
getVariable('darkMode'),
|
||||
getVariable('locale')
|
||||
getVariable('locale'),
|
||||
getVariable('language'),
|
||||
]).then((values) => {
|
||||
if (!store.has('start') || !store.has('end')) {
|
||||
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);
|
||||
|
||||
@ -19,9 +19,10 @@
|
||||
*/
|
||||
|
||||
import './bootstrap.js';
|
||||
import dates from './pages/shared/dates.js';
|
||||
import boxes from './pages/dashboard/boxes.js';
|
||||
|
||||
const comps = {boxes};
|
||||
const comps = {dates, boxes};
|
||||
|
||||
function loadPage(comps) {
|
||||
Object.keys(comps).forEach(comp => {
|
||||
|
||||
@ -18,20 +18,64 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import Summary from "../../api/summary/index.js";
|
||||
import {format} from "date-fns";
|
||||
import {getVariable} from "../../store/get-variable.js";
|
||||
import store from 'store2';
|
||||
|
||||
|
||||
export default () => ({
|
||||
balanceBox: {amounts: [], subtitles: []},
|
||||
billBox: {paid: [], unpaid: []},
|
||||
leftBox: {left: [], perDay: []},
|
||||
netBox: {net: []},
|
||||
constructor() {
|
||||
console.log('DashboardClass constructor');
|
||||
//
|
||||
loadBoxes() {
|
||||
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([
|
||||
getVariable('viewRange'),
|
||||
]).then((values) => {
|
||||
let getter = new Summary();
|
||||
let start = new Date(store.get('start'));
|
||||
let end = new Date(store.get('end'));
|
||||
|
||||
getter.get(format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd'), null).then((response) => {
|
||||
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);
|
||||
}
|
||||
if (i.startsWith('net-worth-in-')) {
|
||||
this.netBox.net.push(current.value_parsed);
|
||||
}
|
||||
|
||||
|
||||
console.log('Next up: ', current);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this.loadBoxes();
|
||||
});
|
||||
window.store.observe('start', (newValue, oldValue) => {
|
||||
// this.loadBoxes();
|
||||
});
|
||||
window.store.observe('end', (newValue, oldValue) => {
|
||||
this.loadBoxes();
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
});
|
||||
|
||||
177
resources/assets/v4/pages/shared/dates.js
Normal file
177
resources/assets/v4/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;
|
||||
},
|
||||
|
||||
});
|
||||
@ -1,7 +1,7 @@
|
||||
// basic store for preferred date range and some other vars.
|
||||
// used in layout.
|
||||
import Get from '../api/preferences/index.js';
|
||||
import store from 'store2';
|
||||
import store from 'store';
|
||||
|
||||
|
||||
/**
|
||||
@ -54,8 +54,8 @@ const Basic = () => {
|
||||
this.triggerReady();
|
||||
return;
|
||||
}
|
||||
// load from store2
|
||||
if (store.has(name)) {
|
||||
// load from store
|
||||
if (store.get(name)) {
|
||||
this[name] = store.get(name);
|
||||
this.triggerReady();
|
||||
return;
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import store from "store2";
|
||||
import Get from "../api/preferences/index.js";
|
||||
|
||||
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.
|
||||
// then again, it's not that slow.
|
||||
if (window.hasOwnProperty(name)) {
|
||||
console.log('Store from window');
|
||||
console.log('Get from window');
|
||||
return Promise.resolve(window[name]);
|
||||
}
|
||||
// load from store2, if it's present.
|
||||
if (store.has(name)) {
|
||||
console.log('Store from store2');
|
||||
return Promise.resolve(store.get(name));
|
||||
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));
|
||||
|
||||
});
|
||||
@ -44,7 +44,7 @@ export function getVariable(name) {
|
||||
|
||||
function parseResponse(name, response) {
|
||||
let value = response.data.data.attributes.data;
|
||||
store.set(name, value);
|
||||
window.store.set(name, value);
|
||||
console.log('Store from API');
|
||||
return value;
|
||||
}
|
||||
|
||||
@ -8,8 +8,29 @@
|
||||
<!--begin::Container-->
|
||||
<div class="container-fluid">
|
||||
@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>
|
||||
|
||||
@ -30,37 +30,37 @@
|
||||
<!--end::Start 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 -->
|
||||
<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" x-data="">
|
||||
<a href="#" class="dropdown-item daterange-current" @click="app.changeDateRange">
|
||||
<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="app.changeDateRange" class="dropdown-item daterange-next">
|
||||
<a href="#" @click="changeDateRange" class="dropdown-item daterange-next">
|
||||
next
|
||||
</a>
|
||||
<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
|
||||
</a>
|
||||
<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') }}
|
||||
</a>
|
||||
<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') }}
|
||||
</a>
|
||||
<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') }}
|
||||
</a>
|
||||
<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') }}
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="row" x-data="boxes">
|
||||
<!--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-->
|
||||
<div class="small-box text-bg-primary">
|
||||
<div class="inner">
|
||||
@ -33,7 +33,7 @@
|
||||
<!--end::Small Box Widget 1-->
|
||||
</div>
|
||||
<!--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-->
|
||||
<div class="small-box text-bg-success">
|
||||
<div class="inner">
|
||||
@ -64,7 +64,7 @@
|
||||
<!--end::Small Box Widget 2-->
|
||||
</div>
|
||||
<!--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-->
|
||||
<div class="small-box text-bg-warning">
|
||||
<div class="inner">
|
||||
@ -83,13 +83,19 @@
|
||||
<em class="fa-solid fa-money-check-dollar"></em>
|
||||
</span>
|
||||
<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>
|
||||
</div>
|
||||
<!--end::Small Box Widget 3-->
|
||||
</div>
|
||||
<!--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-->
|
||||
<div class="small-box text-bg-danger">
|
||||
<div class="inner">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user