@movvjs/svelte-schedule-view 0.2.2 → 0.2.3-revert-terminal

package/dist/schedule-view/BookingInfo.svelte

@@ -14,7 +14,7 @@ import FlightSearch from "./components/flight-search/FlightSearch.svelte";
 import PhoneNumberInput from "./PhoneNumberInput.svelte";
 import FileUploader from "./FileUploader.svelte";
 import CarSearch from "./CarSearch.svelte";
-const { stdt, fullName, pax, extraServices, files, plans, isFlightService } = originalBooking;
+const { stdt, fullName, pax, extraServices, files, plans } = originalBooking;
 const {
   withPreserveAndPreview,
   hour,
@@ -45,9 +45,9 @@ async function copyContents() {
   texts.push(`${$t("booking.startTime")} : ${dayjs($stdt).format("HH:mm")}`);
   texts.push(`${$t("booking.carInfo")} : ${getCarName($originalBooking.carInfo, { seat: true, seatPostfix: $t("booking.seater") })}`);
   texts.push(`${$t("booking.pax")} : ${$pax}`);
-  if ($isFlightService) {
-    texts.push(`${$t("booking.flight")} : ${[$originalBooking.flight?.name, getTerminalName($originalBooking.flight)].filter(Boolean).join(" / ")}`);
-  }
+  texts.push(
+    `${$t("booking.flight")} : ${$originalBooking.flight?.name || "- -"} ${$originalBooking.flight?.selectType === "AUTO" && $originalBooking.flight?.arrivalTerminal ? `/ ${$t("flight.terminal", { values: { number: $originalBooking.flight.arrivalTerminal } })}` : ""}`
+  );
   texts.push(`${$t("booking.guestName")} : ${$fullName}`);
   texts.push(`${$t("booking.telNo")} : ${$originalBooking.tel || "- -"}`);
   const extraServiceText = $originalBooking.extra?.length > 0 ? $originalBooking.extra.map((s) => $t(`extraServiceType.${s.type}`)).join(", ") : "- -";
@@ -104,46 +104,13 @@ async function toggleAutoPicket(e) {
 function openFlightSearch() {
   flightSearch$.open({
     dateTime: $copiedBooking.ymd,
-    airport: (() => {
-      if ($copiedBooking.serviceType === BookingServiceType.pickup) {
-        return {
-          iata: $copiedBooking.origin?.iata || null,
-          code: $copiedBooking.origin?.code || null
-        };
-      } else if ($copiedBooking.serviceType === BookingServiceType.sending) {
-        return {
-          iata: $copiedBooking.dest?.iata || null,
-          code: $copiedBooking.dest?.code || null
-        };
-      } else {
-        return null;
-      }
-    })(),
-    terminalOnly: $copiedBooking.serviceType === BookingServiceType.sending
+    iata: $copiedBooking.origin?.iata
   }).then((flight) => {
     $copiedBooking.flight = flight;
   }).catch((e) => {
     alert.open({ title: $t("alert.error"), text: e.message });
   });
 }
-function getTerminalName(flight) {
-  if (!flight.arrivalTerminal)
-    return null;
-  if (flight.selectType === "AUTO") {
-    switch (flight.arrivalTerminal) {
-      case "I":
-        return "International";
-      case "D":
-        return "Domestic";
-      default:
-        return `Terminal ${flight.arrivalTerminal}`;
-    }
-  } else if (flight.selectType === "MANUAL") {
-    return flight.arrivalTerminal;
-  } else {
-    return null;
-  }
-}
 </script>
 
 <Translation bind:this={translation$} />
@@ -201,17 +168,17 @@ function getTerminalName(flight) {
 					</td>
 				</tr>
 
-				{#if $isFlightService}
+				{#if $originalBooking.serviceType === BookingServiceType.pickup}
 					<tr>
 						<th>{$t('booking.flight')}</th>
 						<td>
 							{#if !$isEdit}
 								{#if $originalBooking.flight}
 									<p class="indie_value-text flight">
-										{@html [$originalBooking.flight.name, getTerminalName($originalBooking.flight)]
-											.map((value, i) => (value ? (i === 0 ? `<b>${value}</b>` : value) : null))
-											.filter(Boolean)
-											.join(' / ')}
+										<b>{$originalBooking.flight.name}</b>
+										{#if $originalBooking.flight.selectType === 'AUTO' && $originalBooking.flight.arrivalTerminal}
+											/ {$t('flight.terminal', { values: { number: $originalBooking.flight.arrivalTerminal } })}
+										{/if}
 									</p>
 									{#if $originalBooking.flight.selectType === 'MANUAL'}
 										<div class="indie_exclamation_mark_box sm black">
@@ -225,10 +192,10 @@ function getTerminalName(flight) {
 								<!--  -->
 								{#if $copiedBooking.flight}
 									<p class="indie_value-text flight">
-										{@html [$copiedBooking.flight.name, getTerminalName($copiedBooking.flight)]
-											.map((value, i) => (value ? (i === 0 ? `<b>${value}</b>` : value) : null))
-											.filter(Boolean)
-											.join(' / ')}
+										<b>{$copiedBooking.flight.name}</b>
+										{#if $copiedBooking.flight.selectType === 'AUTO' && $copiedBooking.flight.arrivalTerminal}
+											/ {$t('flight.terminal', { values: { number: $copiedBooking.flight.arrivalTerminal } })}
+										{/if}
 									</p>
 									<button type="button" class="indie_btn_squre only refresh_black mgl10" on:click={() => openFlightSearch()}>다시선택</button>
 									{#if $copiedBooking.flight.selectType !== 'AUTO'}

package/dist/schedule-view/Schedule.svelte

@@ -21,10 +21,23 @@ import BookingInfo from "./BookingInfo.svelte";
 import { API_URL } from "../axios/constant";
 import QS from "qs";
 import Axios from "axios";
-const { stdt, price, isModifiable } = originalBooking;
-const { price: editPrice, availableDestZones, availableWaypointZones, fullName, selectedPrice, priceDifference } = copiedBooking;
+const { stdt, price, priceDifference, isModifiable } = originalBooking;
+const {
+  price: editPrice,
+  priceDifference: editPriceDifference,
+  availableDestZones,
+  availableWaypointZones,
+  fullName,
+  selectedPrice
+} = copiedBooking;
 let on = false;
 let resolver;
+$:
+  targetPrice = $isEdit ? $editPrice : $price;
+$:
+  forex = targetPrice?.new?.forex ?? "";
+$:
+  difference = $isEdit ? $editPriceDifference : $priceDifference;
 export function init(options) {
   const { target, isDev, token, locale, viewOnly = false } = options;
   if (!target)
@@ -184,27 +197,22 @@ async function save() {
 								<dl class="priceAll">
 									<dt>{$t('booking.totalPrice')}</dt>
 									<dd>
-										{#if !$isEdit}
-											<!-- * 수정중이 아닌 경우엔 검정색으로 금액 표현 -->
-											<strong>{comma($price.before.amount)} {$price.before.forex}</strong>
+										<!-- * 차액 발생시 -->
+										{#if difference > 0 || difference < 0}
+											<!-- 검정 표현 -->
+											<strong>{comma(targetPrice.before.amount)} {forex}</strong>
+
+											<!--  빨간색 표현 -->
+											<span>
+												{difference > 0 ? ' + ' : ' - '}
+												{comma(Math.abs(difference))}
+												{forex}
+												= {comma(targetPrice.new.amount)}
+												{forex}
+											</span>
 										{:else}
-											{@const forex = $price.new.forex}
-											<!-- * 수정중일때, 차액 발생시 -->
-											{#if $priceDifference > 0 || $priceDifference < 0}
-												<!--  앞부분은 확정된 금액이니 검은색 표현 -->
-												<strong>{comma($editPrice.before.amount)} {forex}</strong>
-												<!-- 뒷부분은 빨간색 표현 -->
-												<span>
-													{$priceDifference > 0 ? ' + ' : ' - '}
-													{comma(Math.abs($priceDifference))}
-													{forex}
-													= {comma($editPrice.new.amount)}
-													{forex}
-												</span>
-											{:else}
-												<!-- * 차액 미 발생시 검정색 표현-->
-												<strong>{comma($editPrice.new.amount)} {forex}</strong>
-											{/if}
+											<!-- * 차액 미 발생시 검정색 표현-->
+											<strong>{comma(targetPrice.new.amount)} {forex}</strong>
 										{/if}
 									</dd>
 								</dl>

package/dist/schedule-view/api/common/index.d.ts

@@ -15,5 +15,4 @@ export declare class CommonAPI {
         url: string;
     }>;
     static searchPlace(keyword: string): Promise<BookingLocation[]>;
-    static getPoiTerminals(code: string): Promise<string[]>;
 }

package/dist/schedule-view/api/common/index.js

@@ -114,13 +114,4 @@ export class CommonAPI {
             throw Error('Invalid target');
         }
     }
-    static async getPoiTerminals(code) {
-        const { data } = await axios.get(`/common/poiTerminal/list/${code}`);
-        if (data.mode === false) {
-            throw new Error(data.msg);
-        }
-        else {
-            return data.list;
-        }
-    }
 }

package/dist/schedule-view/assets/scss/indie_booking.scss

@@ -3038,9 +3038,8 @@
 
         .map_box{
             flex-grow: 1;
-            background-color: royalblue;
+            background-color: Azure;
             position: relative;
-            overflow: hidden;
 
             .indie_ic_map_loca{
                 position: relative;
@@ -4612,61 +4611,5 @@
         }
     }
 
-
-
-    
-    //마진 값
-    .mg{
-        @for $i from 0 through 40{
-            @if(($i % 5) == 0){
-                &t#{$i}{margin-top: #{$i}px;}
-                &l#{$i}{margin-left: #{$i}px;}
-                &r#{$i}{margin-right: #{$i}px;}
-                &b#{$i}{margin-bottom: #{$i}px;}
-            }
-        }
-
-        &TMinus{
-            margin-top: -1px;
-        }
-
-        &-l-auto{
-            margin-left: auto;
-        }
-        &-r-auto{
-            margin-right: auto;
-        }
-    }
-
-    //패딩 값
-    .pd{
-        @for $i from 0 through 40{
-            @if(($i % 5) == 0){
-                &t#{$i}{padding-top: #{$i}px;}
-                &l#{$i}{padding-left: #{$i}px;}
-                &r#{$i}{padding-right: #{$i}px;}
-                &b#{$i}{padding-bottom: #{$i}px;}
-            }
-        }
-    }
-
-    // 넓이 값 - 퍼센트
-    .w{
-        @for $i from 0 through 100{
-            @if(($i % 5) == 0){
-                &#{$i}{width: #{$i + '%'};}
-            }
-        }
-    }
-
-    // 넓이 값 - 픽셀
-    .w{
-        @for $i from 0 through 500{
-            @if(($i % 10) == 0){
-                &#{$i}px{width: #{$i + 'px'};}
-            }
-        }
-    }
-
 }
 

package/dist/schedule-view/components/flight-search/FlightSearch.svelte

@@ -3,12 +3,12 @@ import { padStart, range } from "lodash-es";
 import { fade } from "svelte/transition";
 import { t } from "../../../i18n";
 import { dayjs } from "../../../dayjs";
-import { BookingAPI, CommonAPI } from "../../api";
+import { BookingAPI } from "../../api";
 import { alert } from "../notifications";
 let on = false;
 let type = "AUTO";
 let dateTime;
-let airport = { iata: null, code: null };
+let iata;
 let loading = false;
 let resolveFn;
 let arrivalDate;
@@ -29,22 +29,15 @@ let manualInput = "";
 let estimateDate;
 let hour = 0;
 let minute = 0;
-let terminals = [];
-let arrivalTerminal;
 export async function open(options) {
   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;
-    airport.iata = options.airport?.iata;
-    airport.code = options.airport?.code;
+    iata = options.iata;
     manualInput = "";
     estimateDate = dayjs(dateTime);
     hour = estimateDate.hour();
@@ -52,28 +45,15 @@ export async function open(options) {
     flights = [];
     page = 1;
     arrivalDate = dayjs(dateTime).minute(0);
-    terminals = [];
-    arrivalTerminal = null;
-    if (options.terminalOnly) {
-      changeType("TERMINAL");
+    if (iata) {
+      type = "AUTO";
+      fetchFlights();
     } else {
-      if (airport.iata) {
-        changeType("AUTO");
-      } else {
-        changeType("MANUAL");
-      }
+      type = "MANUAL";
     }
     on = true;
   });
 }
-function changeType(value) {
-  type = value;
-  if (type === "TERMINAL" || type === "MANUAL") {
-    fetchTerminals();
-  } else if (type === "AUTO") {
-    fetchFlights();
-  }
-}
 function close() {
   on = false;
 }
@@ -81,7 +61,7 @@ async function fetchFlights() {
   loading = true;
   try {
     flights = await BookingAPI.searchFlights({
-      iata: airport.iata,
+      iata,
       ymd: arrivalDate.format("YYYY-MM-DD"),
       time: arrivalDate.hour()
     });
@@ -92,17 +72,6 @@ async function fetchFlights() {
     loading = false;
   }
 }
-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();
@@ -137,26 +106,12 @@ function save() {
       return;
     }
     const manualFlight = {
-      iata: airport.iata ?? null,
+      iata,
       ymd: estimateDate.format("YYYY-MM-DD HH:mm:ss"),
       name: manualInput,
-      selectType: "MANUAL",
-      arrivalTerminal
+      selectType: "MANUAL"
     };
     resolveFn(manualFlight);
-  } else if (type === "TERMINAL") {
-    if (!arrivalTerminal) {
-      alert.open({ text: $t("flight.selectTerminal") });
-      return;
-    }
-    const terminalFlight = {
-      iata: airport.iata ?? null,
-      ymd: estimateDate.format("YYYY-MM-DD HH:mm:ss"),
-      name: null,
-      selectType: "MANUAL",
-      arrivalTerminal
-    };
-    resolveFn(terminalFlight);
   }
   close();
 }
@@ -173,160 +128,132 @@ function save() {
 					</div>
 
 					<div class="contents pdMg">
-						{#if type === 'TERMINAL'}
+						<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 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}
-								<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 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>
 
-							{#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>
+															<dl class="end">
+																<dt>{item.arrivalAirport}</dt>
+																<dd>{dayjs(item.arrive).format('HH:mm')}</dd>
+															</dl>
+														</div>
+													</label>
+												</div>
+											</li>
+										{/each}
+									</ul>
 								</div>
 
-								{#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 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 lg w100 mgt10" placeholder={$t('flight.flightNo')} />
 
-									<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')} />
+								<div class="indie_flight_direct_input">
+									<p class="tit">{$t('flight.estimatedTimeOfArrival')}</p>
 
-									{#if loading}
-										<div class="indie_loading_common_box">
-											<div class="indie_loader" />
+									<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>
-									{: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 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>
+									<div class="indie_exclamation_mark_box sm black">
+										<p class="normal">{$t('flight.directly')}</p>
 									</div>
 								</div>
-							{/if}
+							</div>
 						{/if}
 					</div>