From 49b98e18c6a4bb67efec30d642b8fab03a7ed2ae Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Tue, 24 Sep 2024 11:38:51 +0200
Subject: [PATCH] Use seperate fields for lattitude and longitude

---
 .../map/CoordinateSelectorControl.vue         | 19 ++++++++++++++-----
 src/lib/workflows/index.ts                    |  6 ++++++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/components/map/CoordinateSelectorControl.vue b/src/components/map/CoordinateSelectorControl.vue
index 6a4f10b0..b0ceacc2 100644
--- a/src/components/map/CoordinateSelectorControl.vue
+++ b/src/components/map/CoordinateSelectorControl.vue
@@ -2,15 +2,18 @@
   <v-chip pill label class="outer-chip chip justify-center overflow-visible">
     <v-icon class="pr-2">mdi-map-marker</v-icon>
 
-    <span class="mr-4 text-medium-emphasis text-mono">
-      {{ coordinateString }}
+    <span class="coordinate-selector__value text-right mr-1">
+      {{ coordinateStringParts[0] }}
+    </span>
+    <span class="coordinate-selector__value text-right mr-2">
+      {{ coordinateStringParts[1] }}
     </span>
     <v-btn
       :disabled="coordinate === null"
       @click="onFinish"
       density="compact"
       color="primary"
-      class="px-0 text-medium-emphasis"
+      class="px-0"
     >
       Apply
     </v-btn>
@@ -18,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import { coordinateToString } from '@/lib/workflows'
+import { coordinateToStringParts } from '@/lib/workflows'
 import type { LngLat } from 'maplibre-gl'
 import { computed } from 'vue'
 
@@ -27,7 +30,9 @@ const coordinate = defineModel<LngLat | null>('coordinate', {
 })
 const isActive = defineModel<boolean>('active', { default: false })
 
-const coordinateString = computed(() => coordinateToString(coordinate.value))
+const coordinateStringParts = computed(() =>
+  coordinateToStringParts(coordinate.value),
+)
 
 function onFinish(): void {
   isActive.value = false
@@ -42,4 +47,8 @@ function onFinish(): void {
   background-color: rgba(var(--v-theme-surface), 0.8);
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 }
+
+.coordinate-selector__value {
+  min-width: calc(4ch + 2em);
+}
 </style>
diff --git a/src/lib/workflows/index.ts b/src/lib/workflows/index.ts
index 43875826..ba18dfc4 100644
--- a/src/lib/workflows/index.ts
+++ b/src/lib/workflows/index.ts
@@ -5,3 +5,9 @@ export function coordinateToString(coordinate: LngLat | null) {
     ? `${coordinate.lng.toFixed(2)}°E ${coordinate.lat.toFixed(2)}°N`
     : '—'
 }
+
+export function coordinateToStringParts(coordinate: LngLat | null) {
+  return coordinate
+    ? [`${coordinate.lng.toFixed(2)}°E`, `${coordinate.lat.toFixed(2)}°N`]
+    : ['—°E', '—°N']
+}