feat: add author field to creation form

This commit is contained in:
log101 2024-01-27 19:46:19 +03:00
parent 42b80e3905
commit 9009ffe8ef
5 changed files with 52 additions and 34 deletions

View File

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

View File

@ -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>

View File

@ -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()

View File

@ -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>

View File

@ -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 }
)
}
};
}
});