chore: remove unnecessary packages
style: run prettier
This commit is contained in:
parent
86cc813977
commit
9c74cc7263
|
|
@ -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",
|
||||
|
|
|
|||
55
README.md
55
README.md
|
|
@ -1,54 +1 @@
|
|||
# Astro Starter Kit: Basics
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template basics
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
|
||||
|
||||
## 🚀 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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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>→</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>
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
|
|
|
|||
|
|
@ -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
4
src/env.d.ts
vendored
|
|
@ -5,12 +5,12 @@
|
|||
|
||||
export declare global {
|
||||
interface Window {
|
||||
htmx: any;
|
||||
htmx: any
|
||||
}
|
||||
|
||||
namespace astroHTML.JSX {
|
||||
interface HTMLAttributes {
|
||||
_?: any;
|
||||
_?: any
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
Açı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.");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
'© <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()
|
||||
|
|
|
|||
|
|
@ -1,119 +1,111 @@
|
|||
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', {
|
||||
maxZoom: 19,
|
||||
attribution:
|
||||
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
}).addTo(map);
|
||||
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19,
|
||||
attribution:
|
||||
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
}).addTo(map)
|
||||
|
||||
let targetLocationMarker;
|
||||
let targetLocationMarker
|
||||
|
||||
let targetLocationCircle;
|
||||
let targetLocationCircle
|
||||
|
||||
var targetLocationIcon = L.icon({
|
||||
iconUrl: 'goal.svg',
|
||||
iconSize: [32, 32],
|
||||
});
|
||||
iconUrl: "goal.svg",
|
||||
iconSize: [32, 32],
|
||||
})
|
||||
|
||||
var currentLocationIcon = L.icon({
|
||||
iconUrl: 'blue-dot.png',
|
||||
iconSize: [32, 32],
|
||||
});
|
||||
iconUrl: "blue-dot.png",
|
||||
iconSize: [32, 32],
|
||||
})
|
||||
|
||||
let currentLocationMarker;
|
||||
let currentLocationMarker
|
||||
|
||||
function startWatchingLocation() {
|
||||
map.locate({ watch: true })
|
||||
map.locate({ watch: true })
|
||||
}
|
||||
|
||||
function onLocationSuccess(locationEvent) {
|
||||
const position = locationEvent.latlng
|
||||
const position = locationEvent.latlng
|
||||
|
||||
const currentPos = {
|
||||
lat: position.lat,
|
||||
lng: position.lng
|
||||
}
|
||||
const currentPos = {
|
||||
lat: position.lat,
|
||||
lng: position.lng,
|
||||
}
|
||||
|
||||
if (currentLocationMarker) {
|
||||
currentLocationMarker.setLatLng(currentPos);
|
||||
} else {
|
||||
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
|
||||
currentLocationMarker.addTo(map);
|
||||
}
|
||||
if (currentLocationMarker) {
|
||||
currentLocationMarker.setLatLng(currentPos)
|
||||
} else {
|
||||
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');
|
||||
onAdd: function (map) {
|
||||
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') {
|
||||
startWatchingLocation()
|
||||
locationButton.textContent = 'Konumuma Git';
|
||||
} else {
|
||||
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();
|
||||
}
|
||||
locationButton.addEventListener("click", (ev) => {
|
||||
if (locationButton.textContent != "Konumuma Git") {
|
||||
startWatchingLocation()
|
||||
locationButton.textContent = "Konumuma Git"
|
||||
} else {
|
||||
if (currentLocationMarker) {
|
||||
map.setView(currentLocationMarker.getLatLng(), 12)
|
||||
} else {
|
||||
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)
|
||||
})
|
||||
|
||||
}
|
||||
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) => {
|
||||
if (targetLocationMarker) {
|
||||
targetLocationMarker.setLatLng(e.latlng)
|
||||
targetLocationCircle.setLatLng(e.latlng)
|
||||
} else {
|
||||
targetLocationMarker = L.marker(e.latlng, {
|
||||
icon: targetLocationIcon,
|
||||
}).addTo(map)
|
||||
|
||||
map.on('click', (e) => {
|
||||
if (targetLocationMarker) {
|
||||
targetLocationMarker.setLatLng(e.latlng)
|
||||
targetLocationCircle.setLatLng(e.latlng)
|
||||
} else {
|
||||
targetLocationMarker = L.marker(e.latlng, { icon: targetLocationIcon }).addTo(map);
|
||||
targetLocationCircle = L.circle(e.latlng, {
|
||||
color: "blue",
|
||||
fillColor: "#30f",
|
||||
fillOpacity: 0.2,
|
||||
radius: 50,
|
||||
}).addTo(map)
|
||||
}
|
||||
|
||||
targetLocationCircle = L.circle(e.latlng, {
|
||||
color: 'blue',
|
||||
fillColor: '#30f',
|
||||
fillOpacity: 0.2,
|
||||
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."
|
||||
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."
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
switch (permissionStatus.state) {
|
||||
case "granted":
|
||||
watchId = window.navigator.geolocation.watchPosition(
|
||||
position => locationSuccessCallback(position, TARGET_POSITION),
|
||||
errorCallback
|
||||
);
|
||||
break;
|
||||
case "denied":
|
||||
case "prompt":
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
navigator.permissions
|
||||
.query({ name: "geolocation" })
|
||||
.then((permissionStatus) => {
|
||||
switch (permissionStatus.state) {
|
||||
case "granted":
|
||||
watchId = window.navigator.geolocation.watchPosition(
|
||||
(position) => locationSuccessCallback(position, TARGET_POSITION),
|
||||
errorCallback
|
||||
)
|
||||
break
|
||||
case "denied":
|
||||
case "prompt":
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,21 +1,26 @@
|
|||
export default function distance(lat1, lon1, lat2, lon2, unit = 'K') {
|
||||
if ((lat1 == lat2) && (lon1 == lon2)) {
|
||||
return 0;
|
||||
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
|
||||
}
|
||||
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 = 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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user