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

Various UI fixes

Browse Source
This commit is contained in:
James Cole 2023-08-15 13:51:38 +02:00
parent b0ab06b7eb
commit df66dcf102
No known key found for this signature in database
GPG Key ID: B49A324B7EAD6D80
8 changed files with 33 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

187
resources/assets/v2/app.js
View File

@ -1,187 +0,0 @@
// 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;

26
resources/assets/v2/bootstrap.js → resources/assets/v2/boot/bootstrap.js vendored
View File

@ -1,3 +1,23 @@
/*
* bootstrap.js
* Copyright (c) 2023 james@firefly-iii.org
*
* This file is part of Firefly III (https://github.com/firefly-iii).
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
@ -9,15 +29,13 @@ import axios from 'axios';
import store from "store";
import observePlugin from 'store/plugins/observe';
import Alpine from "alpinejs";
import * as bootstrap from 'bootstrap'
// add plugin to store and put in window
store.addPlugin(observePlugin);
window.store = store;
// import even more
import {getVariable} from "./store/get-variable.js";
import {getViewRange} from "./support/get-viewrange.js";
import {getVariable} from "../store/get-variable.js";
import {getViewRange} from "../support/get-viewrange.js";
// wait for 3 promises, because we need those later on.
window.bootstrapped = false;

1
resources/assets/v2/index.js
View File

@ -1 +0,0 @@
// NOT IN USE

18
resources/assets/v2/dashboard.js → resources/assets/v2/pages/dashboard/dashboard.js
View File

@ -18,15 +18,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import './bootstrap.js';
import dates from './pages/shared/dates.js';
import boxes from './pages/dashboard/boxes.js';
import accounts from './pages/dashboard/accounts.js';
import budgets from './pages/dashboard/budgets.js';
import categories from './pages/dashboard/categories.js';
import sankey from './pages/dashboard/sankey.js';
import subscriptions from './pages/dashboard/subscriptions.js';
import piggies from './pages/dashboard/piggies.js';
import '../../boot/bootstrap.js';
import dates from '../../pages/shared/dates.js';
import boxes from './boxes.js';
import accounts from './accounts.js';
import budgets from './budgets.js';
import categories from './categories.js';
import sankey from './sankey.js';
import subscriptions from './subscriptions.js';
import piggies from './piggies.js';
import {

100
resources/assets/v2/store/Basic.js
View File

@ -1,100 +0,0 @@
// basic store for preferred date range and some other vars.
// used in layout.
import Get from '../api/preferences/index.js';
import store from 'store';
/**
* A basic store for Firefly III persistent UI data and preferences.
*/
const Basic = () => {
// currently availabel variables:
const viewRange = '1M';
const darkMode = 'browser';
const language = 'en-US';
const locale = 'en-US';
// start and end are used by most pages to allow the user to browse back and forth.
const start = null;
const end = null;
// others, to be used in the future.
const listPageSize = 10;
const currencyCode = 'AAA';
const currencyId = '0';
const ready = false;
//
// a very basic way to signal the store now contains all variables.
const count = 0;
const readyCount = 4;
/**
*
*/
const init = () => {
this.loadVariable('viewRange')
this.loadVariable('darkMode')
this.loadVariable('language')
this.loadVariable('locale')
}
/**
* Load a variable, fresh or from storage.
* @param name
*/
const loadVariable = (name) => {
// currently unused, window.X can be used by the blade template
// to make things available quicker than if the store has to grab it through the API.
// then again, it's not that slow.
if (window.hasOwnProperty(name)) {
this[name] = window[name];
this.triggerReady();
return;
}
// load from store
if (store.get(name)) {
this[name] = store.get(name);
this.triggerReady();
return;
}
// grab
let getter = (new Get);
getter.getByName(name).then((response) => this.parseResponse(name, response));
}
//
const parseResponse = (name, response) => {
let value = response.data.data.attributes.data;
this[name] = value;
// TODO store.
store.set(name, value);
this.triggerReady();
}
//
// set(name, value) {
// this[name] = value;
// store.set(name, value);
// }
//
// get(name) {
// return store.get(name, this[name]);
// }
//
const isReady = () => {
return this.count === this.readyCount;
}
const triggerReady = () => {
this.count++;
if (this.count === this.readyCount) {
// trigger event:
const event = new Event("BasicStoreReady");
document.dispatchEvent(event);
}
}
return {
init
};
}
export const basic = Basic();

24
resources/assets/v2/util/index.js
View File

@ -1,24 +0,0 @@
const domContentLoadedCallbacks = [];
// from admin LTE
const onDOMContentLoaded = (callback) => {
if (document.readyState === 'loading') {
// add listener on the first call when the document is in loading state
if (!domContentLoadedCallbacks.length) {
document.addEventListener('DOMContentLoaded', () => {
for (const callback of domContentLoadedCallbacks) {
callback()
}
})
}
domContentLoadedCallbacks.push(callback)
} else {
callback()
}
}
export {
onDOMContentLoaded,
}

2
resources/views/v2/index.blade.php
View File

@ -1,6 +1,6 @@
@extends('layout.v2')
@section('vite')
@vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/dashboard.js'])
@vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/pages/dashboard/dashboard.js'])
@endsection
@section('content')

2
resources/views/v2/partials/layout/sidebar.blade.php
View File

@ -22,7 +22,7 @@
<ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu"
data-accordion="false">
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<a href="{{ route('index') }}" class="nav-link active">
<em class="nav-icon fa-solid fa-gauge-high"></em>
<p>
{{ __('firefly.dashboard') }}