From d6f58ef7d9a7e0ef5fef3cf865e6de39767bb2b7 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Mon, 24 Jun 2024 09:01:08 +0200
Subject: [PATCH] refactor a bit to remove strange behavior

---
 .../Federation/CommunityVisualizeItem.vue     |  2 +-
 admin/src/components/Federation/GMSApiKey.vue | 12 +++-
 admin/src/components/input/Coordinates.vue    | 56 +++++++++++++------
 admin/src/components/input/EditableGroup.vue  |  1 +
 admin/src/locales/de.json                     |  5 +-
 admin/src/locales/en.json                     |  9 +--
 6 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/admin/src/components/Federation/CommunityVisualizeItem.vue b/admin/src/components/Federation/CommunityVisualizeItem.vue
index edabc3a70..9ec303c34 100644
--- a/admin/src/components/Federation/CommunityVisualizeItem.vue
+++ b/admin/src/components/Federation/CommunityVisualizeItem.vue
@@ -31,7 +31,7 @@
               @reset="resetHomeCommunityEditable"
             >
               <template #view>
-                <label>{{ $t('federation.gmsApiKey') }}&nbsp;{{ item.gmsApiKey }}</label>
+                <label>{{ $t('federation.gmsApiKey') }}&nbsp;{{ gmsApiKey }}</label>
                 <b-form-group>
                   {{ $t('federation.coordinates') }}&nbsp;{{ item.location.coordinates[1] }}&nbsp;{{
                     item.location.coordinates[0]
diff --git a/admin/src/components/Federation/GMSApiKey.vue b/admin/src/components/Federation/GMSApiKey.vue
index 468bd7c28..1e6c22868 100644
--- a/admin/src/components/Federation/GMSApiKey.vue
+++ b/admin/src/components/Federation/GMSApiKey.vue
@@ -6,7 +6,6 @@
 
 <script>
 export default {
-  // Code written from chatGPT 3.5
   name: 'GMSApiKey',
   props: {
     value: {
@@ -18,13 +17,20 @@ export default {
   data() {
     return {
       inputValue: this.value,
+      originalValue: this.value,
     }
   },
   methods: {
     updateValue(value) {
       this.inputValue = value
-      if (this.$parent.valueChanged) {
-        this.$parent.valueChanged()
+      if (this.inputValue !== this.originalValue) {
+        if (this.$parent.valueChanged) {
+          this.$parent.valueChanged()
+        }
+      } else {
+        if (this.$parent.invalidValues) {
+          this.$parent.invalidValues()
+        }
       }
       this.$emit('input', this.inputValue)
     },
diff --git a/admin/src/components/input/Coordinates.vue b/admin/src/components/input/Coordinates.vue
index dbbe4c7e5..28a52971c 100644
--- a/admin/src/components/input/Coordinates.vue
+++ b/admin/src/components/input/Coordinates.vue
@@ -1,25 +1,33 @@
 <template>
   <div>
-    <b-form-group 
+    <b-form-group
       :label="$t('geo-coordinates.label')"
       :invalid-feedback="$t('geo-coordinates.both-or-none')"
       :state="isValid"
-      >
+    >
       <b-form-group
-        :label="$t('latitude')"
-        label-for="home-community-latitude"
-        :description="$t('geo-coordinates.latitude.describe')"
+        :label="$t('latitude-longitude-smart')"
+        label-for="home-community-latitude-longitude-smart"
+        :description="$t('geo-coordinates.latitude-longitude-smart.describe')"
       >
         <b-form-input
-          v-model="inputValue.coordinates[1]"
-          id="home-community-latitude"
+          v-model="latitudeLongitude"
+          id="home-community-latitude-longitude-smart"
           type="text"
           @input="splitCoordinates"
         />
       </b-form-group>
+      <b-form-group :label="$t('latitude')" label-for="home-community-latitude">
+        <b-form-input
+          v-model="latitude"
+          id="home-community-latitude"
+          type="text"
+          @input="valueUpdated"
+        />
+      </b-form-group>
       <b-form-group :label="$t('longitude')" label-for="home-community-longitude">
         <b-form-input
-          v-model="inputValue.coordinates[0]"
+          v-model="longitude"
           id="home-community-longitude"
           type="text"
           @input="valueUpdated"
@@ -41,45 +49,59 @@ export default {
   data() {
     return {
       inputValue: this.value,
+      originalValueString: this.getLatitudeLongitudeString(this.value),
+      longitude: this.value.coordinates[0],
+      latitude: this.value.coordinates[1],
+      latitudeLongitude: this.getLatitudeLongitudeString(this.value),
     }
   },
-  created() {
-    console.log("created value: %o, inputValue: %o", this.value, this.inputValue)
-  },
   computed: {
     isValid() {
       return this.inputValue.coordinates.length === 0 || this.inputValue.coordinates.length === 2
-    }
+    },
+    isChanged() {
+      return this.getLatitudeLongitudeString(this.inputValue) !== this.originalValueString
+    },
   },
   methods: {
     splitCoordinates(value) {
-      // format from google maps 'longitude, latitude'
+      // format from google maps 'latitude, longitude'
       const parts = value.split(',').map((part) => part.trim())
+      // console.log("parts: %o, length: %d", parts, parts.length)
 
       if (parts.length === 2) {
         const [lat, lon] = parts
         // format in geojson Point: coordinates[longitude, latitude]
         if (!isNaN(parseFloat(lon) && !isNaN(parseFloat(lat)))) {
-          this.inputValue.coordinates[0] = parseFloat(lon)
-          this.inputValue.coordinates[1] = parseFloat(lat)
+          this.longitude = parseFloat(lon)
+          this.latitude = parseFloat(lat)
         }
       }
       this.valueUpdated()
     },
+    getLatitudeLongitudeString(geoJSONPoint) {
+      if (geoJSONPoint.coordinates.length !== 2) {
+        return ''
+      }
+      return `${geoJSONPoint.coordinates[1] ?? '0'}, ${geoJSONPoint.coordinates[0] ?? '0'}`
+    },
     valueUpdated() {
+      this.inputValue.coordinates = [this.longitude, this.latitude]
+      this.latitudeLongitude = this.getLatitudeLongitudeString(this.inputValue)
+
       // make sure all coordinates are numbers
       this.inputValue.coordinates = this.inputValue.coordinates
         .map((coord) => parseFloat(coord))
         // Remove null and NaN values
         .filter((coord) => coord !== null && !isNaN(coord))
 
-      if (this.isValid) {
+      if (this.isValid && this.isChanged) {
         if (this.$parent.valueChanged) {
           this.$parent.valueChanged()
         }
       } else {
         if (this.$parent.invalidValues) {
-          this.$parent.invalidValues();
+          this.$parent.invalidValues()
         }
       }
 
diff --git a/admin/src/components/input/EditableGroup.vue b/admin/src/components/input/EditableGroup.vue
index 9653430bc..4821d75d7 100644
--- a/admin/src/components/input/EditableGroup.vue
+++ b/admin/src/components/input/EditableGroup.vue
@@ -51,6 +51,7 @@ export default {
     save() {
       this.$emit('save')
       this.isEditing = false
+      this.isValueChanged = false
     },
     close() {
       this.$emit('reset')
diff --git a/admin/src/locales/de.json b/admin/src/locales/de.json
index aa8f51983..91f4f0a7a 100644
--- a/admin/src/locales/de.json
+++ b/admin/src/locales/de.json
@@ -105,8 +105,8 @@
   "geo-coordinates": {
     "both-or-none": "Bitte beide oder keine eingeben!",
     "label": "Geo-Koordinaten",
-    "latitude": {
-      "describe": "Teilt Koordinaten im Format 'Längengrad, Breitengrad' automatisch in separate Eingabefelder auf. Fügen sie hier einfach z.B. ihre Koordinaten von Google Maps, zum Beispiel: 49.28187664243721, 9.740672183943639, ein."
+    "latitude-longitude-smart": {
+      "describe": "Teilt Koordinaten im Format 'Breitengrad, Längengrad' automatisch auf. Fügen sie hier einfach z.B. ihre Koordinaten von Google Maps, zum Beispiel: 49.28187664243721, 9.740672183943639, ein."
     }
   },
   "help": {
@@ -123,6 +123,7 @@
   "hide_resubmission_tooltip": "Verbirgt alle Schöpfungen für die ein Moderator ein Erinnerungsdatum festgelegt hat.",
   "lastname": "Nachname",
   "latitude": "Breitengrad:",
+  "latitude-longitude-smart": "Breitengrad, Längengrad",
   "longitude": "Längengrad:",
   "math": {
     "equals": "=",
diff --git a/admin/src/locales/en.json b/admin/src/locales/en.json
index 258abe891..80c31503b 100644
--- a/admin/src/locales/en.json
+++ b/admin/src/locales/en.json
@@ -105,8 +105,8 @@
   "geo-coordinates": {
     "both-or-none": "Please enter both or none!",
     "label": "geo-coordinates",
-    "latitude": {
-      "describe": "Automatically splits coordinates in the format 'longitude, latitude' into separate input fields. Simply enter your coordinates from Google Maps here, for example: 49.28187664243721, 9.740672183943639."
+    "latitude-longitude-smart": {
+      "describe": "Automatically splits coordinates in the format 'latitude, longitude'. Simply enter your coordinates from Google Maps here, for example: 49.28187664243721, 9.740672183943639."
     }
   },
   "help": {
@@ -122,8 +122,9 @@
   "hide_resubmission": "Hide resubmission",
   "hide_resubmission_tooltip": "Hides all creations for which a moderator has set a reminder date.",
   "lastname": "Lastname",
-  "latitude": "Breitengrad:",
-  "longitude": "Längengrad:",
+  "latitude": "Latitude:",
+  "longitude": "Longitude:",
+  "latitude-longitude-smart": "Latitude, Longitude",
   "math": {
     "equals": "=",
     "pipe": "|",