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

adds trail author filter

Browse Source
This commit is contained in:
Christian Beutel
2024-11-15 23:57:09 +01:00
parent 24ef5998c0
commit f260b63d43
27 changed files with 345 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -39,7 +39,7 @@
</label>
{/if}
<button
class="min-w-44 flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
class="min-w-44 w-full flex flex-wrap items-center gap-2 border border-input-border bg-input-background min-h-[50px] p-3 rounded-md transition-colors focus:border-input-border-focus focus:outline-none focus:ring-0"
on:click={() => (showDropdown = !showDropdown)}
>
{#if value.length === 0}

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

@@ -18,6 +18,8 @@
export let placeholder: string = "Search...";
export let large: boolean = false;
export let extraClasses: string = "";
export let label: string = "";
export let clearAfterSelect: boolean = true;
const dispatch = createEventDispatcher();
@@ -46,23 +48,32 @@
function handleItemClick(item: SearchItem) {
searching = false;
dispatch("click", item);
clear();
if (clearAfterSelect) {
clear();
}
}
function clear() {
value = "";
items = [];
update(value);
}
</script>
<div class="relative {extraClasses}">
<span class="absolute top-1/2 -translate-y-1/2 left-0 pl-4">
<span
class="absolute {large
? 'bottom-[31px]'
: 'bottom-[25px]'} translate-y-1/2 left-0 pl-4"
>
<i class="fa fa-search" class:text-xl={large}></i>
</span>
{#if value.length > 0}
<button
type="button"
class="btn-icon absolute top-1/2 -translate-y-1/2 right-0 mr-2"
class="btn-icon absolute {large
? 'bottom-[31px]'
: 'bottom-[25px]'} translate-y-1/2 right-0 mr-2"
on:click={clear}
in:fade={{ duration: 150 }}
out:fade={{ duration: 150 }}
@@ -74,6 +85,7 @@
type="search"
name="q"
autocomplete="off"
{label}
extraClasses={large
? "px-12 py-4 text-xl min-w-80 w-[33vw] max-w-[532px] rounded-xl"
: "px-10"}

48
web/src/lib/components/list/list_share_modal.svelte
View File

@@ -5,11 +5,11 @@
import { TrailShare } from "$lib/models/trail_share";
import type { User } from "$lib/models/user";
import {
list_share_create,
list_share_create,
list_share_delete,
list_share_index,
list_share_update,
shares
shares,
} from "$lib/stores/list_share_store";
import { lists } from "$lib/stores/list_store";
import { show_toast } from "$lib/stores/toast_store";
@@ -26,6 +26,7 @@
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";
let openModal: (() => void) | undefined = undefined;
export let closeModal: (() => void) | undefined = undefined;
@@ -43,8 +44,6 @@
let copyButtonText = $_("copy-link");
let searchItems: SearchItem[] = [];
let sharesLoading: boolean = false;
const permissionSelectItems: SelectItem[] = [
@@ -52,33 +51,16 @@
{ text: $_("edit"), value: "edit" },
];
async function updateUsers(q: string) {
try {
const users: User[] = await users_search(q);
searchItems = users.map((u) => ({
text: u.username!,
value: u,
icon: "user",
}));
} catch (e) {
console.error(e);
show_toast({
type: "error",
icon: "close",
text: "Error during search",
});
}
}
function copyURLToClipboard() {
navigator.clipboard.writeText(window.location.href.split('?')[0] + '?list=' + list.id);
navigator.clipboard.writeText(
window.location.href.split("?")[0] + "?list=" + list.id,
);
copyButtonText = $_("link-copied");
setTimeout(() => (copyButtonText = $_("copy-link")), 3000);
}
function close() {
searchItems = [];
dispatch("save");
closeModal!();
}
@@ -134,7 +116,7 @@
trails: list.expand?.trails ?? [],
list_share_via_list: fetchedShares,
};
lists.set($lists)
lists.set($lists);
sharesLoading = false;
}
</script>
@@ -150,21 +132,7 @@
<p class="p-4 bg-amber-100 rounded-xl mb-4 text-sm text-gray-500">
{$_("list-share-warning")}
</p>
<Search
on:update={(e) => updateUsers(e.detail)}
on:click={(e) => shareList(e.detail)}
placeholder={`${$_("username")}`}
items={searchItems}
>
<img
slot="item-header"
let:item
class="rounded-full w-8 aspect-square mr-2"
src={getFileURL(item.value, item.value.avatar) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${item.value.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
</Search>
<UserSearch includeSelf={false} on:click={(e) => shareList(e.detail)}></UserSearch>
<h4 class="font-semibold mt-4">{$_("shared-with")}</h4>
{#if $shares.length == 0}

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

@@ -8,6 +8,7 @@
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
import { pb } from "$lib/pocketbase";
export let trail: Trail;
@@ -27,15 +28,15 @@
<div
class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl"
>
<img src={thumbnail} alt="" />
<img id="header-img" src={thumbnail} alt="" />
</div>
{#if trail.public || trailIsShared}
{#if (trail.public || trailIsShared) && pb.authStore.model}
<div
class="flex absolute top-4 right-4 {trail.public && trailIsShared
? 'w-14'
: 'w-8'} h-8 rounded-full items-center justify-center bg-background text-content"
>
{#if trail.public}
{#if trail.public && pb.authStore.model}
<span
class="tooltip"
class:mr-2={trail.public && trailIsShared}
@@ -62,6 +63,20 @@
})}
</p>
{/if}
{#if trail.expand.author}
<p class="text-xs text-gray-500 mb-3">
{$_("by")} <img
class="rounded-full w-5 aspect-square mx-1 inline"
src={getFileURL(
trail.expand.author,
trail.expand.author.avatar,
) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${trail.expand.author.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
{trail.expand.author.username}
</p>
{/if}
<div class="flex gap-x-4">
{#if trail.location}
<h5>
@@ -75,7 +90,9 @@
</h5>
</div>
</div>
<div class="grid grid-cols-2 mt-2 gap-1 text-sm text-gray-500 whitespace-nowrap">
<div
class="grid grid-cols-2 mt-2 gap-1 text-sm text-gray-500 whitespace-nowrap"
>
<span
><i class="fa fa-left-right mr-2"></i>{formatDistance(
trail.distance,
@@ -101,12 +118,12 @@
</div>
<style>
.trail-card img {
.trail-card #header-img {
object-fit: cover;
transition: 0.25s ease;
}
.trail-card:hover img {
.trail-card:hover #header-img {
scale: 1.075;
}
</style>

120
web/src/lib/components/trail/trail_filter_panel.svelte
View File

@@ -6,13 +6,16 @@
import { createEventDispatcher } from "svelte";
import { _ } from "svelte-i18n";
import { slide } from "svelte/transition";
import Datepicker from "../base/datepicker.svelte";
import DoubleSlider from "../base/double_slider.svelte";
import MultiSelect from "../base/multi_select.svelte";
import type { RadioItem } from "../base/radio_group.svelte";
import RadioGroup from "../base/radio_group.svelte";
import Search, { type SearchItem } from "../base/search.svelte";
import type { SelectItem } from "../base/select.svelte";
import Slider from "../base/slider.svelte";
import Datepicker from "../base/datepicker.svelte";
import UserSearch from "../user_search.svelte";
import { pb } from "$lib/pocketbase";
export let categories: Category[];
export let filterExpanded: boolean = true;
@@ -20,6 +23,11 @@
export let showTrailSearch: boolean = true;
export let showCitySearch: boolean = true;
$: categorySelectItems = categories.map((c) => ({
value: c.id,
text: c.name,
}));
const dispatch = createEventDispatcher();
const radioGroupItems: RadioItem[] = [
@@ -42,31 +50,29 @@
dispatch("update", 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);
}
function setCategoryFilter(categories: SelectItem[]) {
filter.category = categories.map((c) => c.value);
update();
}
function setDifficultyFilter(
difficulty: "easy" | "moderate" | "difficult",
) {
const difficultyIndex = filter.difficulty.findIndex(
(d) => d == difficulty,
);
if (difficultyIndex !== -1) {
filter.difficulty.splice(difficultyIndex, 1);
} else {
filter.difficulty.push(difficulty);
}
function setAuthorFilter(item: SearchItem) {
filter.author = item.value.id;
update();
}
function setDifficultyFilter(difficulties: SelectItem[]) {
filter.difficulty = difficulties.map((d) => d.value);
update();
}
function setPublicFilter(e: Event) {
filter.public = (e.target as HTMLInputElement).checked;
update();
}
function setSharedFilter(e: Event) {
filter.shared = (e.target as HTMLInputElement).checked;
update();
}
@@ -145,47 +151,63 @@
{#if showTrailSearch}
<hr class="my-4 border-separator" />
{/if}
<p class="text-sm font-medium pb-4">{$_("category")}</p>
{#each categories as category, i}
<div class="flex items-center mb-4">
<input
id="{category.name}-checkbox"
type="checkbox"
checked={filter.category.includes(category.id)}
value={category.id}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
on:change={() => setCategoryFilter(category)}
/>
<label for="{category.name}-checkbox" class="ms-2 text-sm"
>{$_(category.name)}</label
>
</div>
{/each}
<MultiSelect
on:change={(e) => setCategoryFilter(e.detail)}
label={$_("categories")}
items={categorySelectItems}
placeholder={`${$_("filter-categories")}...`}
></MultiSelect>
<hr class="my-4 border-separator" />
<p class="text-sm font-medium pb-4">{$_("difficulty")}</p>
{#each difficultyItems as difficulty, i}
<div class="flex items-center mb-4">
{#if pb.authStore.model}
<UserSearch
on:click={(e) => setAuthorFilter(e.detail)}
on:clear={() => {
filter.author = "";
update();
}}
clearAfterSelect={false}
label={$_("author")}
></UserSearch>
<div class="flex items-center my-4">
<input
id="{difficulty.value}-checkbox"
id="public-checkbox"
type="checkbox"
checked={filter.difficulty.includes(difficulty.value)}
value={difficulty.value}
checked={filter.public}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
on:change={() => setDifficultyFilter(difficulty.value)}
on:change={setPublicFilter}
/>
<label
for="{difficulty.value}-checkbox"
class="ms-2 text-sm">{difficulty.text}</label
<label for="public-checkbox" class="ms-2 text-sm"
>{$_("public")}</label
>
</div>
{/each}
<div class="flex items-center my-4">
<input
id="shared-checkbox"
type="checkbox"
checked={filter.shared}
class="w-4 h-4 bg-input-background accent-primary border-input-border focus:ring-input-ring focus:ring-2"
on:change={setSharedFilter}
/>
<label for="shared-checkbox" class="ms-2 text-sm"
>{$_("shared")}</label
>
</div>
<hr class="my-4 border-separator" />
{/if}
<MultiSelect
on:change={(e) => setDifficultyFilter(e.detail)}
label={$_("difficulty")}
items={difficultyItems}
placeholder={`${$_("filter-difficulty")}...`}
></MultiSelect>
<hr class="my-4 border-separator" />
{#if showCitySearch}
<p class="text-sm font-medium pb-4">{$_("near")}</p>
<div class="mb-8">
<Search
items={searchDropdownItems}
label={$_("near")}
placeholder="{$_('search-cities')}..."
clearAfterSelect={false}
bind:value={citySearchQuery}
on:update={(e) => searchCities(e.detail)}
on:click={(e) => handleSearchClick(e.detail)}

20
web/src/lib/components/trail/trail_info_panel.svelte
View File

@@ -38,6 +38,7 @@
import PhotoGallery from "../photo_gallery.svelte";
import ShareInfo from "../share_info.svelte";
import SummitLogTable from "../summit_log/summit_log_table.svelte";
import { pb } from "$lib/pocketbase";
export let trail: Trail;
export let mode: "overview" | "map" | "list" = "map";
@@ -184,14 +185,14 @@
<div
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
></div>
{#if trail.public || trailIsShared}
{#if (trail.public || trailIsShared) && pb.authStore.model}
<div
class="flex absolute top-8 right-6 {trail.public &&
trailIsShared
? 'w-16'
: 'w-8'} h-8 rounded-full items-center justify-center bg-white text-primary"
>
{#if trail.public}
{#if trail.public && pb.authStore.model}
<span
class="tooltip text-2xl"
class:mr-3={trail.public && trailIsShared}
@@ -226,6 +227,21 @@
)}
</h5>
{/if}
{#if trail.expand.author}
<p class="my-3">
{$_("by")}
<img
class="rounded-full w-8 aspect-square mx-1 inline"
src={getFileURL(
trail.expand.author,
trail.expand.author.avatar,
) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${trail.expand.author.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
{trail.expand.author.username}
</p>
{/if}
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
{#if trail.location}
<h3 class="text-lg">

18
web/src/lib/components/trail/trail_list_item.svelte
View File

@@ -8,6 +8,7 @@
} from "$lib/util/format_util";
import { _ } from "svelte-i18n";
import ShareInfo from "../share_info.svelte";
import { pb } from "$lib/pocketbase";
export let trail: Trail;
@@ -29,7 +30,7 @@
<h4 class="font-semibold text-lg">
{trail.name}
</h4>
{#if trail.public}
{#if trail.public && pb.authStore.model}
<span class="tooltip ml-3" data-title={$_("public")}>
<i class="fa fa-globe"></i>
</span>
@@ -48,6 +49,21 @@
})}
</p>
{/if}
{#if trail.expand.author}
<p class="text-xs text-gray-500 mb-3">
{$_("by")}
<img
class="rounded-full w-5 aspect-square mx-1 inline"
src={getFileURL(
trail.expand.author,
trail.expand.author.avatar,
) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${trail.expand.author.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
{trail.expand.author.username}
</p>
{/if}
<div class="flex flex-wrap gap-x-8">
{#if trail.location}
<h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>

65
web/src/lib/components/trail/trail_share_modal.svelte
View File

@@ -19,6 +19,7 @@
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";
let openModal: (() => void) | undefined = undefined;
export let closeModal: (() => void) | undefined = undefined;
@@ -35,8 +36,6 @@
let copyButtonText = $_("copy-link");
let searchItems: SearchItem[] = [];
let sharesLoading: boolean = false;
const permissionSelectItems: SelectItem[] = [
@@ -44,24 +43,6 @@
{ text: $_("edit"), value: "edit" },
];
async function updateUsers(q: string) {
try {
const users: User[] = await users_search(q);
searchItems = users.map((u) => ({
text: u.username!,
value: u,
icon: "user",
}));
} catch (e) {
console.error(e);
show_toast({
type: "error",
icon: "close",
text: "Error during search",
});
}
}
function copyURLToClipboard() {
navigator.clipboard.writeText(window.location.href);
@@ -70,7 +51,6 @@
}
function close() {
searchItems = [];
dispatch("save");
closeModal!();
}
@@ -81,7 +61,10 @@
fetchShares();
}
async function updateSharePermission(share:TrailShare, permission: "view"| "edit" ) {
async function updateSharePermission(
share: TrailShare,
permission: "view" | "edit",
) {
share.permission = permission;
await trail_share_update(share);
}
@@ -93,39 +76,26 @@
async function fetchShares() {
sharesLoading = true;
await trail_share_index({trail: trail.id!});
await trail_share_index({ trail: trail.id! });
sharesLoading = false;
}
</script>
<Modal
id="share-modal"
title={$_('share-this-trail')}
title={$_("share-this-trail")}
size="max-w-sm overflow-visible"
bind:openModal
bind:closeModal
>
<div slot="content">
<Search
on:update={(e) => updateUsers(e.detail)}
on:click={(e) => shareTrail(e.detail)}
placeholder={`${$_("username")}`}
items={searchItems}
>
<img
slot="item-header"
let:item
class="rounded-full w-8 aspect-square mr-2"
src={getFileURL(item.value, item.value.avatar) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${item.value.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
</Search>
<h4 class="font-semibold mt-4">{$_('shared-with')}</h4>
<UserSearch includeSelf={false} on:click={(e) => shareTrail(e.detail)}
></UserSearch>
<h4 class="font-semibold mt-4">{$_("shared-with")}</h4>
{#if $shares.length == 0}
<p class="text-gray-500 text-center mt-2 text-sm">
{$_('trail-not-shared')}
{$_("trail-not-shared")}
</p>
{:else}
{#each $shares as share}
@@ -141,17 +111,22 @@
alt="avatar"
/>
<p>{share.expand.user.username}</p>
<span class="basis-full text-sm text-center text-gray-500">{$_('can')}</span>
<span
class="basis-full text-sm text-center text-gray-500"
>{$_("can")}</span
>
<div class="shrink-0">
<Select
bind:value={share.permission}
items={permissionSelectItems}
on:change={(e) => updateSharePermission(share, e.detail)}
on:change={(e) =>
updateSharePermission(share, e.detail)}
></Select>
</div>
<button class="btn-icon text-red-500"
on:click={() => deleteShare(share)}
<button
class="btn-icon text-red-500"
on:click={() => deleteShare(share)}
><i class="fa fa-trash"></i></button
>
</div>

67
web/src/lib/components/user_search.svelte Normal file
View File

@@ -0,0 +1,67 @@
<script lang="ts">
import type { User } from "$lib/models/user";
import { show_toast } from "$lib/stores/toast_store";
import { users_search } from "$lib/stores/user_store";
import { getFileURL } from "$lib/util/file_util";
import { createEventDispatcher, tick } from "svelte";
import Search, { type SearchItem } from "./base/search.svelte";
import { _ } from "svelte-i18n";
export let label: string = "";
export let value: string = "";
export let includeSelf: boolean = true;
export let clearAfterSelect: boolean = true;
let searchItems: SearchItem[] = [];
const dispatch = createEventDispatcher();
async function updateUsers(q: string) {
if (!q.length) {
searchItems = [];
dispatch("clear");
return;
}
try {
const users: User[] = await users_search(q, includeSelf);
searchItems = users.map((u) => ({
text: u.username!,
value: u,
icon: "user",
}));
} catch (e) {
console.error(e);
show_toast({
type: "error",
icon: "close",
text: "Error during search",
});
}
}
function onClick(e: CustomEvent<SearchItem>) {
value = e.detail.value.username ?? value;
dispatch("click", e.detail);
searchItems = [];
}
</script>
<Search
on:update={(e) => updateUsers(e.detail)}
on:click={(e) => onClick(e)}
placeholder={`${$_("username")}...`}
items={searchItems}
{clearAfterSelect}
{label}
bind:value
>
<img
slot="item-header"
let:item
class="rounded-full w-8 aspect-square mr-2"
src={getFileURL(item.value, item.value.avatar) ||
`https://api.dicebear.com/7.x/initials/svg?seed=${item.value.username}&backgroundType=gradientLinear`}
alt="avatar"
/>
</Search>