From aeb1b32441d30387c3f66fa91a9d730e61edccac Mon Sep 17 00:00:00 2001 From: log101 Date: Tue, 6 Aug 2024 16:53:04 +0300 Subject: [PATCH] fix: change diameter to radius --- src/lib/db.ts | 1 + src/pages/index.astro | 6 +-- src/pages/x/index.astro | 8 +++- src/scripts/initMap.ts | 7 +-- src/scripts/initSelectionMap.ts | 78 ++++++++++++++------------------- 5 files changed, 46 insertions(+), 54 deletions(-) diff --git a/src/lib/db.ts b/src/lib/db.ts index a3beb06..4d2fcd7 100644 --- a/src/lib/db.ts +++ b/src/lib/db.ts @@ -10,5 +10,6 @@ export interface ContentTable { author: string description: string created_at: string + radius: number unlocked_counter: number } diff --git a/src/pages/index.astro b/src/pages/index.astro index 3d2cd87..7e0817e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -85,11 +85,7 @@ const backendUrl = import.meta.env.PUBLIC_BACKEND_URL

- +
diff --git a/src/pages/x/index.astro b/src/pages/x/index.astro index c1a0a70..04839c7 100644 --- a/src/pages/x/index.astro +++ b/src/pages/x/index.astro @@ -144,11 +144,15 @@ import { CalendarIcon } from "@radix-ui/react-icons" const lockedContentContainer = document.getElementById( "locked-content-container" ) - if (lockedContentContainer) + if (lockedContentContainer) { lockedContentContainer.dataset.targetPosition = data?.loc + } const leafletMap = document.getElementById("map") - if (leafletMap) leafletMap.dataset.targetLocation = data?.loc + if (leafletMap) { + leafletMap.dataset.targetLocation = data?.loc + leafletMap.dataset.targetRadius = data?.radius.toString() ?? "50" + } initMap() diff --git a/src/scripts/initMap.ts b/src/scripts/initMap.ts index 51b5ba1..c73e8bf 100644 --- a/src/scripts/initMap.ts +++ b/src/scripts/initMap.ts @@ -75,7 +75,7 @@ const targetLocationControl = new GoToTargetLocation({ position: "bottomleft", }) -function addTargetLocationMarker(target: TargetLocation) { +function addTargetLocationMarker(target: TargetLocation, radius = 50) { if (target) { L.marker(target, { icon: targetLocationIcon }).addTo(map) @@ -83,7 +83,7 @@ function addTargetLocationMarker(target: TargetLocation) { color: "blue", fillColor: "#30f", fillOpacity: 0.2, - radius: 50, + radius, }).addTo(map) } } @@ -100,6 +100,7 @@ export function initMap() { map = L.map("map") const targetLocation = mapEl?.dataset.targetLocation + const targetRadius = mapEl?.dataset.targetRadius const data = targetLocation ? JSON.parse(targetLocation) : null @@ -113,7 +114,7 @@ export function initMap() { '© OpenStreetMap', }).addTo(map) - addTargetLocationMarker(TARGET_LOCATION) + addTargetLocationMarker(TARGET_LOCATION, Number(targetRadius)) targetLocationControl.addTo(map) goToCurrentLocationControl.addTo(map) } diff --git a/src/scripts/initSelectionMap.ts b/src/scripts/initSelectionMap.ts index bc24815..176dd62 100644 --- a/src/scripts/initSelectionMap.ts +++ b/src/scripts/initSelectionMap.ts @@ -89,11 +89,11 @@ const AskPermissonControl = L.Control.extend({ }, }) -const DiameterControl = L.Control.extend({ +const RadiusControl = L.Control.extend({ onAdd: function (map: L.Map) { - const diameterContainer = document.createElement("div") + const radiusContainer = document.createElement("div") - diameterContainer.classList.add( + radiusContainer.classList.add( "bg-white", "h-[40px]", "p-2", @@ -102,7 +102,7 @@ const DiameterControl = L.Control.extend({ "gap-2" ) - const diameterButtonClasses = [ + const radiusButtonClasses = [ "text-xl", "border-2", "border-slate-700", @@ -115,89 +115,79 @@ const DiameterControl = L.Control.extend({ "hover:bg-gray-300", ] - const diameterIncreaseButton = document.createElement("button") + const radiusIncreaseButton = document.createElement("button") - diameterIncreaseButton.classList.add(...diameterButtonClasses) + radiusIncreaseButton.classList.add(...radiusButtonClasses) - const diameterDecreaseButton = document.createElement("button") + const radiusDecreaseButton = document.createElement("button") - diameterIncreaseButton.type = "button" + radiusIncreaseButton.type = "button" - diameterDecreaseButton.type = "button" + radiusDecreaseButton.type = "button" - diameterDecreaseButton.classList.add(...diameterButtonClasses) + radiusDecreaseButton.classList.add(...radiusButtonClasses) - const diameterContainerText = document.createElement("p") + const radiusContainerText = document.createElement("p") - const diameterText = document.createElement("p") + const radiusText = document.createElement("p") - diameterContainerText.classList.add("text-xl") + radiusContainerText.classList.add("text-xl") - diameterText.classList.add("text-xl") + radiusText.classList.add("text-xl") - diameterIncreaseButton.textContent = "+" + radiusIncreaseButton.textContent = "+" - diameterDecreaseButton.textContent = "-" + radiusDecreaseButton.textContent = "-" - diameterContainerText.textContent = "Çap: " + radiusContainerText.textContent = "Çap: " - diameterText.textContent = `${targetLocationCircleRadius.toString()}m` + radiusText.textContent = `${targetLocationCircleRadius.toString()}m` - diameterContainer.insertAdjacentElement( - "afterbegin", - diameterIncreaseButton - ) + radiusContainer.insertAdjacentElement("afterbegin", radiusIncreaseButton) - diameterContainer.insertAdjacentElement("afterbegin", diameterText) + radiusContainer.insertAdjacentElement("afterbegin", radiusText) - diameterContainer.insertAdjacentElement( - "afterbegin", - diameterDecreaseButton - ) + radiusContainer.insertAdjacentElement("afterbegin", radiusDecreaseButton) - diameterContainer.insertAdjacentElement("afterbegin", diameterContainerText) + radiusContainer.insertAdjacentElement("afterbegin", radiusContainerText) - diameterContainer.id = "diameter-control" + radiusContainer.id = "radius-control" - L.DomEvent.on(diameterIncreaseButton, "click", (ev) => { + L.DomEvent.on(radiusIncreaseButton, "click", (ev) => { targetLocationCircleRadius = Math.min( targetLocationCircleRadius + 100, 2000 ) targetLocationCircle.setRadius(targetLocationCircleRadius) - diameterText.innerText = `${targetLocationCircleRadius.toString()}m` + radiusText.innerText = `${targetLocationCircleRadius.toString()}m` updateInputValue( - "geolocation-diameter-input", + "geolocation-radius-input", targetLocationCircleRadius.toString() ) L.DomEvent.stop(ev) }) - L.DomEvent.on(diameterIncreaseButton, "dblclick", (ev) => - L.DomEvent.stop(ev) - ) + L.DomEvent.on(radiusIncreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev)) - L.DomEvent.on(diameterDecreaseButton, "click", (ev) => { + L.DomEvent.on(radiusDecreaseButton, "click", (ev) => { targetLocationCircleRadius = Math.max( targetLocationCircleRadius - 100, 50 ) targetLocationCircle.setRadius(targetLocationCircleRadius) - diameterText.innerText = `${targetLocationCircleRadius.toString()}m` + radiusText.innerText = `${targetLocationCircleRadius.toString()}m` updateInputValue( - "geolocation-diameter-input", + "geolocation-radius-input", targetLocationCircleRadius.toString() ) L.DomEvent.stop(ev) }) - L.DomEvent.on(diameterDecreaseButton, "dblclick", (ev) => - L.DomEvent.stop(ev) - ) + L.DomEvent.on(radiusDecreaseButton, "dblclick", (ev) => L.DomEvent.stop(ev)) - return diameterContainer + return radiusContainer }, }) @@ -207,7 +197,7 @@ const currentLocationControl = new CurrentLocationControl({ position: "bottomleft", }) -const diameterControl = new DiameterControl({ position: "bottomright" }) +const radiusControl = new RadiusControl({ position: "bottomright" }) askPermissionControl.addTo(map) @@ -229,7 +219,7 @@ map.on("click", (e) => { radius: targetLocationCircleRadius, }).addTo(map) - diameterControl.addTo(map) + radiusControl.addTo(map) } const pos = targetLocationMarker.getLatLng()