initial commit

web/src/lib/components/avatar.svelte

@@ -0,0 +1 @@
+<menu class="rounded-full border w-12 h-12"></menu>

web/src/lib/components/category_card.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Category } from "$lib/models/category";
+
+    export let category: Category;
+</script>
+
+<div class="category-card relative rounded-2xl shadow-md w-48 h-48 overflow-hidden cursor-pointer">
+    <img class="w-full h-full" src={category.img} alt="" />
+    <div class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"></div>
+    <h5 class="absolute text-white font-bold bottom-4 left-4 text-xl">{category.name}</h5>
+</div>
+
+<style>
+    .category-card img {
+        object-fit: cover;
+        transition: 0.25s ease;
+    }
+
+    .category-card:hover img {
+        scale: 1.075;
+    }
+</style>

web/src/lib/components/footer.svelte

@@ -0,0 +1,34 @@
+<script>
+    import LogoTextLight from "./logo_text_light.svelte";
+</script>
+
+<footer class="bg-primary text-white w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 p-12 mt-12 rounded-t-3xl">
+    <LogoTextLight></LogoTextLight>
+    <div>
+        <h5 class="font-semibold">Resources</h5>
+        <ul></ul>
+    </div>
+    <div>
+        <h5 class="font-semibold">wanderer</h5>
+        <ul class="mt-4">
+            <li>About</li>
+            <li>Features</li>
+            <li>Changelog</li>
+            <li>License</li>
+        </ul>
+    </div>
+    <div>
+        <h5 class="font-semibold">Community</h5>
+        <ul class="mt-4">
+            <li>GitHub</li>
+            <li>Issues</li>
+            <li>Contribute</li>
+        </ul>
+    </div>
+</footer>
+
+<style>
+    footer li:not(:last-child) {
+        margin-bottom: 4px;
+    }
+</style>

web/src/lib/components/nav_bar.svelte

@@ -0,0 +1,20 @@
+<script>
+    import Avatar from "./avatar.svelte";
+    import LogoText from "./logo_text.svelte";
+</script>
+
+<nav class="flex justify-between items-center p-6">
+    <a href="/"><LogoText></LogoText></a>
+    <menu class="flex gap-8">
+        <a class="font-semibold" href="">Trails</a>
+        <a class="font-semibold" href="">Map</a>
+        <a class="font-semibold" href="">Categories</a>
+        <a class="font-semibold" href="">Favorites</a>
+    </menu>
+    <div class="flex gap-6 items-center">
+        <button class="btn-primary"
+            ><i class="fa fa-plus mr-2"></i>New Trail</button
+        >
+        <Avatar></Avatar>
+    </div>
+</nav>

web/src/lib/components/summit_log_card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { SummitLog } from "$lib/models/summit_log";
+    import { formatISODate } from "$lib/util/format_util";
+
+    export let log: SummitLog;
+</script>
+
+<div class="p-4 my-2 border rounded-xl">
+    <h5 class="font-medium mr-2">{formatISODate(log.date)}</h5>
+    <span>{log.text}</span>
+</div>

web/src/lib/components/tabs.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let tabs: string[];
+    export let activeTab: number;
+</script>
+
+<div class="flex gap-2 overflow-x-scroll">
+    {#each tabs as tab, i}
+        <button class="tab" class:tab-active={activeTab == i} on:click={() => activeTab = i}>{tab}</button>
+    {/each}
+</div>

web/src/lib/components/trail_card.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type { Trail } from "$lib/models/trail";
+
+    export let trail: Trail;
+</script>
+
+<div
+    class="trail-card rounded-2xl shadow-md w-72 overflow-hidden cursor-pointer"
+>
+    <img class="w-full h-48" src={trail.img} alt="" />
+    <div class="p-4">
+        <div>
+            <h4 class="font-semibold text-lg">{trail.name}</h4>
+            <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+        </div>
+        <div class="flex mt-2 gap-4">
+            <span><i class="fa fa-left-right mr-2"></i>{trail.distance}m</span>
+            <span><i class="fa fa-up-down mr-2"></i>{trail.height}m</span>
+        </div>
+    </div>
+</div>
+
+<style>
+    .trail-card img {
+        object-fit: cover;
+        transition: 0.25s ease;
+    }
+
+    .trail-card:hover img {
+        scale: 1.075;
+    }
+</style>

web/src/lib/components/waypoint_card.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { Waypoint } from "$lib/models/waypoint";
+
+    export let waypoint: Waypoint;
+</script>
+
+<div class="p-4 border rounded-md my-2 cursor-pointer hover:bg-gray-100">
+    <h5 class="mb-2"><i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}</h5>
+    <p>{waypoint.description}</p>
+    <span class="text-sm text-gray-500">{waypoint.lat}, {waypoint.lon}</span>
+</div>

web/src/lib/constants.ts

@@ -0,0 +1,6 @@
+import PocketBase from 'pocketbase';
+import { env } from "$env/dynamic/public";
+
+const pb = new PocketBase(env.PUBLIC_DB_HOST);
+
+export { pb }

web/src/lib/models/category.ts

@@ -0,0 +1,7 @@
+interface Category {
+    id: string;
+    name: string;
+    img: string;
+}
+
+export type {Category}

web/src/lib/models/summit_log.ts

@@ -0,0 +1,7 @@
+interface SummitLog {
+    id: string;
+    date: string;
+    text: string;
+}
+
+export type {SummitLog}

web/src/lib/models/trail.ts

@@ -0,0 +1,24 @@
+import type { Category } from "./category";
+import type { SummitLog } from "./summit_log";
+import type { Waypoint } from "./waypoint";
+
+interface Trail {
+    id: string;
+    name: string;
+    location: string;
+    distance: number;
+    elevation_gain: number;
+    duration: number;
+    thumbnail: string;
+    photos: string[];
+    gpx: string;
+    expand: {
+        category: Category;
+        waypoints: Waypoint[]
+        summit_logs: SummitLog[]
+    }
+    tags?: string[];
+    description: string;
+}
+
+export type { Trail }

web/src/lib/models/waypoint.ts

@@ -0,0 +1,10 @@
+interface Waypoint {
+    id: string;
+    name: string;
+    description: string;
+    lat: number;
+    lon: number;
+    icon: string;
+}
+
+export type { Waypoint }

web/src/lib/stores/trail_store.ts

@@ -0,0 +1,35 @@
+import { pb } from "$lib/constants";
+import type { Trail } from "$lib/models/trail";
+import { getFileURL } from "$lib/util/file_util";
+import { writable, type Writable } from "svelte/store";
+
+export const trails: Writable<Trail[]> = writable()
+export const trail: Writable<Trail> = writable();
+
+export async function trails_index() {
+    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
+
+    trails.set(response);
+}
+
+export async function trails_show(id: string, loadGPX?: boolean) {
+    const response: Trail = await pb.collection('trails').getOne<Trail>(id, { expand: "category,waypoints,summit_logs" })
+
+    if (loadGPX) {
+        const gpxData: string = await fetchGPX(response);
+        response.gpx = gpxData;
+    }
+
+    trail.set(response);
+}
+
+async function fetchGPX(trail: Trail) {
+    if (!trail.gpx) {
+        return "";
+    }
+    const gpxUrl = getFileURL(trail, trail.gpx);
+    const response: Response = await fetch(gpxUrl);
+    const gpxData = await response.text();
+
+    return gpxData
+}

web/src/lib/util/file_util.ts

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

web/src/lib/util/format_util.ts

@@ -0,0 +1,26 @@
+export function formatTimeHHMM(minutes: number) {
+    const m = minutes % 60;
+
+    const h = (minutes - m) / 60;
+
+    return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + m.toString() + "m";
+}
+
+export function formatMeters(meters: number) {
+    if (meters % 1 === 0) {
+        return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+    } else {
+        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters.toFixed(2)} m`
+    }
+
+}
+
+export function formatISODate(isoTimestamp: string) {
+    const date = new Date(isoTimestamp);
+    
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Month is zero-based
+    const year = date.getFullYear();
+
+    return `${day}.${month}.${year}`;
+}