brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finishes trails page

Browse Source
This commit is contained in:
Christian Beutel
2024-02-05 22:37:11 +01:00
parent ec33723bdc
commit 5e4ccc59c0
12 changed files with 343 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/lib/components/base/double_slider.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import * as noUiSlider from "noUiSlider";
import "nouislider/dist/nouislider.css";
import { onMount } from "svelte";
import { createEventDispatcher, onMount } from "svelte";
export let minValue = 0;
export let maxValue = 100;
@@ -11,6 +11,8 @@
let sliderContainer: any;
const dispatch = createEventDispatcher();
onMount(() => {
const updateValues = (values: string[]) => {
currentMin = parseFloat(values[0]);
@@ -27,6 +29,10 @@
});
sliderContainer.noUiSlider.on("update", updateValues);
sliderContainer.noUiSlider.on("set", () => {
dispatch("set", [currentMin, currentMax]);
});
});
</script>

18
web/src/lib/components/base/dropdown.svelte
View File

@@ -1,7 +1,15 @@
<script context="module" lang="ts">
export type DropdownItem = {
text: string;
value: any;
icon?: string;
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let items: { text: string; value: any; icon?: string }[] = [];
export let items: DropdownItem[] = [];
export let size: string = "regular";
const dispatch = createEventDispatcher();
@@ -27,10 +35,14 @@
<svelte:window on:mouseup={() => (isOpen = false)} />
<div class="dropdown relative">
<button class="flex items-center justify-center" on:click={toggleMenu} type="button">
<button
class="flex items-center justify-center"
on:click={toggleMenu}
type="button"
>
<slot>
<i
class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full "
class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"
></i>
</slot>
</button>

2
web/src/lib/components/base/search.svelte
View File

@@ -71,7 +71,7 @@
type="search"
name="q"
autocomplete="off"
extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px]' : 'pl-10'}"
extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px] rounded-xl' : 'pl-10'}"
{placeholder}
bind:value
on:input={onSearchType}

19
web/src/lib/components/base/select.svelte
View File

@@ -1,8 +1,24 @@
<script context="module" lang="ts">
export type SelectItem = {
text: string;
value: any;
};
</script>
<script lang="ts">
import { createEventDispatcher } from "svelte";
export let name: string = "";
export let value: any;
export let items: { text: string; value: any }[] = [];
export let items: SelectItem[] = [];
export let label: string = "";
const dispatch = createEventDispatcher();
function onChange(target: any) {
dispatch("change", target?.value)
}
</script>
<div>
@@ -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}
<option value={item.value}>{item.text}</option>

8
web/src/lib/components/base/slider.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import noUiSlider from "noUiSlider";
import "nouislider/dist/nouislider.css";
import { onMount } from "svelte";
import { createEventDispatcher, onMount } from "svelte";
export let minValue = 0;
export let maxValue = 100;
@@ -10,6 +10,8 @@
let sliderContainer: any;
const dispatch = createEventDispatcher();
onMount(() => {
const updateValues = (values: string[]) => {
currentValue = parseFloat(values[0]);
@@ -25,6 +27,10 @@
});
sliderContainer.noUiSlider.on("update", updateValues);
sliderContainer.noUiSlider.on("set", () => {
dispatch("set", currentValue);
});
});
</script>

16
web/src/lib/components/trail/trail_card.svelte
View File

@@ -1,5 +1,7 @@
<script lang="ts">
import { goto } from "$app/navigation";
import type { Trail } from "$lib/models/trail";
import { trails_delete, trails_index } from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
import Dropdown from "../base/dropdown.svelte";
@@ -11,6 +13,18 @@
{ text: "Edit", value: "edit" },
{ text: "Delete", value: "delete" },
];
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();
}
}
</script>
<div class="trail-card rounded-2xl shadow-md sm:w-72 cursor-pointer">
@@ -22,7 +36,7 @@
<div class="flex justify-between items-center">
<h4 class="font-semibold text-lg">{trail.name}</h4>
{#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
<Dropdown on:change items={dropdownItems}></Dropdown>
<Dropdown on:change={(e) => handleDropdownClick(trail, e.detail)} items={dropdownItems}></Dropdown>
{/if}
</div>
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>

74
web/src/lib/components/trail/trail_list_item.svelte Normal file
View File

@@ -0,0 +1,74 @@
<script lang="ts">
import { goto } from "$app/navigation";
import type { Trail } from "$lib/models/trail";
import { trails_delete, trails_index } from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
import Dropdown from "../base/dropdown.svelte";
export let trail: Trail;
const dropdownItems = [
{ text: "Edit", value: "edit" },
{ text: "Delete", value: "delete" },
];
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();
}
}
</script>
<li
class="flex gap-8 p-4 rounded-xl shadow-md cursor-pointer hover:bg-gray-100 transition-colors"
>
<div class="shrink-0">
<img
class="h-28 w-28 object-cover rounded-xl"
src={trail.thumbnail}
alt=""
/>
</div>
<div class="min-w-0">
<div class="flex items-center justify-between">
<h4 class="font-semibold text-lg">{trail.name}</h4>
{#if $currentUser && $currentUser.id == trail.author}
<Dropdown
on:change={(e) => handleDropdownClick(trail, e.detail)}
items={dropdownItems}
></Dropdown>
{/if}
</div>
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
<div class="flex mt-2 gap-4 text-sm text-gray-500">
<span
><i class="fa fa-left-right mr-2"></i>{formatMeters(
trail.distance,
)}</span
>
<span
><i class="fa fa-up-down mr-2"></i>{formatMeters(
trail.elevation_gain,
)}</span
>
<span
><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
trail.duration,
)}</span
>
</div>
<p
class="mt-3 text-sm whitespace-nowrap min-w-0 max-w-full overflow-hidden text-ellipsis"
>
{trail.description}
</p>
</div>
</li>

7
web/src/lib/models/trail.ts
View File

@@ -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 };

44
web/src/lib/stores/trail_store.ts
View File

@@ -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<Trail> = writable(new Trail(""));
export const editTrail: Writable<Trail> = writable(new Trail(""));
export async function trails_index() {
const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
const response: Trail[] = (await pb.collection('trails').getList<Trail>(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<Trail>(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<Trail>(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,

2
web/src/lib/util/format_util.ts
View File

@@ -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`
}

18
web/src/routes/+page.svelte
View File

@@ -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 @@
<TrailCard
{trail}
mode="edit"
on:change={(e) => handleDropdownClick(trail, e.detail)}
></TrailCard></a
>
{/each}

172
web/src/routes/trails/+page.svelte
View File

@@ -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,13 +110,15 @@
filter.completed = undefined;
break;
}
searchTrails();
}
async function searchCities(q: string) {
if (q.length == 0) {
filter.near.lat = undefined;
filter.near.lon = undefined;
console.log(filter.near);
searchTrails();
return;
}
@@ -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);
}
</script>
<main class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto">
<main
class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto"
>
<div class="trail-filters p-8 border rounded-xl">
<TextField placeholder="Search..."></TextField>
<Search
bind:value={filter.q}
on:update={searchTrails}
placeholder="Search trails..."
></Search>
<hr class="my-4" />
<p class="text-sm font-medium pb-4">Category</p>
{#each $categories as category}
{#each $categories as category, i}
<div class="flex items-center mb-4">
<input
id="{category.name}-checkbox"
type="checkbox"
value=""
value={category.id}
class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
on:change={() => setCategoryFilter(category)}
/>
<label
for="{category.name}-checkbox"
@@ -110,23 +193,29 @@
<div class="mb-8">
<Search
items={searchDropdownItems}
placeholder="Search cities..."
bind:value={citySearchQuery}
on:update={(e) => searchCities(e.detail)}
on:click={(e) => handleSearchClick(e.detail)}
></Search>
</div>
<Slider maxValue={10000} bind:currentValue={filter.near.distance}
<Slider
maxValue={10000}
bind:currentValue={filter.near.radius}
on:set={() => searchTrails()}
></Slider>
<p>
<span class="text-gray-500 text-sm">Radius:</span>
{formatMeters(filter.near.distance)}
{formatMeters(filter.near.radius)}
</p>
<hr class="my-4" />
<p class="text-sm font-medium pb-4">Distance</p>
<DoubleSlider
minValue={minDistance}
maxValue={maxDistance}
bind:currentMin={filter.distanceMin}
bind:currentMax={filter.distanceMax}
on:set={() => searchTrails()}
></DoubleSlider>
<div class="flex justify-between">
<span>{formatMeters(filter.distanceMin)}</span>
@@ -135,9 +224,11 @@
<hr class="my-4" />
<p class="text-sm font-medium pb-4">Elevation Gain</p>
<DoubleSlider
minValue={minElevationGain}
maxValue={maxElevationGain}
bind:currentMin={filter.eleavationGainMin}
bind:currentMax={filter.elevationGainMax}
on:set={() => searchTrails()}
></DoubleSlider>
<div class="flex justify-between">
<span>{formatMeters(filter.eleavationGainMin)}</span>
@@ -152,11 +243,54 @@
on:change={(e) => setCompletedFilter(e.detail)}
></RadioGroup>
</div>
<div id="trails" class="flex items-start flex-wrap gap-8 py-8">
{#each $trails as trail}
<a href="/trail/view/{trail.id}">
<TrailCard {trail}></TrailCard></a
<div class="min-w-0">
<div class="flex items-start gap-8 justify-end">
<div>
<p class="text-sm text-gray-500 pb-2">Sort</p>
<div class="flex items-center gap-2">
<Select
bind:value={filter.sort}
items={sortOptions}
on:change={setSort}
></Select>
<button
id="sort-order-btn"
class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200"
on:click={() => setSortOrder()}
><i class="fa fa-arrow-up"></i></button
>
</div>
</div>
<div>
<p class="text-sm text-gray-500 pb-2">Display as</p>
<Select
bind:value={selectedDisplayOption}
items={displayOptions}
on:change={() => setDisplayOption()}
></Select>
</div>
</div>
<div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
{#each $trails as trail}
<a class="max-w-full" href="/trail/view/{trail.id}">
{#if selectedDisplayOption === "cards"}
<TrailCard {trail} mode="edit"></TrailCard>
{:else}
<TrailListItem {trail}></TrailListItem>
{/if}
</a>
{/each}
</div>
</div>
</main>
<style>
#sort-order-btn {
transition: transform 0.5s ease;
}
:global(.rotated) {
transform: rotate(180deg);
}
</style>