trafficcue-client/src/lib/components/lnv/sidebar/MainSidebar.svelte

<script lang="ts">
	import {
		BriefcaseIcon,
		DownloadIcon,
		FuelIcon,
		HomeIcon,
		ParkingSquareIcon,
		SchoolIcon,
	} from "@lucide/svelte";
	import { Button } from "../../ui/button";
	import { fly } from "svelte/transition";
	import { circInOut } from "svelte/easing";
	import { map, pin } from "../map.svelte";
	import VehicleSelector from "../VehicleSelector.svelte";
	import Post from "../Post.svelte";
	import RequiresCapability from "../RequiresCapability.svelte";
	import { saved } from "$lib/saved.svelte";
	import { m } from "$lang/messages";
	import { view } from "../view.svelte";
	import * as Card from "$lib/components/ui/card";
	import SavedRoutes from "../main/SavedRoutes.svelte";
</script>

<div
	id="saved"
	class="mt-2 mb-2"
	in:fly={{ y: 20, duration: 200, easing: circInOut }}
>
	<Button
		variant="secondary"
		class="flex-1"
		onclick={() => {
			const loc = saved.home;
			if (!loc) {
				alert(m["saved.no-location"]({ name: m["saved.home"]() }));
				return;
			}
			const { lat, lon } = loc;
			if (!lat || !lon) {
				alert(m["saved.no-location"]({ name: m["saved.home"]() }));
				return;
			}
			pin.dropPin(lat, lon);
			pin.showInfo();
			map.value?.flyTo({
				center: [lon, lat],
				zoom: 19,
			});
		}}
	>
		<HomeIcon />
		{m["saved.home"]()}
	</Button>
	<Button
		variant="secondary"
		class="flex-1"
		onclick={() => {
			console.log(saved);
			const loc = saved.school;
			if (!loc) {
				alert(m["saved.no-location"]({ name: m["saved.school"]() }));
				return;
			}
			const { lat, lon } = loc;
			if (!lat || !lon) {
				alert(m["saved.no-location"]({ name: m["saved.school"]() }));
				return;
			}
			pin.dropPin(lat, lon);
			pin.showInfo();
			map.value?.flyTo({
				center: [lon, lat],
				zoom: 19,
			});
		}}
	>
		<SchoolIcon />
		{m["saved.school"]()}
	</Button>
	<Button
		variant="secondary"
		class="flex-1"
		onclick={() => {
			const loc = saved.work;
			if (!loc) {
				alert(m["saved.no-location"]({ name: m["saved.work"]() }));
				return;
			}
			const { lat, lon } = loc;
			if (!lat || !lon) {
				alert(m["saved.no-location"]({ name: m["saved.work"]() }));
				return;
			}
			pin.dropPin(lat, lon);
			pin.showInfo();
			map.value?.flyTo({
				center: [lon, lat],
				zoom: 19,
			});
		}}
	>
		<BriefcaseIcon />
		{m["saved.work"]()}
	</Button>
</div>

<VehicleSelector />

<div
	style="display: flex; gap: 0.5rem; justify-content: space-evenly;"
	class="mt-2"
>
	<Button
		variant="secondary"
		size="lg"
		style="flex: 1;"
		onclick={() => {
			view.switch("nearby-poi", {
				tags: "amenity=fuel",
			});
		}}
	>
		<FuelIcon />
		<!-- TODO: hide if no space -->
		{m["poi.fuel"]()}
	</Button>
	<Button
		variant="secondary"
		size="lg"
		style="flex: 1;"
		onclick={() => {
			view.switch("nearby-poi", {
				tags: "amenity=parking,parking!=street_side",
			});
		}}
	>
		<ParkingSquareIcon />
		<!-- TODO: hide if no space -->
		{m["poi.parking"]()}
	</Button>
</div>

{#if !window.__TAURI__}
	<Card.Root style="margin-top: 1rem;">
		<Card.Header>
			<Card.Title>{m["sidebar.main.download-app.title"]()}</Card.Title>
		</Card.Header>
		<Card.Content>
			{m["sidebar.main.download-app.description"]()}
		</Card.Content>
		<Card.Footer>
			<a href="/trafficcue.apk" target="_blank" rel="noopener noreferrer">
				<Button>
					<DownloadIcon />
					{m["sidebar.main.download-app.button"]()}
				</Button>
			</a>
		</Card.Footer>
	</Card.Root>
{/if}

<RequiresCapability capability="stores">
	<SavedRoutes />
</RequiresCapability>

<RequiresCapability capability="post">
	<div>
		<h2>In your area</h2>

		<Post />
	</div>
</RequiresCapability>

<style>
	#saved {
		display: flex;
		gap: 0.5rem;
		/* justify-content: space-evenly; */
		width: 100%;
		max-width: 100%;
	}
</style>