adds list
This commit is contained in:
Christian Beutel
88
web/src/routes/lists/+page.svelte
Normal file
88
web/src/routes/lists/+page.svelte
Normal file
@@ -0,0 +1,88 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
|
||||
import ListCard from "$lib/components/list/list_card.svelte";
|
||||
import ListModal from "$lib/components/list/list_modal.svelte";
|
||||
import TrailList from "$lib/components/trail/trail_list.svelte";
|
||||
import { List } from "$lib/models/list";
|
||||
import type { TrailFilter } from "$lib/models/trail";
|
||||
import {
|
||||
list,
|
||||
lists,
|
||||
lists_create,
|
||||
lists_delete,
|
||||
lists_index,
|
||||
lists_update,
|
||||
} from "$lib/stores/list_store";
|
||||
|
||||
let openListModal: () => void;
|
||||
|
||||
let filter: TrailFilter = $page.data.filter;
|
||||
|
||||
function beforeListModalOpen() {
|
||||
list.set(new List("", []));
|
||||
openListModal();
|
||||
}
|
||||
|
||||
async function saveList(
|
||||
e: CustomEvent<{ list: List; formData: FormData }>,
|
||||
) {
|
||||
const result = e.detail;
|
||||
if (result.list.id) {
|
||||
await lists_update(result.list, result.formData);
|
||||
await lists_index();
|
||||
} else {
|
||||
await lists_create(result.formData);
|
||||
await lists_index();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDropdownClick(
|
||||
e: CustomEvent<DropdownItem>,
|
||||
currentList: List,
|
||||
) {
|
||||
const item = e.detail;
|
||||
|
||||
if (item.value == "edit") {
|
||||
list.set(currentList);
|
||||
openListModal();
|
||||
} else if (item.value == "delete") {
|
||||
await lists_delete(currentList);
|
||||
await lists_index();
|
||||
}
|
||||
}
|
||||
</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"
|
||||
>
|
||||
<ul
|
||||
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"
|
||||
on:click={beforeListModalOpen}
|
||||
>
|
||||
<i class="fa fa-plus text-xl aspect-square"></i>
|
||||
<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}
|
||||
</ul>
|
||||
<TrailList
|
||||
bind:filter
|
||||
trails={$list.expand?.trails ?? []}
|
||||
on:update={async () => await lists_index()}
|
||||
></TrailList>
|
||||
<ListModal bind:openModal={openListModal} on:save={saveList}></ListModal>
|
||||
</main>
|
||||
22
web/src/routes/lists/+page.ts
Normal file
22
web/src/routes/lists/+page.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { TrailFilter } from "$lib/models/trail";
|
||||
import { lists_index } from "$lib/stores/list_store";
|
||||
import type { Load } from "@sveltejs/kit";
|
||||
|
||||
export const load: Load = async ({ params }) => {
|
||||
const filter: TrailFilter = {
|
||||
q: "",
|
||||
category: [],
|
||||
near: {
|
||||
radius: 2000,
|
||||
},
|
||||
distanceMin: 0,
|
||||
distanceMax: 20000,
|
||||
elevationGainMin: 0,
|
||||
elevationGainMax: 4000,
|
||||
sort: "created",
|
||||
sortOrder: "+",
|
||||
};
|
||||
await lists_index();
|
||||
|
||||
return {filter};
|
||||
};
|
||||
@@ -1,63 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
import Select, {
|
||||
type SelectItem,
|
||||
} from "$lib/components/base/select.svelte";
|
||||
import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
|
||||
import TrailCard from "$lib/components/trail/trail_card.svelte";
|
||||
import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
|
||||
import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
|
||||
import TrailList from "$lib/components/trail/trail_list.svelte";
|
||||
import type { TrailFilter } from "$lib/models/trail";
|
||||
import { categories } from "$lib/stores/category_store";
|
||||
import { trails, trails_search_filter } from "$lib/stores/trail_store";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
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 filterExpanded: boolean = true;
|
||||
|
||||
const filter: TrailFilter = $page.data.filter;
|
||||
|
||||
onMount(() => {
|
||||
const storedDisplayOption = localStorage.getItem("displayOption");
|
||||
if (storedDisplayOption) {
|
||||
selectedDisplayOption = storedDisplayOption;
|
||||
}
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
filterExpanded = false;
|
||||
}
|
||||
});
|
||||
|
||||
function setDisplayOption() {
|
||||
localStorage.setItem("displayOption", selectedDisplayOption);
|
||||
}
|
||||
|
||||
async function setSort() {
|
||||
await trails_search_filter(filter);
|
||||
}
|
||||
|
||||
async function setSortOrder() {
|
||||
if (filter.sortOrder === "+") {
|
||||
filter.sortOrder = "-";
|
||||
} else {
|
||||
filter.sortOrder = "+";
|
||||
}
|
||||
|
||||
await trails_search_filter(filter);
|
||||
}
|
||||
|
||||
async function handleFilterUpdate() {
|
||||
await trails_search_filter(filter);
|
||||
}
|
||||
@@ -72,67 +32,9 @@
|
||||
{filterExpanded}
|
||||
on:update={() => handleFilterUpdate()}
|
||||
></TrailFilterPanel>
|
||||
<div class="min-w-0">
|
||||
<div class="flex items-start gap-8 justify-end mx-4">
|
||||
<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="btn-icon"
|
||||
class:rotated={filter.sortOrder == "-"}
|
||||
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"
|
||||
>
|
||||
{#if $trails.length == 0}
|
||||
<div class="flex flex-col basis-full items-center">
|
||||
<EmptyStateSearch></EmptyStateSearch>
|
||||
</div>
|
||||
{/if}
|
||||
{#each $trails as trail}
|
||||
<a
|
||||
class="max-w-full"
|
||||
class:basis-full={selectedDisplayOption === "list"}
|
||||
href="/trail/view/{trail.id}"
|
||||
>
|
||||
{#if selectedDisplayOption === "cards"}
|
||||
<TrailCard {trail}></TrailCard>
|
||||
{:else}
|
||||
<TrailListItem {trail}></TrailListItem>
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<TrailList
|
||||
{filter}
|
||||
trails={$trails}
|
||||
on:update={async () => await trails_search_filter(filter)}
|
||||
></TrailList>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
#sort-order-btn {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
:global(.rotated) {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user