feat: add author field to creation form

src/lib/db.ts

@@ -9,5 +9,6 @@ export interface ContentTable {
   url: string
   blob_url: string
   loc: string
+  author: string
   description: string
 }

src/pages/[id].astro

@@ -45,7 +45,7 @@ const data: Content | null = res.status === 200 ? await res.json() : null;
 
     <Card className="w-full">
       <CardHeader>
-        <CardTitle>Abdurrahman</CardTitle>
+        <CardTitle>{data?.author}</CardTitle>
       </CardHeader>
       <CardContent>
         <p>{data?.description}</p>

src/pages/api/content.ts

@@ -9,6 +9,7 @@ export const POST: APIRoute = async ({ request }) => {
   const data = await request.formData()
 
   const image = data.get("selected-photo") as File
+  const author = data.get("author")
   const description = data.get("description")
   const geolocation = data.get("geolocation")
 
@@ -41,6 +42,7 @@ export const POST: APIRoute = async ({ request }) => {
     .values({
       url: `${newUrl.slice(0, 3)}-${newUrl.slice(3, 7)}-${newUrl.slice(7)}`,
       blob_url: blob.url,
+      author: author?.toString() ?? "",
       description: description?.toString() ?? "",
       loc: `SRID=4326;POINT(${pos[0]} ${pos[1]})`
     })
@@ -76,7 +78,7 @@ export const GET: APIRoute = async ({ request }) => {
   try {
     const content = await db
       .selectFrom("contents")
-      .select(({ fn }) => ["blob_url", fn<string>("ST_AsGeoJSON", ["loc"]).as("loc"), "description"])
+      .select(({ fn }) => ["blob_url", fn<string>("ST_AsGeoJSON", ["loc"]).as("loc"), "description", "author"])
       .where("url", "=", contentId)
       .executeTakeFirst()
 

src/pages/index.astro

@@ -9,6 +9,7 @@ import '../styles/locked-page.css';
 import { Input } from '@/components/ui/input';
 import { Textarea } from '@/components/ui/textarea';
 import { ReloadIcon } from '@radix-ui/react-icons';
+import { Label } from '@/components/ui/label';
 ---
 
 <Layout>
@@ -84,15 +85,27 @@ import { ReloadIcon } from '@radix-ui/react-icons';
         >
           3. Fotoğraf Açıklaması
         </h2>
-        <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
-          <Textarea
-            placeholder="Açıklamanızı buraya yazınız."
-            name="description"
-          />
-          <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 class="grid w-full max-w-sm items-center gap-2 mt-4">
+          <div class="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="location-author">Gönderici</Label>
+            <Input
+              id="location-author"
+              name="author"
+              placeholder="İsminizi buraya yazınız."
+            />
+          </div>
+          <div class="grid w-full max-w-sm items-center gap-1.5">
+            <Label htmlFor="location-description">Açıklama</Label>
+            <Textarea
+              placeholder="Açıklamanızı buraya yazınız."
+              name="description"
+              id="location-description"
+            />
+            <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>
 

src/scripts/initSelectionMap.js

@@ -22,6 +22,27 @@ var currentLocationIcon = L.icon({
 
 let currentLocationMarker;
 
+let watchId = -1;
+function startWatchingLocation() {
+    watchId = navigator.geolocation.watchPosition(
+        (position) => {
+            const pos = {
+                lat: position.coords.latitude,
+                lng: position.coords.longitude
+            }
+
+            if (currentLocationMarker) {
+                currentLocationMarker.setLatLng(pos);
+            } else {
+                currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
+                currentLocationMarker.addTo(map);
+            }
+        },
+        () => null,
+        { enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
+    )
+}
+
 function onLocationError(e) {
     alert(e.message);
 }
@@ -39,7 +60,10 @@ L.Control.GoToCurrentLocation = L.Control.extend({
         locationButton.type = 'button'
 
         locationButton.addEventListener('click', (ev) => {
-            if (currentLocationMarker) {
+            if (watchId === -1) {
+                startWatchingLocation()
+                map.setView(currentLocationMarker.getLatLng(), 12);
+            } else {
                 map.setView(currentLocationMarker.getLatLng(), 12);
             }
             L.DomEvent.stopPropagation(ev)
@@ -76,28 +100,6 @@ navigator.permissions
                 () => null,
                 { enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
             )
-        } else {
-            permissionStatus.onchange = () => {
-                if (permissionStatus.state === 'granted') {
-                    navigator.geolocation.watchPosition(
-                        (position) => {
-                            const pos = {
-                                lat: position.coords.latitude,
-                                lng: position.coords.longitude
-                            }
-
-                            if (currentLocationMarker) {
-                                currentLocationMarker.setLatLng(pos);
-                            } else {
-                                currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
-                                currentLocationMarker.addTo(map);
-                            }
-                        },
-                        () => null,
-                        { enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
-                    )
-                }
-            };
         }
     });