From c34a5ed3e49114f5e0b90e3dfee09e4d7145d76d Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Wed, 17 Feb 2021 06:37:33 +0100
Subject: [PATCH] Location is submitted and added to the array through events.

---
 .../store/modules/transactions/create.js      |  4 +
 .../src/components/transactions/Create.vue    | 15 ++-
 .../src/components/transactions/SplitForm.vue |  1 +
 .../transactions/TransactionLocation.vue      | 91 ++++++++++++++++++-
 4 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/store/modules/transactions/create.js b/frontend/src/components/store/modules/transactions/create.js
index 013aedf284..a04abca641 100644
--- a/frontend/src/components/store/modules/transactions/create.js
+++ b/frontend/src/components/store/modules/transactions/create.js
@@ -113,6 +113,10 @@ const state = () => ({
             // transaction links:
             links: [],
             attachments: [],
+            // location:
+            zoom_level: null,
+            longitude: null,
+            latitude: null,
 
             // error handling
             errors: {},
diff --git a/frontend/src/components/transactions/Create.vue b/frontend/src/components/transactions/Create.vue
index 828a717466..79ad3e6173 100644
--- a/frontend/src/components/transactions/Create.vue
+++ b/frontend/src/components/transactions/Create.vue
@@ -33,6 +33,7 @@
           :custom-fields="customFields"
           :submitted-transaction="submittedTransaction"
           v-on:uploaded-attachments="uploadedAttachment($event)"
+          v-on:set-marker-location="storeLocation(index, $event)"
       />
     </div>
 
@@ -346,7 +347,14 @@ export default {
         this.submittedAttachments = true;
       }
     },
-
+    storeLocation: function(index, event) {
+      let zoomLevel = event.hasMarker ? event.zoomLevel : null;
+      let lat = event.hasMarker ? event.lat : null;
+      let lng = event.hasMarker ? event.lng : null;
+      this.updateField({index: index, field: 'zoom_level', value: zoomLevel});
+      this.updateField({index: index, field: 'latitude', value: lat});
+      this.updateField({index: index, field: 'longitude', value: lng});
+    },
     submitTransactionLinks(data, response) {
       console.log('submitTransactionLinks()');
       let promises = [];
@@ -590,6 +598,11 @@ export default {
         notes: array.notes,
         external_id: array.external_id,
 
+        // location:
+        zoom_level: array.zoom_level,
+        longitude: array.longitude,
+        latitude: array.latitude,
+
         // from thing:
         order: 0,
         reconciled: false,
diff --git a/frontend/src/components/transactions/SplitForm.vue b/frontend/src/components/transactions/SplitForm.vue
index ca99a9ca17..2fc304d79e 100644
--- a/frontend/src/components/transactions/SplitForm.vue
+++ b/frontend/src/components/transactions/SplitForm.vue
@@ -211,6 +211,7 @@
                     :custom-fields.sync="customFields"
                 />
                 <TransactionLocation
+                    v-on="$listeners"
                     :index="index"
                     v-model="transaction.notes"
                     :errors="transaction.errors.location"
diff --git a/frontend/src/components/transactions/TransactionLocation.vue b/frontend/src/components/transactions/TransactionLocation.vue
index b8ab74500f..4cfbe1905d 100644
--- a/frontend/src/components/transactions/TransactionLocation.vue
+++ b/frontend/src/components/transactions/TransactionLocation.vue
@@ -23,19 +23,104 @@
     <div class="text-xs d-none d-lg-block d-xl-block">
       {{ $t('firefly.location') }}
     </div>
-    <div class="input-group">
-      (TODO)
+    <div style="width:100%;height:300px;">
+      <l-map
+          style="width:100%;height:300px;"
+          :zoom="zoom"
+          ref="myMap" @ready="prepMap()"
+          :center="center"
+          @update:zoom="zoomUpdated"
+          @update:center="centerUpdated"
+          @update:bounds="boundsUpdated"
+      >
+        <l-tile-layer :url="url"></l-tile-layer>
+        <l-marker :lat-lng="marker" :visible="hasMarker"></l-marker>
+      </l-map>
+      <span>
+        <button class="btn btn-default btn-xs" @click="clearLocation">{{ $t('firefly.clear_location') }}</button>
+      </span>
     </div>
   </div>
 </template>
 
 <script>
+
+// If you need to reference 'L', such as in 'L.icon', then be sure to
+// explicitly import 'leaflet' into your component
+// import L from 'leaflet';
+import {LMap, LMarker, LTileLayer} from 'vue2-leaflet';
+import 'leaflet/dist/leaflet.css';
+
+import L from 'leaflet';
+
+delete L.Icon.Default.prototype._getIconUrl;
+
+L.Icon.Default.mergeOptions({
+                              iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+                              iconUrl: require('leaflet/dist/images/marker-icon.png'),
+                              shadowUrl: require('leaflet/dist/images/marker-shadow.png')
+                            });
+
 export default {
   name: "TransactionLocation",
   props: ['index', 'value', 'errors', 'customFields'],
+  components: {
+    LMap,
+    LTileLayer,
+    LMarker,
+  },
+  created() {
+    axios.get('./api/v1/configuration/static/firefly.default_location').then(response => {
+      this.zoom = parseInt(response.data['firefly.default_location'].zoom_level);
+      this.center =
+          [
+            parseFloat(response.data['firefly.default_location'].latitude),
+            parseFloat(response.data['firefly.default_location'].longitude),
+          ]
+      ;
+    });
+  },
   data() {
     return {
-      availableFields: this.customFields
+      availableFields: this.customFields,
+      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+      zoom: 3,
+      center: [0, 0],
+      bounds: null,
+      map: null,
+      hasMarker: false,
+      marker: [0, 0],
+    }
+  },
+  methods: {
+    prepMap: function () {
+      this.map = this.$refs.myMap.mapObject;
+      this.map.on('contextmenu', this.setObjectLocation);
+      this.map.on('zoomend', this.saveZoomLevel);
+    },
+    setObjectLocation: function (event) {
+      this.marker = [event.latlng.lat, event.latlng.lng];
+      this.hasMarker = true;
+      this.emitEvent();
+    },
+    saveZoomLevel: function () {
+      this.emitEvent();
+    },
+    clearLocation: function () {
+      this.hasMarker = false;
+      this.emitEvent();
+    },
+    emitEvent() {
+      this.$emit('set-marker-location', {zoomLevel: this.zoom, lat: this.marker[0], lng: this.marker[1], hasMarker: this.hasMarker});
+    },
+    zoomUpdated(zoom) {
+      this.zoom = zoom;
+    },
+    centerUpdated(center) {
+      this.center = center;
+    },
+    boundsUpdated(bounds) {
+      this.bounds = bounds;
     }
   },
   computed: {