75 lines
2.5 KiB
Svelte
75 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import {page} from "$app/stores"
|
|
import {sortBy, last} from '@welshman/lib'
|
|
import type {TrustedEvent} from '@welshman/util'
|
|
import {formatTimestampAsDate} from "@welshman/app"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import Spinner from "@lib/components/Spinner.svelte"
|
|
import Divider from "@lib/components/Divider.svelte"
|
|
import EventCard from "@app/components/EventCard.svelte"
|
|
import EventCreate from "@app/components/EventCreate.svelte"
|
|
import {pushModal} from "@app/modal"
|
|
import {eventsByUrl, decodeNRelay} from "@app/state"
|
|
|
|
const url = decodeNRelay($page.params.nrelay)
|
|
|
|
const createEvent = () => pushModal(EventCreate, {url})
|
|
|
|
const getStart = (event: TrustedEvent) =>
|
|
parseInt(event.tags.find(t => t[0] === 'start')?.[1]!)
|
|
|
|
let loading = true
|
|
|
|
type Item = {
|
|
event: TrustedEvent
|
|
dateDisplay?: string
|
|
}
|
|
|
|
$: items = sortBy(getStart, $eventsByUrl.get(url) || [])
|
|
.reduce<Item[]>((r, event) => {
|
|
const prevDateDisplay = r.length > 0 ? formatTimestampAsDate(getStart(last(r).event)) : undefined
|
|
const newDateDisplay = formatTimestampAsDate(getStart(event))
|
|
const dateDisplay = prevDateDisplay === newDateDisplay ? undefined : newDateDisplay
|
|
|
|
return [...r, {event, dateDisplay}]
|
|
}, [])
|
|
|
|
setTimeout(() => {
|
|
loading = false
|
|
}, 3000)
|
|
</script>
|
|
|
|
<div class="relative flex h-screen flex-col">
|
|
<div class="relative z-feature mx-2 rounded-xl pt-4">
|
|
<div
|
|
class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon="calendar-minimalistic" />
|
|
<strong>Calendar</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-grow flex-col overflow-auto p-2 gap-2">
|
|
{#each items as {event, dateDisplay}, i (event.id)}
|
|
{#if dateDisplay}
|
|
<Divider>{dateDisplay}</Divider>
|
|
{/if}
|
|
<EventCard {event} />
|
|
{/each}
|
|
<p class="flex h-10 items-center justify-center py-20">
|
|
<Spinner {loading}>
|
|
{#if loading}
|
|
Looking for events...
|
|
{:else if items.length === 0}
|
|
No events found.
|
|
{/if}
|
|
</Spinner>
|
|
</p>
|
|
</div>
|
|
<Button class="fixed bottom-4 right-4 tooltip tooltip-left p-1" data-tip="Create an Event" on:click={createEvent}>
|
|
<div class="w-12 h-12 flex items-center justify-center btn btn-primary btn-circle">
|
|
<Icon icon="calendar-add" />
|
|
</div>
|
|
</Button>
|
|
</div>
|