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