feat: increment counter on unlock button click
This commit is contained in:
parent
05a5b436d1
commit
5097f70d90
|
|
@ -1,50 +1,48 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/jpg" href="/konulu-konum-logo.jpg" />
|
||||
<meta charset='UTF-8' />
|
||||
<meta name='description' content='Astro description' />
|
||||
<meta name='viewport' content='width=device-width' />
|
||||
<link rel='icon' type='image/jpg' href='/konulu-konum-logo.jpg' />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
|
||||
crossorigin=""
|
||||
rel='stylesheet'
|
||||
href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
|
||||
integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
|
||||
crossorigin=''
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
|
||||
rel='stylesheet'
|
||||
type='text/css'
|
||||
href='https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css'
|
||||
/>
|
||||
<script
|
||||
is:inline
|
||||
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
|
||||
integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
|
||||
crossorigin=''></script>
|
||||
<script
|
||||
type="text/javascript"
|
||||
src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
|
||||
<meta property="og:title" content="Konulu Konum" />
|
||||
<meta property="og:description" content="Sevdiklerinizi şaşırtın!" />
|
||||
<meta property="og:url" content="https://konulu-konum.vercel.app" />
|
||||
type='text/javascript'
|
||||
src='https://cdn.jsdelivr.net/npm/toastify-js'></script>
|
||||
<meta property='og:title' content='Konulu Konum' />
|
||||
<meta property='og:description' content='Sevdiklerinizi şaşırtın!' />
|
||||
<meta property='og:url' content='https://konulu-konum.vercel.app' />
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://konulu-konum.vercel.app/konulu-konum-logo.jpg"
|
||||
property='og:image'
|
||||
content='https://konulu-konum.vercel.app/konulu-konum-logo.jpg'
|
||||
/>
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<meta name='twitter:card' content='summary' />
|
||||
<meta name='generator' content={Astro.generator} />
|
||||
<title>Konulu Konum</title>
|
||||
</head>
|
||||
<body class="container my-8">
|
||||
<body class='container my-8'>
|
||||
<slot />
|
||||
</body>
|
||||
|
||||
<script>
|
||||
import htmx from "htmx.org";
|
||||
import _hyperscript from "hyperscript.org";
|
||||
|
||||
window.htmx = htmx;
|
||||
_hyperscript.browserInit();
|
||||
</script>
|
||||
</html>
|
||||
<style is:global></style>
|
||||
|
|
|
|||
|
|
@ -68,12 +68,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
|||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<locked-content
|
||||
id='locked-content-component'
|
||||
imageId={data?.url}
|
||||
imageURL={`http://localhost:3000/images/${data?.blob_url}`}
|
||||
targetPosition={data?.loc}></locked-content>
|
||||
|
||||
<div
|
||||
id='locked-content-container'
|
||||
data-target-position={data?.loc}
|
||||
|
|
@ -123,7 +117,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
|||
</p>
|
||||
<button
|
||||
id='location-permission-button'
|
||||
_='on click send askpermission to me'
|
||||
class='inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground h-9 rounded-md px-3 bg-green-700 hover:bg-green-600 text-md'>
|
||||
Konum İzni Ver
|
||||
</button>
|
||||
|
|
@ -146,7 +139,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
|
|||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script src='../components/locked-content.ts'></script>
|
||||
<script src='../scripts/initMap.ts'></script>
|
||||
<script src='../scripts/lockedContent.ts'></script>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import L from "leaflet";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
type TargetLocation = [lat: number, lng: number] | null;
|
||||
|
||||
|
|
@ -59,6 +60,20 @@ const CurrentLocation = L.Control.extend({
|
|||
locationButton.addEventListener("click", () => {
|
||||
if (currentLocationMarker) {
|
||||
map.setView(currentLocationMarker.getLatLng(), 12);
|
||||
} else {
|
||||
Toastify({
|
||||
text: "Konumunuza erişilemiyor, lütfen biraz bekleyip tekrar deneyin.",
|
||||
duration: 3000,
|
||||
gravity: "top",
|
||||
position: "center",
|
||||
stopOnFocus: true,
|
||||
style: {
|
||||
background: "black",
|
||||
borderRadius: "6px",
|
||||
margin: "16px",
|
||||
},
|
||||
onClick: function () {},
|
||||
}).showToast();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import {
|
|||
calculateDistance,
|
||||
errorCallback,
|
||||
} from "@/components/LockedContent/geolocation";
|
||||
import { incrementUnlockCounter } from "@/components/LockedContent/serverUtils";
|
||||
import { onLocationSuccess } from "@/scripts/initMap";
|
||||
let watchId: number;
|
||||
|
||||
|
|
@ -18,6 +19,9 @@ const locationPermissionButton = document.getElementById(
|
|||
"location-permission-button"
|
||||
);
|
||||
|
||||
if (locationPermissionButton)
|
||||
locationPermissionButton.addEventListener("click", startWatchingLocation);
|
||||
|
||||
// Generates a human readable destination text according to
|
||||
// distance remaining
|
||||
function generateDistanceText(distance: number) {
|
||||
|
|
@ -38,6 +42,7 @@ function updateCurrentLocation(position: GeolocationPosition) {
|
|||
[newPosition.latitude, newPosition.longitude],
|
||||
JSON.parse(targetLocation)
|
||||
);
|
||||
|
||||
if (distance < 100) {
|
||||
// If user has arrived to destination
|
||||
// Transform locked button to reveal button
|
||||
|
|
@ -46,7 +51,6 @@ function updateCurrentLocation(position: GeolocationPosition) {
|
|||
const lockIcon = document.getElementById("lock-icon");
|
||||
const buttonText = document.getElementById("button-text");
|
||||
const description = document.getElementById("locked-content-description");
|
||||
|
||||
if (unlockButton) {
|
||||
if (buttonText) buttonText.innerText = "İçeriği Göster";
|
||||
if (lockIcon) lockIcon.classList.add("hidden");
|
||||
|
|
@ -71,6 +75,7 @@ function updateCurrentLocation(position: GeolocationPosition) {
|
|||
const unlockButtonContainer = document.getElementById(
|
||||
"unlock-button-container"
|
||||
);
|
||||
incrementUnlockCounter(document.URL.slice(-12));
|
||||
if (image) image.classList.remove("blur-2xl");
|
||||
if (unlockButtonContainer) unlockButtonContainer.remove();
|
||||
});
|
||||
|
|
@ -82,7 +87,9 @@ function updateCurrentLocation(position: GeolocationPosition) {
|
|||
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
|
||||
}
|
||||
|
||||
if (locationPermissionButton) locationPermissionButton.remove();
|
||||
if (locationPermissionButton) {
|
||||
locationPermissionButton.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// Update leaflet controls
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user