log101/konulu-konum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: increment counter on unlock button click

Browse Source
This commit is contained in:
log101 2024-07-24 12:00:12 +03:00
parent 05a5b436d1
commit 5097f70d90
5 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

52
src/layouts/Layout.astro
View File

@ -1,50 +1,48 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang='en'>
<head> <head>
<meta charset="UTF-8" /> <meta charset='UTF-8' />
<meta name="description" content="Astro description" /> <meta name='description' content='Astro description' />
<meta name="viewport" content="width=device-width" /> <meta name='viewport' content='width=device-width' />
<link rel="icon" type="image/jpg" href="/konulu-konum-logo.jpg" /> <link rel='icon' type='image/jpg' href='/konulu-konum-logo.jpg' />
<link <link
rel="stylesheet" rel='stylesheet'
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
crossorigin="" crossorigin=''
/> />
<link <link
rel="stylesheet" rel='stylesheet'
type="text/css" type='text/css'
href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css" href='https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css'
/> />
<script <script
is:inline is:inline
src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
crossorigin=""></script> crossorigin=''></script>
<script <script
type="text/javascript" type='text/javascript'
src="https://cdn.jsdelivr.net/npm/toastify-js"></script> src='https://cdn.jsdelivr.net/npm/toastify-js'></script>
<meta property="og:title" content="Konulu Konum" /> <meta property='og:title' content='Konulu Konum' />
<meta property="og:description" content="Sevdiklerinizi şaşırtın!" /> <meta property='og:description' content='Sevdiklerinizi şaşırtın!' />
<meta property="og:url" content="https://konulu-konum.vercel.app" /> <meta property='og:url' content='https://konulu-konum.vercel.app' />
<meta <meta
property="og:image" property='og:image'
content="https://konulu-konum.vercel.app/konulu-konum-logo.jpg" content='https://konulu-konum.vercel.app/konulu-konum-logo.jpg'
/> />
<meta name="twitter:card" content="summary" /> <meta name='twitter:card' content='summary' />
<meta name="generator" content={Astro.generator} /> <meta name='generator' content={Astro.generator} />
<title>Konulu Konum</title> <title>Konulu Konum</title>
</head> </head>
<body class="container my-8"> <body class='container my-8'>
<slot /> <slot />
</body> </body>
<script> <script>
import htmx from "htmx.org"; import htmx from "htmx.org";
import _hyperscript from "hyperscript.org";
window.htmx = htmx; window.htmx = htmx;
_hyperscript.browserInit();
</script> </script>
</html> </html>
<style is:global></style> <style is:global></style>

8
src/pages/[id].astro
View File

@ -68,12 +68,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</CardFooter> </CardFooter>
</Card> </Card>
<locked-content
id='locked-content-component'
imageId={data?.url}
imageURL={`http://localhost:3000/images/${data?.blob_url}`}
targetPosition={data?.loc}></locked-content>
<div <div
id='locked-content-container' id='locked-content-container'
data-target-position={data?.loc} data-target-position={data?.loc}
@ -123,7 +117,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</p> </p>
<button <button
id='location-permission-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'> 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 Konum İzni Ver
</button> </button>
@ -146,7 +139,6 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
</p> </p>
</div> </div>
</main> </main>
<script src='../components/locked-content.ts'></script>
<script src='../scripts/initMap.ts'></script> <script src='../scripts/initMap.ts'></script>
<script src='../scripts/lockedContent.ts'></script> <script src='../scripts/lockedContent.ts'></script>
</Layout> </Layout>

15
src/scripts/initMap.ts
View File

@ -1,4 +1,5 @@
import L from "leaflet"; import L from "leaflet";
import Toastify from "toastify-js";
type TargetLocation = [lat: number, lng: number] | null; type TargetLocation = [lat: number, lng: number] | null;
@ -59,6 +60,20 @@ const CurrentLocation = L.Control.extend({
locationButton.addEventListener("click", () => { locationButton.addEventListener("click", () => {
if (currentLocationMarker) { if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12); 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();
} }
}); });

11
src/scripts/lockedContent.ts
View File

@ -2,6 +2,7 @@ import {
calculateDistance, calculateDistance,
errorCallback, errorCallback,
} from "@/components/LockedContent/geolocation"; } from "@/components/LockedContent/geolocation";
import { incrementUnlockCounter } from "@/components/LockedContent/serverUtils";
import { onLocationSuccess } from "@/scripts/initMap"; import { onLocationSuccess } from "@/scripts/initMap";
let watchId: number; let watchId: number;
@ -18,6 +19,9 @@ const locationPermissionButton = document.getElementById(
"location-permission-button" "location-permission-button"
); );
if (locationPermissionButton)
locationPermissionButton.addEventListener("click", startWatchingLocation);
// Generates a human readable destination text according to // Generates a human readable destination text according to
// distance remaining // distance remaining
function generateDistanceText(distance: number) { function generateDistanceText(distance: number) {
@ -38,6 +42,7 @@ function updateCurrentLocation(position: GeolocationPosition) {
[newPosition.latitude, newPosition.longitude], [newPosition.latitude, newPosition.longitude],
JSON.parse(targetLocation) JSON.parse(targetLocation)
); );
if (distance < 100) { if (distance < 100) {
// If user has arrived to destination // If user has arrived to destination
// Transform locked button to reveal button // Transform locked button to reveal button
@ -46,7 +51,6 @@ function updateCurrentLocation(position: GeolocationPosition) {
const lockIcon = document.getElementById("lock-icon"); const lockIcon = document.getElementById("lock-icon");
const buttonText = document.getElementById("button-text"); const buttonText = document.getElementById("button-text");
const description = document.getElementById("locked-content-description"); const description = document.getElementById("locked-content-description");
if (unlockButton) { if (unlockButton) {
if (buttonText) buttonText.innerText = "İçeriği Göster"; if (buttonText) buttonText.innerText = "İçeriği Göster";
if (lockIcon) lockIcon.classList.add("hidden"); if (lockIcon) lockIcon.classList.add("hidden");
@ -71,6 +75,7 @@ function updateCurrentLocation(position: GeolocationPosition) {
const unlockButtonContainer = document.getElementById( const unlockButtonContainer = document.getElementById(
"unlock-button-container" "unlock-button-container"
); );
incrementUnlockCounter(document.URL.slice(-12));
if (image) image.classList.remove("blur-2xl"); if (image) image.classList.remove("blur-2xl");
if (unlockButtonContainer) unlockButtonContainer.remove(); if (unlockButtonContainer) unlockButtonContainer.remove();
}); });
@ -82,7 +87,9 @@ function updateCurrentLocation(position: GeolocationPosition) {
descriptionElement.innerText = `Kalan mesafe: ${distanceText}`; descriptionElement.innerText = `Kalan mesafe: ${distanceText}`;
} }
if (locationPermissionButton) locationPermissionButton.remove(); if (locationPermissionButton) {
locationPermissionButton.remove();
}
} }
// Update leaflet controls // Update leaflet controls