adds waypoint images

web/src/lib/util/file_util.ts

@@ -5,4 +5,15 @@ export function getFileURL(record: { [key: string]: any; }, filename?: string) {
     }
 
     return `/api/v1/files/${record.collectionId}/${record.id}/${filename}`
-}
+}
+
+export function readAsDataURLAsync(file: File) {
+    return new Promise<string>((resolve, reject) => {
+        var fr = new FileReader();
+        fr.onload = () => {
+            resolve(fr.result as string);
+        };
+        fr.onerror = reject;
+        fr.readAsDataURL(file);
+    });
+}

web/src/lib/util/format_util.ts

@@ -20,10 +20,10 @@ export function formatDistance(meters?: number) {
     const unit = get(currentUser)?.unit ?? "metric";
 
     if (unit == "metric") {
-        if (meters % 1 === 0) {
-            return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+        if (meters >= 1000) {
+            return `${(meters / 1000).toFixed(2)} km`
         } else {
-            return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${Math.round(meters)} m`
+            return meters % 1 == 0 ? `${meters} m` : `${Math.round(meters)} m`;
         }
     } else {
         const miles = meters * 0.000621371;
@@ -44,7 +44,7 @@ export function formatElevation(meters?: number) {
         return `${Math.round(meters)} m`
     } else {
         const feet = meters * 3.28084;
-    
+
         return `${Math.round(feet)} ft`;
     }
 }

web/src/lib/util/leaflet_util.ts

@@ -1,7 +1,7 @@
 import type { Waypoint } from "$lib/models/waypoint";
-import type { Icon, Marker } from "leaflet";
+import type { Icon, LeafletEvent, Marker } from "leaflet";
 
-export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
+export function createMarkerFromWaypoint(L: any, waypoint: Waypoint, onDragEnd?: (event: LeafletEvent) => void): Marker {
     const fontAwesomeIcon = L.AwesomeMarkers.icon({
         icon: waypoint.icon,
         prefix: "fa",
@@ -12,6 +12,7 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
     const marker = L.marker([waypoint.lat, waypoint.lon], {
         title: waypoint.name,
         icon: fontAwesomeIcon,
+        draggable: onDragEnd != null
     })
         .bindPopup(
             "<b>" +
@@ -21,6 +22,9 @@ export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
                 ? "<br>" + waypoint.description
                 : ""),
         );
+    if (onDragEnd) {
+        marker.on("dragend", onDragEnd);
+    }
 
     return marker;
 }