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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,8 +1,8 @@
1
- import { _, register } from 'svelte-i18n';
1
+ import { _, register, init, isLoading } from 'svelte-i18n';
2
2
  register('en', () => import('./locales/en.json'));
3
3
  register('ko', () => import('./locales/ko.json'));
4
4
  register('zh-cn', () => import('./locales/zh-cn.json'));
5
5
  register('zh-tw', () => import('./locales/zh-tw.json'));
6
6
  register('vi', () => import('./locales/vi.json'));
7
7
  const t = _;
8
- export { t };
8
+ export { t, init, isLoading };
@@ -1,26 +1,29 @@
1
1
  <script context="module">export const isEdit = writable(false);
2
2
  </script>
3
3
 
4
- <script>import { Toaster } from "svelte-french-toast";
4
+ <script>import "./assets/scss/indie_booking.scss";
5
+ import toast, { Toaster } from "svelte-french-toast";
6
+ import { onMount } from "svelte";
5
7
  import { writable } from "svelte/store";
6
8
  import { cloneDeep } from "lodash-es";
7
9
  import consola from "consola";
10
+ import QS from "qs";
11
+ import Axios from "axios";
8
12
  import { dayjs } from "../dayjs";
9
- import { t } from "../i18n";
13
+ import { t, init as i18nInit, isLoading } from "../i18n";
10
14
  import { env } from "../store/env";
15
+ import { API_URL } from "../axios/constant";
11
16
  import { BookingAPI } from "./api";
12
17
  import { copiedBooking, originalBooking } from "./stores/booking";
13
18
  import { comma } from "./utils";
14
19
  import { loader } from "./components/loader";
15
- import { alert } from "./components/notifications";
16
- import Layout from "./Layout.svelte";
20
+ import { alert, Alert, Confirm } from "./components/notifications";
21
+ import Loader from "./components/loader/Loader.svelte";
17
22
  import Map from "./Map.svelte";
18
23
  import ServiceZone from "./ServiceZone.svelte";
19
24
  import Plan from "./Plan.svelte";
20
25
  import BookingInfo from "./BookingInfo.svelte";
21
- import { API_URL } from "../axios/constant";
22
- import QS from "qs";
23
- import Axios from "axios";
26
+ import Portal from "svelte-portal";
24
27
  const { stdt, price, priceDifference, isModifiable } = originalBooking;
25
28
  const {
26
29
  price: editPrice,
@@ -30,7 +33,7 @@ const {
30
33
  fullName,
31
34
  selectedPrice
32
35
  } = copiedBooking;
33
- export let initI18n = true;
36
+ let initialized = false;
34
37
  let on = false;
35
38
  let resolver;
36
39
  $:
@@ -47,6 +50,38 @@ export function init(options) {
47
50
  throw new Error("token\uC744 \uB123\uC5B4\uC8FC\uC138\uC694.");
48
51
  if (!locale)
49
52
  throw new Error("locale\uC744 \uB123\uC5B4\uC8FC\uC138\uC694.");
53
+ if (locale) {
54
+ i18nInit({ fallbackLocale: "en", initialLocale: locale });
55
+ dayjs.locale(locale);
56
+ }
57
+ googleMaps();
58
+ function googleMaps() {
59
+ ;
60
+ ((g) => {
61
+ var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window;
62
+ b = b[c] || (b[c] = {});
63
+ var d = b.maps || (b.maps = {}), r = /* @__PURE__ */ new Set(), e = new URLSearchParams(), u = () => h || (h = new Promise(async (f, n) => {
64
+ await (a = m.createElement("script"));
65
+ e.set("libraries", [...r] + "");
66
+ for (k in g)
67
+ e.set(k.replace(/[A-Z]/g, (t2) => "_" + t2[0].toLowerCase()), g[k]);
68
+ e.set("callback", c + ".maps." + q);
69
+ a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
70
+ d[q] = f;
71
+ a.onerror = () => h = n(Error(p + " could not load."));
72
+ a.nonce = m.querySelector("script[nonce]")?.nonce || "";
73
+ m.head.append(a);
74
+ }));
75
+ d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n));
76
+ })({
77
+ key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
78
+ v: "weekly",
79
+ region: "kr",
80
+ language: navigator?.language || "en"
81
+ // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
82
+ // Add other bootstrap parameters as needed, using camel case.
83
+ });
84
+ }
50
85
  env.set({
51
86
  target,
52
87
  accessToken: token.accessToken,
@@ -56,6 +91,7 @@ export function init(options) {
56
91
  isDev
57
92
  });
58
93
  consola.withTag("svelte-schedule-view").info("\uC124\uC815\uB41C env", $env);
94
+ initialized = true;
59
95
  return {
60
96
  open
61
97
  };
@@ -160,81 +196,91 @@ async function save() {
160
196
  }
161
197
  </script>
162
198
 
163
- <Toaster />
164
- <Layout {initI18n}>
165
- <section class="indie_pop_wrap scroll" class:on>
166
- {#if on}
167
- <div class="pop_base full_2 indie_passengers_info_pop">
168
- <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
199
+ <Portal target="body">
200
+ {#if !$isLoading && initialized}
201
+ <div id="indie_booking_wrapper">
202
+ <Toaster />
203
+ <Loader />
204
+ <Alert />
205
+ <Confirm />
169
206
 
170
- <!-- 예약관리 > 예약_view > Schedule -->
171
- <section class="indie_dispatch_passenger_sche_w booking_schedule">
172
- <!-- 지도 부분 -->
173
- <Map />
174
- <!-- 예약 > 스케쥴 -->
175
- <div class="indie_booking_schedule_modify_box">
176
- <div class="header_b">
177
- <div class="tags">
178
- <span>{$originalBooking.code}</span>
179
- <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
180
- </div>
181
- <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
182
- <!-- <select class="indie_select_nor">
183
- <option value="">2023-10-16 (Mon)</option>
184
- <option value="">2023-10-16 (Mon)</option>
185
- </select> -->
207
+ <section class="indie_pop_wrap scroll" class:on>
208
+ {#if on}
209
+ <div class="pop_base full_2 indie_passengers_info_pop">
210
+ <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
211
+
212
+ <!-- 예약관리 > 예약_view > Schedule -->
213
+ <section class="indie_dispatch_passenger_sche_w booking_schedule">
214
+ <!-- 지도 부분 -->
215
+ <Map />
216
+ <!-- 예약 > 스케쥴 -->
217
+ <div class="indie_booking_schedule_modify_box">
218
+ <div class="header_b">
219
+ <div class="tags">
220
+ <span>{$originalBooking.code}</span>
221
+ <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
222
+ </div>
223
+ <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
224
+ <!-- <select class="indie_select_nor">
225
+ <option value="">2023-10-16 (Mon)</option>
226
+ <option value="">2023-10-16 (Mon)</option>
227
+ </select> -->
186
228
 
187
- <!-- <button type="button" class="btn_close">닫기</button> -->
188
- </div>
229
+ <!-- <button type="button" class="btn_close">닫기</button> -->
230
+ </div>
189
231
 
190
- <div class="contents_b">
191
- <ServiceZone />
192
- <Plan />
193
- <BookingInfo />
194
- </div>
232
+ <div class="contents_b">
233
+ <ServiceZone />
234
+ <Plan />
235
+ <BookingInfo />
236
+ </div>
195
237
 
196
- <div class="footer_b">
197
- <div class="left">
198
- <dl class="priceAll">
199
- <dt>{$t('booking.totalPrice')}</dt>
200
- <dd>
201
- <!-- * 차액 발생시 -->
202
- {#if difference > 0 || difference < 0}
203
- <!-- 검정 표현 -->
204
- <strong>{comma(targetPrice.before.amount)} {forex}</strong>
238
+ <div class="footer_b">
239
+ <div class="left">
240
+ <dl class="priceAll">
241
+ <dt>{$t('booking.totalPrice')}</dt>
242
+ <dd>
243
+ <!-- * 차액 발생시 -->
244
+ {#if difference > 0 || difference < 0}
245
+ <!-- 검정 표현 -->
246
+ <strong>{comma(targetPrice.before.amount)} {forex}</strong>
205
247
 
206
- <!-- 빨간색 표현 -->
207
- <span>
208
- {difference > 0 ? ' + ' : ' - '}
209
- {comma(Math.abs(difference))}
210
- {forex}
211
- = {comma(targetPrice.new.amount)}
212
- {forex}
213
- </span>
248
+ <!-- 빨간색 표현 -->
249
+ <span>
250
+ {difference > 0 ? ' + ' : ' - '}
251
+ {comma(Math.abs(difference))}
252
+ {forex}
253
+ = {comma(targetPrice.new.amount)}
254
+ {forex}
255
+ </span>
256
+ {:else}
257
+ <!-- * 차액 미 발생시 검정색 표현-->
258
+ <strong>{comma(targetPrice.new.amount)} {forex}</strong>
259
+ {/if}
260
+ </dd>
261
+ </dl>
262
+ </div>
263
+
264
+ <div class="right">
265
+ <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
266
+ {#if !$isEdit}
267
+ {#if $isModifiable}
268
+ <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
269
+ {/if}
214
270
  {:else}
215
- <!-- * 차액 발생시 검정색 표현-->
216
- <strong>{comma(targetPrice.new.amount)} {forex}</strong>
271
+ <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
272
+ <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
217
273
  {/if}
218
- </dd>
219
- </dl>
220
- </div>
221
-
222
- <div class="right">
223
- <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
224
- {#if !$isEdit}
225
- {#if $isModifiable}
226
- <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
227
- {/if}
228
- {:else}
229
- <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
230
- <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
231
- {/if}
274
+ </div>
275
+ </div>
232
276
  </div>
233
- </div>
277
+ </section>
278
+ <!-- // 배차 - 탑승자 정보 및 스케줄 -->
234
279
  </div>
235
- </section>
236
- <!-- // 배차 - 탑승자 정보 및 스케줄 -->
237
- </div>
238
- {/if}
239
- </section>
240
- </Layout>
280
+ {/if}
281
+ </section>
282
+ </div>
283
+ {:else}
284
+ <!-- i18n loading. . . . -->
285
+ {/if}
286
+ </Portal>
@@ -10,10 +10,10 @@ export interface InitOption {
10
10
  };
11
11
  viewOnly?: boolean;
12
12
  }
13
+ import './assets/scss/indie_booking.scss';
13
14
  import type { Locale, Target } from './types';
14
15
  declare const __propDef: {
15
16
  props: {
16
- initI18n?: boolean;
17
17
  init?: (options: InitOption) => {
18
18
  open: ({ code }: {
19
19
  code: string;
@@ -21,7 +21,7 @@ export const options = {
21
21
  app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n\t\t<meta name=\"referrer\" content=\"no-referrer\" />\n\t\t" + head + "\n\t</head>\n\t<body data-sveltekit-preload-data=\"hover\">\n\t\t<div>" + body + "</div>\n\t</body>\n</html>\n",
22
22
  error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
23
23
  },
24
- version_hash: "3ouolu"
24
+ version_hash: "jc27ay"
25
25
  };
26
26
 
27
27
  export async function get_hooks() {
@@ -1,8 +1,8 @@
1
- import { _, register } from 'svelte-i18n';
1
+ import { _, register, init, isLoading } from 'svelte-i18n';
2
2
  register('en', () => import('./locales/en.json'));
3
3
  register('ko', () => import('./locales/ko.json'));
4
4
  register('zh-cn', () => import('./locales/zh-cn.json'));
5
5
  register('zh-tw', () => import('./locales/zh-tw.json'));
6
6
  register('vi', () => import('./locales/vi.json'));
7
7
  const t = _;
8
- export { t };
8
+ export { t, init, isLoading };
@@ -1,26 +1,29 @@
1
1
  <script context="module">export const isEdit = writable(false);
2
2
  </script>
3
3
 
4
- <script>import { Toaster } from "svelte-french-toast";
4
+ <script>import "./assets/scss/indie_booking.scss";
5
+ import toast, { Toaster } from "svelte-french-toast";
6
+ import { onMount } from "svelte";
5
7
  import { writable } from "svelte/store";
6
8
  import { cloneDeep } from "lodash-es";
7
9
  import consola from "consola";
10
+ import QS from "qs";
11
+ import Axios from "axios";
8
12
  import { dayjs } from "../dayjs";
9
- import { t } from "../i18n";
13
+ import { t, init as i18nInit, isLoading } from "../i18n";
10
14
  import { env } from "../store/env";
15
+ import { API_URL } from "../axios/constant";
11
16
  import { BookingAPI } from "./api";
12
17
  import { copiedBooking, originalBooking } from "./stores/booking";
13
18
  import { comma } from "./utils";
14
19
  import { loader } from "./components/loader";
15
- import { alert } from "./components/notifications";
16
- import Layout from "./Layout.svelte";
20
+ import { alert, Alert, Confirm } from "./components/notifications";
21
+ import Loader from "./components/loader/Loader.svelte";
17
22
  import Map from "./Map.svelte";
18
23
  import ServiceZone from "./ServiceZone.svelte";
19
24
  import Plan from "./Plan.svelte";
20
25
  import BookingInfo from "./BookingInfo.svelte";
21
- import { API_URL } from "../axios/constant";
22
- import QS from "qs";
23
- import Axios from "axios";
26
+ import Portal from "svelte-portal";
24
27
  const { stdt, price, priceDifference, isModifiable } = originalBooking;
25
28
  const {
26
29
  price: editPrice,
@@ -30,7 +33,7 @@ const {
30
33
  fullName,
31
34
  selectedPrice
32
35
  } = copiedBooking;
33
- export let initI18n = true;
36
+ let initialized = false;
34
37
  let on = false;
35
38
  let resolver;
36
39
  $:
@@ -47,6 +50,38 @@ export function init(options) {
47
50
  throw new Error("token\uC744 \uB123\uC5B4\uC8FC\uC138\uC694.");
48
51
  if (!locale)
49
52
  throw new Error("locale\uC744 \uB123\uC5B4\uC8FC\uC138\uC694.");
53
+ if (locale) {
54
+ i18nInit({ fallbackLocale: "en", initialLocale: locale });
55
+ dayjs.locale(locale);
56
+ }
57
+ googleMaps();
58
+ function googleMaps() {
59
+ ;
60
+ ((g) => {
61
+ var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window;
62
+ b = b[c] || (b[c] = {});
63
+ var d = b.maps || (b.maps = {}), r = /* @__PURE__ */ new Set(), e = new URLSearchParams(), u = () => h || (h = new Promise(async (f, n) => {
64
+ await (a = m.createElement("script"));
65
+ e.set("libraries", [...r] + "");
66
+ for (k in g)
67
+ e.set(k.replace(/[A-Z]/g, (t2) => "_" + t2[0].toLowerCase()), g[k]);
68
+ e.set("callback", c + ".maps." + q);
69
+ a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
70
+ d[q] = f;
71
+ a.onerror = () => h = n(Error(p + " could not load."));
72
+ a.nonce = m.querySelector("script[nonce]")?.nonce || "";
73
+ m.head.append(a);
74
+ }));
75
+ d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n));
76
+ })({
77
+ key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
78
+ v: "weekly",
79
+ region: "kr",
80
+ language: navigator?.language || "en"
81
+ // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
82
+ // Add other bootstrap parameters as needed, using camel case.
83
+ });
84
+ }
50
85
  env.set({
51
86
  target,
52
87
  accessToken: token.accessToken,
@@ -56,6 +91,7 @@ export function init(options) {
56
91
  isDev
57
92
  });
58
93
  consola.withTag("svelte-schedule-view").info("\uC124\uC815\uB41C env", $env);
94
+ initialized = true;
59
95
  return {
60
96
  open
61
97
  };
@@ -160,81 +196,91 @@ async function save() {
160
196
  }
161
197
  </script>
162
198
 
163
- <Toaster />
164
- <Layout {initI18n}>
165
- <section class="indie_pop_wrap scroll" class:on>
166
- {#if on}
167
- <div class="pop_base full_2 indie_passengers_info_pop">
168
- <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
199
+ <Portal target="body">
200
+ {#if !$isLoading && initialized}
201
+ <div id="indie_booking_wrapper">
202
+ <Toaster />
203
+ <Loader />
204
+ <Alert />
205
+ <Confirm />
169
206
 
170
- <!-- 예약관리 > 예약_view > Schedule -->
171
- <section class="indie_dispatch_passenger_sche_w booking_schedule">
172
- <!-- 지도 부분 -->
173
- <Map />
174
- <!-- 예약 > 스케쥴 -->
175
- <div class="indie_booking_schedule_modify_box">
176
- <div class="header_b">
177
- <div class="tags">
178
- <span>{$originalBooking.code}</span>
179
- <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
180
- </div>
181
- <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
182
- <!-- <select class="indie_select_nor">
183
- <option value="">2023-10-16 (Mon)</option>
184
- <option value="">2023-10-16 (Mon)</option>
185
- </select> -->
207
+ <section class="indie_pop_wrap scroll" class:on>
208
+ {#if on}
209
+ <div class="pop_base full_2 indie_passengers_info_pop">
210
+ <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
211
+
212
+ <!-- 예약관리 > 예약_view > Schedule -->
213
+ <section class="indie_dispatch_passenger_sche_w booking_schedule">
214
+ <!-- 지도 부분 -->
215
+ <Map />
216
+ <!-- 예약 > 스케쥴 -->
217
+ <div class="indie_booking_schedule_modify_box">
218
+ <div class="header_b">
219
+ <div class="tags">
220
+ <span>{$originalBooking.code}</span>
221
+ <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
222
+ </div>
223
+ <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
224
+ <!-- <select class="indie_select_nor">
225
+ <option value="">2023-10-16 (Mon)</option>
226
+ <option value="">2023-10-16 (Mon)</option>
227
+ </select> -->
186
228
 
187
- <!-- <button type="button" class="btn_close">닫기</button> -->
188
- </div>
229
+ <!-- <button type="button" class="btn_close">닫기</button> -->
230
+ </div>
189
231
 
190
- <div class="contents_b">
191
- <ServiceZone />
192
- <Plan />
193
- <BookingInfo />
194
- </div>
232
+ <div class="contents_b">
233
+ <ServiceZone />
234
+ <Plan />
235
+ <BookingInfo />
236
+ </div>
195
237
 
196
- <div class="footer_b">
197
- <div class="left">
198
- <dl class="priceAll">
199
- <dt>{$t('booking.totalPrice')}</dt>
200
- <dd>
201
- <!-- * 차액 발생시 -->
202
- {#if difference > 0 || difference < 0}
203
- <!-- 검정 표현 -->
204
- <strong>{comma(targetPrice.before.amount)} {forex}</strong>
238
+ <div class="footer_b">
239
+ <div class="left">
240
+ <dl class="priceAll">
241
+ <dt>{$t('booking.totalPrice')}</dt>
242
+ <dd>
243
+ <!-- * 차액 발생시 -->
244
+ {#if difference > 0 || difference < 0}
245
+ <!-- 검정 표현 -->
246
+ <strong>{comma(targetPrice.before.amount)} {forex}</strong>
205
247
 
206
- <!-- 빨간색 표현 -->
207
- <span>
208
- {difference > 0 ? ' + ' : ' - '}
209
- {comma(Math.abs(difference))}
210
- {forex}
211
- = {comma(targetPrice.new.amount)}
212
- {forex}
213
- </span>
248
+ <!-- 빨간색 표현 -->
249
+ <span>
250
+ {difference > 0 ? ' + ' : ' - '}
251
+ {comma(Math.abs(difference))}
252
+ {forex}
253
+ = {comma(targetPrice.new.amount)}
254
+ {forex}
255
+ </span>
256
+ {:else}
257
+ <!-- * 차액 미 발생시 검정색 표현-->
258
+ <strong>{comma(targetPrice.new.amount)} {forex}</strong>
259
+ {/if}
260
+ </dd>
261
+ </dl>
262
+ </div>
263
+
264
+ <div class="right">
265
+ <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
266
+ {#if !$isEdit}
267
+ {#if $isModifiable}
268
+ <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
269
+ {/if}
214
270
  {:else}
215
- <!-- * 차액 발생시 검정색 표현-->
216
- <strong>{comma(targetPrice.new.amount)} {forex}</strong>
271
+ <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
272
+ <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
217
273
  {/if}
218
- </dd>
219
- </dl>
220
- </div>
221
-
222
- <div class="right">
223
- <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
224
- {#if !$isEdit}
225
- {#if $isModifiable}
226
- <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
227
- {/if}
228
- {:else}
229
- <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
230
- <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
231
- {/if}
274
+ </div>
275
+ </div>
232
276
  </div>
233
- </div>
277
+ </section>
278
+ <!-- // 배차 - 탑승자 정보 및 스케줄 -->
234
279
  </div>
235
- </section>
236
- <!-- // 배차 - 탑승자 정보 및 스케줄 -->
237
- </div>
238
- {/if}
239
- </section>
240
- </Layout>
280
+ {/if}
281
+ </section>
282
+ </div>
283
+ {:else}
284
+ <!-- i18n loading. . . . -->
285
+ {/if}
286
+ </Portal>
@@ -10,10 +10,10 @@ export interface InitOption {
10
10
  };
11
11
  viewOnly?: boolean;
12
12
  }
13
+ import './assets/scss/indie_booking.scss';
13
14
  import type { Locale, Target } from './types';
14
15
  declare const __propDef: {
15
16
  props: {
16
- initI18n?: boolean;
17
17
  init?: (options: InitOption) => {
18
18
  open: ({ code }: {
19
19
  code: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@movvjs/svelte-schedule-view",
3
- "version": "0.4.1-beta-1",
3
+ "version": "0.4.1-beta-3",
4
4
  "type": "module",
5
5
  "license": "ISC",
6
6
  "author": {
@@ -1,4 +1,4 @@
1
- import { _, register } from 'svelte-i18n'
1
+ import { _, register, init, isLoading } from 'svelte-i18n'
2
2
 
3
3
  register('en', () => import('./locales/en.json'))
4
4
  register('ko', () => import('./locales/ko.json'))
@@ -8,4 +8,4 @@ register('vi', () => import('./locales/vi.json'))
8
8
 
9
9
  const t = _
10
10
 
11
- export { t }
11
+ export { t, init, isLoading }
@@ -13,14 +13,19 @@
13
13
  </script>
14
14
 
15
15
  <script lang="ts">
16
- import { Toaster } from 'svelte-french-toast'
16
+ import './assets/scss/indie_booking.scss'
17
+ import toast, { Toaster } from 'svelte-french-toast'
18
+ import { onMount } from 'svelte'
17
19
  import { writable } from 'svelte/store'
18
20
  import { cloneDeep } from 'lodash-es'
19
21
  import consola from 'consola'
22
+ import QS from 'qs'
23
+ import Axios from 'axios'
20
24
 
21
25
  import { dayjs } from '$lib/dayjs'
22
- import { t } from '$lib/i18n'
26
+ import { t, init as i18nInit, isLoading } from '$lib/i18n'
23
27
  import { env } from '$lib/store/env'
28
+ import { API_URL } from '$lib/axios/constant'
24
29
 
25
30
  import type { Locale, Target } from '$scheduleView/types'
26
31
  import { BookingAPI } from '$scheduleView/api'
@@ -28,16 +33,31 @@
28
33
  import { comma } from '$scheduleView/utils'
29
34
 
30
35
  import { loader } from '$scheduleView/components/loader'
31
- import { alert } from '$scheduleView/components/notifications'
36
+ import { alert, Alert, Confirm } from '$scheduleView/components/notifications'
37
+ import Loader from './components/loader/Loader.svelte'
32
38
 
33
- import Layout from '$scheduleView/Layout.svelte'
34
39
  import Map from '$scheduleView/Map.svelte'
35
40
  import ServiceZone from '$scheduleView/ServiceZone.svelte'
36
41
  import Plan from '$scheduleView/Plan.svelte'
37
42
  import BookingInfo from '$scheduleView/BookingInfo.svelte'
38
- import { API_URL } from '$lib/axios/constant'
39
- import QS from 'qs'
40
- import Axios from 'axios'
43
+ import Portal from 'svelte-portal'
44
+
45
+ // onMount(() => {
46
+ // googleMaps()
47
+
48
+ // function googleMaps() {
49
+ // // https://developers.google.com/maps/documentation/javascript/load-maps-js-api?hl=ko#dynamic-library-import
50
+ // // prettier-ignore
51
+ // ;(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
52
+ // key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
53
+ // v: "weekly",
54
+ // region: "kr",
55
+ // language: navigator?.language || "en",
56
+ // // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
57
+ // // Add other bootstrap parameters as needed, using camel case.
58
+ // });
59
+ // }
60
+ // })
41
61
 
42
62
  const { stdt, price, priceDifference, isModifiable } = originalBooking
43
63
  const {
@@ -48,7 +68,8 @@
48
68
  fullName,
49
69
  selectedPrice
50
70
  } = copiedBooking
51
- export let initI18n = true
71
+
72
+ let initialized = false
52
73
  let on = false
53
74
  let resolver: (value: Awaited<ReturnType<typeof open>>) => void
54
75
 
@@ -70,6 +91,26 @@
70
91
  if (!token) throw new Error('token을 넣어주세요.')
71
92
  if (!locale) throw new Error('locale을 넣어주세요.')
72
93
 
94
+ if (locale) {
95
+ i18nInit({ fallbackLocale: 'en', initialLocale: locale })
96
+ dayjs.locale(locale)
97
+ }
98
+
99
+ googleMaps()
100
+
101
+ function googleMaps() {
102
+ // https://developers.google.com/maps/documentation/javascript/load-maps-js-api?hl=ko#dynamic-library-import
103
+ // prettier-ignore
104
+ ;(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
105
+ key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
106
+ v: "weekly",
107
+ region: "kr",
108
+ language: navigator?.language || "en",
109
+ // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
110
+ // Add other bootstrap parameters as needed, using camel case.
111
+ });
112
+ }
113
+
73
114
  env.set({
74
115
  target,
75
116
  accessToken: token.accessToken,
@@ -80,6 +121,7 @@
80
121
  })
81
122
 
82
123
  consola.withTag('svelte-schedule-view').info('설정된 env', $env)
124
+ initialized = true
83
125
  return {
84
126
  open
85
127
  }
@@ -213,81 +255,91 @@
213
255
  }
214
256
  </script>
215
257
 
216
- <Toaster />
217
- <Layout {initI18n}>
218
- <section class="indie_pop_wrap scroll" class:on>
219
- {#if on}
220
- <div class="pop_base full_2 indie_passengers_info_pop">
221
- <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
222
-
223
- <!-- 예약관리 > 예약_view > Schedule -->
224
- <section class="indie_dispatch_passenger_sche_w booking_schedule">
225
- <!-- 지도 부분 -->
226
- <Map />
227
- <!-- 예약 > 스케쥴 -->
228
- <div class="indie_booking_schedule_modify_box">
229
- <div class="header_b">
230
- <div class="tags">
231
- <span>{$originalBooking.code}</span>
232
- <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
233
- </div>
234
- <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
235
- <!-- <select class="indie_select_nor">
236
- <option value="">2023-10-16 (Mon)</option>
237
- <option value="">2023-10-16 (Mon)</option>
238
- </select> -->
239
-
240
- <!-- <button type="button" class="btn_close">닫기</button> -->
241
- </div>
242
-
243
- <div class="contents_b">
244
- <ServiceZone />
245
- <Plan />
246
- <BookingInfo />
247
- </div>
248
-
249
- <div class="footer_b">
250
- <div class="left">
251
- <dl class="priceAll">
252
- <dt>{$t('booking.totalPrice')}</dt>
253
- <dd>
254
- <!-- * 차액 발생시 -->
255
- {#if difference > 0 || difference < 0}
256
- <!-- 검정 표현 -->
257
- <strong>{comma(targetPrice.before.amount)} {forex}</strong>
258
-
259
- <!-- 빨간색 표현 -->
260
- <span>
261
- {difference > 0 ? ' + ' : ' - '}
262
- {comma(Math.abs(difference))}
263
- {forex}
264
- = {comma(targetPrice.new.amount)}
265
- {forex}
266
- </span>
258
+ <Portal target="body">
259
+ {#if !$isLoading && initialized}
260
+ <div id="indie_booking_wrapper">
261
+ <Toaster />
262
+ <Loader />
263
+ <Alert />
264
+ <Confirm />
265
+
266
+ <section class="indie_pop_wrap scroll" class:on>
267
+ {#if on}
268
+ <div class="pop_base full_2 indie_passengers_info_pop">
269
+ <button type="button" class="btn_close" on:click={() => close()}>닫기</button>
270
+
271
+ <!-- 예약관리 > 예약_view > Schedule -->
272
+ <section class="indie_dispatch_passenger_sche_w booking_schedule">
273
+ <!-- 지도 부분 -->
274
+ <Map />
275
+ <!-- 예약 > 스케쥴 -->
276
+ <div class="indie_booking_schedule_modify_box">
277
+ <div class="header_b">
278
+ <div class="tags">
279
+ <span>{$originalBooking.code}</span>
280
+ <strong>{$t(`serviceType.${$originalBooking.serviceType}`)}</strong>
281
+ </div>
282
+ <p class="date_text">{dayjs($stdt).format('ll (dd)')}</p>
283
+ <!-- <select class="indie_select_nor">
284
+ <option value="">2023-10-16 (Mon)</option>
285
+ <option value="">2023-10-16 (Mon)</option>
286
+ </select> -->
287
+
288
+ <!-- <button type="button" class="btn_close">닫기</button> -->
289
+ </div>
290
+
291
+ <div class="contents_b">
292
+ <ServiceZone />
293
+ <Plan />
294
+ <BookingInfo />
295
+ </div>
296
+
297
+ <div class="footer_b">
298
+ <div class="left">
299
+ <dl class="priceAll">
300
+ <dt>{$t('booking.totalPrice')}</dt>
301
+ <dd>
302
+ <!-- * 차액 발생시 -->
303
+ {#if difference > 0 || difference < 0}
304
+ <!-- 검정 표현 -->
305
+ <strong>{comma(targetPrice.before.amount)} {forex}</strong>
306
+
307
+ <!-- 빨간색 표현 -->
308
+ <span>
309
+ {difference > 0 ? ' + ' : ' - '}
310
+ {comma(Math.abs(difference))}
311
+ {forex}
312
+ = {comma(targetPrice.new.amount)}
313
+ {forex}
314
+ </span>
315
+ {:else}
316
+ <!-- * 차액 미 발생시 검정색 표현-->
317
+ <strong>{comma(targetPrice.new.amount)} {forex}</strong>
318
+ {/if}
319
+ </dd>
320
+ </dl>
321
+ </div>
322
+
323
+ <div class="right">
324
+ <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
325
+ {#if !$isEdit}
326
+ {#if $isModifiable}
327
+ <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
328
+ {/if}
267
329
  {:else}
268
- <!-- * 차액 발생시 검정색 표현-->
269
- <strong>{comma(targetPrice.new.amount)} {forex}</strong>
330
+ <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
331
+ <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
270
332
  {/if}
271
- </dd>
272
- </dl>
273
- </div>
274
-
275
- <div class="right">
276
- <button type="button" class="indie_btn_nor md line2" on:click={() => close()}>{$t('booking.cancel')}</button>
277
- {#if !$isEdit}
278
- {#if $isModifiable}
279
- <button type="button" class="indie_btn_nor md line2 modify" on:click={() => edit()}>{$t('booking.modify')}</button>
280
- {/if}
281
- {:else}
282
- <button type="button" class="indie_btn_nor md line2" on:click={() => reset()}>{$t('booking.reset')}</button>
283
- <button type="button" class="indie_btn_nor md blue" on:click={() => save()}>{$t('booking.save')}</button>
284
- {/if}
333
+ </div>
334
+ </div>
285
335
  </div>
286
- </div>
336
+ </section>
337
+ <!-- // 배차 - 탑승자 정보 및 스케줄 -->
287
338
  </div>
288
- </section>
289
- <!-- // 배차 - 탑승자 정보 및 스케줄 -->
290
- </div>
291
- {/if}
292
- </section>
293
- </Layout>
339
+ {/if}
340
+ </section>
341
+ </div>
342
+ {:else}
343
+ <!-- i18n loading. . . . -->
344
+ {/if}
345
+ </Portal>
@@ -1,63 +0,0 @@
1
- <script>import "./assets/scss/indie_booking.scss";
2
- import { dayjs } from "../dayjs";
3
- import { isLoading, init, locale } from "svelte-i18n";
4
- import Portal from "svelte-portal";
5
- import { env } from "../store/env";
6
- import { Alert, Confirm } from "./components/notifications";
7
- import Loader from "./components/loader/Loader.svelte";
8
- import { onMount } from "svelte";
9
- export let initI18n;
10
- if (initI18n) {
11
- init({
12
- fallbackLocale: "en",
13
- initialLocale: "en"
14
- });
15
- }
16
- env.subscribe(($env) => {
17
- locale.set($env.locale);
18
- dayjs.locale($env.locale);
19
- });
20
- onMount(() => {
21
- googleMaps();
22
- function googleMaps() {
23
- ;
24
- ((g) => {
25
- var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window;
26
- b = b[c] || (b[c] = {});
27
- var d = b.maps || (b.maps = {}), r = /* @__PURE__ */ new Set(), e = new URLSearchParams(), u = () => h || (h = new Promise(async (f, n) => {
28
- await (a = m.createElement("script"));
29
- e.set("libraries", [...r] + "");
30
- for (k in g)
31
- e.set(k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()), g[k]);
32
- e.set("callback", c + ".maps." + q);
33
- a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
34
- d[q] = f;
35
- a.onerror = () => h = n(Error(p + " could not load."));
36
- a.nonce = m.querySelector("script[nonce]")?.nonce || "";
37
- m.head.append(a);
38
- }));
39
- d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n));
40
- })({
41
- key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
42
- v: "weekly",
43
- region: "kr",
44
- language: navigator?.language || "en"
45
- // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
46
- // Add other bootstrap parameters as needed, using camel case.
47
- });
48
- }
49
- });
50
- </script>
51
-
52
- <Portal target="body">
53
- {#if !$isLoading}
54
- <div id="indie_booking_wrapper">
55
- <Loader />
56
- <Alert />
57
- <Confirm />
58
- <slot><!-- optional fallback --></slot>
59
- </div>
60
- {:else}
61
- <!-- i18n loading. . . . -->
62
- {/if}
63
- </Portal>
@@ -1,19 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import './assets/scss/indie_booking.scss';
3
- declare const __propDef: {
4
- props: {
5
- initI18n: boolean;
6
- };
7
- events: {
8
- [evt: string]: CustomEvent<any>;
9
- };
10
- slots: {
11
- default: {};
12
- };
13
- };
14
- export type LayoutProps = typeof __propDef.props;
15
- export type LayoutEvents = typeof __propDef.events;
16
- export type LayoutSlots = typeof __propDef.slots;
17
- export default class Layout extends SvelteComponent<LayoutProps, LayoutEvents, LayoutSlots> {
18
- }
19
- export {};
@@ -1,63 +0,0 @@
1
- <script>import "./assets/scss/indie_booking.scss";
2
- import { dayjs } from "../dayjs";
3
- import { isLoading, init, locale } from "svelte-i18n";
4
- import Portal from "svelte-portal";
5
- import { env } from "../store/env";
6
- import { Alert, Confirm } from "./components/notifications";
7
- import Loader from "./components/loader/Loader.svelte";
8
- import { onMount } from "svelte";
9
- export let initI18n;
10
- if (initI18n) {
11
- init({
12
- fallbackLocale: "en",
13
- initialLocale: "en"
14
- });
15
- }
16
- env.subscribe(($env) => {
17
- locale.set($env.locale);
18
- dayjs.locale($env.locale);
19
- });
20
- onMount(() => {
21
- googleMaps();
22
- function googleMaps() {
23
- ;
24
- ((g) => {
25
- var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window;
26
- b = b[c] || (b[c] = {});
27
- var d = b.maps || (b.maps = {}), r = /* @__PURE__ */ new Set(), e = new URLSearchParams(), u = () => h || (h = new Promise(async (f, n) => {
28
- await (a = m.createElement("script"));
29
- e.set("libraries", [...r] + "");
30
- for (k in g)
31
- e.set(k.replace(/[A-Z]/g, (t) => "_" + t[0].toLowerCase()), g[k]);
32
- e.set("callback", c + ".maps." + q);
33
- a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
34
- d[q] = f;
35
- a.onerror = () => h = n(Error(p + " could not load."));
36
- a.nonce = m.querySelector("script[nonce]")?.nonce || "";
37
- m.head.append(a);
38
- }));
39
- d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n));
40
- })({
41
- key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
42
- v: "weekly",
43
- region: "kr",
44
- language: navigator?.language || "en"
45
- // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
46
- // Add other bootstrap parameters as needed, using camel case.
47
- });
48
- }
49
- });
50
- </script>
51
-
52
- <Portal target="body">
53
- {#if !$isLoading}
54
- <div id="indie_booking_wrapper">
55
- <Loader />
56
- <Alert />
57
- <Confirm />
58
- <slot><!-- optional fallback --></slot>
59
- </div>
60
- {:else}
61
- <!-- i18n loading. . . . -->
62
- {/if}
63
- </Portal>
@@ -1,19 +0,0 @@
1
- import { SvelteComponent } from "svelte";
2
- import './assets/scss/indie_booking.scss';
3
- declare const __propDef: {
4
- props: {
5
- initI18n: boolean;
6
- };
7
- events: {
8
- [evt: string]: CustomEvent<any>;
9
- };
10
- slots: {
11
- default: {};
12
- };
13
- };
14
- export type LayoutProps = typeof __propDef.props;
15
- export type LayoutEvents = typeof __propDef.events;
16
- export type LayoutSlots = typeof __propDef.slots;
17
- export default class Layout extends SvelteComponent<LayoutProps, LayoutEvents, LayoutSlots> {
18
- }
19
- export {};
@@ -1,58 +0,0 @@
1
- <script lang="ts">
2
- import './assets/scss/indie_booking.scss'
3
-
4
- import { dayjs } from '$lib/dayjs'
5
- import { isLoading, init, locale } from 'svelte-i18n'
6
- import Portal from 'svelte-portal'
7
-
8
- import { env } from '$lib/store/env'
9
-
10
- import { Alert, Confirm } from './components/notifications'
11
-
12
- import Loader from './components/loader/Loader.svelte'
13
- import { onMount } from 'svelte'
14
-
15
- export let initI18n: boolean
16
-
17
- if (initI18n) {
18
- init({
19
- fallbackLocale: 'en',
20
- initialLocale: 'en'
21
- })
22
- }
23
-
24
- env.subscribe($env => {
25
- locale.set($env.locale)
26
- dayjs.locale($env.locale)
27
- })
28
-
29
- onMount(() => {
30
- googleMaps()
31
-
32
- function googleMaps() {
33
- // https://developers.google.com/maps/documentation/javascript/load-maps-js-api?hl=ko#dynamic-library-import
34
- // prettier-ignore
35
- ;(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
36
- key: "AIzaSyDe1e91bi67YTTnPGQlKTHXeNqMPOYkjW0",
37
- v: "weekly",
38
- region: "kr",
39
- language: navigator?.language || "en",
40
- // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
41
- // Add other bootstrap parameters as needed, using camel case.
42
- });
43
- }
44
- })
45
- </script>
46
-
47
- <Portal target="body">
48
- {#if !$isLoading}
49
- <div id="indie_booking_wrapper">
50
- <Loader />
51
- <Alert />
52
- <Confirm />
53
- <slot><!-- optional fallback --></slot>
54
- </div>
55
- {:else}
56
- <!-- i18n loading. . . . -->
57
- {/if}
58
- </Portal>