feat: display coordinates in a human readable form

frontend/src/components/CampaignView.vue

@@ -66,6 +66,13 @@
               <q-item-label class="text-help">
                 {{ campaign.platform }}
               </q-item-label>
+              <q-item-label v-if="hasStartLocation" class="text-grey-8">
+                {{ formatCoordinates(campaign.start_location[0], campaign.start_location[1]) }} 
+                <span v-if="hasEndLocation">
+                  <q-icon name="east" color="grey-10"/>
+                  {{ formatCoordinates(campaign.end_location[0], campaign.end_location[1]) }}
+                </span>
+              </q-item-label>
             </q-item-section>
           </q-item>
           <q-item v-if="campaign.track">
@@ -160,6 +167,7 @@ export default defineComponent({
 <script setup lang="ts">
 import { Campaign } from 'src/models';
 import { cdnUrl } from 'src/boot/api';
+import { formatCoordinates } from 'src/utils/numbers';
 
 interface Props {
   campaign: Campaign;
@@ -177,6 +185,14 @@ const trackUrl = computed(() => {
   return props.campaign.track ? `${cdnUrl}/${props.campaign.track.file.path}` : '';
 });
 
+const hasStartLocation = computed(() => {
+  return props.campaign.start_location && props.campaign.start_location.length == 2;
+});
+
+const hasEndLocation = computed(() => {
+  return props.campaign.end_location && props.campaign.end_location.length == 2;
+});
+
 function truncateString(str: string, num: number) {
   if (str.length <= num) {
     return str;

frontend/src/utils/numbers.ts

@@ -35,3 +35,25 @@ export function getSizeLabel(size: number | undefined) {
   }
   return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`;
 }
+
+// Function to convert decimal degrees to DMS (Degrees, Minutes, Seconds)
+export function toDMS(deg: number) {
+  const d = Math.floor(deg);
+  const minFloat = (deg - d) * 60;
+  const m = Math.floor(minFloat);
+  const secFloat = (minFloat - m) * 60;
+  const s = Math.round(secFloat);
+
+  return `${d}° ${m}' ${s}"`;
+}
+
+// Function to convert decimal coordinates to a user-friendly format (DMS + N/S/E/W)
+export function formatCoordinates(lat: number, lon: number) {
+  const latDirection = lat >= 0 ? 'N' : 'S';
+  const lonDirection = lon >= 0 ? 'E' : 'W';
+
+  const latDMS = toDMS(Math.abs(lat)); // Get absolute value of latitude
+  const lonDMS = toDMS(Math.abs(lon)); // Get absolute value of longitude
+
+  return `${latDMS} ${latDirection}, ${lonDMS} ${lonDirection}`;
+}