@@ -15,6 +31,7 @@
{name}
class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
bind:value
+ on:change={(e) => onChange(e.target)}
>
{#each items as item}
diff --git a/web/src/lib/components/base/slider.svelte b/web/src/lib/components/base/slider.svelte
index 8d2f7d82..5f982230 100644
--- a/web/src/lib/components/base/slider.svelte
+++ b/web/src/lib/components/base/slider.svelte
@@ -1,7 +1,7 @@
diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index 299105e4..a6a084a2 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -1,5 +1,7 @@
@@ -22,7 +36,7 @@
{trail.name}
{#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
-
+ handleDropdownClick(trail, e.detail)} items={dropdownItems}>
{/if}
{trail.location}
diff --git a/web/src/lib/components/trail/trail_list_item.svelte b/web/src/lib/components/trail/trail_list_item.svelte
new file mode 100644
index 00000000..9ddc2fc3
--- /dev/null
+++ b/web/src/lib/components/trail/trail_list_item.svelte
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
{trail.name}
+
+ {#if $currentUser && $currentUser.id == trail.author}
+ handleDropdownClick(trail, e.detail)}
+ items={dropdownItems}
+ >
+ {/if}
+
+
{trail.location}
+
+ {formatMeters(
+ trail.distance,
+ )}
+ {formatMeters(
+ trail.elevation_gain,
+ )}
+ {formatTimeHHMM(
+ trail.duration,
+ )}
+
+
+ {trail.description}
+
+
diff --git a/web/src/lib/models/trail.ts b/web/src/lib/models/trail.ts
index 810ff7e4..821055c8 100644
--- a/web/src/lib/models/trail.ts
+++ b/web/src/lib/models/trail.ts
@@ -16,6 +16,7 @@ class Trail {
thumbnail?: string;
photos: string[];
gpx?: string;
+ created?: string;
expand: {
category?: Category;
waypoints: Waypoint[]
@@ -46,6 +47,7 @@ class Trail {
summit_logs?: SummitLog[],
tags?: string[],
description?: string
+ created?: string
}
) {
@@ -68,6 +70,7 @@ class Trail {
}
this.tags = params?.tags ?? []
this.description = params?.description ?? "";
+ this.created = params?.created;
this._photoFiles = [];
}
}
@@ -91,13 +94,15 @@ interface TrailFilter {
near: {
lat?: number,
lon?: number,
- distance: number
+ radius: number
}
distanceMin: number,
distanceMax: number,
eleavationGainMin: number;
elevationGainMax: number;
completed?: boolean;
+ sort: "name" | "distance" | "elevation_gain" | "created";
+ sortOrder: "+" | "-"
}
export { Trail, trailSchema };
diff --git a/web/src/lib/stores/trail_store.ts b/web/src/lib/stores/trail_store.ts
index 1df608c8..91e619c9 100644
--- a/web/src/lib/stores/trail_store.ts
+++ b/web/src/lib/stores/trail_store.ts
@@ -1,5 +1,5 @@
import type { SummitLog } from "$lib/models/summit_log";
-import { Trail } from "$lib/models/trail";
+import { Trail, type TrailFilter } from "$lib/models/trail";
import type { Waypoint } from "$lib/models/waypoint";
import { pb } from "$lib/pocketbase";
import { getFileURL } from "$lib/util/file_util";
@@ -15,7 +15,7 @@ export const trail: Writable
= writable(new Trail(""));
export const editTrail: 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
+ const response: Trail[] = (await pb.collection('trails').getList(1, 5, {expand: "category,waypoints,summit_logs" })).items
for (const trail of response) {
setFileURLs(trail);
@@ -26,6 +26,42 @@ export async function trails_index() {
return response;
}
+export async function trails_search(filter: TrailFilter) {
+ let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.eleavationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
+
+ if (filter.category.length > 0) {
+ filterText += ` AND category IN [${filter.category.join(",")}]`;
+ }
+ if (filter.completed !== undefined) {
+ filterText += ` AND completed = ${filter.completed}`;
+ }
+ if (filter.near.lat && filter.near.lon) {
+ filterText += ` AND _geoRadius(${filter.near.lat}, ${filter.near.lon}, ${filter.near.radius})`
+ }
+ const indexResponse = await ms
+ .index("trails")
+ .search(filter.q, { filter: filterText });
+ const trailIds = indexResponse.hits.map((h) => h.id);
+
+ if (trailIds.length == 0) {
+ trails.set([]);
+ return [];
+ }
+
+ const dbResponse: Trail[] = (await pb.collection('trails').getList(1, 5, {
+ filter: trailIds.map((id) => `id="${id}"`).join('||'), expand: "category,waypoints,summit_logs",
+ sort: `${filter.sortOrder}${filter.sort}`
+ })).items
+
+ for (const trail of dbResponse) {
+ setFileURLs(trail);
+ }
+
+ trails.set(dbResponse);
+
+ return dbResponse;
+}
+
export async function trails_show(id: string, loadGPX?: boolean) {
const response: Trail = await pb.collection('trails').getOne(id, { expand: "category,waypoints,summit_logs" })
@@ -248,7 +284,9 @@ function index_trail(trail: Trail) {
"distance": trail.distance,
"elevation_gain": trail.elevation_gain,
"duration": trail.duration,
- "category": trail.expand.category?.name,
+ "category": trail.expand.category?.id,
+ "completed": trail.expand.summit_logs?.length > 0,
+ "created": trail.created,
"_geo": {
"lat": trail.lat,
"lng": trail.lon,
diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts
index 460a2497..719af8b2 100644
--- a/web/src/lib/util/format_util.ts
+++ b/web/src/lib/util/format_util.ts
@@ -15,7 +15,7 @@ export function formatMeters(meters?: number) {
return "-";
}
if (meters % 1 === 0) {
- return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+ return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters} m`;
} else {
return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters.toFixed(2)} m`
}
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 7cb76575..ec084f33 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -6,30 +6,15 @@
import CategoryCard from "$lib/components/category_card.svelte";
import TrailCard from "$lib/components/trail/trail_card.svelte";
import { ms } from "$lib/meilisearch";
- import type { Trail } from "$lib/models/trail";
import { categories } from "$lib/stores/category_store";
import {
- trails,
- trails_delete,
- trails_index,
+ trails
} from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { country_codes } from "$lib/util/country_code_util";
let searchDropdownItems: SearchItem[] = [];
- async function handleDropdownClick(
- currentTrail: Trail,
- item: { text: string; value: any },
- ) {
- if (item.value == "edit") {
- goto(`/trail/edit/${currentTrail.id}`);
- } else if (item.value == "delete") {
- await trails_delete(currentTrail);
- await trails_index();
- }
- }
-
async function search(q: string) {
const response = await ms.multiSearch({
queries: [
@@ -93,7 +78,6 @@
handleDropdownClick(trail, e.detail)}
>
{/each}
diff --git a/web/src/routes/trails/+page.svelte b/web/src/routes/trails/+page.svelte
index 89b5135e..6945217d 100644
--- a/web/src/routes/trails/+page.svelte
+++ b/web/src/routes/trails/+page.svelte
@@ -6,31 +6,46 @@
import Search, {
type SearchItem,
} from "$lib/components/base/search.svelte";
+ import Select, {
+ type SelectItem,
+ } from "$lib/components/base/select.svelte";
import Slider from "$lib/components/base/slider.svelte";
- import TextField from "$lib/components/base/text_field.svelte";
import TrailCard from "$lib/components/trail/trail_card.svelte";
+ import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
import { ms } from "$lib/meilisearch";
+ import type { Category } from "$lib/models/category";
import type { TrailFilter } from "$lib/models/trail";
import { categories } from "$lib/stores/category_store";
- import { trails } from "$lib/stores/trail_store";
+ import { trails, trails_search } from "$lib/stores/trail_store";
import { country_codes } from "$lib/util/country_code_util";
import { formatMeters } from "$lib/util/format_util";
+ import { onMount } from "svelte";
- $: maxDistance = Math.max(...$trails.map((t) => t.distance ?? 0));
- $: maxElevationGain = Math.max(
- ...$trails.map((t) => t.elevation_gain ?? 0),
+ $: minDistance = Math.floor(
+ Math.min(...$trails.map((t) => t.distance ?? 0)),
+ );
+ $: maxDistance = Math.ceil(
+ Math.max(...$trails.map((t) => t.distance ?? 0)),
+ );
+ $: minElevationGain = Math.floor(
+ Math.min(...$trails.map((t) => t.elevation_gain ?? 0)),
+ );
+ $: maxElevationGain = Math.ceil(
+ Math.max(...$trails.map((t) => t.elevation_gain ?? 0)),
);
const filter: TrailFilter = {
q: "",
category: [],
near: {
- distance: 2000,
+ radius: 2000,
},
- distanceMin: 0,
+ distanceMin: minDistance,
distanceMax: maxDistance,
- eleavationGainMin: 0,
+ eleavationGainMin: minElevationGain,
elevationGainMax: maxElevationGain,
+ sort: "created",
+ sortOrder: "+",
};
const radioGroupItems: RadioItem[] = [
@@ -39,10 +54,47 @@
{ text: "No preference", value: "no_preference" },
];
+ const displayOptions: SelectItem[] = [
+ { text: "Cards", value: "cards" },
+ { text: "List", value: "list" },
+ ];
+ let selectedDisplayOption = displayOptions[0].value;
+
+ const sortOptions: SelectItem[] = [
+ { text: "Alphabetical", value: "name" },
+ { text: "Creation date", value: "created" },
+ { text: "Distance", value: "distance" },
+ { text: "Elevation gain", value: "elevation_gain" },
+ ];
+
let searchDropdownItems: SearchItem[] = [];
let citySearchQuery: string = "";
+ onMount(() => {
+ const storedDisplayOption = localStorage.getItem("displayOption")
+ if(storedDisplayOption) {
+ selectedDisplayOption = storedDisplayOption;
+ }
+ })
+
+ async function searchTrails() {
+ await trails_search(filter);
+ }
+
+ function setCategoryFilter(category: Category) {
+ const categoryIndex = filter.category.findIndex(
+ (c) => c == category.id,
+ );
+ if (categoryIndex !== -1) {
+ filter.category.splice(categoryIndex, 1);
+ } else {
+ filter.category.push(category.id);
+ }
+
+ searchTrails();
+ }
+
function setCompletedFilter(item: RadioItem) {
switch (item.value) {
case "no_preference":
@@ -58,14 +110,16 @@
filter.completed = undefined;
break;
}
+
+ searchTrails();
}
- async function searchCities(q: string) {
+ async function searchCities(q: string) {
if (q.length == 0) {
filter.near.lat = undefined;
filter.near.lon = undefined;
- console.log(filter.near);
-
+ searchTrails();
+
return;
}
const result = await ms.index("cities500").search(q, { limit: 5 });
@@ -82,21 +136,50 @@
citySearchQuery = item.text;
filter.near.lat = item.value.lat;
filter.near.lon = item.value.lon;
+
+ searchTrails();
+ }
+
+ function setSort() {
+ searchTrails();
+ }
+
+ function setSortOrder() {
+ if (filter.sortOrder === "+") {
+ filter.sortOrder = "-";
+ } else {
+ filter.sortOrder = "+";
+ }
+ const sortOrderButton = document.getElementById("sort-order-btn");
+ sortOrderButton?.classList.toggle("rotated");
+
+ searchTrails();
+ }
+
+ function setDisplayOption() {
+ localStorage.setItem("displayOption", selectedDisplayOption);
}
-
+
-
+
Category
- {#each $categories as category}
+ {#each $categories as category, i}
-
searchTrails()}
>
Radius:
- {formatMeters(filter.near.distance)}
+ {formatMeters(filter.near.radius)}
Distance
searchTrails()}
>
{formatMeters(filter.distanceMin)}
@@ -135,9 +224,11 @@
Elevation Gain
searchTrails()}
>
{formatMeters(filter.eleavationGainMin)}
@@ -152,11 +243,54 @@
on:change={(e) => setCompletedFilter(e.detail)}
>
-
- {#each $trails as trail}
-
-
- {/each}
+
+
+
+
Sort
+
+
+
+
+
+
+
Display as
+
+
+
+
+
+
+
+