+ {#if label.length}
+
+ {label}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/web/src/lib/components/waypoint_card.svelte b/web/src/lib/components/waypoint_card.svelte
deleted file mode 100644
index 9ef5dbec..00000000
--- a/web/src/lib/components/waypoint_card.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
{waypoint.name}
-
{waypoint.description}
-
{waypoint.lat}, {waypoint.lon}
-
diff --git a/web/src/lib/models/trail.ts b/web/src/lib/models/trail.ts
index 84939541..63f0b278 100644
--- a/web/src/lib/models/trail.ts
+++ b/web/src/lib/models/trail.ts
@@ -2,23 +2,56 @@ import type { Category } from "./category";
import type { SummitLog } from "./summit_log";
import type { Waypoint } from "./waypoint";
-interface Trail {
- id: string;
+class Trail {
+ id?: string;
name: string;
- location: string;
- distance: number;
- elevation_gain: number;
- duration: number;
- thumbnail: string;
+ location?: string;
+ distance?: number;
+ elevation_gain?: number;
+ duration?: number;
+ thumbnail?: string;
photos: string[];
- gpx: string;
+ gpx?: string;
expand: {
- category: Category;
+ category?: Category;
waypoints: Waypoint[]
summit_logs: SummitLog[]
}
tags?: string[];
- description: string;
+ description?: string;
+
+ constructor(name: string,
+ id?: string,
+ location?: string,
+ distance?: number,
+ elevation_gain?: number,
+ duration?: number,
+ thumbnail?: string,
+ photos?: string[],
+ gpx?: string,
+ category?: Category,
+ waypoints?: Waypoint[],
+ summit_logs?: SummitLog[],
+ tags?: string[],
+ description?: string
+ ) {
+ this.id = id;
+ this.name = name;
+ this.location = location;
+ this.distance = distance;
+ this.elevation_gain = elevation_gain;
+ this.duration = duration;
+ this.thumbnail = thumbnail;
+ this.photos = photos ?? [];
+ this.gpx = gpx;
+ this.expand = {
+ category: category,
+ waypoints: waypoints ?? [],
+ summit_logs: summit_logs ?? []
+ }
+ this.tags = tags ?? []
+ this.description = description ?? "";
+ }
}
-export type { Trail }
\ No newline at end of file
+export { Trail };
diff --git a/web/src/lib/models/waypoint.ts b/web/src/lib/models/waypoint.ts
index 34c734d8..8cbc986c 100644
--- a/web/src/lib/models/waypoint.ts
+++ b/web/src/lib/models/waypoint.ts
@@ -1,10 +1,33 @@
-interface Waypoint {
- id: string;
- name: string;
- description: string;
+import type { Marker } from "leaflet";
+import { date, number, object, string } from "yup";
+
+class Waypoint {
+ id?: string;
+ name?: string;
+ description?: string;
lat: number;
lon: number;
- icon: string;
+ icon?: string;
+ marker?: Marker;
+
+ constructor(lat: number, lon: number, params?: {id?: string, name?: string, description?: string, icon?: string, marker?: Marker}) {
+ this.id = params?.id;
+ this.name = params?.name ?? "";
+ this.description = params?.description ?? "";
+ this.lat = lat;
+ this.lon = lon;
+ this.icon = params?.icon ?? "circle";
+ this.marker = params?.marker;
+ }
}
-export type { Waypoint }
\ No newline at end of file
+const waypointSchema = object
({
+ id: string().optional(),
+ name: string().optional(),
+ description: string().optional(),
+ lat: number().min(0).required('Required').typeError('Invalid latitude'),
+ lon: number().min(0).required('Required').typeError('Invalid longitude'),
+ icon: string().optional()
+ });
+
+export { Waypoint, waypointSchema }
\ No newline at end of file
diff --git a/web/src/lib/stores/category_store.ts b/web/src/lib/stores/category_store.ts
new file mode 100644
index 00000000..878d5fa7
--- /dev/null
+++ b/web/src/lib/stores/category_store.ts
@@ -0,0 +1,11 @@
+import { pb } from "$lib/constants";
+import type { Category } from "$lib/models/category";
+import { writable, type Writable } from "svelte/store";
+
+export const categories: Writable = writable([])
+
+export async function categories_index() {
+ const response: Category[] = (await pb.collection('categories').getFullList())
+
+ categories.set(response);
+}
\ No newline at end of file
diff --git a/web/src/lib/stores/trail_store.ts b/web/src/lib/stores/trail_store.ts
index 8fa6fd37..c262f170 100644
--- a/web/src/lib/stores/trail_store.ts
+++ b/web/src/lib/stores/trail_store.ts
@@ -1,10 +1,10 @@
import { pb } from "$lib/constants";
-import type { Trail } from "$lib/models/trail";
+import { Trail } from "$lib/models/trail";
import { getFileURL } from "$lib/util/file_util";
import { writable, type Writable } from "svelte/store";
-export const trails: Writable = writable()
-export const trail: Writable = writable();
+export const trails: Writable = writable([])
+export const trail: Writable = writable(new Trail(""));
export async function trails_index() {
const response: Trail[] = (await pb.collection('trails').getList(1, 5, { expand: "category,waypoints,summit_logs" })).items
diff --git a/web/src/lib/stores/waypoint_store.ts b/web/src/lib/stores/waypoint_store.ts
new file mode 100644
index 00000000..85236133
--- /dev/null
+++ b/web/src/lib/stores/waypoint_store.ts
@@ -0,0 +1,4 @@
+import { Waypoint } from "$lib/models/waypoint";
+import { writable, type Writable } from "svelte/store";
+
+export const waypoint: Writable = writable(new Waypoint(0, 0));
diff --git a/web/src/lib/util/file_util.ts b/web/src/lib/util/file_util.ts
index f685fce7..18b56c7f 100644
--- a/web/src/lib/util/file_util.ts
+++ b/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);
}
\ No newline at end of file
diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts
index fe54e144..4e10d8b6 100644
--- a/web/src/lib/util/format_util.ts
+++ b/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');
diff --git a/web/src/lib/util/leaflet_util.ts b/web/src/lib/util/leaflet_util.ts
new file mode 100644
index 00000000..90629543
--- /dev/null
+++ b/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(
+ "" +
+ waypoint.name +
+ "" +
+ (waypoint.description && waypoint.description.length > 0
+ ? "
" + waypoint.description
+ : ""),
+ );
+
+ return marker;
+}
\ No newline at end of file
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index d0fa1147..871b0730 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,43 +1,8 @@
@@ -60,8 +25,8 @@
id="trails"
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
>
- {#each trails as trail,i}
-
+ {#each $trails as trail}
+
{/each}