From 061e37447e33ce4b35f8b327733c0f06f419ac49 Mon Sep 17 00:00:00 2001
From: sebastian-raubach <sebastian.raubach@hutton.ac.uk>
Date: Thu, 3 Sep 2020 18:04:33 +0100
Subject: [PATCH] - FIX: Fixed issue where locations map wouldn't update when
 corner points are changed. - FIX: Fixed GPS highlight in table not being
 accurately updated.

---
 package.json                            |  2 +-
 src/components/FieldMap.vue             | 19 ++++++++++---------
 src/components/Map.vue                  |  4 +++-
 src/components/modals/SettingsModal.vue |  4 ++--
 src/views/Home.vue                      |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index f122d83..13764ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridscore",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/src/components/FieldMap.vue b/src/components/FieldMap.vue
index f5ff8e8..9577857 100644
--- a/src/components/FieldMap.vue
+++ b/src/components/FieldMap.vue
@@ -34,6 +34,11 @@ import GpsInput from '@/components/GpsInput'
 import Map from '@/components/Map'
 
 export default {
+  data: function () {
+    return {
+      locations: [null, null, null, null]
+    }
+  },
   props: {
     geolocation: {
       type: Object,
@@ -48,15 +53,6 @@ export default {
       default: 1
     }
   },
-  computed: {
-    locations: function () {
-      if (this.dataset && this.dataset.cornerPoints) {
-        return this.dataset.cornerPoints.map(l => [l[0], l[1]])
-      } else {
-        return [null, null, null, null]
-      }
-    }
-  },
   components: {
     GpsInput,
     Map
@@ -71,6 +67,11 @@ export default {
     getCornerPoints: function () {
       return this.locations
     }
+  },
+  mounted: function () {
+    if (this.dataset && this.dataset.cornerPoints && this.dataset.cornerPoints.length === 4) {
+      this.locations = this.dataset.cornerPoints.map(l => [l[0], l[1]])
+    }
   }
 }
 </script>
diff --git a/src/components/Map.vue b/src/components/Map.vue
index d960a5e..9e6e38a 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -86,7 +86,7 @@ export default {
     locations: {
       deep: true,
       handler: function (newValue) {
-        if (this.locations) {
+        if (newValue) {
           this.updateMarkers()
           this.updateBounds()
         }
@@ -109,6 +109,8 @@ export default {
       // If the bounds are valid, move the map
       if (bounds.isValid()) {
         this.$refs.fieldMap.fitBounds(bounds.pad(0.1))
+      } else if (bounds.getCenter()) {
+        this.$refs.fieldMap.panTo(bounds.getCenter())
       }
     },
     invalidateSize: function () {
diff --git a/src/components/modals/SettingsModal.vue b/src/components/modals/SettingsModal.vue
index c885a00..2250be8 100644
--- a/src/components/modals/SettingsModal.vue
+++ b/src/components/modals/SettingsModal.vue
@@ -19,10 +19,10 @@
         <b-row>
           <b-col cols=12 md=6>
             <b-form-group :label="$t('formLabelSettingsRows')" label-for="rows">
-              <b-form-input id="rows" :state="state.rows" number type="number" :min="1" required autofocus v-model="rows" />
+              <b-form-input id="rows" :state="state.rows" number type="number" :min="1" required autofocus v-model.number="rows" />
             </b-form-group>
             <b-form-group :label="$t('formLabelSettingsCols')" label-for="cols">
-              <b-form-input id="cols" :state="state.cols" number type="number" :min="1" required v-model="cols" />
+              <b-form-input id="cols" :state="state.cols" number type="number" :min="1" required v-model.number="cols" />
             </b-form-group>
             <b-form-group :label="$t('formLabelSettingsVarieties')" label-for="varieties">
               <b-form-textarea id="varieties" :state="state.varieties" rows=6 required v-model="varieties" />
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b7621ee..13ead0e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -109,7 +109,7 @@ export default {
     startGeoTracking: function () {
       if (this.geolocationWatchId === null) {
         if (navigator.geolocation) {
-          const options = { enableHighAccuracy: false, maximumAge: 1000, timeout: 20000 }
+          const options = { enableHighAccuracy: true, maximumAge: 100, timeout: 20000 }
           this.geolocationWatchId = navigator.geolocation.watchPosition(position => {
             if (position && position.coords) {
               this.geolocation = {