diff --git a/bun.lockb b/bun.lockb index 753d514..5b4bfe5 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index b146341..cf7e18b 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", - "htmx.org": "^1.9.12", "leaflet": "^1.9.4", "lucide-react": "^0.309.0", "react": "^18.3.1", diff --git a/src/env.d.ts b/src/env.d.ts index 62cde52..191cf0b 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -4,10 +4,6 @@ /// export declare global { - interface Window { - htmx: any - } - namespace astroHTML.JSX { interface HTMLAttributes { _?: any diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index ee8d6d6..b728469 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -38,11 +38,5 @@ - - diff --git a/src/pages/index.astro b/src/pages/index.astro index b957874..82fe7a6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,10 +1,11 @@ --- -export const prerender = true; +export const prerender = true -import "@/styles/globals.css"; -import "../styles/locked-page.css"; +import "@/styles/globals.css" +import "../styles/locked-page.css" -import Layout from "../layouts/Layout.astro"; +import Layout from "../layouts/Layout.astro" +import { Loader2 } from "lucide-react" --- @@ -126,84 +127,15 @@ import Layout from "../layouts/Layout.astro"; - + + - - diff --git a/src/scripts/index.ts b/src/scripts/index.ts new file mode 100644 index 0000000..6e18379 --- /dev/null +++ b/src/scripts/index.ts @@ -0,0 +1,99 @@ +import { addClasses, removeClasses } from "@/components/LockedContent/domUtils" +import { toast } from "@/lib/utils" + +export function toggleMap() { + const coordinatesText = document.getElementById("coordinates") + + const mapDiv = document.getElementById("map") + + mapDiv?.classList.add("border-slate-900") + coordinatesText?.classList.add("drop-shadow-2xl") + + setTimeout(() => { + mapDiv?.classList.remove("border-slate-900") + coordinatesText?.classList.remove("drop-shadow-2xl") + }, 800) +} + +export function validateFileInput(el: HTMLInputElement) { + const files = el.files + + if (!files) return + + if (files.length > 0) { + if (files[0].size > 4 * 1024 * 1024) { + el.setCustomValidity("Dosya boyutu 4 MB'den küçük olmalıdır.") + el.reportValidity() + } else { + el.setCustomValidity("") + } + } +} + +function toggleButton(elemId: string, spinnerId: string) { + const elem = document.getElementById(elemId) as HTMLButtonElement | null + const spinner = document.getElementById(spinnerId) + + if (!elem) { + throw new Error("Element could not be found!") + } else if (elem.disabled) { + spinner?.classList.add("hidden") + removeClasses(elemId, "bg-slate-500") + addClasses(elemId, "bg-slate-900") + elem.disabled = false + } else { + spinner?.classList.remove("hidden") + removeClasses(elemId, "bg-slate-900") + addClasses(elemId, "bg-slate-500") + elem.disabled = true + setTimeout(() => toggleButton(elemId, spinnerId), 1000) + } +} + +const handleSubmit = async (e: SubmitEvent) => { + e.preventDefault() + toggleButton("submit-button", "submit-button-spinner") + const locationSelected = document.getElementById( + "geolocation-input" + ) as HTMLInputElement | null + + if (!locationSelected) { + throw new Error("Element could not be found!") + } + + if (!locationSelected.value) { + const map = document.getElementById("map") + map?.scrollIntoView({ behavior: "smooth", block: "center" }) + return toggleMap() + } + + const inputEl = document.getElementById( + "photo-selector" + ) as HTMLInputElement | null + + if (!inputEl) { + throw new Error("Element could not be found!") + } + + validateFileInput(inputEl) + + const formData = new FormData(e.target as HTMLFormElement) + + const res = await fetch(`http://127.0.0.1:3000/api/location`, { + method: "POST", + body: formData, + }) + + if (res.status === 200) { + const data = await res.json() + + if (data.url) location.assign("/" + data.url) + } else { + toast("Konulu konum oluşturulamadı, lütfen tekrar deneyin.") + } +} + +document.getElementById("sample-form")!.onsubmit = handleSubmit + +document.getElementById("photo-selector")!.oninput = (ev) => + validateFileInput(ev.target as HTMLInputElement) diff --git a/src/scripts/initMap.ts b/src/scripts/initMap.ts index 7aff35c..df77c29 100644 --- a/src/scripts/initMap.ts +++ b/src/scripts/initMap.ts @@ -1,3 +1,7 @@ +import { + currentLocationIcon, + targetLocationIcon, +} from "@/components/Leaflet/icons" import { toast } from "@/lib/utils" import L from "leaflet" @@ -5,16 +9,6 @@ type TargetLocation = [lat: number, lng: number] | null 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 data = targetLocation ? JSON.parse(targetLocation) : null @@ -108,10 +102,6 @@ function addTargetLocationMarker(target: TargetLocation) { } } -function initLocationControls() { - targetLocationControl.addTo(map) - goToCurrentLocationControl.addTo(map) -} - addTargetLocationMarker(TARGET_LOCATION) -initLocationControls() +targetLocationControl.addTo(map) +goToCurrentLocationControl.addTo(map) diff --git a/src/scripts/initSelectionMap.ts b/src/scripts/initSelectionMap.ts index 0e185ce..20cea10 100644 --- a/src/scripts/initSelectionMap.ts +++ b/src/scripts/initSelectionMap.ts @@ -54,7 +54,6 @@ const CurrentLocationControl = L.Control.extend({ locationButton.id = "current-location-control" locationButton.addEventListener("click", (ev) => { - console.log(currentLocationMarker) if (currentLocationMarker) { map.setView(currentLocationMarker.getLatLng(), 12) } else { @@ -116,10 +115,18 @@ map.on("click", (e) => { } const pos = targetLocationMarker.getLatLng() - updateText("coordinates", `${pos.lat}. Enlem, ${pos.lng}. Boylam`) updateInputValue("geolocation-input", `${pos.lat},${pos.lng}`) + updateText("coordinates", `${pos.lat}. Enlem, ${pos.lng}. Boylam`) updateText( "location-selected-confirmation", "Konum seçildi, bir sonraki adıma geçebilirsiniz." ) }) + +const geolocationInputEl = document.getElementById( + "geolocation-input" +) as HTMLInputElement | null + +if (geolocationInputEl?.value) { + geolocationInputEl.value = "" +}