adds new trail page

web/src/lib/components/waypoint/waypoint_card.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type { Waypoint } from "$lib/models/waypoint";
+    import Dropdown from "../base/dropdown.svelte";
+
+    export let waypoint: Waypoint;
+    export let mode: "show" | "edit" = "show";
+
+    const dropdownItems = [
+        { text: "Edit", value: "edit" },
+        { text: "Delete", value: "delete" },
+    ];
+</script>
+
+<div class="p-4 border rounded-md my-2 hover:bg-gray-50">
+    <div class="flex justify-between items-center mb-2">
+        <h5>
+            <i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}
+        </h5>
+        {#if mode == "edit"}
+            <Dropdown items={dropdownItems} on:change></Dropdown>
+        {/if}
+    </div>
+
+    {#if waypoint.description}
+        <p>{waypoint.description}</p>
+    {/if}
+    <span class="text-sm text-gray-500">{waypoint.lat}, {waypoint.lon}</span>
+</div>

web/src/lib/components/waypoint/waypoint_modal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import { Waypoint, waypointSchema } from "$lib/models/waypoint";
+    import { createEventDispatcher } from "svelte";
+
+    import { createForm } from "svelte-forms-lib";
+    import Modal from "../base/modal.svelte";
+    import TextField from "../base/text_field.svelte";
+    import Textarea from "../base/textarea.svelte";
+    import { waypoint } from "$lib/stores/waypoint_store";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    const { form, errors, handleChange, handleSubmit } = createForm<Waypoint>({
+        initialValues: $waypoint,
+        validationSchema: waypointSchema,
+        onSubmit: async (submittedWaypoint) => {
+            dispatch("save", submittedWaypoint);
+            closeModal!();
+        },
+    });
+    $: form.set($waypoint);
+</script>
+
+<Modal
+    id="waypoint-modal"
+    title="Add Waypoint"
+    let:openModal
+    bind:openModal
+    bind:closeModal
+>
+    <slot {openModal} />
+    <form
+        id="waypoint-form"
+        slot="content"
+        class="modal-content space-y-4"
+        on:submit={handleSubmit}
+    >
+        <div class="flex gap-4">
+            <div class="basis-full">
+                <TextField
+                    label="Name"
+                    bind:value={$form.name}
+                    error={$errors.name}
+                    on:change={handleChange}
+                ></TextField>
+            </div>
+
+            <TextField
+                label="Icon"
+                bind:value={$form.icon}
+                icon={$form.icon}
+                error={$errors.icon}
+                on:change={handleChange}
+            ></TextField>
+        </div>
+
+        <Textarea
+            label="Description"
+            bind:value={$form.description}
+            error={$errors.description}
+            on:change={handleChange}
+        ></Textarea>
+        <div class="flex gap-4">
+            <TextField
+                label="Latitude"
+                bind:value={$form.lat}
+                error={$errors.lat}
+                on:change={handleChange}
+            ></TextField>
+            <TextField
+                label="Longitude"
+                bind:value={$form.lon}
+                error={$errors.lat}
+                on:change={handleChange}
+            ></TextField>
+        </div>
+    </form>
+    <div slot="footer" class="flex items-center gap-4">
+        <button class="btn-secondary" on:click={closeModal}>Cancel</button>
+        <button class="btn-primary" type="submit" form="waypoint-form"
+            >Save</button
+        >
+    </div>
+</Modal>