A little further ahead with the app in Alpine

resources/assets/v4/api/preferences/index.js

@@ -18,14 +18,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {api} from "boot/axios";
+import {api} from "../../boot/axios";
 
 export default class Preferences {
-  getByName(name) {
-    return api.get('/api/v1/preferences/' + name);
-  }
+    async getByName(name) {
+        return await api.get('/api/v1/preferences/' + name);
+    }
 
-  postByName(name, value) {
-    return api.post('/api/v1/preferences', {name: name, data: value});
-  }
+    postByName(name, value) {
+        return api.post('/api/v1/preferences', {name: name, data: value});
+    }
 }

resources/assets/v4/app.js

@@ -1,15 +1,252 @@
 import './bootstrap';
-//import {onDOMContentLoaded} from "./util/index.js";
+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');
+        // TODO load range from local storage (Apline)
+    }
 
+    init() {
+        // get values from store and use them accordingly.
+        this.viewRange = window.BasicStore.viewRange;
+        this.locale = window.BasicStore.locale;
+        this.language = window.BasicStore.language;
+        this.locale = 'equal' === this.locale ? this.language : this.locale;
+        window.__localeId__ = this.language;
 
-//alert('hallo');
+        // the range is always null but later on we will store it in BasicStore.
+        if (null === this.range.start && null === this.range.end
+            && null === this.defaultRange.start && null === this.defaultRange.end
+        ) {
+            this.setDatesFromViewRange();
+        }
+    }
 
+    setDatesFromViewRange() {
+        let start;
+        let end;
+        let viewRange = this.viewRange;
 
-// onDOMContentLoaded(() => {
-//    //alert('OK dan!');
-// })
+        let today = new Date;
+        switch (viewRange) {
+            case 'last365':
+                start = startOfDay(subDays(today, 365));
+                end = endOfDay(today);
+                break;
+            case 'last90':
+                start = startOfDay(subDays(today, 90));
+                end = endOfDay(today);
+                break;
+            case 'last30':
+                start = startOfDay(subDays(today, 30));
+                end = endOfDay(today);
+                break;
+            case  'last7':
+                start = startOfDay(subDays(today, 7));
+                end = endOfDay(today);
+                break;
+            case  'YTD':
+                start = startOfYear(today);
+                end = endOfDay(today);
+                break;
+            case  'QTD':
+                start = startOfQuarter(today);
+                end = endOfDay(today);
+                break;
+            case  'MTD':
+                start = startOfMonth(today);
+                end = endOfDay(today);
+                break;
+            case '1D':
+                // today:
+                start = startOfDay(today);
+                end = endOfDay(today);
+                break;
+            case '1W':
+                // this week:
+                start = startOfDay(startOfWeek(today, {weekStartsOn: 1}));
+                end = endOfDay(endOfWeek(today, {weekStartsOn: 1}));
+                break;
+            case '1M':
+                // this month:
+                start = startOfDay(startOfMonth(today));
+                end = endOfDay(endOfMonth(today));
+                break;
+            case '3M':
+                // this quarter
+                start = startOfDay(startOfQuarter(today));
+                end = endOfDay(endOfQuarter(today));
+                break;
+            case '6M':
+                // this half-year
+                if (today.getMonth() <= 5) {
+                    start = new Date(today);
+                    start.setMonth(0);
+                    start.setDate(1);
+                    start = startOfDay(start);
+                    end = new Date(today);
+                    end.setMonth(5);
+                    end.setDate(30);
+                    end = endOfDay(start);
+                }
+                if (today.getMonth() > 5) {
+                    start = new Date(today);
+                    start.setMonth(6);
+                    start.setDate(1);
+                    start = startOfDay(start);
+                    end = new Date(today);
+                    end.setMonth(11);
+                    end.setDate(31);
+                    end = endOfDay(start);
+                }
+                break;
+            case '1Y':
+                // this year
+                start = new Date(today);
+                start.setMonth(0);
+                start.setDate(1);
+                start = startOfDay(start);
 
+                end = new Date(today);
+                end.setMonth(11);
+                end.setDate(31);
+                end = endOfDay(end);
+                break;
+        }
+        this.range = {start: start, end: end};
+        this.defaultRange = {start: start, end: end};
+    }
 
-//alert('OK dan 2!');
+    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.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'));
+
+        // 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.
+    }
+
+    getNextRange() {
+        let nextMonth = addMonths(this.range.start, 1);
+        let end = endOfMonth(nextMonth);
+        return {start: nextMonth, end: end};
+    }
+
+    getPrevRange() {
+        let prevMonth = subMonths(this.range.start, 1);
+        let end = endOfMonth(prevMonth);
+        return {start: prevMonth, end: end};
+    }
+
+    ytd() {
+        let end = this.range.start;
+        let start = startOfYear(this.range.start);
+        return {start: start, end: end};
+    }
+
+    mtd() {
+        let end = this.range.start;
+        let start = startOfMonth(this.range.start);
+        return {start: start, end: end};
+    }
+
+    lastDays(days) {
+        let end = this.range.start;
+        let start = subDays(end, days);
+        return {start: start, end: end};
+    }
+}
+
+let app = new MainApp();
+
+// Listen for the basic store, we need it to continue with the
+document.addEventListener(
+    "BasicStoreReady",
+    (e) => {
+        // e.target matches elem
+        app.init();
+        app.buildDateRange();
+    },
+    false,
+);
+
+function handleClick(e) {
+    console.log('here we are');
+    e.preventDefault();
+    alert('OK');
+    return false;
+}
+
+export {app, handleClick};

resources/assets/v4/boot/axios.js

@@ -0,0 +1,40 @@
+/*
+ * axios.js
+ * Copyright (c) 2022 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import axios from 'axios'
+
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+
+
+// for use inside Vue files (Options API) through this.$axios and this.$api
+
+
+const url = '/';
+const api = axios.create({baseURL: url, withCredentials: true});
+
+axios.defaults.withCredentials = true;
+axios.defaults.baseURL = url;
+
+export {api}

resources/assets/v4/bootstrap.js

@@ -11,6 +11,12 @@ import BasicStore from './store/Basic';
 window.axios = axios;
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
+// include popper js
+import '@popperjs/core';
+
+// include bootstrap
+import * as bootstrap from 'bootstrap'
+
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting
@@ -34,12 +40,9 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 // });
 
 
-
 window.Alpine = Alpine
-
 Alpine.start()
 
 
 window.BasicStore = new BasicStore;
-
 window.BasicStore.init();

resources/assets/v4/index.js

@@ -0,0 +1,15 @@
+//import './bootstrap';
+
+
+//import {onDOMContentLoaded} from "./util/index.js";
+
+
+// alert('hallo');
+
+
+// onDOMContentLoaded(() => {
+//    //alert('OK dan!');
+// })
+
+
+//alert('OK dan 2!');

resources/assets/v4/store/Basic.js

@@ -1,41 +1,53 @@
-
-
 // basic store for preferred date range and some other vars.
 // used in layout.
+import Get from '../api/preferences/index.js';
+
 class Basic {
     viewRange = '1M';
     darkMode = 'browser';
     listPageSize = 10;
     locale = 'en-US';
-    range = {
-        start: null, end: null
-    };
+    language = 'en-US';
     currencyCode = 'AAA';
     currencyId = '0';
+    ready = false;
+    count = 0;
+    readyCount = 4;
+
     constructor() {
     }
 
     init() {
-        console.log('init');
-        // load variables from window if present
         this.loadVariable('viewRange')
+        this.loadVariable('darkMode')
+        this.loadVariable('language')
+        this.loadVariable('locale')
     }
 
     loadVariable(name) {
-        console.log('loadVariable(' +  name + ')');
-        if(window.hasOwnProperty(name)) {
-            console.log('from windows');
+        if (window.hasOwnProperty(name)) {
             this[name] = window[name];
             return;
         }
         // load from local storage
-        if(window.Alpine.store(name)) {
-            console.log('from alpine');
+        if (window.Alpine.store(name)) {
             this[name] = window.Alpine.store(name);
             return;
         }
-        // grab using axios
-        console.log('axios');
+        // grab
+        let getter = (new Get);
+        getter.getByName(name).then((response) => this.parseResponse(name, response));
+    }
+
+    parseResponse(name, response) {
+        this.count++;
+        let value = response.data.data.attributes.data;
+        this[name] = value;
+        if (this.count === this.readyCount) {
+            // trigger event:
+            const event = new Event("BasicStoreReady");
+            document.dispatchEvent(event);
+        }
     }
 }
 

resources/assets/v4/util/format.js

@@ -0,0 +1,99 @@
+/*
+ * format.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/>.
+ */
+
+import {format} from 'date-fns'
+import {
+    bg,
+    cs,
+    da,
+    de,
+    el,
+    enGB,
+    enUS,
+    es,
+    ca,
+    fi,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    ko,
+    nb,
+    nn,
+    nl,
+    pl,
+    ptBR,
+    pt,
+    ro,
+    ru,
+    sk,
+    sl,
+    sv,
+    tr,
+    uk,
+    vi,
+    zhTW,
+    zhCN
+} from 'date-fns/locale'
+
+const locales = {
+    bg,
+    cs,
+    da,
+    de,
+    el,
+    enGB,
+    enUS,
+    es,
+    ca,
+    fi,
+    fr,
+    hu,
+    id,
+    it,
+    ja,
+    ko,
+    nb,
+    nn,
+    nl,
+    pl,
+    ptBR,
+    pt,
+    ro,
+    ru,
+    sk,
+    sl,
+    sv,
+    tr,
+    uk,
+    vi,
+    zhTW,
+    zhCN
+}
+
+// by providing a default string of 'PP' or any of its variants for `formatStr`
+// it will format dates in whichever way is appropriate to the locale
+export default function (date, formatStr = 'PP') {
+    let locale = window.__localeId__.replace('_', '');
+    return format(date, formatStr, {
+        locale: locales[locale] ?? locales[locale.slice(0, 2)] ?? locales['enUS'] // or global.__localeId__
+    })
+}