From df66dcf10280f9539218b9b89f713dd1e60eb1f0 Mon Sep 17 00:00:00 2001 From: James Cole Date: Tue, 15 Aug 2023 13:51:38 +0200 Subject: [PATCH] Various UI fixes --- resources/assets/v2/app.js | 187 ------------------ resources/assets/v2/{ => boot}/bootstrap.js | 26 ++- resources/assets/v2/index.js | 1 - .../v2/{ => pages/dashboard}/dashboard.js | 18 +- resources/assets/v2/store/Basic.js | 100 ---------- resources/assets/v2/util/index.js | 24 --- resources/views/v2/index.blade.php | 2 +- .../v2/partials/layout/sidebar.blade.php | 2 +- 8 files changed, 33 insertions(+), 327 deletions(-) delete mode 100644 resources/assets/v2/app.js rename resources/assets/v2/{ => boot}/bootstrap.js (59%) delete mode 100644 resources/assets/v2/index.js rename resources/assets/v2/{ => pages/dashboard}/dashboard.js (82%) delete mode 100644 resources/assets/v2/store/Basic.js delete mode 100644 resources/assets/v2/util/index.js diff --git a/resources/assets/v2/app.js b/resources/assets/v2/app.js deleted file mode 100644 index c80d9aefeb..0000000000 --- a/resources/assets/v2/app.js +++ /dev/null @@ -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; diff --git a/resources/assets/v2/bootstrap.js b/resources/assets/v2/boot/bootstrap.js similarity index 59% rename from resources/assets/v2/bootstrap.js rename to resources/assets/v2/boot/bootstrap.js index 32ec909c4f..a4b738b34b 100644 --- a/resources/assets/v2/bootstrap.js +++ b/resources/assets/v2/boot/bootstrap.js @@ -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 . + */ + /** * 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; diff --git a/resources/assets/v2/index.js b/resources/assets/v2/index.js deleted file mode 100644 index 60dad1a82b..0000000000 --- a/resources/assets/v2/index.js +++ /dev/null @@ -1 +0,0 @@ -// NOT IN USE diff --git a/resources/assets/v2/dashboard.js b/resources/assets/v2/pages/dashboard/dashboard.js similarity index 82% rename from resources/assets/v2/dashboard.js rename to resources/assets/v2/pages/dashboard/dashboard.js index a5e81b681c..a7433873cb 100644 --- a/resources/assets/v2/dashboard.js +++ b/resources/assets/v2/pages/dashboard/dashboard.js @@ -18,15 +18,15 @@ * along with this program. If not, see . */ -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 { diff --git a/resources/assets/v2/store/Basic.js b/resources/assets/v2/store/Basic.js deleted file mode 100644 index 51f985a64f..0000000000 --- a/resources/assets/v2/store/Basic.js +++ /dev/null @@ -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(); diff --git a/resources/assets/v2/util/index.js b/resources/assets/v2/util/index.js deleted file mode 100644 index da23f0af2c..0000000000 --- a/resources/assets/v2/util/index.js +++ /dev/null @@ -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, -} diff --git a/resources/views/v2/index.blade.php b/resources/views/v2/index.blade.php index 7987f97b66..1b24580a9d 100644 --- a/resources/views/v2/index.blade.php +++ b/resources/views/v2/index.blade.php @@ -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') diff --git a/resources/views/v2/partials/layout/sidebar.blade.php b/resources/views/v2/partials/layout/sidebar.blade.php index b603b2391f..a6aeeb81dc 100644 --- a/resources/views/v2/partials/layout/sidebar.blade.php +++ b/resources/views/v2/partials/layout/sidebar.blade.php @@ -22,7 +22,7 @@