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

package/src/lib/schedule-view/Calender.svelte

@@ -0,0 +1,283 @@
+<script lang="ts">
+	import { dayjs } from '$lib/dayjs'
+	import { t } from '$lib/i18n'
+	import type { Dayjs } from 'dayjs'
+	import { range } from 'lodash-es'
+	import { clickOutside } from './actions/clickOutside'
+
+	export let format: string = 'YYYY-MM-DD HH:mm:ss' // 날짜 포맷
+	export let maxYear = dayjs().year() // 년도 선택 최대값. 기본값은 현재 년도
+	export let minYear = 1980
+	export let disabledDate: (date: Dayjs) => boolean = date => false
+
+	let on = false // 캘린더 on / off
+	let target = dayjs().locale('en') // 달력의 타겟.
+	let resolveFn: (value: string) => void
+	let rejectFn: (reason?: any) => void
+	// 시간 선택 변수들
+	let time = 'am'
+	let hour = 0
+	let minute = 0
+
+	// 선택된 시간
+	let stdt: Dayjs = null
+
+	let selectedYear: number
+	let selectedMonth: number
+
+	// 캘린더
+	$: calendar = (function () {
+		{
+			const cal: Dayjs[][] = []
+
+			const startWeek = target.startOf('month').week() //49
+			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
+		}
+	})()
+
+	// 시간 범위
+	// $: hourRange = (function () {
+	// 	if (time === 'am') return range(0, 12, 1)
+	// 	else return range(12, 24, 1)
+	// })()
+
+	// 분 범위
+	// $: minuteRange = range(0, 60, 1)
+
+	// am / pm 따라 시간 변경 로직
+	$: hour = (function (): number {
+		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: string) {
+		return new Promise<string>((resolve, reject) => {
+			resolveFn = resolve
+			rejectFn = reject
+
+			stdt = null
+			// 날짜가 있는 경우 현재 날짜로 변경
+			let start = startDate
+
+			// 시작일 기준으로 설정
+			if (start) {
+				target = dayjs(start).locale('en').startOf('month') // ! 타겟은 항상 월의 시작으로 잡아야 week 관련 버그 없음
+				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: Dayjs) {
+		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/src/lib/schedule-view/Layout.svelte

@@ -12,10 +12,14 @@
 	import Loader from './components/loader/Loader.svelte'
 	import { onMount } from 'svelte'
 
-	init({
-		fallbackLocale: 'en',
-		initialLocale: 'en'
-	})
+	export let initI18n: boolean
+
+	if (initI18n) {
+		init({
+			fallbackLocale: 'en',
+			initialLocale: 'en'
+		})
+	}
 
 	env.subscribe($env => {
 		locale.set($env.locale)

package/src/lib/schedule-view/Schedule.svelte

@@ -48,7 +48,7 @@
 		fullName,
 		selectedPrice
 	} = copiedBooking
-
+	export let initI18n = true
 	let on = false
 	let resolver: (value: Awaited<ReturnType<typeof open>>) => void
 
@@ -214,7 +214,7 @@
 </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/src/lib/schedule-view/actions/clickOutside.ts

@@ -0,0 +1,17 @@
+// 바깥 영역 클릭시 이벤트
+// TODO: 다국어 두개 이상일 때 문제 발생하는 부분 있음. 수정 필요
+export function clickOutside(node: 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)
+		}
+	}
+}