adds new trail page

web/src/lib/util/file_util.ts

@@ -1,6 +1,9 @@
 import { pb } from "$lib/constants";
 import type { FileOptions } from "pocketbase";
 
-export function getFileURL(record: { [key: string]: any; }, filename: string, options?: FileOptions) {
+export function getFileURL(record: { [key: string]: any; }, filename?: string, options?: FileOptions) {
+    if(!filename) {
+        return "";
+    }
     return pb.files.getUrl(record, filename, options);
 }

web/src/lib/util/format_util.ts

@@ -1,4 +1,9 @@
-export function formatTimeHHMM(minutes: number) {
+import type { Waypoint } from "$lib/models/waypoint";
+
+export function formatTimeHHMM(minutes?: number) {
+    if(!minutes) {
+        return "-";
+    }
     const m = minutes % 60;
 
     const h = (minutes - m) / 60;
@@ -6,7 +11,10 @@ export function formatTimeHHMM(minutes: number) {
     return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + m.toString() + "m";
 }
 
-export function formatMeters(meters: number) {
+export function formatMeters(meters?: number) {
+    if(!meters) {
+        return "-";
+    }
     if (meters % 1 === 0) {
         return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
     } else {
@@ -15,7 +23,10 @@ export function formatMeters(meters: number) {
 
 }
 
-export function formatISODate(isoTimestamp: string) {
+export function formatISODate(isoTimestamp?: string) {
+    if(!isoTimestamp) {
+        return "-"
+    }
     const date = new Date(isoTimestamp);
     
     const day = date.getDate().toString().padStart(2, '0');

web/src/lib/util/leaflet_util.ts

@@ -0,0 +1,26 @@
+import type { Waypoint } from "$lib/models/waypoint";
+import type { Icon, Marker } from "leaflet";
+
+export function createMarkerFromWaypoint(L: any, waypoint: Waypoint): Marker {
+    const fontAwesomeIcon = L.AwesomeMarkers.icon({
+        icon: waypoint.icon,
+        prefix: "fa",
+        markerColor: "cadetblue",
+        iconColor: "white",
+    }) as Icon;
+
+    const marker = L.marker([waypoint.lat, waypoint.lon], {
+        title: waypoint.name,
+        icon: fontAwesomeIcon,
+    })
+        .bindPopup(
+            "<b>" +
+            waypoint.name +
+            "</b>" +
+            (waypoint.description && waypoint.description.length > 0
+                ? "<br>" + waypoint.description
+                : ""),
+        );
+
+    return marker;
+}