diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx index f16cc40..0acfda9 100644 --- a/src/components/LockedContent.tsx +++ b/src/components/LockedContent.tsx @@ -6,6 +6,7 @@ import { useEffect, useState } from "react" import "../styles/locked-content.css" import type { Generated } from "kysely" +import { onLocationError } from "@/lib/error" const incrementCounter = async (id: string | Generated) => await fetch(`${import.meta.env.PUBLIC_HOME_URL}/api/content/increment?id=${id}`) @@ -26,6 +27,7 @@ const LocationButton = ({ const [distanceRemain, setDistanceRemain] = useState("") const targetCoordinates = JSON.parse(location).coordinates + const targetPos = { lat: targetCoordinates[0], lng: targetCoordinates[1] @@ -57,7 +59,7 @@ const LocationButton = ({ setAtTarget(true) } }, - () => null, + err => onLocationError(err), { enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 } ) @@ -96,8 +98,7 @@ const LocationButton = ({ @@ -129,8 +130,7 @@ const LocationButton = ({ diff --git a/src/lib/error.ts b/src/lib/error.ts new file mode 100644 index 0000000..0896785 --- /dev/null +++ b/src/lib/error.ts @@ -0,0 +1,31 @@ +export function onLocationError(err: GeolocationPositionError) { + let errorMessage + switch (err.code) { + case 1: + errorMessage = "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin." + break + case 2: + errorMessage = "Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz." + break + case 3: + errorMessage = "Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz." + break + default: + errorMessage = "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin." + break + } + // @ts-ignore + Toastify({ + text: errorMessage, + duration: 3000, + gravity: "top", // `top` or `bottom` + position: "center", // `left`, `center` or `right` + stopOnFocus: true, // Prevents dismissing of toast on hover + style: { + background: "black", + borderRadius: "6px", + margin: "16px" + }, + onClick: function () {} // Callback after click + }).showToast() +} diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js index ab408e7..eea99a0 100644 --- a/src/scripts/initMap.js +++ b/src/scripts/initMap.js @@ -1,29 +1,11 @@ +import { remoteLog } from "@/lib/utils"; + const data = JSON.parse(document.getElementById('map').dataset.targetLocation) const TARGET_LOCATION = data.coordinates -let watchId = -1; function startWatchingLocation() { - watchId = navigator.geolocation.watchPosition( - (position) => { - console.log('watching') - const pos = { - lat: position.coords.latitude, - lng: position.coords.longitude - } - - if (currentLocationMarker) { - currentLocationMarker.setLatLng(pos); - } else { - currentLocationMarker = L.marker(pos, { icon: currentLocationIcon }); - currentLocationMarker.addTo(map); - } - }, - () => null, - { enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 } - ) - - console.log('trying', watchId) + map.locate({ watch: true }) } var map = L.map('map').setView(TARGET_LOCATION, 13); @@ -55,12 +37,60 @@ var currentLocationIcon = L.icon({ let currentLocationMarker; -function onLocationError(e) { - alert(e.message); +function onLocationError(err) { + let errorMessage; + switch (err.code) { + case 1: + errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.' + break; + case 2: + errorMessage = 'Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.' + break; + case 3: + errorMessage = 'Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.' + break; + default: + errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.' + break; + } + // @ts-ignore + Toastify({ + text: errorMessage, + duration: 3000, + gravity: 'top', // `top` or `bottom` + position: 'center', // `left`, `center` or `right` + stopOnFocus: true, // Prevents dismissing of toast on hover + style: { + background: 'black', + borderRadius: '6px', + margin: '16px', + }, + onClick: function () { }, // Callback after click + }).showToast(); +} + + +function onLocationSuccess(locationEvent) { + const position = locationEvent.latlng + + const currentPos = { + lat: position.lat, + lng: position.lng + } + + if (currentLocationMarker) { + currentLocationMarker.setLatLng(currentPos); + } else { + currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon }); + currentLocationMarker.addTo(map); + } } map.on('locationerror', onLocationError); +map.on('locationfound', onLocationSuccess) + + L.Control.GoToCurrentLocation = L.Control.extend({ onAdd: function (map) { const locationButton = document.createElement('button'); @@ -69,24 +99,38 @@ L.Control.GoToCurrentLocation = L.Control.extend({ locationButton.classList.add('custom-map-control-button'); - locationButton.name = 'select-location-button' + locationButton.type = 'button' - locationButton.addEventListener('click', () => { - if (watchId === -1) { + locationButton.addEventListener('click', (ev) => { + if (locationButton.textContent != 'Konumuma Git') { startWatchingLocation() locationButton.textContent = 'Konumuma Git'; } else { - console.log(currentLocationMarker) - map.setView(currentLocationMarker.getLatLng(), 12); + if (currentLocationMarker) { + map.setView(currentLocationMarker.getLatLng(), 12); + } else { + // @ts-ignore + Toastify({ + text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.', + duration: 3000, + gravity: 'top', // `top` or `bottom` + position: 'center', // `left`, `center` or `right` + stopOnFocus: true, // Prevents dismissing of toast on hover + style: { + background: 'black', + borderRadius: '6px', + margin: '16px', + }, + onClick: function () { }, // Callback after click + }).showToast(); + } + } - }); + L.DomEvent.stopPropagation(ev) + }) return locationButton; }, - - onRemove: function (map) { - // Nothing to do here - }, }); L.Control.GoToTargetLocation = L.Control.extend({ @@ -102,11 +146,7 @@ L.Control.GoToTargetLocation = L.Control.extend({ }); return locationButton; - }, - - onRemove: function (map) { - // Nothing to do here - }, + } }); L.control.currentLocation = function (opts) { diff --git a/src/scripts/initSelectionMap.js b/src/scripts/initSelectionMap.js index 131c2e1..3c9c74f 100644 --- a/src/scripts/initSelectionMap.js +++ b/src/scripts/initSelectionMap.js @@ -1,3 +1,4 @@ +import { onLocationError } from "@/lib/error"; import { remoteLog } from "@/lib/utils"; var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10); @@ -28,24 +29,6 @@ function startWatchingLocation() { map.locate({ watch: true }) } -function onLocationError() { - // @ts-ignore - Toastify({ - text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.', - duration: 3000, - gravity: 'top', // `top` or `bottom` - position: 'center', // `left`, `center` or `right` - stopOnFocus: true, // Prevents dismissing of toast on hover - style: { - background: 'black', - borderRadius: '6px', - margin: '16px', - }, - onClick: function () { }, // Callback after click - }).showToast(); -} - - function onLocationSuccess(locationEvent) { const position = locationEvent.latlng