trafficcue-client/src/lib/components/lnv/sidebar/settings/CalendarSidebar.svelte

<script lang="ts">
	import { m } from "$lang/messages";
	import { CalendarPlusIcon } from "@lucide/svelte";
	import SidebarHeader from "../SidebarHeader.svelte";
	import SettingsButton from "./SettingsButton.svelte";
	import * as Drawer from "$lib/components/ui/drawer";
	import { Button } from "$lib/components/ui/button";
	import Input from "$lib/components/ui/input/input.svelte";
	import { fetchCalendars, findScheme, type AuthScheme, type DAVCalendar, type DAVCredentials } from "$lib/services/CalDAV";
	import { onMount } from "svelte";
	
	let calendars: (DAVCalendar & {credentials: DAVCredentials})[] = $state([]);

	let calDavDrawerOpen = $state(false);
	let calDavLoading = $state(false);
	let calDavUrl = $state("");
	let calDavUsername = $state("");
	let calDavPassword = $state("");
	let calDavCalendars: DAVCalendar[] = $state([]);
	let calDavScheme: AuthScheme;

	let calDavState = $state("");

	async function fetchCalDav() {
		calDavState = m["sidebar.calendar.probing-server"]();
		calDavScheme = await findScheme(calDavUrl);
		calDavState = m["sidebar.calendar.discovering-calendars"]();
		calDavCalendars = await fetchCalendars(calDavUrl, { scheme: calDavScheme, username: calDavUsername, password: calDavPassword });
		calDavState = "";
	}

	onMount(() => {
		if(localStorage.getItem("calendars")) {
			calendars = JSON.parse(localStorage.getItem("calendars")!);
		}
	})
</script>

<SidebarHeader>
	{m["sidebar.calendar.header"]()}
</SidebarHeader>

<Drawer.Root bind:open={calDavDrawerOpen}>
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title>{m["sidebar.calendar.connect"]()}</Drawer.Title>
    </Drawer.Header>
		<div class="p-4 pt-0 flex flex-col gap-2">
			{#if calDavCalendars}
				<Input type="url" placeholder="https://my-caldav-server.com/..." disabled={calDavLoading} bind:value={calDavUrl} />
				<Input type="text" placeholder="Username" disabled={calDavLoading} bind:value={calDavUsername} />
				<Input type="password" placeholder="Password" disabled={calDavLoading} bind:value={calDavPassword} />
				{#if calDavState}
					<span>{calDavState}</span>
				{/if}
			{/if}
			{#if calDavCalendars.length > 0}
				<h3 class="font-medium pt-4">{m["sidebar.calendar.choose"]()}</h3>
				<ul class="max-h-48 overflow-y-auto">
					{#each calDavCalendars as calendar (calendar.url)}
						<li>
							<Button class="w-full" variant="secondary" onclick={() => {
								if(localStorage.getItem("calendars")) {
									const existing = JSON.parse(localStorage.getItem("calendars")!);
									existing.push({
										name: calendar.name,
										url: calendar.url,
										credentials: {
											username: calDavUsername,
											password: calDavPassword,
											scheme: calDavScheme
										}
									});
									localStorage.setItem("calendars", JSON.stringify(existing));
								} else {
									localStorage.setItem("calendars", JSON.stringify([{
										name: calendar.name,
										url: calendar.url,
										credentials: {
											username: calDavUsername,
											password: calDavPassword,
											scheme: calDavScheme
										}
									}]));
								}
								calendars.push({
									name: calendar.name,
									url: calendar.url,
									credentials: {
										username: calDavUsername,
										password: calDavPassword,
										scheme: calDavScheme
									}
								});
							}}>
								{calendar.name}
							</Button>
						</li>
					{/each}
				</ul>
			{/if}
		</div>
    <Drawer.Footer>
			{#if calDavCalendars.length === 0}
				<Button onclick={async () => {
					calDavLoading = true;
					await fetchCalDav().catch((e) => {
						calDavState = e;
						calDavLoading = false;
					})
				}}>{m.submit()}</Button>
			{/if}
      <Drawer.Close>
				{calDavCalendars.length === 0 ? m.done() : m.cancel()}
			</Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

{#each calendars as calendar (calendar.url)}
	<div class="p-2 border rounded mb-2">
		<h3 class="font-medium">{calendar.name}</h3>
		<Button variant="destructive" size="sm" class="mt-2" onclick={() => {
			calendars = calendars.filter(c => c.url !== calendar.url);
			localStorage.setItem("calendars", JSON.stringify(calendars));
		}}>{m.delete()}</Button>
	</div>
{/each}

<SettingsButton text={m["sidebar.calendar.connect"]()} icon={CalendarPlusIcon} onclick={() => {
	calDavDrawerOpen = true;
}} />