@movvjs/svelte-schedule-view 0.1.2 → 0.1.3

package/.prettierrc

@@ -2,7 +2,7 @@
 	"semi": false,
 	"singleQuote": true,
 	"tabWidth": 2,
-	"printWidth": 170,
+	"printWidth": 150,
 	"useTabs": true,
 	"proseWrap": "preserve",
 	"arrowParens": "avoid",

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

@@ -4,7 +4,7 @@ import { dayjs } from "../dayjs";
 import { axios } from "../axios";
 import { t } from "../i18n";
 import { env } from "../store/env";
-import { BookingServiceType, ExtraServiceType, FileType } from "./types";
+import { BookingServiceType, FileType } from "./types";
 import { isEdit } from "./Schedule.svelte";
 import { getCarName } from "./utils";
 import { copiedBooking, originalBooking } from "./stores/booking";
@@ -19,7 +19,9 @@ const {
   withPreserveAndPreview,
   hour,
   minute,
-  pax: editPax,
+  firstName,
+  lastName,
+  pax: copiedBookingPax,
   telNumber,
   telCountryCode,
   isPicketServiceAvailable,
@@ -27,151 +29,14 @@ const {
   isBabySeatServiceAvailable,
   defaultFiles,
   picketFiles,
-  extraServices: editExtraServices,
   isAutoPicketFile,
-  availableExtraServices,
-  selectedPrice
+  selectedPrice,
+  isBabySeatService,
+  isPicketService,
+  addTime
 } = copiedBooking;
 let translation$;
 let flightSearch$;
-$:
-  mutation = {
-    get hour() {
-      return $hour;
-    },
-    set hour(h) {
-      withPreserveAndPreview(() => {
-        copiedBooking.update(($booking) => {
-          $booking.ymd = dayjs($booking.ymd).hour(h).format("YYYY-MM-DD HH:mm:ss");
-          return $booking;
-        });
-      });
-    },
-    get minute() {
-      return $minute;
-    },
-    set minute(m) {
-      withPreserveAndPreview(() => {
-        copiedBooking.update(($booking) => {
-          $booking.ymd = dayjs($booking.ymd).minute(m).format("YYYY-MM-DD HH:mm:ss");
-          return $booking;
-        });
-      });
-    },
-    get firstName() {
-      return $copiedBooking?.firstName ?? "";
-    },
-    set firstName(value) {
-      copiedBooking.update(($booking) => {
-        $booking.firstName = value;
-        $booking.name = `${value} ${$booking.lastName}`;
-        return $booking;
-      });
-    },
-    get lastName() {
-      return $copiedBooking?.lastName ?? "";
-    },
-    set lastName(value) {
-      copiedBooking.update(($booking) => {
-        $booking.lastName = value;
-        $booking.name = `${$booking.firstName} ${value}`;
-        return $booking;
-      });
-    },
-    get pax() {
-      return $editPax;
-    },
-    set pax(value) {
-      withPreserveAndPreview(() => {
-        copiedBooking.update(($booking) => {
-          $booking.person.adult = value;
-          return $booking;
-        });
-      });
-    },
-    get telCountryCode() {
-      return $telCountryCode ?? null;
-    },
-    set telCountryCode(value) {
-      copiedBooking.update(($booking) => {
-        const tels = [];
-        if (value)
-          tels.push(value);
-        if ($telNumber)
-          tels.push($telNumber);
-        $booking.tel = tels.join(" ");
-        return $booking;
-      });
-    },
-    get telNumber() {
-      return $telNumber ?? null;
-    },
-    set telNumber(value) {
-      copiedBooking.update(($booking) => {
-        const tels = [];
-        if ($telCountryCode)
-          tels.push($telCountryCode);
-        if (value)
-          tels.push(value);
-        $booking.tel = tels.join(" ");
-        return $booking;
-      });
-    },
-    extraServices: {
-      get babySeat() {
-        const service = $editExtraServices.find((extra) => extra.type === ExtraServiceType.baby) ?? null;
-        return !!service;
-      },
-      set babySeat(checked) {
-        withPreserveAndPreview(() => {
-          copiedBooking.update(($booking) => {
-            let extra = $editExtraServices;
-            const addService = $availableExtraServices.find((extra2) => extra2.type === ExtraServiceType.baby);
-            if (checked) {
-              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.baby);
-              extra = [...extra, addService];
-            } else {
-              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.baby);
-            }
-            $booking.extra = extra;
-            return $booking;
-          });
-        });
-      },
-      get picket() {
-        const service = $editExtraServices.find((extra) => extra.type === ExtraServiceType.picket) ?? null;
-        return !!service;
-      },
-      set picket(checked) {
-        withPreserveAndPreview(() => {
-          copiedBooking.update(($booking) => {
-            let extra = $editExtraServices;
-            const addService = $availableExtraServices.find((extra2) => extra2.type === ExtraServiceType.picket);
-            if (checked) {
-              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.picket);
-              extra = [...extra, addService];
-            } else {
-              extra = extra.filter((extra2) => extra2.type !== ExtraServiceType.picket);
-              $booking.files = $booking.files.filter((f) => f.type !== FileType.picket);
-            }
-            $booking.extra = extra;
-            return $booking;
-          });
-        });
-      }
-    },
-    get addTime() {
-      return $copiedBooking?.addTime ?? 0;
-    },
-    set addTime(hour2) {
-      withPreserveAndPreview(() => {
-        copiedBooking.update(($booking) => {
-          $booking.addTime = hour2;
-          return $booking;
-        });
-      });
-    }
-  };
 async function copyContents() {
   const texts = [];
   texts.push(`FMS CODE : ${$originalBooking.code}`);
@@ -280,13 +145,13 @@ function openFlightSearch() {
 							<p class="value-txt">{dayjs($stdt).format('HH:mm')}</p>
 						{:else}
 							<div class="indie_time_select_box sm">
-								<select bind:value={mutation.hour}>
+								<select bind:value={$hour}>
 									{#each range(0, 24, 1) as hour}
 										<option value={hour}>{padStart(`${hour}`, 2, '0')}</option>
 									{/each}
 								</select>
 								<span>:</span>
-								<select bind:value={mutation.minute}>
+								<select bind:value={$minute}>
 									{#each range(0, 60, 1) as minute}
 										<option value={minute}>{padStart(`${minute}`, 2, '0')}</option>
 									{/each}
@@ -354,8 +219,8 @@ function openFlightSearch() {
 							<p class="value-txt">{$originalBooking.name}</p>
 						{:else}
 							<div class="f-row gap">
-								<input bind:value={mutation.firstName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.firstName')} />
-								<input bind:value={mutation.lastName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.lastName')} />
+								<input bind:value={$firstName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.firstName')} />
+								<input bind:value={$lastName} type="text" class="indie_text_nor flexOne" placeholder={$t('booking.lastName')} />
 							</div>
 						{/if}
 					</td>
@@ -378,7 +243,7 @@ function openFlightSearch() {
 						{#if !$isEdit}
 							<p class="value-txt">{$originalBooking.tel || '- -'}</p>
 						{:else}
-							<PhoneNumberInput bind:telCountryCode={mutation.telCountryCode} bind:telNumber={mutation.telNumber} />
+							<PhoneNumberInput bind:telCountryCode={$telCountryCode} bind:telNumber={$telNumber} />
 						{/if}
 					</td>
 				</tr>
@@ -389,7 +254,7 @@ function openFlightSearch() {
 						{#if !$isEdit}
 							<p class="value-txt">{$pax}</p>
 						{:else}
-							<select bind:value={mutation.pax} class="indie_select_nor xs3">
+							<select bind:value={$copiedBookingPax} class="indie_select_nor xs3">
 								{#each range(1, 30, 1) as number}
 									<option value={number}>{number}</option>
 								{/each}
@@ -411,14 +276,14 @@ function openFlightSearch() {
 							<div class="indie_f-row mgt5">
 								{#if $isBabySeatServiceAvailable}
 									<span>
-										<input bind:checked={mutation.extraServices.babySeat} type="checkbox" class="indie_check_base fz xs color" id="check_extra_baby" />
+										<input bind:checked={$isBabySeatService} type="checkbox" class="indie_check_base fz xs color" id="check_extra_baby" />
 										<label for="check_extra_baby">{$t('extraServiceType.BABY')}</label>
 									</span>
 								{/if}
 
 								{#if $isPicketServiceAvailable}
 									<span>
-										<input bind:checked={mutation.extraServices.picket} type="checkbox" class="indie_check_base fz xs color" id="check_extra_picket" />
+										<input bind:checked={$isPicketService} type="checkbox" class="indie_check_base fz xs color" id="check_extra_picket" />
 										<label for="check_extra_picket">{$t('extraServiceType.PICKET')}</label>
 									</span>
 								{/if}
@@ -426,7 +291,13 @@ function openFlightSearch() {
 								<!-- ! AUTO 기능은 FMS만 가능 (임시) -->
 								{#if $isPicketServiceSelected && $env.target === 'FMS'}
 									<p class="switchs mg-l-auto">
-										<input checked={$isAutoPicketFile} type="checkbox" name="confirm" class="indie_switch_type_5" id="picket_auto" on:input={toggleAutoPicket} />
+										<input
+											checked={$isAutoPicketFile}
+											type="checkbox"
+											name="confirm"
+											class="indie_switch_type_5"
+											id="picket_auto"
+											on:input={toggleAutoPicket} />
 										<label for="picket_auto">{$t('booking.autoPicket')}</label>
 									</p>
 								{/if}
@@ -485,7 +356,8 @@ function openFlightSearch() {
 								{$originalBooking.memo || '- -'}
 							</p>
 							{#if $originalBooking.memo}
-								<button type="button" class="indie_btn_translation_nor" on:click={() => translation$.open($originalBooking.memo)}>{$t('booking.translate')}</button>
+								<button type="button" class="indie_btn_translation_nor" on:click={() => translation$.open($originalBooking.memo)}
+									>{$t('booking.translate')}</button>
 							{/if}
 						{:else}
 							<textarea bind:value={$copiedBooking.memo} class="modify-textarea" />
@@ -511,7 +383,7 @@ function openFlightSearch() {
 											<option value={h}>{$t('booking.hours', { values: { hour: h } })}</option>
 										{/each}
 									</select>
-									<select bind:value={mutation.addTime} class="indie_select_nor xs3 col">
+									<select bind:value={$addTime} class="indie_select_nor xs3 col">
 										<option value={0}>{$t('booking.extraHours')}</option>
 										{#each range(1, 15, 1) as h}
 											<option value={h}>{$t('booking.hours', { values: { hour: h } })}</option>

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

@@ -15,13 +15,34 @@ env.subscribe(($env) => {
   dayjs.locale($env.locale);
 });
 onMount(() => {
-  if (window.google && window.google.maps)
-    return;
-  const script = document.createElement("script");
-  script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyAYfGXhjCqlD5FlfmdtzkMSD7XONh0HS6s&region=kr&libraries=geometry";
-  script.async = true;
-  script.defer = true;
-  document.head.appendChild(script);
+  googleMaps();
+  function googleMaps() {
+    ;
+    ((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 = /* @__PURE__ */ 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));
+    })({
+      key: "AIzaSyAYfGXhjCqlD5FlfmdtzkMSD7XONh0HS6s",
+      v: "weekly",
+      region: "kr",
+      language: navigator?.language || "en"
+      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
+      // Add other bootstrap parameters as needed, using camel case.
+    });
+  }
 });
 </script>
 

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

@@ -1,72 +1,124 @@
-<script>import { isEqual } from "lodash-es";
-import { onMount, tick } from "svelte";
-import startIcon from "./assets/icon/start.png";
-import destIcon from "./assets/icon/dest.png";
-import placeIcon from "./assets/icon/place.png";
-import { randomize } from "./utils";
+<script>import { onMount } from "svelte";
 import { copiedBooking, originalBooking } from "./stores/booking";
 import { isEdit } from "./Schedule.svelte";
-let container$;
-let map;
+import { isEqual } from "lodash-es";
+onMount(() => init());
 const { coordinates: originalCoordinates } = originalBooking;
 const { coordinates: editCoordinates } = copiedBooking;
+let container$;
+let map;
 $:
-  coordinates = !$isEdit ? $originalCoordinates : $editCoordinates;
-$:
-  id = `${randomize(10)}_map`;
-$:
-  markers = (() => {
-    if (!map)
-      return;
-    if (markers) {
-      const currentCoordinate = markers?.map((o) => ({ lat: o.getPosition().lat(), lng: o.getPosition().lng() }));
-      const newCoordinate = coordinates.map((o) => ({ lat: o.lat, lng: o.lng }));
-      if (isEqual(currentCoordinate, newCoordinate)) {
-        return markers;
-      }
-    }
-    markers?.forEach((o) => o.setMap(null));
-    const data = coordinates.map((loc, i) => {
-      const label = i === 0 ? "origin" : i === coordinates.length - 1 ? "dest" : "place";
-      return markerInit(map, loc, label, label === "place" ? `${i}` : "");
-    });
-    const bounds = new google.maps.LatLngBounds();
-    data.forEach((o) => bounds.extend(o.getPosition()));
-    tick().then(() => map.fitBounds(bounds, { bottom: 50, left: 50, right: 50, top: 50 }));
-    return data;
-  })();
-$:
-  routePolyLine = (() => {
-    routePolyLine?.setMap(null);
-    const lineSymbol = {
-      path: "M -1,1 1,1",
-      strokeOpacity: 1,
-      scale: 3,
-      strokeWeight: 3
-    };
-    return new google.maps.Polyline({
-      map,
-      path: coordinates,
-      strokeOpacity: 0,
-      icons: [
-        {
-          icon: lineSymbol,
-          offset: "0",
-          repeat: "9px"
+  coordinates = (() => {
+    let list = $isEdit ? $editCoordinates : $originalCoordinates;
+    return list.map((data, idx) => {
+      let duplicateCount = 0;
+      for (let i = 0; i < idx; i++) {
+        if (list[i].lat === list[idx].lat && list[i].lng === list[idx].lng) {
+          duplicateCount++;
         }
-      ]
+      }
+      return {
+        ...data,
+        lng: data.lng + duplicateCount * 1e-4
+      };
     });
   })();
-onMount(() => {
-  init();
-});
-function init() {
-  map = new google.maps.Map(document.getElementById(id), {
+let prevCoordinates = [];
+$: {
+  if (map && coordinates) {
+    const prev = prevCoordinates.map(({ lat, lng }) => ({ lat, lng }));
+    const current = coordinates.map(({ lat, lng }) => ({ lat, lng }));
+    if (!isEqual(prev, current)) {
+      LAYER.render();
+      LAYER.bounding();
+    }
+    prevCoordinates = coordinates;
+  }
+}
+const LAYER = {
+  marker: {
+    list: [],
+    create(options, data) {
+      const pin$ = document.createElement("span");
+      pin$.className = "indie_ic_map_loca";
+      if (data.type === "START") {
+        pin$.classList.add("start");
+        options.zIndex = 3;
+      } else if (data.type === "END") {
+        pin$.classList.add("end");
+        options.zIndex = 2;
+      } else {
+        options.zIndex = 1;
+      }
+      if (data.text) {
+        pin$.innerText = data.text;
+      }
+      return new google.maps.marker.AdvancedMarkerElement({
+        ...options,
+        content: pin$
+      });
+    },
+    render() {
+      LAYER.marker.clear();
+      LAYER.marker.list = coordinates.map((loc, i) => {
+        const type = i === 0 ? "START" : i === coordinates.length - 1 ? "END" : "PLACE";
+        return LAYER.marker.create({ position: loc, map }, { type, text: type === "PLACE" ? `${i}` : "" });
+      });
+    },
+    clear() {
+      LAYER.marker.list.forEach((marker) => marker.map = null);
+    }
+  },
+  polyline: {
+    route: null,
+    create() {
+      return new google.maps.Polyline({
+        map,
+        path: coordinates,
+        strokeOpacity: 0,
+        icons: [
+          {
+            icon: {
+              path: "M -1,1 1,1",
+              strokeOpacity: 1,
+              scale: 3,
+              strokeWeight: 3
+            },
+            offset: "0",
+            repeat: "9px"
+          }
+        ]
+      });
+    },
+    render() {
+      LAYER.polyline.clear();
+      LAYER.polyline.route = LAYER.polyline.create();
+    },
+    clear() {
+      LAYER.polyline.route?.setMap(null);
+    }
+  },
+  render() {
+    LAYER.marker.render();
+    LAYER.polyline.render();
+  },
+  bounding() {
+    const bounds = new google.maps.LatLngBounds();
+    LAYER.marker.list.forEach((o) => bounds.extend(o.position));
+    LAYER.polyline.route?.getPath().forEach((o) => bounds.extend(o));
+    map.fitBounds(bounds, { bottom: 50, left: 50, right: 50, top: 50 });
+  }
+};
+async function init() {
+  const { Map } = await google.maps.importLibrary("maps");
+  await google.maps.importLibrary("marker");
+  map = new Map(container$, {
+    mapId: "8a7fcbff5a94d6f9",
     center: new google.maps.LatLng({
-      lat: 0,
-      lng: 0
+      lat: 33,
+      lng: 121
     }),
-    zoom: 3,
+    zoom: 10,
     disableDefaultUI: true,
     panControl: false,
     zoomControl: false,
@@ -74,50 +126,8 @@ function init() {
     scaleControl: false,
     streetViewControl: false,
     rotateControl: false,
-    styles: [
-      // { elementType: 'geometry', stylers: [{ color: '#ebe3cd' }] },
-      // { elementType: 'labels.text.fill', stylers: [{ color: '#523735' }] },
-      // { elementType: 'labels.text.stroke', stylers: [{ color: '#f5f1e6' }] },
-    ]
-  });
-  map.addListener("click", (e) => {
-    if (e.placeId) {
-      e.stop();
-    }
-  });
-}
-function markerInit(map2, loc, type, text) {
-  const icons = {
-    origin: {
-      url: startIcon,
-      scaledSize: new google.maps.Size(26, 30)
-    },
-    dest: {
-      url: destIcon,
-      scaledSize: new google.maps.Size(26, 30)
-    },
-    place: {
-      url: placeIcon,
-      scaledSize: new google.maps.Size(26, 30)
-    }
-  };
-  const zIndex = {
-    place: 1,
-    origin: 3,
-    dest: 2
-  };
-  const marker = new google.maps.Marker({
-    position: loc,
-    map: map2,
-    icon: icons[type],
-    zIndex: zIndex[type],
-    label: text ? {
-      text,
-      color: "white"
-    } : void 0
+    clickableIcons: false
   });
-  marker.setAnimation(null);
-  return marker;
 }
 </script>
 
@@ -128,5 +138,5 @@ function markerInit(map2, loc, type, text) {
 	<span class="ic_map_loca end" style="left: 90px;"></span> -->
 
 	<!-- 지도 넣는 부분 -->
-	<div {id} class="put_map_box" bind:this={container$}></div>
+	<div class="put_map_box" bind:this={container$}></div>
 </div>