Split form in parts, add "edit" page.

resources/assets/v2/pages/transactions/create.js

@@ -44,6 +44,7 @@ import 'leaflet/dist/leaflet.css';
 // TODO fix two maps, perhaps disconnect from entries entirely.
 // TODO group title
 // TODO map location from preferences
+// TODO field preferences
 
 let i18n;
 
@@ -204,7 +205,7 @@ let transactions = function () {
         showWaitMessage: false,
 
         // four buttons
-        returnHereButton: true,
+        returnHereButton: false,
         resetButton: false,
         resetButtonEnabled: false,
         rulesButton: true,
@@ -850,28 +851,29 @@ let transactions = function () {
                     }
                 });
                 const count = this.entries.length - 1;
-                //let map = L.map('location_map_' + count).setView([this.latitude, this.longitude], this.zoomLevel);
+                let map = L.map('location_map_' + count).setView([this.latitude, this.longitude], this.zoomLevel);
 
-                // L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                //     maxZoom: 19,
-                //     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap '+count+'</a>'
-                // }).addTo(map);
-                // map.on('click', this.addPointToMap);
-                // map.on('zoomend', this.saveZoomOfMap);
+                L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    maxZoom: 19,
+                    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap '+count+'</a>'
+                }).addTo(map);
+                map.on('click', this.addPointToMap);
+                map.on('zoomend', this.saveZoomOfMap);
+                this.entries[count].map
 
-                const id = 'location_map_' + count;
-                const map = () => {
-                    const el = document.getElementById(id),
-                        map = L.map(id).setView([this.latitude, this.longitude], this.zoomLevel)
-                    L.tileLayer(
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                        {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap '+count+'</a>'}
-                    ).addTo(map)
-                    map.on('click', this.addPointToMap);
-                    map.on('zoomend', this.saveZoomOfMap);
-                    return map
-                }
-                this.entries[count].map = map();
+                // const id = 'location_map_' + count;
+                // const map = () => {
+                //     const el = document.getElementById(id),
+                //         map = L.map(id).setView([this.latitude, this.longitude], this.zoomLevel)
+                //     L.tileLayer(
+                //         'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                //         {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap '+count+'</a>'}
+                //     ).addTo(map)
+                //     map.on('click', this.addPointToMap);
+                //     map.on('zoomend', this.saveZoomOfMap);
+                //     return map
+                // }
+                // this.entries[count].map = map();
 
             }, 250);
 

resources/assets/v2/pages/transactions/edit.js

@@ -0,0 +1,75 @@
+/*
+ * edit.js
+ * Copyright (c) 2024 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 '../../boot/bootstrap.js';
+import dates from '../../pages/shared/dates.js';
+import {getVariable} from "../../store/get-variable.js";
+import {I18n} from "i18n-js";
+import {loadTranslations} from "../../support/load-translations.js";
+
+// TODO upload attachments to other file
+// TODO fix two maps, perhaps disconnect from entries entirely.
+// TODO group title
+// TODO map location from preferences
+// TODO field preferences
+
+let i18n;
+
+
+
+
+let transactions = function () {
+    return {
+        entries: [],
+        init() {
+            Promise.all([getVariable('language', 'en_US')]).then((values) => {
+                i18n = new I18n();
+                const locale = values[0].replace('-', '_');
+                i18n.locale = locale;
+                loadTranslations(i18n, locale).then(() => {
+                    //this.addSplit();
+                });
+
+            });
+        },
+    }
+}
+
+let comps = {transactions, dates};
+
+function loadPage() {
+    Object.keys(comps).forEach(comp => {
+        console.log(`Loading page component "${comp}"`);
+        let data = comps[comp]();
+        Alpine.data(comp, () => data);
+    });
+    Alpine.start();
+}
+
+// wait for load until bootstrapped event is received.
+document.addEventListener('firefly-iii-bootstrapped', () => {
+    console.log('Loaded through event listener.');
+    loadPage();
+});
+// or is bootstrapped before event is triggered.
+if (window.bootstrapped) {
+    console.log('Loaded through window variable.');
+    loadPage();
+}