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

adds profile page

Browse Source
This commit is contained in:
Christian Beutel
2024-02-27 22:59:22 +01:00
parent 965e4196ae
commit 0d3683a319
13 changed files with 342 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
let isOpen = false;
function toggleMenu(e: MouseEvent) {
export function toggleMenu(e: MouseEvent) {
e.stopPropagation();
e.preventDefault();
isOpen = !isOpen;
@@ -35,15 +35,16 @@
<svelte:window on:mouseup={() => (isOpen = false)} />
<div class="dropdown relative">
<button
class="btn-icon flex items-center justify-center"
on:click={toggleMenu}
type="button"
>
<slot>
<slot {toggleMenu}>
<button
class="btn-icon flex items-center justify-center"
on:click={toggleMenu}
type="button"
>
<i class="fa fa-ellipsis-vertical text-{size}"></i>
</slot>
</button>
</button>
</slot>
{#if isOpen}
<ul
class="menu absolute bg-menu-background border border-input-border rounded-l-xl rounded-b-xl shadow-md right-0 overflow-hidden mt-2"
@@ -51,13 +52,10 @@
style="z-index: 1001"
>
{#each items as item}
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<li
class="menu-item flex items-center px-4 py-3 cursor-pointer hover:bg-menu-item-background-hover focus:bg-menu-item-background-focus transition-colors"
tabindex="0"
role="presentation"
on:mouseup|stopPropagation={() => handleItemClick(item)}
on:keydown|stopPropagation={() => handleItemClick(item)}
>
{#if item.icon}
<i class="fa fa-{item.icon} mr-3"></i>

3
web/src/lib/components/base/modal.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
export let id: string;
export let title: string;
export let size: string = "2xl";
export function openModal() {
document.body.style.position = "fixed";
document.body.style.width = "100%";
@@ -24,7 +25,7 @@
{id}
tabindex="-1"
aria-hidden="true"
class="relative w-full max-w-2xl max-h-full rounded-xl text-content"
class="relative w-full max-w-{size} max-h-full rounded-xl text-content"
>
<!-- Modal content -->
<div class="relative bg-background shadow">

17
web/src/lib/components/base/toast.svelte
View File

@@ -9,18 +9,19 @@
{#if $toast}
<div
class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center"
class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center max-w-md"
style="z-index: 1001;"
in:fade={{ duration: 250 }}
out:fade={{ duration: 250 }}
>
<span>
<i
class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
class:success-toast={$toast.type == "success"}
class:error-toast={$toast.type == "error"}
></i>{$toast.text}</span
>
<i
class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
class:success-toast={$toast.type == "success"}
class:error-toast={$toast.type == "error"}
></i>
<p class="mr-4">
{$toast.text}
</p>
<button
type="button"
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white ml-6"

16
web/src/lib/components/list/list_card.svelte
View File

@@ -14,11 +14,17 @@
class="flex items-center gap-6 p-4 hover:bg-menu-item-background-hover rounded-xl transition-colors cursor-pointer"
class:bg-menu-item-background-hover={active}
>
<img
class="w-24 aspect-square rounded-full"
src={list.avatar}
alt="avatar"
/>
{#if list.avatar}
<img
class="w-16 md:w-24 aspect-square rounded-full"
src={list.avatar}
alt="avatar"
/>
{:else}
<div class="flex w-16 md:w-24 aspect-square shrink-0 items-center justify-center">
<i class="fa fa-table-list text-5xl"></i>
</div>
{/if}
<div class="basis-full self-start">
<div class="flex justify-between items-center">
<h5 class="text-xl font-semibold">{list.name}</h5>

64
web/src/lib/components/list/list_select_modal.svelte Normal file
View File

@@ -0,0 +1,64 @@
<script lang="ts">
import { createEventDispatcher, onMount } from "svelte";
import { lists, lists_index } from "$lib/stores/list_store";
import Modal from "../base/modal.svelte";
import type { List } from "$lib/models/list";
import { trail } from "$lib/stores/trail_store";
export let openModal: (() => void) | undefined = undefined;
export let closeModal: (() => void) | undefined = undefined;
const dispatch = createEventDispatcher();
function handleSelect(list: List) {
dispatch("change", list);
closeModal!();
}
function listContainsCurrentTrail(list: List) {
return list.trails?.includes($trail.id!);
}
</script>
<Modal
id="list-modal"
title="Select List"
size="md"
let:openModal
bind:openModal
bind:closeModal
>
<slot {openModal} />
<ul slot="content">
{#each $lists as list}
<li
class="flex gap-4 items-center p-4 hover:bg-menu-item-background-hover rounded-xl transition-colors cursor-pointer"
on:click={() => handleSelect(list)}
role="presentation"
>
{#if list.avatar}
<img
class="w-12 aspect-square rounded-full"
src={list.avatar}
alt="avatar"
/>
{:else}
<div
class="flex w-12 aspect-square shrink-0 items-center justify-center"
>
<i class="fa fa-table-list text-5xl"></i>
</div>
{/if}
<h5 class="text-md font-semibold">{list.name}</h5>
<i
class="fa fa-{listContainsCurrentTrail(list)
? 'minus'
: 'plus'} rounded-full border border-input-border p-2"
></i>
</li>
{/each}
</ul>
</Modal>

27
web/src/lib/components/nav_bar.svelte
View File

@@ -78,6 +78,8 @@
if (item.value == "logout") {
logout();
goto("/");
} else if (item.value == "profile") {
goto("/profile");
}
}
</script>
@@ -104,24 +106,25 @@
{/each}
</div>
<hr class="my-6 border-input-border" />
<div class="flex flex-col basis-full gap-y-3">
<div class="flex flex-col basis-full">
<a class="btn-primary btn-large text-center mx-4" href="/trail/edit/new"
><i class="fa fa-plus mr-2"></i>New Trail</a
>
{#if $currentUser}
<div class="basis-full"></div>
<hr class="border-input-border" />
<div class="flex gap-4 items-center mx-4">
<div class="flex gap-4 items-center m-4">
<img
class="rounded-full w-8 aspect-square"
src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
src={$currentUser.avatar ||
`https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
alt=""
/>
<div>
<p class="text-sm">{$currentUser.username}</p>
<p class="text-sm text-gray-500">{$currentUser.email}</p>
</div>
<button class="btn-icon tooltip" data-title="Logout"
<button class="btn-icon"
><i class="fa-solid fa-arrow-right-from-bracket"
></i></button
>
@@ -165,12 +168,18 @@
<Dropdown
items={dropdownItems}
on:change={(e) => handleDropdownClick(e.detail)}
let:toggleMenu={openDropdown}
>
<img
class="rounded-full"
src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
alt=""
/>
<button
class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-10 w-10"
on:click={openDropdown}
>
<img
class="rounded-full"
src="https://api.dicebear.com/7.x/initials/svg?seed={$currentUser.username}&backgroundType=gradientLinear"
alt=""
/>
</button>
</Dropdown>
</div>
{:else}

1
web/src/lib/models/list.ts
View File

@@ -6,6 +6,7 @@ export class List {
name: string;
description?: string;
avatar?: string;
trails?: string[];
expand?: {
trails: Trail[]
}

27
web/src/lib/stores/list_store.ts
View File

@@ -1,4 +1,5 @@
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 { writable, type Writable } from "svelte/store";
@@ -8,10 +9,10 @@ export const list: Writable<List> = writable(new List("", []))
export async function lists_index(filter?: ListFilter) {
const dbResponse: List[] = (await pb.collection('lists').getList<List>(1, 5, {
const dbResponse: List[] = (await pb.collection('lists').getFullList<List>({
expand: "trails",
sort: `${filter?.sortOrder ?? "+"}${filter?.sort ?? "name"}`
})).items
}))
for (const list of dbResponse) {
list.avatar = getFileURL(list, list.avatar);
@@ -19,7 +20,7 @@ export async function lists_index(filter?: ListFilter) {
lists.set(dbResponse);
if(dbResponse.length > 0) {
if (dbResponse.length > 0) {
list.set(dbResponse[0])
}
@@ -38,17 +39,29 @@ export async function lists_create(formData: { [key: string]: any; } | FormData)
.create<List>(formData);
}
export async function lists_update(list:List, formData: { [key: string]: any; } | FormData) {
if((formData.get("avatar") as File).size == 0) {
export async function lists_update(list: List, formData: { [key: string]: any; } | FormData) {
if ((formData.get("avatar") as File).size == 0) {
formData.delete("avatar");
}
let model = await pb
.collection("lists")
.update<List>(list.id! ,formData);
.update<List>(list.id!, formData);
}
export async function lists_delete(list:List) {
export async function lists_delete(list: List) {
let success = await pb
.collection("lists")
.delete(list.id!);
}
export async function lists_add_trail(list: List, trail: Trail) {
let model = await pb
.collection("lists")
.update(list.id!, { "trails+": trail.id });
}
export async function lists_remove_trail(list: List, trail: Trail) {
let model = await pb
.collection("lists")
.update(list.id!, { "trails-": trail.id });
}

30
web/src/routes/lists/+page.svelte
View File

@@ -54,10 +54,11 @@
</script>
<main
class="grid grid-cols-1 md:grid-cols-[400px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto min-h-screen"
class="grid grid-cols-1 md:grid-cols-[400px_1fr] gap-8 max-w-7xl mx-4 md:mx-auto"
style="min-height: calc(100vh - 124px)"
>
<ul
class="list-list max-w-xl mx-2 md:mx-auto mt-8 rounded-xl border border-input-border p-4"
class="list-list max-w-xl mx-2 md:mx-auto mt-8 rounded-xl border border-input-border p-4"
>
<button
class="flex w-full items-center gap-4 hover:bg-menu-item-background-hover transition-colors rounded-xl p-4 cursor-pointer"
@@ -67,17 +68,20 @@
<h5 class="text-xl font-semibold">Create new list</h5>
</button>
<hr class="border-separator my-2" />
{#each $lists as item, i}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<li on:click={() => list.set(item)}>
<ListCard list={item} on:change={(e) => handleDropdownClick(e, item)} active={item.id === $list.id}
></ListCard>
{#if i != $lists.length - 1}
<hr class="border-separator my-2" />
{/if}
</li>
{/each}
<div class="max-h-[512px] md:max-h-none overflow-y-auto">
{#each $lists as item, i}
<li on:click={() => list.set(item)} role="presentation">
<ListCard
list={item}
on:change={(e) => handleDropdownClick(e, item)}
active={item.id === $list.id}
></ListCard>
{#if i != $lists.length - 1}
<hr class="border-separator my-2" />
{/if}
</li>
{/each}
</div>
</ul>
<TrailList
bind:filter

3
web/src/routes/map/+page.svelte
View File

@@ -30,6 +30,7 @@
import { categories } from "$lib/stores/category_store";
import { slide } from "svelte/transition";
import { browser } from "$app/environment";
import { getFileURL } from "$lib/util/file_util";
let L: any;
let map: Map;
@@ -188,7 +189,7 @@
`<a href="/trail/view/${trail.id}">
<li class="flex items-center gap-4 cursor-pointer text-black">
<div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${
trail.thumbnail
getFileURL(trail, trail.thumbnail)
}" alt="">
</div>
<div>

102
web/src/routes/profile/+page.svelte Normal file
View File

@@ -0,0 +1,102 @@
<script lang="ts">
import Search, {
type SearchItem,
} from "$lib/components/base/search.svelte";
import Select, {
type SelectItem,
} from "$lib/components/base/select.svelte";
import TextField from "$lib/components/base/text_field.svelte";
import { ms } from "$lib/meilisearch";
import { currentUser } from "$lib/stores/user_store";
import { country_codes } from "$lib/util/country_code_util";
import RadioGroup, {
type RadioItem,
} from "$lib/components/base/radio_group.svelte";
const languages: SelectItem[] = [
{ text: "English", value: "en" },
{ text: "German", value: "de" },
];
const units: RadioItem[] = [
{ text: "Metric", value: "metric" },
{ text: "Imperial", value: "imperial" },
];
let selectedLanguage = "en";
let searchDropdownItems: SearchItem[] = [];
let citySearchQuery: string = "";
async function searchCities(q: string) {
const result = await ms.index("cities500").search(q, { limit: 5 });
searchDropdownItems = result.hits.map((h) => ({
text: h.name,
description:
country_codes[h["country code"] as keyof typeof country_codes],
value: h,
icon: "city",
}));
}
async function handleSearchClick(item: SearchItem) {}
</script>
<main
class="grid grid-cols-1 md:grid-cols-[356px_1fr] max-w-4xl mx-4 md:mx-auto gap-x-8 items-start"
>
{#if $currentUser}
<div
class="flex flex-col items-center rounded-xl border border-input-border p-4"
>
<img
class="rounded-full w-32 aspect-square"
src={$currentUser.avatar ||
`https://api.dicebear.com/7.x/initials/svg?seed=${$currentUser.username}&backgroundType=gradientLinear`}
alt=""
/>
<h3 class="text-2xl mt-4 font-semibold">{$currentUser.username}</h3>
<h5 class="font-medium">{$currentUser.email}</h5>
</div>
<div class="space-y-6 rounded-xl p-4">
<h3 class="text-2xl font-semibold">Settings</h3>
<div>
<h5 class="font-medium mb-1">Default Location</h5>
<Search
items={searchDropdownItems}
placeholder="Search cities..."
bind:value={citySearchQuery}
on:update={(e) => searchCities(e.detail)}
on:click={(e) => handleSearchClick(e.detail)}
></Search>
</div>
<div>
<h5 class="font-medium mb-1">Language</h5>
<Select items={languages} bind:value={selectedLanguage}
></Select>
</div>
<div>
<h5 class="font-medium mb-1">Units</h5>
<RadioGroup
name="unit"
items={units}
selected={0}
on:change={() => {}}
></RadioGroup>
</div>
<div class="space-y-2">
<h5 class="font-medium mb-1">Set new password</h5>
<TextField placeholder="New password" label="" type="password"
></TextField>
<TextField placeholder="Repeat password" type="password"
></TextField>
</div>
<hr class="border-input-border" />
<div class="space-y-4">
<h4 class="text-xl text-red-400">Danger zone</h4>
<button class="btn-danger">Delete Account</button>
</div>
</div>
{/if}
</main>

95
web/src/routes/trail/view/[id]/+page.svelte
View File

@@ -1,12 +1,22 @@
<script lang="ts">
import { goto } from "$app/navigation";
import Dropdown from "$lib/components/base/dropdown.svelte";
import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
import ConfirmModal from "$lib/components/confirm_modal.svelte";
import ListSelectModal from "$lib/components/list/list_select_modal.svelte";
import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
import Tabs from "$lib/components/tabs.svelte";
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
import type { List } from "$lib/models/list";
import {
lists_add_trail,
lists_index,
lists_remove_trail,
} from "$lib/stores/list_store";
import { show_toast } from "$lib/stores/toast_store";
import { trail, trails_delete } from "$lib/stores/trail_store";
import { currentUser } from "$lib/stores/user_store";
import { getFileURL } from "$lib/util/file_util";
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
import type { Icon, Map, Marker } from "leaflet";
@@ -29,11 +39,15 @@
let lightboxDataSource: DataSource;
let openConfirmModal: () => void;
let openListSelectModal: () => void;
let mapFullScreen: boolean = false;
const dropdownItems: DropdownItem[] = [
{ text: "Show on map", value: "map", icon: "map" },
{ text: "Directions", value: "direction", icon: "car" },
...($trail.gpx ? [{ text: "Download GPX", value: "download", icon: "download" }] : []),
{ text: "Add to list", value: "list", icon: "bookmark" },
{ text: "Edit", value: "edit", icon: "pen" },
{ text: "Delete", value: "delete", icon: "trash" },
];
@@ -129,6 +143,18 @@
async function handleDropdownClick(item: { text: string; value: any }) {
if (item.value == "map") {
goto(`/map/?lat=${$trail.lat}&lon=${$trail.lon}`);
} else if (item.value == "list") {
openListSelectModal();
} else if (item.value == "direction") {
window
.open(
`https://www.google.com/maps/dir/Current+Location/${$trail.lat},${$trail.lon}`,
"_blank",
)
?.focus();
} else if (item.value == "download") {
downloadURI(getFileURL($trail, $trail.gpx), $trail.gpx!);
} else if (item.value == "edit") {
goto(`/trail/edit/${$trail.id}`);
} else if (item.value == "delete") {
@@ -136,6 +162,15 @@
}
}
function downloadURI(uri: string, name: string) {
var link = document.createElement("a");
link.setAttribute("download", name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
}
async function deleteTrail() {
trails_delete($trail).then(() => history.back());
}
@@ -145,13 +180,46 @@
await tick();
map.invalidateSize();
}
async function handleListSelection(list: List) {
try {
if (list.trails?.includes($trail.id!)) {
await lists_remove_trail(list, $trail);
show_toast({
type: "success",
icon: "check",
text: `Removed trail from "${list.name}"`,
});
} else {
await lists_add_trail(list, $trail);
show_toast({
type: "success",
icon: "check",
text: `Added trail to "${list.name}"`,
});
}
await lists_index();
} catch (e) {
console.error(e);
show_toast({
type: "error",
icon: "close",
text: "Error adding trail to list.",
});
}
}
</script>
<div
class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
>
<section class="relative h-80">
<img class="w-full h-80" src={$trail.thumbnail} alt="" />
<img
class="w-full h-80"
src={getFileURL($trail, $trail.thumbnail)}
alt=""
/>
<div
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
></div>
@@ -168,18 +236,17 @@
</h3>
</div>
{#if $currentUser && $currentUser.id == $trail.author}
<div
class="px-4 py-2 bg-menu-background rounded-full space-x-2"
<Dropdown
items={dropdownItems}
on:change={(e) => handleDropdownClick(e.detail)}
let:toggleMenu={openDropdown}
><button
class="rounded-full bg-white text-black hover:bg-gray-200 focus:ring-4 ring-gray-100/50 transition-colors h-12 w-12"
on:click={openDropdown}
>
<i class="fa fa-ellipsis-vertical"></i>
</button></Dropdown
>
{#each dropdownItems as item}
<button
data-title={item.text}
class="tooltip btn-icon"
on:click={() => handleDropdownClick(item)}
><i class="fa fa-{item.icon}"></i></button
>
{/each}
</div>
{/if}
</div>
</section>
@@ -288,6 +355,10 @@
bind:openModal={openConfirmModal}
on:confirm={deleteTrail}
></ConfirmModal>
<ListSelectModal
bind:openModal={openListSelectModal}
on:change={(e) => handleListSelection(e.detail)}
></ListSelectModal>
</div>
<style>

2
web/src/routes/trail/view/[id]/+page.ts
View File

@@ -1,6 +1,8 @@
import { lists_index } from "$lib/stores/list_store";
import { trails_show } from "$lib/stores/trail_store";
import type { Load } from "@sveltejs/kit";
export const load: Load = async ({ params }) => {
await trails_show(params.id!, true)
await lists_index();
};