stashing code

2025-10-20 17:07:41 +03:00
commit f5b99afc8f
890 changed files with 54823 additions and 0 deletions
--- a/apps/frontend/src/lib/domains/ticket/view/ticket-search-input.svelte
+++ b/apps/frontend/src/lib/domains/ticket/view/ticket-search-input.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { TicketType } from "../data/entities/index";
+	import AirportSearchInput from "$lib/domains/airport/view/airport-search-input.svelte";
+	import { ticketSearchStore } from "../data/store";
+	import FlightDateInput from "./flight-date-input.svelte";
+	import FlightDateRangeInput from "./flight-date-range-input.svelte";
+	import Icon from "$lib/components/atoms/icon.svelte";
+	import SearchIcon from "~icons/solar/magnifer-linear";
+	import SwapIcon from "~icons/ant-design/swap-outlined";
+	import Button from "$lib/components/ui/button/button.svelte";
+	import PassengerAndCabinClassSelect from "./passenger-and-cabin-class-select.svelte";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import * as RadioGroup from "$lib/components/ui/radio-group/index.js";
+	import { airportVM } from "$lib/domains/airport/view/airport.vm.svelte";
+	import { browser } from "$app/environment";
+	import { onDestroy, onMount } from "svelte";
+
+	let { onSubmit, rowify = false }: { onSubmit: () => void; rowify?: boolean } =
+		$props();
+
+	let currTicketType = $state($ticketSearchStore.ticketType);
+	let isMobileView = $state(false);
+
+	function checkIfMobile() {
+		if (browser) {
+			isMobileView = window.innerWidth < 768;
+		}
+	}
+
+	function setupResizeListener() {
+		if (browser) {
+			window.addEventListener("resize", checkIfMobile);
+			checkIfMobile(); // Initial check
+
+			return () => {
+				window.removeEventListener("resize", checkIfMobile);
+			};
+		}
+	}
+
+	$effect(() => {
+		ticketSearchStore.update((prev) => {
+			return { ...prev, ticketType: currTicketType };
+		});
+	});
+
+	let cleanup: any | undefined = $state(undefined);
+
+	onMount(() => {
+		cleanup = setupResizeListener();
+	});
+
+	onDestroy(() => {
+		cleanup?.();
+	});
+</script>
+
+<div class="flex w-full flex-col gap-4">
+	<div
+		class="flex w-full flex-col items-center justify-between gap-4 lg:grid lg:grid-cols-2 lg:gap-4"
+	>
+		<RadioGroup.Root
+			bind:value={currTicketType}
+			class="flex w-full flex-row gap-6 p-2 lg:p-4"
+		>
+			<div class="flex items-center space-x-2">
+				<RadioGroup.Item
+					value={TicketType.Return}
+					id={TicketType.Return}
+					onselect={() => {
+						ticketSearchStore.update((prev) => {
+							return { ...prev, ticketType: TicketType.Return };
+						});
+					}}
+				/>
+				<Label for={TicketType.Return} class="md:text-lg">Return</Label>
+			</div>
+			<div class="flex items-center space-x-2">
+				<RadioGroup.Item
+					value={TicketType.OneWay}
+					id={TicketType.OneWay}
+					onselect={() => {
+						ticketSearchStore.update((prev) => {
+							return { ...prev, ticketType: TicketType.OneWay };
+						});
+					}}
+				/>
+				<Label for={TicketType.OneWay} class="md:text-lg">One Way</Label>
+			</div>
+		</RadioGroup.Root>
+
+		<PassengerAndCabinClassSelect />
+	</div>
+
+	<div
+		class="flex w-full flex-col items-center justify-between gap-2 lg:grid lg:grid-cols-2 lg:gap-4"
+	>
+		<div
+			class="flex w-full flex-col items-center justify-between gap-2 lg:flex-row"
+		>
+			<AirportSearchInput
+				currentValue={airportVM.departure}
+				onChange={(e) => {
+					airportVM.setDepartureAirport(e);
+				}}
+				placeholder="Depart from"
+				searchPlaceholder="Departure airport search"
+				isMobile={isMobileView}
+				fieldType="departure"
+			/>
+			<div class="hidden w-full max-w-fit md:block">
+				<Button
+					size="icon"
+					variant={rowify ? "outlineWhite" : "defaultInverted"}
+					onclick={() => {
+						airportVM.swapDepartureAndArrival();
+					}}
+				>
+					<Icon icon={SwapIcon} cls="w-auto h-6" />
+				</Button>
+			</div>
+
+			<AirportSearchInput
+				currentValue={airportVM.arrival}
+				onChange={(e) => {
+					airportVM.setArrivalAirport(e);
+				}}
+				placeholder="Arrive at"
+				searchPlaceholder="Arrival airport search"
+				isMobile={isMobileView}
+				fieldType="arrival"
+			/>
+		</div>
+
+		<div
+			class="flex w-full flex-col items-center justify-between gap-2 lg:flex-row lg:gap-2"
+		>
+			{#if $ticketSearchStore.ticketType === TicketType.Return}
+				<FlightDateRangeInput />
+			{:else}
+				<FlightDateInput />
+			{/if}
+
+			<Button onclick={() => onSubmit()} class={"w-full"} variant="default">
+				<Icon icon={SearchIcon} cls="w-auto h-4" />
+				Search flights
+			</Button>
+		</div>
+	</div>
+</div>