diff --git a/web/src/lib/components/base/skeleton_card.svelte b/web/src/lib/components/base/skeleton_card.svelte index 81cae29c..aee56e80 100644 --- a/web/src/lib/components/base/skeleton_card.svelte +++ b/web/src/lib/components/base/skeleton_card.svelte @@ -1,5 +1,10 @@ + + + {/if} -
+
{list.name}
{#if list.public} - + {/if} @@ -70,6 +67,21 @@ {/if}
+ {#if list.expand?.author} +

+ {$_("by")} + avatar + {list.expand?.author.username} +

+ {/if}
diff --git a/web/src/lib/components/list/list_panel.svelte b/web/src/lib/components/list/list_panel.svelte index 4c0691b2..7f4bb60e 100644 --- a/web/src/lib/components/list/list_panel.svelte +++ b/web/src/lib/components/list/list_panel.svelte @@ -42,8 +42,12 @@ list.author == $currentUser?.id || list.expand?.list_share_via_list?.some((s) => s.permission == "edit"); + $: allowShare = + list.author == $currentUser?.id && + !list.expand?.trails?.some((t) => t.author !== $currentUser?.id); + $: dropdownItems = [ - ...(list.author == $currentUser?.id + ...(allowShare ? [{ text: $_("share"), value: "share", icon: "share" }] : []), ...(allowEdit @@ -122,7 +126,23 @@

{list.name}

- + {#if list.expand?.author} +

+ {$_("by")} + avatar + {list.expand.author.username} +

+ {/if}
void) | undefined = undefined; export let closeModal: (() => void) | undefined = undefined; @@ -34,7 +35,7 @@
    - {#each $lists as list} + {#each lists as list}
  • handleSelect(list)} diff --git a/web/src/lib/components/list/list_share_modal.svelte b/web/src/lib/components/list/list_share_modal.svelte index 69a41b98..33fe8fde 100644 --- a/web/src/lib/components/list/list_share_modal.svelte +++ b/web/src/lib/components/list/list_share_modal.svelte @@ -3,7 +3,6 @@ import type { List } from "$lib/models/list"; import { ListShare } from "$lib/models/list_share"; import { TrailShare } from "$lib/models/trail_share"; - import type { User } from "$lib/models/user"; import { list_share_create, list_share_delete, @@ -11,19 +10,15 @@ list_share_update, shares, } from "$lib/stores/list_share_store"; - import { lists } from "$lib/stores/list_store"; - import { show_toast } from "$lib/stores/toast_store"; import { trail_share_create, trail_share_delete, trail_share_index, } from "$lib/stores/trail_share_store"; - import { users_search } from "$lib/stores/user_store"; import { getFileURL } from "$lib/util/file_util"; import { createEventDispatcher } from "svelte"; import { _ } from "svelte-i18n"; import Button from "../base/button.svelte"; - import Search, { type SearchItem } from "../base/search.svelte"; import type { SelectItem } from "../base/select.svelte"; import Select from "../base/select.svelte"; import UserSearch from "../user_search.svelte"; @@ -116,8 +111,8 @@ trails: list.expand?.trails ?? [], list_share_via_list: fetchedShares, }; - lists.set($lists); - sharesLoading = false; + sharesLoading = false; + dispatch("update", list) } diff --git a/web/src/lib/components/share_info.svelte b/web/src/lib/components/share_info.svelte index e967e462..2f8893e4 100644 --- a/web/src/lib/components/share_info.svelte +++ b/web/src/lib/components/share_info.svelte @@ -52,7 +52,7 @@ > {#if showInfo}
      {#if loading} diff --git a/web/src/lib/components/trail/trail_dropdown.svelte b/web/src/lib/components/trail/trail_dropdown.svelte index bd031764..f89093d1 100644 --- a/web/src/lib/components/trail/trail_dropdown.svelte +++ b/web/src/lib/components/trail/trail_dropdown.svelte @@ -30,6 +30,8 @@ let openExportModal: () => void; let openShareModal: () => void; + let lists: List[] = []; + const allowEdit = trail.author == $currentUser?.id || trail.expand.trail_share_via_trail?.some((s) => s.permission == "edit"); @@ -76,6 +78,13 @@ : `/trail/view/${trail.id!}`, ); } else if (item.value == "list") { + lists = ( + await lists_index( + { q: "", author: $currentUser?.id ?? "" }, + 1, + -1, + ) + ).items; openListSelectModal(); } else if (item.value == "direction") { window @@ -175,7 +184,6 @@ text: `${$_("added-trail-to")} "${list.name}"`, }); } - await lists_index(); } catch (e) { console.error(e); @@ -206,6 +214,7 @@ on:confirm={deleteTrail} > handleListSelection(e.detail)} > diff --git a/web/src/lib/models/list.ts b/web/src/lib/models/list.ts index 4d68416a..1fb24e33 100644 --- a/web/src/lib/models/list.ts +++ b/web/src/lib/models/list.ts @@ -1,6 +1,7 @@ import { object, string } from "yup"; import type { Trail } from "./trail"; import type { ListShare } from "./list_share"; +import type { UserAnonymous } from "./user"; export class List { id?: string; @@ -12,6 +13,7 @@ export class List { expand?: { trails?: Trail[] list_share_via_list?: ListShare[] + author?: UserAnonymous; } author?: string; @@ -29,8 +31,11 @@ export class List { export interface ListFilter { q: string, - sort: "name" | "size" | "created"; - sortOrder: "+" | "-" + sort?: "name" | "size" | "created"; + author?: string; + public?: boolean; + shared?: boolean; + sortOrder?: "+" | "-" } export const listSchema = object({ diff --git a/web/src/lib/stores/list_store.ts b/web/src/lib/stores/list_store.ts index 15457ec1..3b4a3e3b 100644 --- a/web/src/lib/stores/list_store.ts +++ b/web/src/lib/stores/list_store.ts @@ -1,18 +1,22 @@ import { List, type ListFilter } from "$lib/models/list"; import type { Trail } from "$lib/models/trail"; import { pb } from "$lib/pocketbase"; -import { getFileURL } from "$lib/util/file_util"; -import { ClientResponseError } from "pocketbase"; -import { writable, type Writable } from "svelte/store"; +import { ClientResponseError, type ListResult } from "pocketbase"; +import { get, writable, type Writable } from "svelte/store"; import { fetchGPX } from "./trail_store"; -export const lists: Writable = writable([]) +let lists: List[] = [] export const list: Writable = writable(null) export const listTrail: Writable = writable(null); -export async function lists_index(filter?: ListFilter, f: (url: RequestInfo | URL, config?: RequestInit) => Promise = fetch) { +export async function lists_index(filter?: ListFilter, page: number = 1, perPage: number = 5, f: (url: RequestInfo | URL, config?: RequestInit) => Promise = fetch) { + const filterText = filter ? buildFilterText(filter) : "" + const r = await f('/api/v1/list?' + new URLSearchParams({ sort: `${filter?.sortOrder ?? "-"}${filter?.sort ?? "name"}`, + "per-page": perPage.toString(), + page: page.toString(), + filter: filterText }), { method: 'GET', }) @@ -21,15 +25,13 @@ export async function lists_index(filter?: ListFilter, f: (url: RequestInfo | UR throw new ClientResponseError(await r.json()) } - const fetchedLists: List[] = await r.json(); + const fetchedLists: ListResult = await r.json(); - lists.set(fetchedLists); + const result = page > 1 ? [...lists, ...fetchedLists.items] : fetchedLists.items - if (fetchedLists.length > 0) { - // list.set(fetchedLists[0]) - } + lists = result; - return fetchedLists; + return { ...fetchedLists, items: result }; } @@ -40,7 +42,7 @@ export async function lists_show(id: string, f: (url: RequestInfo | URL, config? const response = await r.json() for (const trail of response.expand?.trails ?? []) { - const gpxData: string = await fetchGPX(trail); + const gpxData: string = await fetchGPX(trail, f); trail.expand.gpx_data = gpxData; } @@ -49,7 +51,6 @@ export async function lists_show(id: string, f: (url: RequestInfo | URL, config? throw new ClientResponseError(response) } - list.set(response); return response; @@ -85,7 +86,9 @@ export async function lists_create(list: List, avatar?: File) { body: formData, }) - if (!r.ok) { + if (r.ok) { + return await r.json() + } else { throw new ClientResponseError(await r.json()) } } @@ -152,4 +155,28 @@ export async function lists_delete(list: List) { if (!r.ok) { throw new ClientResponseError(await r.json()) } +} + +function buildFilterText(filter: ListFilter): string { + + + let filterText = `(name~"${filter.q}"||description~"${filter.q}")` + + + + if (filter.author?.length) { + filterText += `&&author="${filter.author}"` + } + + if (pb.authStore.model) { + if (filter.public === false && filter.shared === false) { + filterText += `&&author="${pb.authStore.model.id}"` + } else if (filter.public === true && filter.shared === false) { + filterText += `&&(public=true||list_share_via_list.user!="${pb.authStore.model.id}"||author="${pb.authStore.model.id}")` + } else if (filter.public === false && filter.shared === true) { + filterText += `&&(public=false||list_share_via_list.user="${pb.authStore.model.id}"||author="${pb.authStore.model.id}")` + } + } + + return filterText } \ No newline at end of file diff --git a/web/src/routes/api/v1/list/+server.ts b/web/src/routes/api/v1/list/+server.ts index 5e42d72a..baba209c 100644 --- a/web/src/routes/api/v1/list/+server.ts +++ b/web/src/routes/api/v1/list/+server.ts @@ -3,12 +3,35 @@ import { pb } from '$lib/pocketbase'; import { error, json, type RequestEvent } from '@sveltejs/kit'; export async function GET(event: RequestEvent) { + const page = event.url.searchParams.get("page") ?? "0"; + const perPage = event.url.searchParams.get("per-page") ?? "10"; const sort = event.url.searchParams.get('sort') ?? "" + const filter = event.url.searchParams.get("filter") ?? ""; + + const expand = "trails,trails.waypoints,trails.category,list_share_via_list"; + try { - const r: List[] = await pb.collection('lists').getFullList({ - expand: "trails,trails.waypoints,trails.category,list_share_via_list", - sort: sort, - }) + let r; + if (parseInt(perPage) < 0) { + r = { + items: await pb.collection('lists') + .getFullList({ expand: expand, sort: sort, filter: filter }) + } + } else { + r = await pb.collection('lists') + .getList(parseInt(page), parseInt(perPage), { expand: expand, sort: sort ?? "", filter: filter ?? "" }) + } + + for (const t of r.items) { + if (!t.author || !pb.authStore.model) { + continue; + } + if (!t.expand) { + t.expand = {} + } + t.expand!.author = await pb.collection("users_anonymous").getOne(t.author); + } + return json(r) } catch (e: any) { throw error(e.status, e); diff --git a/web/src/routes/lists/+page.svelte b/web/src/routes/lists/+page.svelte index 8210713e..d0c8a3de 100644 --- a/web/src/routes/lists/+page.svelte +++ b/web/src/routes/lists/+page.svelte @@ -2,6 +2,12 @@ import { goto } from "$app/navigation"; import { page } from "$app/stores"; import type { DropdownItem } from "$lib/components/base/dropdown.svelte"; + import Search, { + type SearchItem, + } from "$lib/components/base/search.svelte"; + import type { SelectItem } from "$lib/components/base/select.svelte"; + import Select from "$lib/components/base/select.svelte"; + import SkeletonCard from "$lib/components/base/skeleton_card.svelte"; import ConfirmModal from "$lib/components/confirm_modal.svelte"; import ListCard from "$lib/components/list/list_card.svelte"; import ListPanel from "$lib/components/list/list_panel.svelte"; @@ -9,18 +15,29 @@ import MapWithElevationMaplibre from "$lib/components/trail/map_with_elevation_maplibre.svelte"; import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte"; import TrailList from "$lib/components/trail/trail_list.svelte"; + import UserSearch from "$lib/components/user_search.svelte"; import { List } from "$lib/models/list"; import type { Trail } from "$lib/models/trail"; - import { - lists, - lists_delete, - lists_index - } from "$lib/stores/list_store"; + import { lists_delete, lists_index } from "$lib/stores/list_store"; import { fetchGPX } from "$lib/stores/trail_store"; + import { currentUser } from "$lib/stores/user_store"; import * as M from "maplibre-gl"; - import { onMount, tick } from "svelte"; + import { onMount } from "svelte"; import { _ } from "svelte-i18n"; + import { slide } from "svelte/transition"; + + export let data; + + const sortOptions: SelectItem[] = [ + { text: $_("alphabetical"), value: "name" }, + { text: $_("creation-date"), value: "created" }, + ]; + + let pagination = { + page: data.lists.page, + totalPages: data.lists.totalPages, + }; let openConfirmModal: () => void; let openShareModal: () => void; @@ -30,19 +47,28 @@ let markers: M.Marker[]; let showMap: boolean = true; - let selectedList: List | null = null; + let selectedList: List | null = $page.url.searchParams.get("list") + ? data.lists.items[0] + : null; let selectedTrail: Trail | null = null; let activeTrailIndex: number = -1; + let loading: boolean = false; + let loadingNextPage: boolean = false; + let filterExpanded: boolean = false; + + let loadAllListsOnNextBack = false; + + let userQuery = ""; + onMount(() => { - if ($page.url.searchParams.get("list")) { - const listToFocus = $lists.find( - (l) => l.id == $page.url.searchParams.get("list"), - ); - if (listToFocus) { - setCurrentList(listToFocus); - } + if ($page.url.searchParams.get("list") && selectedList) { + setCurrentList(selectedList); + + // only the requested list has been loaded at this point + // load all lists the next time the user presses the back button + loadAllListsOnNextBack = true; } }); @@ -66,7 +92,7 @@ return; } await lists_delete(selectedList); - await lists_index(); + await updateFilter(); selectedList = null; } @@ -82,9 +108,14 @@ } } selectedList = item; + document.getElementById("list-container")?.scrollTo({ top: 0 }); } async function back() { + if (loadAllListsOnNextBack) { + await updateFilter(); + loadAllListsOnNextBack = false; + } if (selectedTrail) { mapWithElevation.unFocusTrail(selectedTrail); selectedTrail = null; @@ -111,6 +142,80 @@ function unHighlightTrail(trail: Trail) { mapWithElevation.unHighlightTrail(trail.id!); } + + async function onListScroll(e: any) { + const container = e.target as HTMLDivElement; + const scrollTop = container.scrollTop; + const scrollHeight = container.scrollHeight; + const clientHeight = container.clientHeight; + + if ( + scrollTop + clientHeight >= scrollHeight * 0.8 && + pagination.page !== pagination.totalPages && + !loadingNextPage + ) { + loadingNextPage = true; + await loadNextPage(); + loadingNextPage = false; + } + } + + async function loadNextPage() { + pagination.page += 1; + data.lists = await lists_index(data.filter, pagination.page); + } + + async function updateFilter() { + loading = true; + + if (selectedList || selectedTrail) { + selectedList = null; + selectedTrail = null; + map.flyTo({ + animate: true, + zoom: 1, + center: [0, 0], + }); + } + + pagination.page = 0; + data.lists = await lists_index(data.filter, pagination.page); + loading = false; + } + + async function setSort(value: "name" | "created") { + data.filter.sort = value; + await updateFilter(); + } + + async function setSortOrder() { + if (data.filter.sortOrder === "+") { + data.filter.sortOrder = "-"; + } else { + data.filter.sortOrder = "+"; + } + await updateFilter(); + } + + async function setPublicFilter(e: Event) { + data.filter.public = (e.target as HTMLInputElement).checked; + updateFilter(); + } + + async function setAuthorFilter(item: SearchItem) { + data.filter.author = item.value.id; + await updateFilter(); + } + + async function clearAuthorFilter() { + data.filter.author = ""; + await updateFilter(); + } + + async function setSharedFilter(e: Event) { + data.filter.shared = (e.target as HTMLInputElement).checked; + updateFilter(); + } @@ -118,10 +223,10 @@
      - {$_("new-list")} + + -
      + {#if filterExpanded} +
      +

      {$_("sort")}

      +
      + + +
      + {#if $currentUser} +
      + setAuthorFilter(e.detail)} + on:clear={clearAuthorFilter} + bind:value={userQuery} + clearAfterSelect={false} + label={$_("author")} + > +
      + + +
      +
      + + +
      + {/if} +
      + {/if}
      -
      +
      {#if !selectedList} -
      - {#each $lists as item, i} -
      setCurrentList(item)} - role="presentation" - > - -
      - {/each} +
      + {#if loading} + {#each { length: 3 } as _, index} + + {/each} + {:else} + {#each data.lists.items as item, i} +
      setCurrentList(item)} + role="presentation" + > + +
      + {/each} + {/if}
      {:else if selectedList && !selectedTrail}
      -
      +
      {#if selectedList} - { + data.lists.items = data.lists.items; + selectedList = selectedList; + }} > {/if}
      @@ -202,5 +385,9 @@ #trail-map { height: calc(100vh - 124px); } + + #list-container { + height: calc(100vh - 204px); + } } diff --git a/web/src/routes/lists/+page.ts b/web/src/routes/lists/+page.ts index 59ad4453..9a29f45b 100644 --- a/web/src/routes/lists/+page.ts +++ b/web/src/routes/lists/+page.ts @@ -1,6 +1,35 @@ -import { lists_index } from "$lib/stores/list_store"; -import type { Load } from "@sveltejs/kit"; +import type { List, ListFilter } from "$lib/models/list"; +import { lists_index, lists_show } from "$lib/stores/list_store"; +import { error, type Load } from "@sveltejs/kit"; +import { ClientResponseError, type ListResult } from "pocketbase"; export const load: Load = async ({ params, fetch, url }) => { - await lists_index(undefined, fetch); + const filter: ListFilter = { + q: "", + author: "", + shared: true, + public: true, + sort: "created", + sortOrder: "+", + }; + + let lists: ListResult; + if (url.searchParams.get("list")) { + try { + const list = await lists_show(url.searchParams.get("list") ?? "", fetch) + + lists = { items: [list], page: 1, perPage: 1, totalItems: 1, totalPages: 1 } + } catch (e) { + if (e instanceof ClientResponseError && e.status == 404) { + error(404, { + message: 'Not found' + }); + } + throw e + } + } else { + lists = await lists_index(filter, 1, undefined, fetch); + } + + return { lists, filter } }; \ No newline at end of file diff --git a/web/src/routes/lists/edit/[id]/+page.svelte b/web/src/routes/lists/edit/[id]/+page.svelte index 8447403a..926f71f9 100644 --- a/web/src/routes/lists/edit/[id]/+page.svelte +++ b/web/src/routes/lists/edit/[id]/+page.svelte @@ -82,7 +82,8 @@ if ($form.id) { await lists_update($form, avatarFile); } else { - await lists_create($form, avatarFile); + const createdList = await lists_create($form, avatarFile); + $form.id = createdList.id; } show_toast({ type: "success", diff --git a/web/src/routes/map/trail/[id]/+page.ts b/web/src/routes/map/trail/[id]/+page.ts index 9afb63bc..8cab3d75 100644 --- a/web/src/routes/map/trail/[id]/+page.ts +++ b/web/src/routes/map/trail/[id]/+page.ts @@ -14,5 +14,4 @@ export const load: ServerLoad = async ({ params, locals, fetch }) => { } } - await lists_index(undefined, fetch); }; \ No newline at end of file diff --git a/web/src/routes/map/trail/[id]/print/+page.ts b/web/src/routes/map/trail/[id]/print/+page.ts index b7aa33b1..4379e1f7 100644 --- a/web/src/routes/map/trail/[id]/print/+page.ts +++ b/web/src/routes/map/trail/[id]/print/+page.ts @@ -1,4 +1,3 @@ -import { lists_index } from "$lib/stores/list_store"; import { trails_show } from "$lib/stores/trail_store"; import { error, type Load } from "@sveltejs/kit"; import { ClientResponseError } from "pocketbase"; @@ -13,7 +12,6 @@ export const load: Load = async ({ params, fetch }) => { }); } console.log(e); - + } - await lists_index(undefined, fetch); }; \ No newline at end of file diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte index 0416e802..64f16488 100644 --- a/web/src/routes/trail/edit/[id]/+page.svelte +++ b/web/src/routes/trail/edit/[id]/+page.svelte @@ -22,10 +22,9 @@ import { Waypoint } from "$lib/models/waypoint"; import { categories } from "$lib/stores/category_store"; import { - lists, lists_add_trail, lists_index, - lists_remove_trail, + lists_remove_trail } from "$lib/stores/list_store"; import { summitLog } from "$lib/stores/summit_log_store"; import { show_toast } from "$lib/stores/toast_store"; @@ -34,6 +33,7 @@ trails_create, trails_update, } from "$lib/stores/trail_store"; + import { currentUser } from "$lib/stores/user_store.js"; import { anchors, appendToRoute, @@ -53,11 +53,7 @@ } from "$lib/util/format_util"; import { fromFile, - fromFIT, - fromKML, - fromTCX, - gpx2trail, - isFITFile, + gpx2trail } from "$lib/util/gpx_util"; import { @@ -73,7 +69,7 @@ import { scale } from "svelte/transition"; import { array, number, object, string } from "yup"; - export let data: { trail: Trail }; + export let data; let map: M.Map; @@ -455,7 +451,7 @@ } else { await lists_add_trail(list, $form); } - await lists_index(); + await lists_index({ q: "", author: $currentUser?.id ?? "" }, 1, -1); } catch (e) { console.error(e); show_toast({ @@ -844,13 +840,13 @@ on:click={beforeSummitLogModalOpen} >{$_("add-entry")} - {#if $lists.length} + {#if data.lists.items.length}

      {$_("list", { values: { n: 2 } })}

      - {#each $lists as list} + {#each data.lists.items as list} {#if $form.id && list.trails?.includes($form.id)}
      handleListSelection(e.detail)} > diff --git a/web/src/routes/trail/edit/[id]/+page.ts b/web/src/routes/trail/edit/[id]/+page.ts index 458cf2c8..ab518b65 100644 --- a/web/src/routes/trail/edit/[id]/+page.ts +++ b/web/src/routes/trail/edit/[id]/+page.ts @@ -1,15 +1,16 @@ import { Trail } from "$lib/models/trail"; +import { pb } from "$lib/pocketbase"; import { categories_index } from "$lib/stores/category_store"; import { lists_index } from "$lib/stores/list_store"; import { trails_show } from "$lib/stores/trail_store"; import { error, type Load } from "@sveltejs/kit"; -export const load: Load = async ({ params, fetch, data }) => { +export const load: Load = async ({ params, fetch }) => { if (!params.id) { return error(400, "Bad Request") } const categories = await categories_index(fetch) - const lists = await lists_index(undefined, fetch) + const lists = await lists_index({ q: "", author: pb.authStore.model?.id ?? "" }, 1, -1, fetch) let trail: Trail; if (params.id === "new") { @@ -18,5 +19,5 @@ export const load: Load = async ({ params, fetch, data }) => { trail = await trails_show(params.id, true, fetch); } - return { trail: trail } + return { trail: trail, lists: lists } }; \ No newline at end of file diff --git a/web/src/routes/trail/view/[id]/+page.svelte b/web/src/routes/trail/view/[id]/+page.svelte index b753e4e1..76468b2e 100644 --- a/web/src/routes/trail/view/[id]/+page.svelte +++ b/web/src/routes/trail/view/[id]/+page.svelte @@ -2,9 +2,11 @@ import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte"; import { trail } from "$lib/stores/trail_store"; import { _ } from "svelte-i18n"; + + export let data; - + {$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer { try { - await trails_show(params.id!, true, fetch) + const trail = await trails_show(params.id!, true, fetch) + + return { trail } } catch (e) { if (e instanceof ClientResponseError && e.status == 404) { error(404, { @@ -13,7 +16,6 @@ export const load: Load = async ({ params, fetch }) => { }); } console.log(e); - } - await lists_index(undefined, fetch); + }; \ No newline at end of file