fallback and 404

2026-07-19 22:47:05 +02:00
parent baa4840b38
commit cd1a47b6c3
11 changed files with 580 additions and 212 deletions
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { fade, fly } from 'svelte/transition';
+
+	import { defaultVariablePrefs, storedVariablePrefs } from '$lib/stores/settings';
+
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+
+	interface Props {
+		open: boolean;
+		onClose: () => void;
+	}
+
+	let { open, onClose }: Props = $props();
+
+	const tableVariables = [
+		{ key: 'icons', label: 'Weather icons' },
+		{ key: 'temperature', label: 'Temperature' },
+		{ key: 'feels', label: 'Feels like' },
+		{ key: 'wind', label: 'Wind' },
+		{ key: 'humidity', label: 'Humidity' },
+		{ key: 'clouds', label: 'Cloud cover' },
+		{ key: 'precipitation', label: 'Precipitation' }
+	];
+
+	const chartVariables = [
+		{ key: 'temperature', label: 'Temperature' },
+		{ key: 'cloud_cover', label: 'Cloud cover' },
+		{ key: 'precipitation', label: 'Precipitation' },
+		{ key: 'precipitation_probability', label: 'Precipitation probability' },
+		{ key: 'wind', label: 'Wind speed' },
+		{ key: 'humidity', label: 'Humidity' }
+	];
+
+	function toggle(section: 'table' | 'charts', key: string) {
+		storedVariablePrefs.update((prefs) => {
+			const current = { ...defaultVariablePrefs[section], ...prefs[section] };
+			return { ...prefs, [section]: { ...current, [key]: !(current[key] ?? true) } };
+		});
+	}
+
+	function resetDefaults() {
+		storedVariablePrefs.set(structuredClone(defaultVariablePrefs));
+	}
+</script>
+
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape' && open) onClose();
+	}}
+/>
+
+{#if open}
+	<div class="fixed inset-0 z-50">
+		<div
+			class="absolute inset-0 bg-black/30"
+			transition:fade={{ duration: 150 }}
+			onclick={onClose}
+			onkeydown={onClose}
+			role="presentation"
+		></div>
+		<aside
+			class="absolute inset-y-0 right-0 flex w-80 max-w-[90vw] flex-col overflow-y-auto border-l border-border bg-card shadow-xl"
+			transition:fly={{ x: 320, duration: 200, opacity: 1 }}
+			aria-label="Variable selection"
+		>
+			<div
+				class="sticky top-0 flex items-center justify-between border-b border-border bg-card px-5 py-4"
+			>
+				<h2 class="text-base font-bold">Variables</h2>
+				<button
+					class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+					onclick={onClose}
+					aria-label="Close variable selection"
+				>
+					<svg
+						class="h-4.5 w-4.5"
+						fill="none"
+						stroke="currentColor"
+						viewBox="0 0 24 24"
+						stroke-width="2"
+					>
+						<path stroke-linecap="round" d="M6 6l12 12M18 6L6 18" />
+					</svg>
+				</button>
+			</div>
+
+			<div class="flex flex-1 flex-col gap-6 px-5 py-4">
+				<section>
+					<h3 class="mb-2 text-[11px] font-bold tracking-wider text-primary uppercase">
+						Hourly table
+					</h3>
+					<div class="flex flex-col gap-1">
+						{#each tableVariables as variable (variable.key)}
+							<div class="flex items-center gap-2.5 rounded-md px-1 py-1 hover:bg-muted/60">
+								<Checkbox
+									id="table_var_{variable.key}"
+									class="cursor-pointer"
+									checked={$storedVariablePrefs.table?.[variable.key] ?? true}
+									onCheckedChange={() => toggle('table', variable.key)}
+								/>
+								<Label class="flex-1 cursor-pointer text-sm" for="table_var_{variable.key}">
+									{variable.label}
+								</Label>
+							</div>
+						{/each}
+					</div>
+				</section>
+
+				<section>
+					<h3 class="mb-2 text-[11px] font-bold tracking-wider text-primary uppercase">
+						Meteogram charts
+					</h3>
+					<div class="flex flex-col gap-1">
+						{#each chartVariables as variable (variable.key)}
+							<div class="flex items-center gap-2.5 rounded-md px-1 py-1 hover:bg-muted/60">
+								<Checkbox
+									id="chart_var_{variable.key}"
+									class="cursor-pointer"
+									checked={$storedVariablePrefs.charts?.[variable.key] ?? true}
+									onCheckedChange={() => toggle('charts', variable.key)}
+								/>
+								<Label class="flex-1 cursor-pointer text-sm" for="chart_var_{variable.key}">
+									{variable.label}
+								</Label>
+							</div>
+						{/each}
+					</div>
+				</section>
+			</div>
+
+			<div class="border-t border-border px-5 py-3">
+				<button
+					class="cursor-pointer text-xs font-medium text-muted-foreground underline-offset-2 transition-colors hover:text-foreground hover:underline"
+					onclick={resetDefaults}
+				>
+					Reset to defaults
+				</button>
+			</div>
+		</aside>
+	</div>
+{/if}