Finalize create transaction form.

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

@@ -32,8 +32,6 @@ import {loadBudgets} from "./shared/load-budgets.js";
 import {loadPiggyBanks} from "./shared/load-piggy-banks.js";
 import {loadSubscriptions} from "./shared/load-subscriptions.js";
 
-import L from "leaflet";
-
 import 'leaflet/dist/leaflet.css';
 import {addAutocomplete} from "./shared/add-autocomplete.js";
 import {
@@ -85,8 +83,7 @@ let transactions = function () {
 
         // form behaviour during transaction
         formBehaviour: {
-            formType: 'create',
-            foreignCurrencyEnabled: true,
+            formType: 'create', foreignCurrencyEnabled: true,
         },
 
         // form data (except transactions) is stored in formData
@@ -102,27 +99,17 @@ let transactions = function () {
 
         // properties for the entire transaction group
         groupProperties: {
-            transactionType: 'unknown',
-            title: null,
-            id: null,
-            totalAmount: 0,
+            transactionType: 'unknown', title: null, id: null, totalAmount: 0,
         },
 
         // notifications
         notifications: {
             error: {
-                show: false,
-                text: '',
-                url: '',
-            },
-            success: {
-                show: false,
-                text: '',
-                url: '',
-            },
-            wait: {
-                show: false,
-                text: '',
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
 
             }
         },
@@ -130,35 +117,22 @@ let transactions = function () {
 
         // part of the account selection auto-complete
         filters: {
-            source: [],
-            destination: [],
+            source: [], destination: [],
         },
 
-        // old properties, no longer used.
-
-
-        // data sets
-
-        // used to display the success message
-        //newGroupTitle: '',
-        //newGroupId: 0,
-
-        // map things:
-        //hasLocation: false,
-        //latitude: 51.959659235274,
-        //longitude: 5.756805887265858,
-        //zoomLevel: 13,
-
         // events in the form
         changedDateTime(event) {
-            console.log('changedDateTime');
+            console.warn('changedDateTime, event is not used');
         },
+
         changedDescription(event) {
-            console.log('changedDescription');
+            console.warn('changedDescription, event is not used');
         },
+
         changedDestinationAccount(event) {
             this.detectTransactionType();
         },
+
         changedSourceAccount(event) {
             this.detectTransactionType();
         },
@@ -218,8 +192,9 @@ let transactions = function () {
             }
             console.warn('Unknown account combination between "' + sourceType + '" and "' + destType + '".');
         },
+
         formattedTotalAmount() {
-            if(this.entries.length === 0) {
+            if (this.entries.length === 0) {
                 return formatMoney(this.groupProperties.totalAmount, 'EUR');
             }
             return formatMoney(this.groupProperties.totalAmount, this.entries[0].currency_code ?? 'EUR');
@@ -255,6 +230,7 @@ let transactions = function () {
                 }
             }
         },
+
         filterNativeCurrencies(code) {
             let list = [];
             let currency;
@@ -276,6 +252,7 @@ let transactions = function () {
                 }
             }
         },
+
         changedAmount(e) {
             const index = parseInt(e.target.dataset.index);
             this.entries[index].amount = parseFloat(e.target.value);
@@ -287,7 +264,6 @@ let transactions = function () {
             }
         },
 
-
         addedSplit() {
             // addedSplit, is called from the HTML
             // for source account
@@ -329,9 +305,11 @@ let transactions = function () {
             });
 
         },
+
         processUpload(event) {
             this.showMessageOrRedirectUser();
         },
+
         processUploadError(event) {
             this.notifications.success.show = false;
             this.notifications.wait.show = false;
@@ -382,12 +360,30 @@ let transactions = function () {
             document.addEventListener('upload-error', (event) => {
                 this.processUploadError(event);
             });
+            document.addEventListener('location-move', (event) => {
+                this.entries[event.detail.index].latitude = event.detail.latitude;
+                this.entries[event.detail.index].longitude = event.detail.longitude;
+            });
+
+            document.addEventListener('location-set', (event) => {
+                this.entries[event.detail.index].hasLocation = true;
+                this.entries[event.detail.index].latitude = event.detail.latitude;
+                this.entries[event.detail.index].longitude = event.detail.longitude;
+                this.entries[event.detail.index].zoomLevel = event.detail.zoomLevel;
+            });
+
+            document.addEventListener('location-zoom', (event) => {
+                this.entries[event.detail.index].hasLocation = true;
+                this.entries[event.detail.index].zoomLevel = event.detail.zoomLevel;
+            });
+
 
             // source can never be expense account
             this.filters.source = ['Asset account', 'Loan', 'Debt', 'Mortgage', 'Revenue account'];
             // destination can never be revenue account
             this.filters.destination = ['Expense account', 'Loan', 'Debt', 'Mortgage', 'Asset account'];
         },
+
         submitTransaction() {
             // reset all messages:
             this.notifications.error.show = false;
@@ -454,6 +450,7 @@ let transactions = function () {
 
             });
         },
+
         showMessageOrRedirectUser() {
             // disable all messages:
             this.notifications.error.show = false;
@@ -475,6 +472,7 @@ let transactions = function () {
             }
             window.location = 'transactions/show/' + this.groupProperties.id + '?transaction_group_id=' + this.groupProperties.id + '&message=created';
         },
+
         parseErrors(data) {
             // disable all messages:
             this.notifications.error.show = true;
@@ -483,10 +481,11 @@ let transactions = function () {
             this.formStates.isSubmitting = false;
             this.notifications.error.text = i18n.t('firefly.errors_submission', {errorMessage: data.message});
 
-            if(data.hasOwnProperty('errors')) {
+            if (data.hasOwnProperty('errors')) {
                 this.entries = spliceErrorsIntoTransactions(i18n, data.errors, this.entries);
             }
         },
+
         addSplit() {
             this.entries.push(createEmptySplit());
 
@@ -506,87 +505,39 @@ let transactions = function () {
                         }
                     }
                 });
-                console.log('in set timeout.');
                 const count = this.entries.length - 1;
-                if(document.querySelector('#location_map_' + count)) {
-                    addLocation(count);
-                }
-            });
-
-
-            //     const count = this.entries.length - 1;
-            //     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);
-            //     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();
-
-            // }, 250);
-
+                // if(document.querySelector('#location_map_' + count)) { }
+                addLocation(count);
+            }, 150);
         },
+
         removeSplit(index) {
             this.entries.splice(index, 1);
             // fall back to index 0
             const triggerFirstTabEl = document.querySelector('#split-0-tab')
             triggerFirstTabEl.click();
         },
+
         clearLocation(e) {
             e.preventDefault();
+            // remove location from entry, fire event, do nothing else (the map is somebody else's problem).
+
             const target = e.currentTarget;
             const index = parseInt(target.attributes['data-index'].value);
             this.entries[index].hasLocation = false;
-            this.entries[index].marker.remove();
+            this.entries[index].latitude = null;
+            this.entries[index].longitude = null;
+            this.entries[index].zoomLevel = null;
+
+            const removeEvent = new CustomEvent('location-remove', {
+                detail: {
+                    index: index
+                }
+            });
+            document.dispatchEvent(removeEvent);
+
             return false;
         },
-        saveZoomOfMap(e) {
-            let index = parseInt(e.sourceTarget._container.attributes['data-index'].value);
-            let map = document.querySelector('#form')._x_dataStack[0].$data.entries[index].map;
-            document.querySelector('#form')._x_dataStack[0].$data.entries[index].zoomLevel = map.getZoom();
-            console.log('New zoom level: ' + map.getZoom());
-        },
-        addPointToMap(e) {
-            let index = parseInt(e.originalEvent.currentTarget.attributes['data-index'].value);
-            let map = document.querySelector('#form')._x_dataStack[0].$data.entries[index].map;
-            let hasLocation = document.querySelector('#form')._x_dataStack[0].$data.entries[index].hasLocation;
-            console.log('Has location: ' + hasLocation);
-            if (false === hasLocation) {
-                console.log('False!');
-                const marker = new L.marker(e.latlng, {draggable: true});
-                marker.on('dragend', function (event) {
-                    var marker = event.target;
-
-                    var position = marker.getLatLng();
-                    marker.setLatLng(new L.LatLng(position.lat, position.lng), {draggable: 'true'});
-                    document.querySelector('#form')._x_dataStack[0].$data.entries[index].latitude = position.lat;
-                    document.querySelector('#form')._x_dataStack[0].$data.entries[index].longitude = position.lng;
-                });
-
-                marker.addTo(map);
-                document.querySelector('#form')._x_dataStack[0].$data.entries[index].hasLocation = true;
-                document.querySelector('#form')._x_dataStack[0].$data.entries[index].marker = marker;
-                document.querySelector('#form')._x_dataStack[0].$data.entries[index].latitude = e.latlng.lat;
-                document.querySelector('#form')._x_dataStack[0].$data.entries[index].longitude = e.latlng.lng;
-                document.querySelector('#form')._x_dataStack[0].$data.entries[index].zoomLevel = map.getZoom();
-            }
-        }
     }
 }
 

resources/assets/v2/pages/transactions/shared/manage-locations.js

@@ -18,40 +18,82 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import L from "leaflet";
+
 let maps = [];
+let markers = [];
 
-export function addLocation(index) {
-    console.log('add location to index ' + index);
-    if(typeof maps[index] === 'undefined') {
-        console.log('no map yet at index ' + index + ' (location_map_' + index + ')');
-        let holder = document.getElementById('location_map_' + index);
-        //console.log(holder.dataset.longitude);
-        // holder.dataset('latitude');
-        // console.log(holder.dataset('latitude'));
-            maps[index] = L.map(holder).setView([holder.dataset.latitude, holder.dataset.longitude], holder.dataset.zoomLevel);
+// listen to event to remove marker:
 
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                maxZoom: 19,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            }).addTo(maps[index]);
-        //     map.on('click', this.addPointToMap);
-        //     map.on('zoomend', this.saveZoomOfMap);
-        //     this.entries[count].map
+// location-remove
 
-        // 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();
+document.addEventListener('location-remove', (event) => {
+    markers[event.detail.index].remove();
+});
 
-        // }, 250);
+
+function addPointToMap(e) {
+    // index is always 0.
+    // let index = parseInt(e.originalEvent.currentTarget.attributes['data-index'].value);
+    let index = 0;
+    let hasLocation = document.querySelector('#form')._x_dataStack[0].$data.entries[index].hasLocation;
+
+    if (false === hasLocation) {
+        markers[index] = new L.marker(e.latlng, {draggable: true});
+        markers[index].on('dragend', dragEnd);
+        markers[index].addTo(maps[index]);
+
+        const setEvent = new CustomEvent('location-set', {detail: {
+                latitude: e.latlng.lat,
+                longitude: e.latlng.lng,
+                index: index,
+                zoomLevel: maps[index].getZoom()
+            }});
+        document.dispatchEvent(setEvent);
+    }
+}
+
+function saveZoomOfMap(e) {
+    //let index = parseInt(e.sourceTarget._container.attributes['data-index'].value);
+    let index = 0;
+    const zoomEvent = new CustomEvent('location-zoom', {detail: {
+            index: index,
+            zoomLevel: maps[index].getZoom()
+        }});
+    document.dispatchEvent(zoomEvent);
+}
+
+function dragEnd(event) {
+    let marker = event.target;
+    let position = marker.getLatLng();
+    marker.setLatLng(new L.LatLng(position.lat, position.lng), {draggable: 'true'});
+    const moveEvent = new CustomEvent('location-move', {
+        detail: {
+            latitude: position.lat,
+            longitude: position.lng,
+            index: 0
+        }
+    });
+    document.dispatchEvent(moveEvent);
+}
+
+export function addLocation(index) {
+    if (index > 0) {
+        console.warn('Corwardly refuse to add a map on split #' + (index + 1));
+        return;
+    }
+    if (typeof maps[index] === 'undefined') {
+        // map holder is always the same:
+
+        //let holder = document.getElementById('location_map_' + index);
+        let holder = document.getElementById('location_map');
+        maps[index] = L.map(holder).setView([holder.dataset.latitude, holder.dataset.longitude], holder.dataset.zoomLevel);
+
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(maps[index]);
+        maps[index].on('click', addPointToMap);
+        maps[index].on('zoomend', saveZoomOfMap);
     }
 }

resources/views/v2/partials/form/transaction/location.blade.php

@@ -1,15 +1,21 @@
 @if(true === $optionalFields['location'])
-<div class="row mb-3">
-    <label :for="'map_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
-        <em title="{{ __('firefly.location') }}" class="fa-solid fa-earth-europe"></em>
-    </label>
-    <div class="col-sm-10">
-        <div
-            data-latitude="{{ $latitude }}"
-            data-longitude="{{ $longitude }}"
-            data-zoom-level="{{ $zoomLevel }}"
-            :id="'location_map_' + index" style="height:300px;" :data-index="index"></div>
-        <span class="muted small">
+    <div class="row mb-3">
+        <label :for="'map_' + index" class="col-sm-1 col-form-label d-none d-sm-block">
+            <em title="{{ __('firefly.location') }}" class="fa-solid fa-earth-europe"></em>
+        </label>
+        <template x-if="index > 0">
+            <div class="col-sm-10">
+                <label class="custom-control-label small">{{ __('firefly.location_first_split') }}</label>
+            </div>
+        </template>
+        <template x-if="0 === index">
+            <div class="col-sm-10">
+                <div
+                    data-latitude="{{ $latitude }}"
+                    data-longitude="{{ $longitude }}"
+                    data-zoom-level="{{ $zoomLevel }}"
+                    id="location_map" style="height:300px;" :data-index="index"></div>
+                <span class="muted small">
             <template x-if="!transaction.hasLocation">
                 <span>{{ __('firefly.click_tap_location') }}</span>
             </template>
@@ -17,6 +23,7 @@
                 <a :data-index="index" href="#" @click="clearLocation">{{ __('firefly.clear_location') }}</a>
             </template>
         </span>
+            </div>
+        </template>
     </div>
-</div>
 @endif