@movvjs/svelte-schedule-view 0.3.0 → 0.4.1-beta-1

package/.svelte-kit/__package__/i18n/locales/en.json

@@ -60,6 +60,13 @@
     "REQUEST": "STANDBY",
     "RESERV": "CONFIRMED"
   },
+  "calender": {
+    "complete": "Complete",
+    "next": "Next",
+    "please-select-month": "Please select a month",
+    "please-select-year": "Please select a year",
+    "selection-completed": "Selection completed"
+  },
   "error": {
     "pleaseEnterGuestName": "Please enter guest name",
     "pleaseEnterTelNumber": "Please enter tel number."

package/.svelte-kit/__package__/i18n/locales/ko.json

@@ -47,6 +47,13 @@
     "useTime": "이용시간",
     "waypointZone": "경유지 존"
   },
+  "calender": {
+    "complete": "완료",
+    "next": "다음",
+    "please-select-month": "월을 선택해주세요.",
+    "please-select-year": "년도를 선택해주세요.",
+    "selection-completed": "선택 완료"
+  },
   "error": {
     "pleaseEnterGuestName": "이름을 입력하세요.",
     "pleaseEnterTelNumber": "전화번호를 입력해주세요."

package/.svelte-kit/__package__/i18n/locales/vi.json

@@ -47,6 +47,13 @@
     "useTime": "Thời gian sử dụng",
     "waypointZone": "Khu vực điểm dừng"
   },
+  "calender": {
+    "complete": "Hoàn tất",
+    "next": "Tiếp theo",
+    "please-select-month": "Vui lòng chọn tháng.",
+    "please-select-year": "Vui lòng chọn năm.",
+    "selection-completed": "Hoàn tất lựa chọn"
+  },
   "error": {
     "pleaseEnterGuestName": "Vui lòng nhập tên khách",
     "pleaseEnterTelNumber": "Vui lòng nhập số điện thoại."

package/.svelte-kit/__package__/i18n/locales/zh-cn.json

@@ -47,6 +47,13 @@
     "useTime": "使用时间",
     "waypointZone": "停靠点区域"
   },
+  "calender": {
+    "complete": "完成",
+    "next": "下一步",
+    "please-select-month": "请选择月份。",
+    "please-select-year": "请选择年份。",
+    "selection-completed": "选择完成"
+  },
   "error": {
     "pleaseEnterGuestName": "请输入客人姓名",
     "pleaseEnterTelNumber": "请输入电话号码。"

package/.svelte-kit/__package__/i18n/locales/zh-tw.json

@@ -47,6 +47,13 @@
     "useTime": "使用時間",
     "waypointZone": "停靠點區域"
   },
+  "calender": {
+    "complete": "完成",
+    "next": "下一步",
+    "please-select-month": "請選擇月份。",
+    "please-select-year": "請選擇年份。",
+    "selection-completed": "選擇完成"
+  },
   "error": {
     "pleaseEnterGuestName": "請輸入客人姓名",
     "pleaseEnterTelNumber": "請輸入電話號碼。"

package/.svelte-kit/__package__/schedule-view/BookingInfo.svelte

@@ -15,9 +15,12 @@ import FlightSearch from "./components/flight-search/FlightSearch.svelte";
 import PhoneNumberInput from "./PhoneNumberInput.svelte";
 import FileUploader from "./FileUploader.svelte";
 import CarSearch from "./CarSearch.svelte";
+import Calender from "./Calender.svelte";
 const { stdt, fullName, pax, extraServices, files, plans, isFlightService } = originalBooking;
 const {
   withPreserveAndPreview,
+  stdt: copiedStdt,
+  ymd,
   hour,
   minute,
   firstName,
@@ -36,6 +39,7 @@ const {
 } = copiedBooking;
 let translation$;
 let flightSearch$;
+let calender$;
 async function copyContents() {
   const texts = [];
   texts.push(`FMS CODE : ${$originalBooking.code}`);
@@ -145,6 +149,10 @@ function getTerminalName(flight) {
     return null;
   }
 }
+function openCalender() {
+  calender$.open($stdt).then((date) => $ymd = date).catch(() => {
+  });
+}
 </script>
 
 <Translation bind:this={translation$} />
@@ -168,8 +176,19 @@ function getTerminalName(flight) {
 				<tr>
 					<th>{$t('booking.travelDate')}</th>
 					<td>
-						<p class="value-txt">{dayjs($stdt).format('ll (dd)')}</p>
-						<!-- <input type="text" class="indie_text_nor xs3 white w100" value="2023-10-16"> -->
+						{#if !$isEdit}
+							<p class="value-txt">{dayjs($stdt).format('ll (dd)')}</p>
+						{:else}
+							<div class="indie_po_re">
+								<input
+									value={dayjs($copiedStdt).format('ll (dd)')}
+									type="text"
+									class="indie_text_nor xs3 white w100"
+									readonly
+									on:click={() => openCalender()} />
+								<Calender bind:this={calender$} />
+							</div>
+						{/if}
 					</td>
 				</tr>
 				<tr>

package/.svelte-kit/__package__/schedule-view/Calender.svelte

@@ -0,0 +1,246 @@
+<script>import { dayjs } from "../dayjs";
+import { t } from "../i18n";
+import { range } from "lodash-es";
+import { clickOutside } from "./actions/clickOutside";
+export let format = "YYYY-MM-DD HH:mm:ss";
+export let maxYear = dayjs().year();
+export let minYear = 1980;
+export let disabledDate = (date) => false;
+let on = false;
+let target = dayjs().locale("en");
+let resolveFn;
+let rejectFn;
+let time = "am";
+let hour = 0;
+let minute = 0;
+let stdt = null;
+let selectedYear;
+let selectedMonth;
+$:
+  calendar = function() {
+    {
+      const cal = [];
+      const startWeek = target.startOf("month").week();
+      let endWeek = target.endOf("month").week();
+      let done = false;
+      if (endWeek === 1) {
+        let start = target.startOf("month");
+        let weekIndex = -1;
+        while (!done) {
+          start = start.add(1, "week").startOf("week");
+          weekIndex++;
+          done = target.month() !== start.month();
+        }
+        endWeek = startWeek + weekIndex;
+      }
+      for (let week = startWeek; week <= endWeek; week++) {
+        const days = Array(7).fill(0).map((n, i) => {
+          let day = target.week(week).startOf("week").clone().add(n + i, "day");
+          return day;
+        });
+        cal.push(days);
+      }
+      return cal;
+    }
+  }();
+$:
+  hour = function() {
+    if (time === "am") {
+      if (hour < 12)
+        return hour;
+      else
+        return hour === 12 ? 0 : hour - 12;
+    } else {
+      if (hour >= 12)
+        return hour;
+      else
+        return hour === 0 ? 12 : hour + 12;
+    }
+  }();
+export function open(startDate) {
+  return new Promise((resolve, reject) => {
+    resolveFn = resolve;
+    rejectFn = reject;
+    stdt = null;
+    let start = startDate;
+    if (start) {
+      target = dayjs(start).locale("en").startOf("month");
+      stdt = dayjs(start);
+      time = dayjs(start).hour() < 12 ? "am" : "pm";
+      hour = dayjs(start).hour();
+      minute = dayjs(start).minute();
+    }
+    on = true;
+  });
+}
+function cancel() {
+  close();
+  rejectFn();
+}
+function close() {
+  on = false;
+}
+function prev() {
+  target = target.subtract(1, "month").startOf("month");
+}
+function next() {
+  target = target.add(1, "month").startOf("month");
+}
+function select(date) {
+  if (disabledDate(date))
+    return;
+  stdt = date;
+}
+function complete() {
+  if (!stdt)
+    return;
+  resolveFn(stdt.hour(hour).minute(minute).second(0).format(format));
+  close();
+}
+</script>
+
+<article class="indie_calendar-comp-box" class:on use:clickOutside on:outclick={() => on && cancel()}>
+	{#if on}
+		<div class="title">
+			<p class="days">{target.format('YYYY.MM')}</p>
+
+			<div class="btns">
+				<button type="button" class="btn_cal prev" on:click={() => prev()}>이전 달력</button>
+				<!-- 클릭 시 scroll-select-box에 클래스 on 추가 -->
+				<button type="button" class="btn_calendar" on:click={() => (selectedYear = target.year())}>년도 선택</button>
+				<button type="button" class="btn_cal next" on:click={() => next()}>다음 달력</button>
+			</div>
+		</div>
+
+		<div class="calender_box">
+			<table class="indie_tbl_in_calendar">
+				<thead>
+					<tr>
+						<th>{dayjs().isoWeekday(7).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(1).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(2).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(3).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(4).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(5).format('ddd')}</th>
+						<th>{dayjs().isoWeekday(6).format('ddd')}</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each calendar as week}
+						<tr>
+							{#each week as day}
+								<td
+									class:past={day.isBefore(target, 'month') || day.isAfter(target, 'month') || disabledDate(day)}
+									class:today={day.isSame(dayjs(), 'day')}
+									class:select={stdt && day.isSame(stdt, 'day')}>
+									<a href={null} on:click={() => select(day)}>{day.format('D')}</a>
+								</td>
+							{/each}
+						</tr>
+						<!-- content here -->
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<!-- 최종 완료 -->
+		<!-- disabled 추가 시 회색으로 변경 -->
+		<button type="button" class="indie_btn_nor blue lg btn_sec" disabled={!stdt} on:click|stopPropagation={complete}>
+			{$t('calender.selection-completed')}
+		</button>
+
+		<!-- <div class="time_box">
+			<p class="sbj">
+				The start time of the vehicle <br />
+				Please choose.
+			</p>
+			<p class="indie_select_line_form black">
+				<span>
+					<select>
+						<option>AM</option>
+						<option>PM</option>
+					</select>
+				</span>
+				<span>
+					<select>
+						<option>09</option>
+						<option>08</option>
+						<option>07</option>
+					</select>
+				</span>
+				<span>
+					<select>
+						<option>00</option>
+						<option>01</option>
+						<option>02</option>
+					</select>
+				</span>
+			</p>
+		</div> -->
+
+		<!-- 년도 선택 팝업 - 클래스 on 추가 시 표시 -->
+		<div class="scroll-select-box" class:on={!!selectedYear}>
+			<div class="title">
+				<p>{$t('calender.please-select-year')}</p>
+				<button type="button" class="btn_close" on:click={() => (selectedYear = null)}>Close</button>
+			</div>
+			<div class="select_b">
+				<ul class="list">
+					<!-- 클릭 시 li에 - 클래스 on 추가 -->
+					{#each range(maxYear, minYear - 1, -1) as year}
+						<li class:on={selectedYear === year}><a href={null} on:click={() => (selectedYear = year)}>{year}</a></li>
+					{/each}
+				</ul>
+			</div>
+			<div class="btns">
+				<!-- 
+              년도 클릭 전 disabled 추가 후 - Close로 변경
+              년도 클릭 시 disabled 제거 후 - Next로 변경 
+          -->
+				<button
+					type="button"
+					class="indie_btn_nor blue lg btn_sec"
+					on:click={() => {
+						target = target.set('year', selectedYear)
+						selectedYear = null
+						selectedMonth = target.month()
+					}}>{$t('calender.next')}</button>
+			</div>
+		</div>
+
+		<!-- 달 선택 팝업 (위에 년도 선택 후) - 클래스 on 추가 시 표시 -->
+		<div class="scroll-select-box" class:on={!!selectedMonth}>
+			<div class="title">
+				<p>{$t('calender.please-select-month')}</p>
+				<button type="button" class="btn_close" on:click={() => (selectedMonth = null)}>Close</button>
+			</div>
+			<div class="select_b">
+				<ul class="list">
+					<!-- 클릭 시 li에 - 클래스 on 추가 -->
+					{#each range(1, 13, 1) as month}
+						<li class:on={selectedMonth === month}>
+							<a
+								href={null}
+								on:click={() => {
+									selectedMonth = month
+								}}>{month}</a>
+						</li>
+					{/each}
+				</ul>
+			</div>
+			<div class="btns">
+				<!-- 
+              달 클릭 전 disabled 추가 후 - Select a year로 변경
+              달 클릭 시 disabled 제거 후 - Complete로 변경 
+          -->
+				<button
+					type="button"
+					class="indie_btn_nor blue lg btn_sec"
+					on:click={() => {
+						target = target.set('month', selectedMonth - 1) // ex) 3 = 4월
+						selectedMonth = null
+					}}>{$t('calender.complete')}</button>
+			</div>
+		</div>
+	{/if}
+</article>

package/.svelte-kit/__package__/schedule-view/Calender.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Dayjs } from 'dayjs';
+declare const __propDef: {
+    props: {
+        format?: string;
+        maxYear?: number;
+        minYear?: number;
+        disabledDate?: (date: Dayjs) => boolean;
+        open?: (startDate: string) => Promise<string>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CalenderProps = typeof __propDef.props;
+export type CalenderEvents = typeof __propDef.events;
+export type CalenderSlots = typeof __propDef.slots;
+export default class Calender extends SvelteComponent<CalenderProps, CalenderEvents, CalenderSlots> {
+    get open(): (startDate: string) => Promise<string>;
+}
+export {};

package/.svelte-kit/__package__/schedule-view/Layout.svelte

@@ -6,10 +6,13 @@ import { env } from "../store/env";
 import { Alert, Confirm } from "./components/notifications";
 import Loader from "./components/loader/Loader.svelte";
 import { onMount } from "svelte";
-init({
-  fallbackLocale: "en",
-  initialLocale: "en"
-});
+export let initI18n;
+if (initI18n) {
+  init({
+    fallbackLocale: "en",
+    initialLocale: "en"
+  });
+}
 env.subscribe(($env) => {
   locale.set($env.locale);
   dayjs.locale($env.locale);

package/.svelte-kit/__package__/schedule-view/Layout.svelte.d.ts

@@ -1,7 +1,9 @@
 import { SvelteComponent } from "svelte";
 import './assets/scss/indie_booking.scss';
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        initI18n: boolean;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/.svelte-kit/__package__/schedule-view/Schedule.svelte

@@ -30,6 +30,7 @@ const {
   fullName,
   selectedPrice
 } = copiedBooking;
+export let initI18n = true;
 let on = false;
 let resolver;
 $:
@@ -160,7 +161,7 @@ async function save() {
 </script>
 
 <Toaster />
-<Layout>
+<Layout {initI18n}>
 	<section class="indie_pop_wrap scroll" class:on>
 		{#if on}
 			<div class="pop_base full_2 indie_passengers_info_pop">

package/.svelte-kit/__package__/schedule-view/Schedule.svelte.d.ts

@@ -13,6 +13,7 @@ export interface InitOption {
 import type { Locale, Target } from './types';
 declare const __propDef: {
     props: {
+        initI18n?: boolean;
         init?: (options: InitOption) => {
             open: ({ code }: {
                 code: string;

package/.svelte-kit/__package__/schedule-view/actions/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Node): {
+    destroy(): void;
+};

package/.svelte-kit/__package__/schedule-view/actions/clickOutside.js

@@ -0,0 +1,15 @@
+// 바깥 영역 클릭시 이벤트
+// TODO: 다국어 두개 이상일 때 문제 발생하는 부분 있음. 수정 필요
+export function clickOutside(node) {
+    const handleClick = event => {
+        if (!node.contains(event.target)) {
+            node.dispatchEvent(new CustomEvent('outclick'));
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}