const token = "pk.eyJ1IjoibW9kby1jb29wIiwiYSI6ImNsbWd6ZDI4dDBkYjEzcW85bDR2eTd5bHoifQ.uL7IZ2nUjmEg5a8zIpl5Tg", defaultCenter = [-123.0707084, 49.2478014], defaultZoom = 10, imgPath = "https://bookit.modo.coop/static/cars/can-", zoomTransition = 13; let autofillCollection, gCars, totalCars, clickedMarkerId = null, clickedClusterId = null, locationMarker = null; function centerMap() { let e = null; return "undefined" != typeof newCenter && Array.isArray(newCenter) && (e = newCenter), null != e ? e : defaultCenter } async function getAPIData() { let e = []; if (sessionStorage.getItem("carData")) return JSON.parse(sessionStorage.getItem("carGeo")); { const t = await getAllCarsWithTimeout().catch(handleError); gCars = Object.entries(t.data), sessionStorage.setItem("carData", JSON.stringify(gCars)), totalCars = gCars.length, sessionStorage.setItem("totalCars", gCars.length); gCars.map((t => { let a = t[1].accessories, o = ""; if (Array.isArray(a)) a.forEach((e => { "audio: android auto" !== e && "audio: apple carplay" !== e && (o += '<li class="car-card__features-list__item">' + e + "</li>") })); else { Array.from(a).forEach((e => { "audio: android auto" !== e && "audio: apple carplay" !== e && (o += '<li class="car-card__features-list__item">' + e + "</li>") })) } let r = { id: t[1].car.car_id, type: "Feature", properties: { car_id: t[1].car.car_id, name: t[1].car.make + " " + t[1].car.model, location: t[1].location.location_description, accessories: o, car_class: t[1].car.car_class, rate_class: t[1].car.rate_class }, geometry: { type: "Point", coordinates: [t[1].location.longitude, t[1].location.latitude] } }; e.push(r) })); return sessionStorage.setItem("carGeo", JSON.stringify(e)), e } } async function getAllCarsWithTimeout() { const e = await fetchWithTimeout("https://marketing-proxy.modo.coop/api/cars", { timeout: 6e3 }).catch(handleError); return { data: await e.json() } } async function getTripCost(e) { q = "?start_time=2023-09-25 18:00:00-0800&end_time=2023-09-25 18:30:00-0800&distance=30.50&rate_class=0&open_return=0", q2 = "?start_time=2023-06-19 00:00:00-0700&end_time=2023-06-20 00:00:00-0700&distance=10&rate_class=0&open_return=0"; const t = await fetchWithTimeout("https://marketing-proxy.modo.coop/api/trip_calculator" + e, { timeout: 6e3 }).catch(handleError); return { data: await t.json() } } async function updateCarsNumber(e) { let t = document.getElementById("car-count"); if (t) { let a = e.length, o = 100 * Math.floor(a / 100); t.innerHTML = o } } async function initTrip() { $("#fromDate").text(" "), $("#toDate").text(" "), document.getElementById("0").checked = !0; document.getElementById("trip-calculator-submit").addEventListener("click", (e => { e.preventDefault() })), datepicker = flatpickr("#form-date", { inline: !0, mode: "range" }), datepicker.config.onChange.push((function (e, t, a) { updateDates(e, t, a), enableButton($("#submit-date-time")) })), $("#distance").on("keyup", (e => { $("#distance").val() ? enableButton($("#submit-distance")) : disableButton($("#submit-distance")) })); document.getElementById("submit-vehicle-type").addEventListener("click", (e => { submitVehicleType(e) })), $("#submit-date-time").on("click", (e => { submitDateTime(e) })), $("#back-date-time").on("click", (e => { $("#tabVehicleType").click() })), $("#submit-distance").on("click", (e => { submitDistance(e) })), $("#back-distance").on("click", (e => { $("#tabDateTime").click() })), $("#back-calculate").on("click", (e => { $("#tabDistance").click() })) } function disableButton(e) { e.addClass("is-disabled") } function enableButton(e) { e.removeClass("is-disabled") } function submitVehicleType(e) { e.preventDefault(), rateClass = $('input[name="vehicle-type"]:checked').val(), $("#tabDateTime").click(), $("html, body").animate({ scrollTop: $("#trip-calculator").offset().top }, 250) } function submitDateTime(e) { e.preventDefault(); let t = datepicker.selectedDates, a = t[0].getFullYear().toString(), o = forceTwoDigits((t[0].getMonth() + 1).toString()), r = forceTwoDigits(t[0].getDate().toString()), i = $("#fromHour").val(), c = $("#fromMinute").val(); "PM" == $("#fromMeridiem").val() && (i = (Number(i) + 12).toString()); let n = forceTwoDigits((t[0].getTimezoneOffset() / 60).toString()), s = t[1].getFullYear().toString(), l = forceTwoDigits((t[1].getMonth() + 1).toString()), d = forceTwoDigits(t[1].getDate().toString()), u = $("#toHour").val(), m = $("#toMinute").val(); "PM" == $("#toMeridiem").val() && (u = (Number(u) + 12).toString()); let p = forceTwoDigits((t[1].getTimezoneOffset() / 60).toString()); startTime = a + "-" + o + "-" + r + "%20" + i + ":" + c + ":00-" + n + "00", endTime = s + "-" + l + "-" + d + "%20" + u + ":" + m + ":00-" + p + "00", $("#tabDistance").click(), $("html, body").animate({ scrollTop: $("#trip-calculator").offset().top }, 250) } function submitDistance(e) { e.preventDefault(), distance = $("#distance").val().toString(), getTripCost("?start_time=" + startTime + "&end_time=" + endTime + "&distance=" + distance + "&rate_class=" + rateClass + "&open_return=0").then((e => { if (e.data.message) $(".calculate__error__message").text(e.data.message), $("#calculate-error").css("opacity", 0), $("#calculate-error").css("display", "block"), $("#calculate-error").css("opacity", 1); else { let t = Object.entries(e.data), a = t[0][1].distance_charge.toFixed(2).toString(), o = t[0][1].time_charge.toFixed(2).toString(), r = t[0][1].booking_fee.toFixed(2).toString(), i = t[0][1].GST.toFixed(2).toString(), c = t[0][1].PST.toFixed(2).toString(), n = t[0][1].total.toFixed(2).toString(), s = t[1][1].distance_charge.toFixed(2).toString(), l = t[1][1].time_charge.toFixed(2).toString(), d = t[1][1].booking_fee.toFixed(2).toString(), u = t[1][1].GST.toFixed(2).toString(), m = t[1][1].PST.toFixed(2).toString(), p = t[1][1].total.toFixed(2).toString(); $("#mp-total").text("$" + n), $("#mp-time").text("$" + o), $("#mp-distance").text("$" + a), $("#mp-booking").text("$" + r), $("#mp-gst").text("$" + i), $("#mp-pst").text("$" + c), $("#mb-total").text("$" + p), $("#mb-time").text("$" + l), $("#mb-distance").text("$" + s), $("#mb-booking").text("$" + d), $("#mb-gst").text("$" + u), $("#mb-pst").text("$" + m) } })).catch((e => { console.error("The Promise is rejected!", e) })), $("#tabCalculate").click(), $("html, body").animate({ scrollTop: $("#trip-calculator").offset().top }, 250) } function forceTwoDigits(e) { let t; return t = 1 == e.length ? "0" + e : e, t } function updateDates(e, t, a) { let o = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], r = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], i = o[e[0].getDay()], c = r[e[0].getMonth()], n = forceTwoDigits(e[0].getDate().toString()); if ($("#fromDate").text(i + ", " + c + " " + n), e[1]) { let t = o[e[1].getDay()], a = r[e[1].getMonth()], i = forceTwoDigits(e[1].getDate().toString()); $("#toDate").text(t + ", " + a + " " + i) } } async function loadMap(e) { mapboxgl.accessToken = token; let t = centerMap(), a = defaultZoom; e && (t = e, a = 13); const o = new mapboxgl.Map({ container: "map", style: "mapbox://styles/modo-coop/ckzj0nh70001k16ot4gclxsrs", center: t, zoom: a, minZoom: 6, attributionControl: !1, cooperativeGestures: !0 }); return o.addControl(new mapboxgl.NavigationControl), o.addControl(new mapboxgl.AttributionControl({ compact: !0 })), o } async function loadAutofill(e) { document.getElementById("search-js").onload = function () { autofillCollection = mapboxsearch.autofill({ accessToken: token }), autofillCollection.addEventListener("retrieve", (async t => { const a = t.detail.features[0].geometry.coordinates; addLocation(a, e), addProximityCircle(a, e), positionMap(a, e, 14) })) }; const t = document.getElementById("map-autocomplete"), a = document.getElementById("clear-search"); t.addEventListener("input", (e => { "" !== e.target.value ? a.style.display = "block" : a.style.display = "none" })), a.addEventListener("click", (() => { document.getElementById("map-autocomplete").value = "", document.getElementById("clear-search").style.display = "none", resetMap(e) })) } function addLocation(e, t) { locationMarker && removeLocation(), locationMarker = new mapboxgl.Marker({ color: "#79161C" }).setLngLat(e).addTo(t) } function removeLocation() { locationMarker.remove(), locationMarker = null } function addProximityCircle(e, t) { t.getSource("proximity") && removeProximityCircle(t), t.addSource("proximity", createGeoJSONCircle(e, .5)), t.addLayer({ id: "circle", type: "fill", source: "proximity", layout: { "icon-allow-overlap": !0 }, paint: { "fill-color": "#EE3524", "fill-opacity": .15 } }) } function removeProximityCircle(e) { e.removeLayer("circle"), e.removeSource("proximity") } function createGeoJSONCircle(e, t) { let a, o, r, i = Number(e[1]), c = Number(e[0]), n = t, s = [], l = n / (111.32 * Math.cos(i * Math.PI / 180)), d = n / 110.574; for (var u = 0; u < 128; u++)a = u / 128 * (2 * Math.PI), o = l * Math.cos(a), r = d * Math.sin(a), s.push([c + o, i + r]); return s.push(s[0]), { type: "geojson", data: { type: "FeatureCollection", features: [{ type: "Feature", geometry: { type: "Polygon", coordinates: [s] } }] } } } function positionMap(e, t, a) { a || (a = defaultZoom), t.flyTo({ center: e, zoom: a }) } function resetMap(e) { locationMarker && removeLocation(), removeProximityCircle(e), positionMap(centerMap(), e) } async function mapCarsLayer(e, t, a) { const o = { type: "FeatureCollection", features: e }; t.on("load", (() => { t.addSource("cars", { type: "geojson", data: o, cluster: !0, clusterMaxZoom: 22, clusterRadius: 1 }), t.loadImage("https://uploads-ssl.webflow.com/64026f0efecdefadbaea5e76/6513699c6521cf40a660513f_map-marker-2x.png", ((e, a) => { if (e) throw e; t.addImage("modo-web-marker", a) })), t.loadImage("https://uploads-ssl.webflow.com/64026f0efecdefadbaea5e76/65173ba9ad17fb773cbfd9fc_map-marker-selected-2x.png", ((e, a) => { if (e) throw e; t.addImage("modo-web-marker-highlight", a) })), t.addLayer({ id: "cluster", type: "circle", source: "cars", filter: ["has", "point_count"], layout: {}, paint: { "circle-color": ["case", ["boolean", ["feature-state", "selected"], !1], "#26505E", "#EE3524"], "circle-radius": 18, "circle-stroke-width": 4, "circle-stroke-color": ["case", ["boolean", ["feature-state", "selected"], !1], "#448EA7", "#F58E84"] }, minzoom: 13 }), t.addLayer({ id: "cluster-count", type: "symbol", source: "cars", filter: ["has", "point_count"], layout: { "text-field": ["get", "point_count_abbreviated"], "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 16 }, paint: { "text-color": "#ffffff" }, minzoom: 13 }), t.addLayer({ id: "cars-zoomed-out", type: "circle", source: "cars", layout: {}, paint: { "circle-color": "#fff", "circle-radius": 3, "circle-stroke-width": 2, "circle-stroke-color": ["case", ["boolean", ["feature-state", "selected"], !1], "#26505E", "#EE3524"] }, maxzoom: 13 }), t.addLayer({ id: "cars-zoomed-in", type: "symbol", source: "cars", filter: ["!", ["has", "point_count"]], layout: { "icon-image": "modo-web-marker", "icon-anchor": "bottom", "icon-offset": [0, 5], "icon-size": .5, "icon-allow-overlap": !0 }, minzoom: 13 }), a && addProximityCircle(a, t), t.on("click", "cars-zoomed-out", (e => { if (e.features.length > 0) { if (displayCarListContainer(t), "cluster" in e.features[0].properties && e.features[0].properties.cluster) { const a = t.queryRenderedFeatures(e.point, { layers: ["cars-zoomed-out"] })[0].properties.cluster_id; t.getSource("cars").getClusterChildren(a, ((e, t) => { e || t.forEach((e => { displayCar(e) })) })) } else displayCar(e.features[0]); highlightTheMarker(e.features[0].id, t) } })), t.on("click", "cars-zoomed-in", (e => { displayCarListContainer(t), displayCar(e.features[0]), addHighlightLayer(e.features[0].id, t) })), t.on("click", "cluster", (e => { displayCarListContainer(t); const a = t.queryRenderedFeatures(e.point, { layers: ["cluster"] })[0].properties.cluster_id; t.getSource("cars").getClusterChildren(a, ((e, t) => { e || t.forEach((e => { displayCar(e) })) })), highlightTheCluster(a, t) })) })) } function highlightTheMarker(e, t) { null !== clickedMarkerId && t.setFeatureState({ source: "cars", id: clickedMarkerId }, { selected: !1 }), clickedMarkerId = e, t.setFeatureState({ source: "cars", id: clickedMarkerId }, { selected: !0 }) } function highlightTheCluster(e, t) { null !== clickedClusterId && t.setFeatureState({ source: "cars", id: clickedClusterId }, { selected: !1 }), clickedClusterId = e, t.setFeatureState({ source: "cars", id: clickedClusterId }, { selected: !0 }) } function addHighlightLayer(e, t) { t.setLayoutProperty("cars-zoomed-in", "icon-image", ["match", ["id"], e, "modo-web-marker-highlight", "modo-web-marker"]) } function displayCarListContainer(e) { const t = document.getElementById("car-list"), a = document.getElementById("car-list-display"); (t.style.display = "none") && (t.style.display = "block"), a.innerHTML = ""; document.getElementById("close-car-list").addEventListener("click", (o => { a.innerHTML = "", e.setFeatureState({ source: "cars", id: clickedMarkerId }, { selected: !1 }), e.setFeatureState({ source: "cars", id: clickedClusterId }, { selected: !1 }), clickedMarkerId = null, clickedClusterId = null, e.setLayoutProperty("cars-zoomed-in", "icon-image", "modo-web-marker"), t.style.display = "none" })) } function displayCar(e) { const t = e.properties.location, a = e.properties.name, o = e.properties.accessories, r = e.properties.car_id, i = e.properties.car_class, c = e.properties.rate_class; let n = ""; n = "Car" == c ? "Daily Drives" : "Cargo" == c ? "Oversized" : "Large & Loadable"; let s = ""; "" !== n && (s = '<div class="card-card__tag"><div>' + n + "</div></div>"); let l = ""; "" !== i && (l = '<div class="card-card__tag"><div>' + i + "</div></div>"); let d = ""; "" !== o && (d = '<div class="car-card__features"><div class="car-card__features-label">Features</div><ul role="list" class="car-card__features-list">' + o + "</ul></div></div>"); const u = imgPath + r, m = '<div class="car-card"><div class="car-card__image-wrapper"><img src="" id="car-img-' + r + '" alt="" class="car-card__img"></div><div class="car-card__details-preview"><div class="car-card__name-new"><div class="heading-h4">' + a + '</div></div><div class="car-card__address">' + t + '</div><div class="card-card__tags">' + s + l + "</div>" + d + "</div>", p = document.createElement("div"); p.innerHTML = m; document.getElementById("car-list-display").append(p), displayCarImages(u, r) } function displayCarImages(e, t) { getJPG(e + ".jpg").then((a => { a.ok ? document.getElementById("car-img-" + t).src = a.url : getPNG(e + ".png").then((a => { a.ok ? document.getElementById("car-img-" + t).src = a.url : getJPEG(e + ".jpeg").then((e => { e.ok ? document.getElementById("car-img-" + t).src = e.url : document.getElementById("car-img-" + t).src = "https://uploads-ssl.webflow.com/64026f0efecdefadbaea5e76/64d54f2998b008ed6d542044_placeholder-car-red-accent.svg" })) })) })).catch((e => { console.log("error"), console.error(e) })) } async function getJPG(e) { return await fetch(e) } async function getJPEG(e) { return await fetch(e) } async function getPNG(e) { return await fetch(e) } async function mapBuilding(e, t) { addLocation(e, t), positionMap(e, t, 14) } async function displayLocalCars(e, t) { const a = JSON.parse(sessionStorage.getItem("carGeo")), o = .005, r = Number(e[0]), i = Number(e[1]); let c = a.filter((function (e) { return Number(e.geometry.coordinates[0]) > r - o && Number(e.geometry.coordinates[0]) < r + o && Number(e.geometry.coordinates[1]) > i - o && Number(e.geometry.coordinates[1]) < i + o })); for (const e of c) displayCar(e) } function handleError(e) { console.log("Error:"), console.log(e) } async function fetchWithTimeout(e, t = {}) { const { timeout: a = 8e3 } = t, o = new AbortController, r = setTimeout((() => o.abort()), a), i = await fetch(e, { ...t, signal: o.signal }).catch(handleError); return clearTimeout(r), i }