chore: remove unnecessary packages

style: run prettier
This commit is contained in:
log101 2024-07-27 14:25:28 +03:00
parent 86cc813977
commit 9c74cc7263
19 changed files with 350 additions and 542 deletions

View File

@ -1,7 +1,7 @@
{
"endOfLine": "lf",
"printWidth": 80,
"arrowParens": "avoid",
"arrowParens": "always",
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
@ -10,7 +10,7 @@
"proseWrap": "always",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"semi": false,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",

View File

@ -1,54 +1 @@
# Astro Starter Kit: Basics
```sh
npm create astro@latest -- --template basics
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── Card.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
└── package.json
```
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
# KONULU KONUM

BIN
bun.lockb

Binary file not shown.

View File

@ -25,9 +25,7 @@
"clsx": "^2.1.1",
"dayjs": "^1.11.11",
"htmx.org": "^1.9.12",
"kysely": "^0.26.3",
"leaflet": "^1.9.4",
"lit": "^3.1.4",
"lucide-react": "^0.309.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",

View File

@ -1,61 +0,0 @@
---
interface Props {
title: string;
body: string;
href: string;
}
const { href, title, body } = Astro.props;
---
<li class="link-card">
<a href={href}>
<h2>
{title}
<span>&rarr;</span>
</h2>
<p>
{body}
</p>
</a>
</li>
<style>
.link-card {
list-style: none;
display: flex;
padding: 1px;
background-color: #23262d;
background-image: none;
background-size: 400%;
border-radius: 7px;
background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.link-card > a {
width: 100%;
text-decoration: none;
line-height: 1.4;
padding: calc(1.5rem - 1px);
border-radius: 8px;
color: white;
background-color: #23262d;
opacity: 0.8;
}
h2 {
margin: 0;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
p {
margin-top: 0.5rem;
margin-bottom: 0;
}
.link-card:is(:hover, :focus-within) {
background-position: 0;
background-image: var(--accent-gradient);
}
.link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light));
}
</style>

View File

@ -1,45 +1,45 @@
import { incrementUnlockCounter } from "./serverUtils";
import { incrementUnlockCounter } from "./serverUtils"
function updateText(elemId: string, text: string) {
const elem = document.getElementById(elemId);
if (elem) elem.innerText = text;
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.innerText = text
else console.error("Element could not be found!")
}
function toggleClass(elemId: string, className: string) {
const elem = document.getElementById(elemId);
if (elem) elem.classList.toggle(className);
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.classList.toggle(className)
else console.error("Element could not be found!")
}
function removeClasses(elemId: string, ...inputs: string[]) {
const elem = document.getElementById(elemId);
if (elem) elem.classList.remove(...inputs);
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.classList.remove(...inputs)
else console.error("Element could not be found!")
}
function addClasses(elemId: string, ...inputs: string[]) {
const elem = document.getElementById(elemId);
if (elem) elem.classList.add(...inputs);
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.classList.add(...inputs)
else console.error("Element could not be found!")
}
function removeElement(elemId: string) {
const elem = document.getElementById(elemId);
if (elem) elem.remove();
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.remove()
else console.error("Element could not be found!")
}
function addAttribute(elemId: string, attribute: string, value: string) {
const elem = document.getElementById(elemId);
if (elem) elem.setAttribute(attribute, value);
else console.error("Element could not be found!");
const elem = document.getElementById(elemId)
if (elem) elem.setAttribute(attribute, value)
else console.error("Element could not be found!")
}
function revealContent() {
incrementUnlockCounter(document.URL.slice(-12));
removeClasses("content", "blur-2xl");
removeElement("unlock-button-container");
incrementUnlockCounter(document.URL.slice(-12))
removeClasses("content", "blur-2xl")
removeElement("unlock-button-container")
}
export {
@ -50,4 +50,4 @@ export {
updateText,
revealContent,
addAttribute,
};
}

View File

@ -1,5 +1,4 @@
import Toastify from "toastify-js";
import L, { type LatLngTuple } from "leaflet";
import L, { type LatLngTuple } from "leaflet"
import {
addAttribute,
addClasses,
@ -8,34 +7,36 @@ import {
revealContent,
toggleClass,
updateText,
} from "./domUtils";
import { mapLocationSuccessCallback } from "@/scripts/initMap";
} from "./domUtils"
import { mapLocationSuccessCallback } from "@/scripts/initMap"
import { toast } from "@/lib/utils"
// Update the elements according to distance remaining
function locationSuccessCallback(
position: GeolocationPosition,
targetPosition: LatLngTuple
) {
const newPosition = position.coords;
removeClasses("current-location-control", "disabled-button")
const newPosition = position.coords
// Calculate the distance remaining
const distance = calculateDistance(
[newPosition.latitude, newPosition.longitude],
targetPosition
);
)
// If user has arrived to destination
if (distance < 100) {
// Change the description texts
updateText("button-text", "İçeriği Göster");
updateText("locked-content-description", "İçeriği görmek için butona bas!");
updateText("button-text", "İçeriği Göster")
updateText("locked-content-description", "İçeriği görmek için butona bas!")
// Swap the icon
toggleClass("lock-icon", "hidden");
toggleClass("unlock-icon", "hidden");
toggleClass("lock-icon", "hidden")
toggleClass("unlock-icon", "hidden")
// Tansform the unlock button
removeClasses("unlock-content-button", "bg-primary", "hover:bg-primary/90");
removeClasses("unlock-content-button", "bg-primary", "hover:bg-primary/90")
addClasses(
"unlock-content-button",
"bg-indigo-600",
@ -43,71 +44,57 @@ function locationSuccessCallback(
"hover:animate-none",
"border-2",
"border-indigo-800"
);
)
// Wait for transition to finish then add animation
setTimeout(() => {
removeClasses("unlock-content-button", "duration-1000");
addClasses("unlock-content-button", "animate-pulse");
}, 800);
removeClasses("unlock-content-button", "duration-1000")
addClasses("unlock-content-button", "animate-pulse")
}, 800)
// Reveal image when the unlock button is clicked
const unlockButton = document.getElementById("unlock-content-button");
unlockButton?.addEventListener("click", revealContent);
const unlockButton = document.getElementById("unlock-content-button")
unlockButton?.addEventListener("click", revealContent)
} else {
const distanceText = generateDistanceText(distance);
updateText("locked-content-description", `Kalan mesafe: ${distanceText}`);
const distanceText = generateDistanceText(distance)
updateText("locked-content-description", `Kalan mesafe: ${distanceText}`)
}
removeElement("location-permission-button");
removeElement("location-permission-button")
// Update leaflet controls
mapLocationSuccessCallback(position);
mapLocationSuccessCallback(position)
}
// This callback will be fired on geolocation error
function errorCallback(err: GeolocationPositionError) {
let errorMessage;
let errorMessage
// Show toast accoring to the error state
switch (err.code) {
case GeolocationPositionError.PERMISSION_DENIED:
errorMessage =
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
updateText(
"locked-content-description",
"Konum izleme izni alınamadı. \nİçeriği görüntüleyebilmek için konum bilginiz gerekiyor."
);
addAttribute("current-location-control", "disabled", "true");
addClasses("current-location-control", "disabled-button");
removeElement("location-permission-button");
break;
)
addAttribute("current-location-control", "disabled", "true")
addClasses("current-location-control", "disabled-button")
removeElement("location-permission-button")
break
case GeolocationPositionError.POSITION_UNAVAILABLE:
errorMessage =
"Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.";
break;
"Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz."
break
case GeolocationPositionError.TIMEOUT:
errorMessage =
"Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.";
break;
return
default:
errorMessage =
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
break;
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
break
}
Toastify({
text: errorMessage,
duration: 3000,
gravity: "top",
position: "center",
stopOnFocus: true,
style: {
background: "black",
borderRadius: "6px",
margin: "16px",
},
onClick: function () {},
}).showToast();
toast(errorMessage)
}
function calculateDistance(
@ -115,24 +102,24 @@ function calculateDistance(
targetPosition: L.LatLngTuple
) {
// Get target position in latitudes and longitudes
const targetLatLng = L.latLng(targetPosition);
const targetLatLng = L.latLng(targetPosition)
// Get current position in latitudes and longitudes
const currentLatLng = L.latLng(currentPosition);
const currentLatLng = L.latLng(currentPosition)
// Calculate the distance between target and current position in meters
const betweenMeters = currentLatLng.distanceTo(targetLatLng);
const betweenMeters = currentLatLng.distanceTo(targetLatLng)
return betweenMeters;
return betweenMeters
}
// Generates a human readable destination text according to
// distance remaining
function generateDistanceText(distance: number) {
if (distance > 1000) {
return `${(distance / 1000).toFixed()} KM`;
return `${(distance / 1000).toFixed()} KM`
} else if (distance > 100) {
return `${distance.toFixed(0)} M`;
return `${distance.toFixed(0)} M`
}
}
@ -141,4 +128,4 @@ export {
locationSuccessCallback,
calculateDistance,
generateDistanceText,
};
}

View File

@ -4,8 +4,8 @@ function incrementUnlockCounter(id: string | undefined) {
if (id) {
fetch(`http://localhost:3000/api/location/increment/${id}`, {
method: "PATCH",
});
})
}
}
export { incrementUnlockCounter };
export { incrementUnlockCounter }

View File

@ -1,37 +1,25 @@
import { Button } from "./ui/button"
import { toast } from "@/lib/utils";
import { Button } from "./ui/button";
const ShareButton = () => {
const shareLink = async () => {
const shareData = {
title: "Konulu Konum",
text: "Sevdiklerinizi şaşırtın!",
url: document.URL
}
url: document.URL,
};
await navigator.share(shareData)
}
await navigator.share(shareData);
};
const copyLink = async () => {
try {
await navigator.clipboard.writeText(document.URL)
// @ts-ignore
Toastify({
text: "Konulu konum kopyalandı.",
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()
await navigator.clipboard.writeText(document.URL);
toast("Konulu konum kopyalandı.");
} catch (err: any) {
console.error(err.message)
}
console.error(err.message);
}
};
return (
<div>
@ -48,7 +36,7 @@ const ShareButton = () => {
)
}
</div>
)
}
);
};
export default ShareButton
export default ShareButton;

4
src/env.d.ts vendored
View File

@ -5,12 +5,12 @@
export declare global {
interface Window {
htmx: any;
htmx: any
}
namespace astroHTML.JSX {
interface HTMLAttributes {
_?: any;
_?: any
}
}
}

View File

@ -1,16 +1,14 @@
import type { Generated } from "kysely"
export interface Database {
contents: ContentTable
}
export interface ContentTable {
id: Generated<string>
id: string
url: string
blob_url: string
loc: string
author: string
description: string
created_at: Generated<string>
unlocked_counter: Generated<number>
created_at: string
unlocked_counter: number
}

View File

@ -1,31 +0,0 @@
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()
}

View File

@ -1,6 +1,23 @@
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import Toastify from "toastify-js"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
return twMerge(clsx(inputs))
}
export function toast(errorMessage: string) {
Toastify({
text: errorMessage,
duration: 3000,
gravity: "top",
position: "center",
stopOnFocus: true,
style: {
background: "black",
borderRadius: "6px",
margin: "16px",
},
onClick: function () {},
}).showToast()
}

View File

@ -1,42 +1,41 @@
---
// Styles
import "@/styles/globals.css";
import "../styles/locked-page.css";
import "../styles/locked-content.css";
import "@/styles/globals.css"
import "../styles/locked-page.css"
import "../styles/locked-content.css"
// Components
import Layout from "../layouts/Layout.astro";
import ShareButton from "../components/ShareButton";
import Layout from "../layouts/Layout.astro"
import ShareButton from "../components/ShareButton"
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { CalendarIcon } from "@radix-ui/react-icons";
import { Separator } from "@/components/ui/separator";
import type { ContentTable } from "@/lib/db";
} from "@/components/ui/card"
import { CalendarIcon } from "@radix-ui/react-icons"
import { Separator } from "@/components/ui/separator"
import type { ContentTable } from "@/lib/db"
// Dayjs
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import utc from "dayjs/plugin/utc";
import dayjs from "dayjs"
import relativeTime from "dayjs/plugin/relativeTime"
import utc from "dayjs/plugin/utc"
type Content = ContentTable;
type Content = ContentTable
const { id } = Astro.params;
const { id } = Astro.params
const res = await fetch(`http://localhost:3000/api/location/${id}`);
const res = await fetch(`http://localhost:3000/api/location/${id}`)
const data: Content | null = res.status === 200 ? await res.json() : null;
const data: Content | null = res.status === 200 ? await res.json() : null
dayjs.extend(relativeTime);
dayjs.extend(relativeTime)
dayjs.extend(utc);
dayjs.extend(utc)
// @ts-expect-error Generated<string> is string
const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc())
---
<Layout>

View File

@ -10,17 +10,15 @@ import Layout from "../layouts/Layout.astro";
<Layout>
<main>
<form
class="flex flex-col gap-8"
id="sample-form"
enctype="multipart/form-data"
>
class='flex flex-col gap-8'
id='sample-form'
enctype='multipart/form-data'>
<div>
<h1
class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl hover:underline"
>
class='scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl hover:underline'>
<a href=`${import.meta.env.PUBLIC_HOME_URL}`> Konulu Konum</a>
</h1>
<p class="leading-7 [&:not(:first-child)]:mt-6">
<p class='leading-7 [&:not(:first-child)]:mt-6'>
3 basit adımda fotoğraflarınızı ve videolarınızı <b
>yalnızca belirli bir konumda</b
> açılacak şekilde kilitleyin:
@ -29,24 +27,23 @@ import Layout from "../layouts/Layout.astro";
<div>
<h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
>
class='mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0'>
1. Fotoğraf Seçimi
</h2>
<p class="leading-7 [&:not(:first-child)]:mt-6">
<p class='leading-7 [&:not(:first-child)]:mt-6'>
Aşağıdaki butona basıp galerinizden bir fotoğraf seçin, seçtiğiniz
fotoğraf yalnızca belirli bir konumda açılabilecek bir hale
getirilecek.
</p>
<div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
<div class='grid w-full max-w-sm items-center gap-1.5 mt-4'>
<input
type="file"
name="selected-photo"
id="photo-selector"
class="p-2 border border-gray rounded-lg file:bg-inherit file:border-0"
type='file'
name='selected-photo'
id='photo-selector'
class='p-2 border border-gray rounded-lg file:bg-inherit file:border-0'
required
/>
<p class="px-2 text-sm text-muted-foreground">
<p class='px-2 text-sm text-muted-foreground'>
Galerinizden bir fotoğraf seçin.
</p>
</div>
@ -54,99 +51,94 @@ import Layout from "../layouts/Layout.astro";
<div>
<h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
>
class='mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0'>
2. Fotoğrafın Açılacağı Konum
</h2>
<p class="leading-7 [&:not(:first-child)]:mt-6">
<p class='leading-7 [&:not(:first-child)]:mt-6'>
Haritadan bir nokta seçin. Bağlantıyı gönderdiğiniz kişi bu konuma
gittiği zaman seçtiğiniz fotoğrafı görebilecek.
</p>
<div>
<div
id="map"
class="w-full h-[450px] rounded mt-4 transition-colors ease-in-out border-2 duration-300"
>
id='map'
class='w-full h-[450px] rounded mt-4 transition-colors ease-in-out border-2 duration-300'>
</div>
<p class="text-xl mt-2">
<span class="font-semibold">Seçilen Konum:</span>
<p class='text-xl mt-2'>
<span class='font-semibold'>Seçilen Konum:</span>
</p>
<p
class="text-lg transition ease-in-out duration-700"
id="coordinates"
>
class='text-lg transition ease-in-out duration-700'
id='coordinates'>
Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
basınız.
</p>
<p
class="text-lg text-muted-foreground mt-2"
id="location-selected-confirmation"
>
class='text-lg text-muted-foreground mt-2'
id='location-selected-confirmation'>
</p>
</div>
<input name="geolocation" id="geolocation-input" hidden />
<input name='geolocation' id='geolocation-input' hidden />
</div>
<div>
<h2
class="mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0"
>
class='mt-10 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0'>
3. Fotoğraf Açıklaması
</h2>
<div class="grid w-full max-w-md items-center gap-2 mt-4">
<div class="grid w-full items-center gap-1.5">
<label for="location-author" class="lg:text-lg text-md">
<div class='grid w-full max-w-md items-center gap-2 mt-4'>
<div class='grid w-full items-center gap-1.5'>
<label for='location-author' class='lg:text-lg text-md'>
Gönderici
</label>
<input
id="location-author"
name="author"
placeholder="İsminizi buraya yazınız."
class="lg:text-lg text-md py-2 px-3 border border-gray rounded-lg placeholder:text-slate-400"
id='location-author'
name='author'
placeholder='İsminizi buraya yazınız.'
class='lg:text-lg text-md py-2 px-3 border border-gray rounded-lg placeholder:text-slate-400'
required
/>
</div>
<div class="grid w-full items-center gap-1.5">
<label for="location-description" class="lg:text-lg text-md">
<div class='grid w-full items-center gap-1.5'>
<label for='location-description' class='lg:text-lg text-md'>
ıklama
</label>
<textarea
placeholder="Açıklamanızı buraya yazınız."
name="description"
id="location-description"
class="lg:text-lg text-md py-2 px-3 border border-gray rounded-lg placeholder:text-slate-400 resize-none"
placeholder='Açıklamanızı buraya yazınız.'
name='description'
id='location-description'
class='lg:text-lg text-md py-2 px-3 border border-gray rounded-lg placeholder:text-slate-400 resize-none'
required></textarea>
<p class="text-sm text-muted-foreground">
<p class='text-sm text-muted-foreground'>
Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
görünecek.
</p>
</div>
</div>
<div class="flex gap-2 my-6 items-center">
<input type="checkbox" id="kvkk" class="w-6 h-6" required />
<div class='flex gap-2 my-6 items-center'>
<input type='checkbox' id='kvkk' class='w-6 h-6' required />
<label
for="kvkk"
class="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
for='kvkk'
class='text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'>
Konulu Konum'u KVKK kapsamında dava etmeyeceğimi onaylıyorum.
</label>
</div>
<button
class="w-full text-lg bg-slate-900 text-white p-2 rounded-lg"
type="submit"
id="submit-button"
>
class='w-full text-lg bg-slate-900 text-white p-2 rounded-lg'
type='submit'
id='submit-button'>
Bağlantıyı Oluştur
</button>
</div>
</form>
<script src="../scripts/initSelectionMap.js"></script>
<script src='../scripts/initSelectionMap.js'></script>
</main>
<script>
import { toast } from "@/lib/utils";
const handleSubmit = async (e: SubmitEvent) => {
e.preventDefault();
@ -208,20 +200,7 @@ import Layout from "../layouts/Layout.astro";
if (data.url) location.assign("/" + data.url);
} else {
// @ts-ignore
Toastify({
text: "Konulu konum oluşturulamadı, lütfen tekrar deneyin.",
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();
toast("Konulu konum oluşturulamadı, lütfen tekrar deneyin.");
}
};

View File

@ -1,129 +1,117 @@
import L from "leaflet";
import Toastify from "toastify-js";
import { toast } from "@/lib/utils"
import L from "leaflet"
type TargetLocation = [lat: number, lng: number] | null;
type TargetLocation = [lat: number, lng: number] | null
const mapEl = document.getElementById("map");
const mapEl = document.getElementById("map")
var targetLocationIcon = L.icon({
iconUrl: "goal.svg",
iconSize: [32, 32],
});
})
var currentLocationIcon = L.icon({
iconUrl: "blue-dot.png",
iconSize: [32, 32],
});
})
const targetLocation = mapEl?.dataset.targetLocation;
const targetLocation = mapEl?.dataset.targetLocation
const data = targetLocation ? JSON.parse(targetLocation) : null;
const data = targetLocation ? JSON.parse(targetLocation) : null
const TARGET_LOCATION = data as TargetLocation;
const TARGET_LOCATION = data as TargetLocation
var map = L.map("map");
var map = L.map("map")
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 13);
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 13)
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
}).addTo(map)
let currentLocationMarker: L.Marker;
let currentLocationMarker: L.Marker
export function mapLocationSuccessCallback(position: GeolocationPosition) {
const currentPos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(currentPos);
currentLocationMarker.setLatLng(currentPos)
} else {
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon })
currentLocationMarker.addTo(map)
}
}
const CurrentLocation = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
const locationButton = document.createElement("button")
locationButton.textContent = "Konumuma Git";
locationButton.textContent = "Konumuma Git"
locationButton.classList.add("custom-map-control-button");
locationButton.classList.add("custom-map-control-button", "disabled-button")
locationButton.type = "button";
locationButton.type = "button"
locationButton.id = "current-location-control";
locationButton.id = "current-location-control"
locationButton.addEventListener("click", () => {
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();
toast("Konumunuza erişilemiyor, lütfen biraz bekleyip tekrar deneyin.")
}
});
})
return locationButton;
return locationButton
},
});
})
const GoToTargetLocation = L.Control.extend({
onAdd: function (map: L.Map) {
const locationButton = document.createElement("button");
const locationButton = document.createElement("button")
locationButton.textContent = "Hedefe Git";
locationButton.textContent = "Hedefe Git"
locationButton.classList.add("custom-map-control-button");
locationButton.classList.add("custom-map-control-button")
locationButton.addEventListener("click", () => {
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 12);
});
if (TARGET_LOCATION) map.setView(TARGET_LOCATION, 12)
})
return locationButton;
return locationButton
},
});
})
const goToCurrentLocationControl = new CurrentLocation({
position: "bottomleft",
});
})
const targetLocationControl = new GoToTargetLocation({
position: "bottomleft",
});
})
function addTargetLocationMarker(target: TargetLocation) {
if (target) {
L.marker(target, { icon: targetLocationIcon }).addTo(map);
L.marker(target, { icon: targetLocationIcon }).addTo(map)
L.circle(target, {
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
radius: 50,
}).addTo(map);
}).addTo(map)
}
}
function initLocationControls() {
targetLocationControl.addTo(map);
goToCurrentLocationControl.addTo(map);
targetLocationControl.addTo(map)
goToCurrentLocationControl.addTo(map)
}
addTargetLocationMarker(TARGET_LOCATION);
initLocationControls();
addTargetLocationMarker(TARGET_LOCATION)
initLocationControls()

View File

@ -1,28 +1,29 @@
import { onLocationError } from "@/lib/error";
import { onLocationError } from "@/lib/error"
import { toast } from "@/lib/utils"
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
var map = L.map("map").setView([41.024857599001905, 28.940787550837882], 10)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);
}).addTo(map)
let targetLocationMarker;
let targetLocationMarker
let targetLocationCircle;
let targetLocationCircle
var targetLocationIcon = L.icon({
iconUrl: 'goal.svg',
iconUrl: "goal.svg",
iconSize: [32, 32],
});
})
var currentLocationIcon = L.icon({
iconUrl: 'blue-dot.png',
iconUrl: "blue-dot.png",
iconSize: [32, 32],
});
})
let currentLocationMarker;
let currentLocationMarker
function startWatchingLocation() {
map.locate({ watch: true })
@ -33,87 +34,78 @@ function onLocationSuccess(locationEvent) {
const currentPos = {
lat: position.lat,
lng: position.lng
lng: position.lng,
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(currentPos);
currentLocationMarker.setLatLng(currentPos)
} else {
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon })
currentLocationMarker.addTo(map)
}
}
map.on('locationerror', onLocationError);
map.on("locationerror", onLocationError)
map.on('locationfound', onLocationSuccess)
map.on("locationfound", onLocationSuccess)
L.Control.AskPermisson = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
const locationButton = document.createElement("button")
locationButton.textContent = 'Konum İzni Ver';
locationButton.textContent = "Konum İzni Ver"
locationButton.classList.add('custom-map-control-button');
locationButton.classList.add("custom-map-control-button")
locationButton.type = 'button'
locationButton.type = "button"
locationButton.addEventListener('click', (ev) => {
if (locationButton.textContent != 'Konumuma Git') {
locationButton.addEventListener("click", (ev) => {
if (locationButton.textContent != "Konumuma Git") {
startWatchingLocation()
locationButton.textContent = 'Konumuma Git';
locationButton.textContent = "Konumuma Git"
} else {
if (currentLocationMarker) {
map.setView(currentLocationMarker.getLatLng(), 12);
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();
toast(
"Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin."
)
}
}
L.DomEvent.stopPropagation(ev)
})
return locationButton;
return locationButton
},
});
})
L.control.askPermission = function (opts) {
return new L.Control.AskPermisson(opts);
};
return new L.Control.AskPermisson(opts)
}
L.control.askPermission({ position: 'bottomleft' }).addTo(map);
L.control.askPermission({ position: "bottomleft" }).addTo(map)
map.on('click', (e) => {
map.on("click", (e) => {
if (targetLocationMarker) {
targetLocationMarker.setLatLng(e.latlng)
targetLocationCircle.setLatLng(e.latlng)
} else {
targetLocationMarker = L.marker(e.latlng, { icon: targetLocationIcon }).addTo(map);
targetLocationMarker = L.marker(e.latlng, {
icon: targetLocationIcon,
}).addTo(map)
targetLocationCircle = L.circle(e.latlng, {
color: 'blue',
fillColor: '#30f',
color: "blue",
fillColor: "#30f",
fillOpacity: 0.2,
radius: 50
}).addTo(map);
radius: 50,
}).addTo(map)
}
const pos = targetLocationMarker.getLatLng()
document.getElementById('coordinates').innerText = `${pos.lat}. Enlem, ${pos.lng}. Boylam`
document.getElementById('geolocation-input').value = `${pos.lat},${pos.lng}`
document.getElementById('location-selected-confirmation').innerText = "Konum seçildi, bir sonraki adıma geçebilirsiniz."
document.getElementById("coordinates").innerText =
`${pos.lat}. Enlem, ${pos.lng}. Boylam`
document.getElementById("geolocation-input").value = `${pos.lat},${pos.lng}`
document.getElementById("location-selected-confirmation").innerText =
"Konum seçildi, bir sonraki adıma geçebilirsiniz."
})

View File

@ -1,64 +1,66 @@
import {
errorCallback,
locationSuccessCallback,
} from "@/components/LockedContent/geolocation";
import type { LatLngTuple } from "leaflet";
} from "@/components/LockedContent/geolocation"
import type { LatLngTuple } from "leaflet"
// Geolocation watch id to avoid duplicate watchPosition calls
let watchId: number;
let watchId: number
// DOM ELEMENTS
const locationPermissionButton = document.getElementById(
"location-permission-button"
);
)
const unlockButton = document.getElementById("unlock-content-button");
const unlockButton = document.getElementById("unlock-content-button")
const lockedContentContainer = document.getElementById(
"locked-content-container"
);
)
// These elements MUST be defined
// Throw error if they are not found
if (!locationPermissionButton || !lockedContentContainer || !unlockButton) {
throw new Error("Element not found!");
throw new Error("Element not found!")
}
// EVENT LISTENERS
locationPermissionButton.addEventListener("click", startWatchingLocation);
locationPermissionButton.addEventListener("click", startWatchingLocation)
lockedContentContainer.addEventListener("askpermission", startWatchingLocation);
lockedContentContainer.addEventListener("askpermission", startWatchingLocation)
const targetPositionString = lockedContentContainer.dataset.targetPosition;
const targetPositionString = lockedContentContainer.dataset.targetPosition
// TARGET_POSITION is required to calculate distance
if (!targetPositionString) throw new Error("Target position is not provided!");
if (!targetPositionString) throw new Error("Target position is not provided!")
const TARGET_POSITION = JSON.parse(targetPositionString) as LatLngTuple;
const TARGET_POSITION = JSON.parse(targetPositionString) as LatLngTuple
// Call Geolocation API to start watching user location
function startWatchingLocation() {
if (!watchId) {
watchId = window.navigator.geolocation.watchPosition(
position => locationSuccessCallback(position, TARGET_POSITION),
(position) => locationSuccessCallback(position, TARGET_POSITION),
errorCallback
);
)
}
}
// When the web page is loaded, check if user has given geolocation
// permission before
navigator.permissions.query({ name: "geolocation" }).then(permissionStatus => {
navigator.permissions
.query({ name: "geolocation" })
.then((permissionStatus) => {
switch (permissionStatus.state) {
case "granted":
watchId = window.navigator.geolocation.watchPosition(
position => locationSuccessCallback(position, TARGET_POSITION),
(position) => locationSuccessCallback(position, TARGET_POSITION),
errorCallback
);
break;
)
break
case "denied":
case "prompt":
default:
break;
break
}
});
})

View File

@ -1,21 +1,26 @@
export default function distance(lat1, lon1, lat2, lon2, unit = 'K') {
if ((lat1 == lat2) && (lon1 == lon2)) {
return 0;
}
else {
var radlat1 = Math.PI * lat1 / 180;
var radlat2 = Math.PI * lat2 / 180;
var theta = lon1 - lon2;
var radtheta = Math.PI * theta / 180;
var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
export default function distance(lat1, lon1, lat2, lon2, unit = "K") {
if (lat1 == lat2 && lon1 == lon2) {
return 0
} else {
var radlat1 = (Math.PI * lat1) / 180
var radlat2 = (Math.PI * lat2) / 180
var theta = lon1 - lon2
var radtheta = (Math.PI * theta) / 180
var dist =
Math.sin(radlat1) * Math.sin(radlat2) +
Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta)
if (dist > 1) {
dist = 1;
dist = 1
}
dist = Math.acos(dist);
dist = dist * 180 / Math.PI;
dist = dist * 60 * 1.1515;
if (unit == "K") { dist = dist * 1.609344 }
if (unit == "N") { dist = dist * 0.8684 }
return dist;
dist = Math.acos(dist)
dist = (dist * 180) / Math.PI
dist = dist * 60 * 1.1515
if (unit == "K") {
dist = dist * 1.609344
}
if (unit == "N") {
dist = dist * 0.8684
}
return dist
}
}