@movvjs/svelte-schedule-view 0.2.4 → 0.2.6-beta-1

package/src/lib/schedule-view/components/flight-search/FlightSearch.svelte

@@ -8,14 +8,14 @@
 	import { dayjs } from '$lib/dayjs'
 
 	import type { Flight, FlightAuto, FlightManual } from '$scheduleView/types'
-	import { BookingAPI } from '$scheduleView/api'
+	import { BookingAPI, CommonAPI } from '$scheduleView/api'
 
 	import { alert } from '$scheduleView/components/notifications'
 
 	let on = false
-	let type: 'AUTO' | 'MANUAL' = 'AUTO'
+	let type: 'AUTO' | 'MANUAL' | 'TERMINAL' = 'AUTO'
 	let dateTime: string // YYYY-MM-DD HH:mm
-	let iata: string
+	let airport: { iata: string; code: string } = { iata: null, code: null }
 	let loading = false
 	let resolveFn: (flight: Flight) => void
 
@@ -40,16 +40,26 @@
 	let hour = 0
 	let minute = 0
 
-	export async function open(options: { dateTime: string; iata: string }): Promise<Flight> {
+	// TERMINAL
+	let terminals: string[] = []
+	let arrivalTerminal: string
+
+	export async function open(options: { dateTime: string; airport: { iata: string; code: string }; terminalOnly: boolean }): Promise<Flight> {
 		return new Promise(async (resolve, reject) => {
 			if (!options?.dateTime) {
 				reject(new Error($t('flight.pleaseSelectDate')))
 				return
 			}
 
+			if (!options?.airport?.iata && !options?.airport?.code) {
+				reject(new Error($t('flight.pleaseSelectAnAirport')))
+				return
+			}
+
 			resolveFn = resolve
 			dateTime = options.dateTime
-			iata = options.iata
+			airport.iata = options.airport?.iata
+			airport.code = options.airport?.code
 
 			// Manual 데이터 셋팅
 			manualInput = ''
@@ -62,18 +72,34 @@
 			page = 1
 			arrivalDate = dayjs(dateTime).minute(0)
 
-			// iata 가 없으면 AUTO 검색이 불가능함.
-			if (iata) {
-				type = 'AUTO'
-				fetchFlights()
+			// 터미널 데이터 셋팅
+			terminals = []
+			arrivalTerminal = null
+
+			if (options.terminalOnly) {
+				changeType('TERMINAL')
 			} else {
-				type = 'MANUAL'
+				// iata 가 없으면 AUTO 검색이 불가능함.
+				if (airport.iata) {
+					changeType('AUTO')
+				} else {
+					changeType('MANUAL')
+				}
 			}
 
 			on = true
 		})
 	}
 
+	function changeType(value: typeof type) {
+		type = value
+		if (type === 'TERMINAL' || type === 'MANUAL') {
+			fetchTerminals()
+		} else if (type === 'AUTO') {
+			fetchFlights()
+		}
+	}
+
 	function close() {
 		on = false
 	}
@@ -82,7 +108,7 @@
 		loading = true
 		try {
 			flights = await BookingAPI.searchFlights({
-				iata,
+				iata: airport.iata,
 				ymd: arrivalDate.format('YYYY-MM-DD'),
 				time: arrivalDate.hour()
 			})
@@ -94,6 +120,18 @@
 		}
 	}
 
+	async function fetchTerminals() {
+		try {
+			loading = true
+			terminals = await CommonAPI.getPoiTerminals(airport.code)
+		} catch (e) {
+			alert.open({ text: e.message })
+			terminals = []
+		} finally {
+			loading = false
+		}
+	}
+
 	async function subtractHour() {
 		arrivalDate = arrivalDate.subtract(1, 'hour')
 		fetchFlights()
@@ -135,13 +173,29 @@
 			}
 
 			const manualFlight: FlightManual = {
-				iata,
+				iata: airport.iata ?? null,
 				ymd: estimateDate.format('YYYY-MM-DD HH:mm:ss'),
 				name: manualInput,
-				selectType: 'MANUAL'
+				selectType: 'MANUAL',
+				arrivalTerminal
 			}
 
 			resolveFn(manualFlight)
+		} else if (type === 'TERMINAL') {
+			if (!arrivalTerminal) {
+				alert.open({ text: $t('flight.selectTerminal') })
+				return
+			}
+
+			const terminalFlight: FlightManual = {
+				iata: airport.iata ?? null,
+				ymd: estimateDate.format('YYYY-MM-DD HH:mm:ss'),
+				name: null,
+				selectType: 'MANUAL',
+				arrivalTerminal
+			}
+
+			resolveFn(terminalFlight)
 		}
 
 		close()
@@ -159,132 +213,160 @@
 					</div>
 
 					<div class="contents pdMg">
-						<div class="indie_tab_square_01_wrapper">
-							<ul class="indie_tab_square_01">
-								{#if iata}
-									<li class:on={type === 'AUTO'}><a href={null} on:click={() => (type = 'AUTO')}>{$t('flight.selectFlightNo')}</a></li>
-								{/if}
-								<li class:on={type === 'MANUAL'}><a href={null} on:click={() => (type = 'MANUAL')}>{$t('flight.editManually')}</a></li>
-							</ul>
-						</div>
-
-						{#if type === 'AUTO'}
-							<div class="indie_flight_name_top_infos">
-								<div class="infos">
-									<p class="sbj">{$t('flight.arrivalDate')}</p>
-									<p class="date">
-										<span>{dayjs(arrivalDate).format('ll')}</span>
-										<span>{dayjs(arrivalDate).format('HH:mm')}~{dayjs(arrivalDate).add(1, 'hour').format('HH:mm')}</span>
-									</p>
-								</div>
-								<div class="btns">
-									<button type="button" class="indie_btn_squre only prev" on:click={() => subtractHour()}>이전</button>
-									<button type="button" class="indie_btn_squre only next" on:click={() => addHour()}>다음</button>
-								</div>
-							</div>
-
+						{#if type === 'TERMINAL'}
 							{#if loading}
 								<div class="indie_loading_common_box">
 									<div class="indie_loader" />
 								</div>
-							{:else if !loading && flights.length === 0}
-								<div class="indie_search_none_common_box">
-									<p>{$t('flight.noFlightsWereFound')}</p>
-								</div>
 							{:else}
-								<div bind:this={contentsEl$} class="indie_tab_squre_01_cont" in:fade={{ duration: 100, delay: 100 }}>
-									<!-- 항공편 선택 -->
-									<ul class="indie_flight_name_select_list">
-										{#each flightsByPaging as item (item.name)}
-											<li in:fade={{ duration: 100, delay: 100 }}>
-												<div class="check">
-													<input
-														bind:group={flight}
-														value={item}
-														type="radio"
-														class="indie_radio_box xs flight_b"
-														name="f_choice"
-														id="ch_{item.name}" />
-													<label for="ch_{item.name}">
-														<p class="flight">{item.name}</p>
-														<div class="flight_time_box">
-															<dl class="start">
-																<dt>{item.departureAirport}</dt>
-																<dd>
-																	<!-- TODO: 검색일 이전날짜인 경우 표현 -->
-																	{#if dayjs(item.departure).isBefore(arrivalDate, 'day')}
-																		<b>D-{arrivalDate.diff(dayjs(item.departure).format('YYYY-MM-DD'), 'd')}</b>
-																	{/if}
-																	{dayjs(item.departure).format('HH:mm')}
-																</dd>
-															</dl>
-
-															<dl class="end">
-																<dt>{item.arrivalAirport}</dt>
-																<dd>{dayjs(item.arrive).format('HH:mm')}</dd>
-															</dl>
-														</div>
-													</label>
-												</div>
-											</li>
-										{/each}
-									</ul>
-								</div>
+								<select bind:value={arrivalTerminal} class="indie_select_nor w100">
+									<option value={null}>{$t('flight.selectTerminal')}</option>
+									{#each terminals as terminal}
+										<option value={terminal}>{terminal}</option>
+									{/each}
+								</select>
+							{/if}
+						{:else}
+							<div class="indie_tab_square_01_wrapper">
+								<ul class="indie_tab_square_01">
+									{#if !!airport.iata}
+										<li class:on={type === 'AUTO'}><a href={null} on:click={() => changeType('AUTO')}>{$t('flight.selectFlightNo')}</a></li>
+									{/if}
+									<li class:on={type === 'MANUAL'}><a href={null} on:click={() => changeType('MANUAL')}>{$t('flight.editManually')}</a></li>
+								</ul>
+							</div>
 
-								<div class="indie_flight_paing_box" in:fade={{ duration: 100, delay: 100 }}>
-									<div class="indie_paging_b">
-										<button
-											type="button"
-											class="pg_left"
-											style:visibility={page > 1 ? 'visible' : 'hidden'}
-											on:click={() => (page = page > 1 ? page - 1 : page)}>이전</button>
-										<input readonly type="text" class="txt_paging" value={page} />
-										<span>/</span>
-										<span class="last">{totalPage}</span>
-										<button
-											type="button"
-											class="pg_right"
-											style:visibility={page < totalPage ? 'visible' : 'hidden'}
-											on:click={() => (page = page < totalPage ? page + 1 : page)}>
-											다음
-										</button>
+							{#if type === 'AUTO'}
+								<div class="indie_flight_name_top_infos">
+									<div class="infos">
+										<p class="sbj">{$t('flight.arrivalDate')}</p>
+										<p class="date">
+											<span>{dayjs(arrivalDate).format('ll')}</span>
+											<span>{dayjs(arrivalDate).format('HH:mm')}~{dayjs(arrivalDate).add(1, 'hour').format('HH:mm')}</span>
+										</p>
+									</div>
+									<div class="btns">
+										<button type="button" class="indie_btn_squre only prev" on:click={() => subtractHour()}>이전</button>
+										<button type="button" class="indie_btn_squre only next" on:click={() => addHour()}>다음</button>
 									</div>
 								</div>
-							{/if}
-						{:else if type === 'MANUAL'}
-							<div class="indie_tab_squre_01_cont">
-								<!-- 항공편 직접입력 -->
-								<input bind:value={manualInput} maxlength="15" type="text" class="indie_text_nor lg w100 mgt10" placeholder={$t('flight.flightNo')} />
-
-								<div class="indie_flight_direct_input">
-									<p class="tit">{$t('flight.estimatedTimeOfArrival')}</p>
-
-									<div class="gather_box">
-										<div class="da_select_box">
-											<button type="button" class="indie_btn_squre only prev" on:click={() => subtractDay()}>이전</button>
-											<p class="date">{dayjs(estimateDate).format('YYYY.MM.DD')}</p>
-											<button type="button" class="indie_btn_squre only next" on:click={() => addDay()}>다음</button>
-										</div>
-										<div class="indie_time_select_box triangle lg">
-											<select bind:value={hour} on:change={() => onChangeEstimateTime()}>
-												{#each range(0, 24, 1) as h}
-													<option value={h}>{padStart(`${h}`, 2, '0')}</option>
-												{/each}
-											</select>
-											<span>:</span>
-											<select bind:value={minute} on:change={() => onChangeEstimateTime()}>
-												{#each range(0, 60, 1) as m}
-													<option value={m}>{padStart(`${m}`, 2, '0')}</option>
-												{/each}
-											</select>
+
+								{#if loading}
+									<div class="indie_loading_common_box">
+										<div class="indie_loader" />
+									</div>
+								{:else if !loading && flights.length === 0}
+									<div class="indie_search_none_common_box">
+										<p>{$t('flight.noFlightsWereFound')}</p>
+									</div>
+								{:else}
+									<div bind:this={contentsEl$} class="indie_tab_squre_01_cont" in:fade={{ duration: 100, delay: 100 }}>
+										<!-- 항공편 선택 -->
+										<ul class="indie_flight_name_select_list">
+											{#each flightsByPaging as item (item.name)}
+												<li in:fade={{ duration: 100, delay: 100 }}>
+													<div class="check">
+														<input
+															bind:group={flight}
+															value={item}
+															type="radio"
+															class="indie_radio_box xs flight_b"
+															name="f_choice"
+															id="ch_{item.name}" />
+														<label for="ch_{item.name}">
+															<p class="flight">{item.name}</p>
+															<div class="flight_time_box">
+																<dl class="start">
+																	<dt>{item.departureAirport}</dt>
+																	<dd>
+																		<!-- TODO: 검색일 이전날짜인 경우 표현 -->
+																		{#if dayjs(item.departure).isBefore(arrivalDate, 'day')}
+																			<b>D-{arrivalDate.diff(dayjs(item.departure).format('YYYY-MM-DD'), 'd')}</b>
+																		{/if}
+																		{dayjs(item.departure).format('HH:mm')}
+																	</dd>
+																</dl>
+
+																<dl class="end">
+																	<dt>{item.arrivalAirport}</dt>
+																	<dd>{dayjs(item.arrive).format('HH:mm')}</dd>
+																</dl>
+															</div>
+														</label>
+													</div>
+												</li>
+											{/each}
+										</ul>
+									</div>
+
+									<div class="indie_flight_paing_box" in:fade={{ duration: 100, delay: 100 }}>
+										<div class="indie_paging_b">
+											<button
+												type="button"
+												class="pg_left"
+												style:visibility={page > 1 ? 'visible' : 'hidden'}
+												on:click={() => (page = page > 1 ? page - 1 : page)}>이전</button>
+											<input readonly type="text" class="txt_paging" value={page} />
+											<span>/</span>
+											<span class="last">{totalPage}</span>
+											<button
+												type="button"
+												class="pg_right"
+												style:visibility={page < totalPage ? 'visible' : 'hidden'}
+												on:click={() => (page = page < totalPage ? page + 1 : page)}>
+												다음
+											</button>
 										</div>
 									</div>
+								{/if}
+							{:else if type === 'MANUAL'}
+								<div class="indie_tab_squre_01_cont">
+									<!-- 항공편 직접입력 -->
+									<input bind:value={manualInput} maxlength="15" type="text" class="indie_text_nor w100 mgt10" placeholder={$t('flight.flightNo')} />
+
+									{#if loading}
+										<div class="indie_loading_common_box">
+											<div class="indie_loader" />
+										</div>
+									{:else}
+										<select bind:value={arrivalTerminal} class="indie_select_nor w100 mgt5">
+											<option value={null}>{$t('flight.selectTerminal')}</option>
+											{#each terminals as terminal}
+												<option value={terminal}>{terminal}</option>
+											{/each}
+										</select>
+									{/if}
+
+									<div class="indie_flight_direct_input">
+										<p class="tit">{$t('flight.estimatedTimeOfArrival')}</p>
+
+										<div class="gather_box">
+											<div class="da_select_box">
+												<button type="button" class="indie_btn_squre only prev" on:click={() => subtractDay()}>이전</button>
+												<p class="date">{dayjs(estimateDate).format('YYYY.MM.DD')}</p>
+												<button type="button" class="indie_btn_squre only next" on:click={() => addDay()}>다음</button>
+											</div>
+											<div class="indie_time_select_box triangle lg">
+												<select bind:value={hour} on:change={() => onChangeEstimateTime()}>
+													{#each range(0, 24, 1) as h}
+														<option value={h}>{padStart(`${h}`, 2, '0')}</option>
+													{/each}
+												</select>
+												<span>:</span>
+												<select bind:value={minute} on:change={() => onChangeEstimateTime()}>
+													{#each range(0, 60, 1) as m}
+														<option value={m}>{padStart(`${m}`, 2, '0')}</option>
+													{/each}
+												</select>
+											</div>
+										</div>
 
-									<div class="indie_exclamation_mark_box sm black">
-										<p class="normal">{$t('flight.directly')}</p>
+										<div class="indie_exclamation_mark_box sm black">
+											<p class="normal">{$t('flight.directly')}</p>
+										</div>
 									</div>
 								</div>
-							</div>
+							{/if}
 						{/if}
 					</div>
 

package/src/lib/schedule-view/stores/booking.ts

@@ -88,6 +88,11 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 		$availableExtraServices.some(extra => extra.type === ExtraServiceType.picket)
 	)
 
+	const isFlightService = derived(
+		booking,
+		$booking => $booking?.serviceType === BookingServiceType.pickup || $booking?.serviceType === BookingServiceType.sending
+	)
+
 	// 금액 정보
 	const price = derived(booking, $booking => {
 		const beforePrice = isNumber($booking?.price) ? $booking.price : null
@@ -334,6 +339,7 @@ function createBookingStore(bookingDTO: Awaited<ReturnType<typeof BookingAPI.get
 		selectedPrice,
 		isModifiable,
 		priceDifference,
+		isFlightService,
 
 		// subscribe & set
 		hour,

package/src/lib/schedule-view/types/flight.ts

@@ -6,6 +6,7 @@ interface BaseFlight {
 	name: string
 	iata: string
 	selectType: 'AUTO' | 'MANUAL'
+	arrivalTerminal?: string
 }
 
 export interface FlightAuto extends BaseFlight {
@@ -17,7 +18,6 @@ export interface FlightAuto extends BaseFlight {
 	arrivalAirport: string
 	departureAirport: string
 	delay: boolean
-	arrivalTerminal: string
 }
 
 export interface FlightManual extends BaseFlight {