425 lines
17 KiB
TypeScript
425 lines
17 KiB
TypeScript
|
"use client"
|
|||
|
|
|
|||
|
|
import { useEffect, useMemo, useState } from "react"
|
|||
|
|
import { ChevronDown, Plus, Ruler, Trash2 } from "lucide-react"
|
|||
|
|
import { ShotMeasurementSheet } from "@/components/shot/shot-measurement-sheet"
|
|||
|
|
import { bearingDegrees } from "@/lib/geo"
|
|||
|
|
import { midpoint } from "@/lib/hole-geometry"
|
|||
|
|
import { cn } from "@/lib/utils"
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Slag-for-slag GPS-avstandsmåling (ADR-048), UI-laget som binder
|
|||
|
|
* `ShotMeasurementSheet`/`MapPointPicker` (begge helt generiske, ingen
|
|||
|
|
* endring) mot et faktisk backend-endepunkt. Generalisert 2026-08-22
|
|||
|
|
* (ADR-103) fra en lokal funksjon i round-detail.tsx til denne delte
|
|||
|
|
* filen -- kalleren bygger nå URL-ene selv i stedet for at komponenten
|
|||
|
|
* antar `/rounds/{roundId}/...`-formen, slik at BÅDE frittstående
|
|||
|
|
* runder OG org-turneringer (helt ulike REST-stier) kan gjenbruke den
|
|||
|
|
* uendret.
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
export type ShotRecord = {
|
|||
|
|
id: string
|
|||
|
|
club: string
|
|||
|
|
distance_meters: number
|
|||
|
|
shared: boolean
|
|||
|
|
start_lat: number
|
|||
|
|
start_lng: number
|
|||
|
|
end_lat: number
|
|||
|
|
end_lng: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** De to backendene navngir delings-lenken ulikt (`shared_round_message_id`
|
|||
|
|
* vs. `shared_tournament_round_message_id`, ulike måltabeller) --
|
|||
|
|
* normaliseres her til ett felles `shared`-flagg, resten av feltene er
|
|||
|
|
* identiske på tvers av begge API-kontraktene. */
|
|||
|
|
function normalizeShot(raw: Record<string, unknown>): ShotRecord {
|
|||
|
|
return {
|
|||
|
|
id: raw.id as string,
|
|||
|
|
club: raw.club as string,
|
|||
|
|
distance_meters: raw.distance_meters as number,
|
|||
|
|
shared: Boolean(raw.shared_round_message_id ?? raw.shared_tournament_round_message_id),
|
|||
|
|
start_lat: raw.start_lat as number,
|
|||
|
|
start_lng: raw.start_lng as number,
|
|||
|
|
end_lat: raw.end_lat as number,
|
|||
|
|
end_lng: raw.end_lng as number,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export type ShotMeasurementEntryProps = {
|
|||
|
|
/** GET (liste) + POST (opprett) -- fullt sti, f.eks.
|
|||
|
|
* `/rounds/{roundId}/participants/{id}/holes/{n}/shots`. */
|
|||
|
|
shotsUrl: string
|
|||
|
|
/** Rundescopet base for DELETE `${x}/${id}` og POST `${x}/${id}/share`
|
|||
|
|
* -- f.eks. `/rounds/{roundId}/shots`. */
|
|||
|
|
shotsRoundBaseUrl: string
|
|||
|
|
/** Banegeometri (utslag->green) for kartretning -- utelates helt for
|
|||
|
|
* en bane uten kjent geometri, faller da tilbake til forrige-slag-
|
|||
|
|
* retning (uendret atferd). */
|
|||
|
|
targetPointsUrl?: string
|
|||
|
|
holeNumber: number
|
|||
|
|
ownBagClubs: string[]
|
|||
|
|
readOnly: boolean
|
|||
|
|
variant: "inline" | "badge"
|
|||
|
|
label?: string
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function ShotMeasurementEntry({
|
|||
|
|
shotsUrl,
|
|||
|
|
shotsRoundBaseUrl,
|
|||
|
|
targetPointsUrl,
|
|||
|
|
holeNumber,
|
|||
|
|
ownBagClubs,
|
|||
|
|
readOnly,
|
|||
|
|
variant,
|
|||
|
|
label,
|
|||
|
|
}: ShotMeasurementEntryProps) {
|
|||
|
|
const [open, setOpen] = useState(false)
|
|||
|
|
// Brukertilbakemelding 2026-08-08: "jeg burde jo se slaget selv, selv om
|
|||
|
|
// det ikke er delt" -- merkelappen viste tidligere KUN et antall, ingen
|
|||
|
|
// måte å se kølle/avstand for egne, private slag. Lagrer nå hele listen
|
|||
|
|
// (ikke bare .length), viser den i en utvidbar liste, med sletting av et
|
|||
|
|
// feilmålt slag.
|
|||
|
|
const [shots, setShots] = useState<ShotRecord[]>([])
|
|||
|
|
const [listOpen, setListOpen] = useState(false)
|
|||
|
|
const [submitting, setSubmitting] = useState(false)
|
|||
|
|
const [submitError, setSubmitError] = useState<string | null>(null)
|
|||
|
|
const [shareError, setShareError] = useState<string | null>(null)
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false
|
|||
|
|
fetch(shotsUrl, { credentials: "include" })
|
|||
|
|
.then((res) => (res.ok ? res.json() : []))
|
|||
|
|
.then((data: Record<string, unknown>[]) => {
|
|||
|
|
if (!cancelled) setShots(data.map(normalizeShot))
|
|||
|
|
})
|
|||
|
|
.catch(() => {})
|
|||
|
|
return () => {
|
|||
|
|
cancelled = true
|
|||
|
|
}
|
|||
|
|
}, [shotsUrl])
|
|||
|
|
const count = shots.length
|
|||
|
|
|
|||
|
|
// Ekte banegeometri (2026-08-21, brukerønske) -- når hullet har BÅDE
|
|||
|
|
// utslags- OG green-koordinater kjent (samme datakilde som
|
|||
|
|
// HoleTargetDistance/HoleDiagram bruker), skal kartretningen ALLTID
|
|||
|
|
// følge utslag->green, ikke gjettes fra spillerens forrige slag (som
|
|||
|
|
// kan avvike, f.eks. en slice/hook).
|
|||
|
|
const [courseBearing, setCourseBearing] = useState<number | undefined>(undefined)
|
|||
|
|
useEffect(() => {
|
|||
|
|
let cancelled = false
|
|||
|
|
setCourseBearing(undefined)
|
|||
|
|
if (!targetPointsUrl) return
|
|||
|
|
fetch(targetPointsUrl, { credentials: "include" })
|
|||
|
|
.then((res) => (res.ok ? res.json() : []))
|
|||
|
|
.then((points: { poi_type: string; location: string | null; latitude: number; longitude: number }[]) => {
|
|||
|
|
if (cancelled) return
|
|||
|
|
const middle = points.find((p) => p.poi_type === "green" && p.location === "middle")
|
|||
|
|
const teeFront = points.find((p) => p.poi_type === "tee_front")
|
|||
|
|
const teeBack = points.find((p) => p.poi_type === "tee_back")
|
|||
|
|
const teeRef =
|
|||
|
|
teeFront && teeBack
|
|||
|
|
? midpoint({ lat: teeFront.latitude, lng: teeFront.longitude }, { lat: teeBack.latitude, lng: teeBack.longitude })
|
|||
|
|
: teeFront
|
|||
|
|
? { lat: teeFront.latitude, lng: teeFront.longitude }
|
|||
|
|
: teeBack
|
|||
|
|
? { lat: teeBack.latitude, lng: teeBack.longitude }
|
|||
|
|
: null
|
|||
|
|
setCourseBearing(
|
|||
|
|
teeRef && middle ? bearingDegrees(teeRef, { lat: middle.latitude, lng: middle.longitude }) : undefined,
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
if (!cancelled) setCourseBearing(undefined)
|
|||
|
|
})
|
|||
|
|
return () => {
|
|||
|
|
cancelled = true
|
|||
|
|
}
|
|||
|
|
}, [targetPointsUrl])
|
|||
|
|
|
|||
|
|
// Kartretning ved slagmåling (brukerønske 2026-08-10, utvidet
|
|||
|
|
// 2026-08-21): "opp på skjermen" følger banens EGEN spillretning
|
|||
|
|
// (utslag->green, courseBearing over) når den er kjent -- ellers
|
|||
|
|
// faller tilbake til spillerens EGEN gangretning, regnet ut fra det
|
|||
|
|
// SISTE tidligere målte slaget på dette hullet (start→slutt-retningen).
|
|||
|
|
// `undefined` (ingen rotasjon regnet ut ennå) for det aller første
|
|||
|
|
// slaget på et hull uten kjent banegeometri -- MapPointPicker faller
|
|||
|
|
// da selv tilbake til enhetens GPS-heading/nord.
|
|||
|
|
const initialBearing = useMemo(() => {
|
|||
|
|
if (typeof courseBearing === "number") return courseBearing
|
|||
|
|
const previous = shots[shots.length - 1]
|
|||
|
|
if (!previous) return undefined
|
|||
|
|
return bearingDegrees(
|
|||
|
|
{ lat: previous.start_lat, lng: previous.start_lng },
|
|||
|
|
{ lat: previous.end_lat, lng: previous.end_lng },
|
|||
|
|
)
|
|||
|
|
}, [shots, courseBearing])
|
|||
|
|
|
|||
|
|
async function deleteShot(shotId: string) {
|
|||
|
|
const res = await fetch(`${shotsRoundBaseUrl}/${shotId}`, { method: "DELETE", credentials: "include" })
|
|||
|
|
if (res.ok) {
|
|||
|
|
setShots((prev) => prev.filter((s) => s.id !== shotId))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Reell bug funnet 2026-08-08: en avvist innsending (f.eks. serverens
|
|||
|
|
// distance_meters > 0-sjekk, hvis brukeren rakk å målt begge punkter for
|
|||
|
|
// fort) lukket tidligere arket STILLE -- ingen feilmelding, brukeren så
|
|||
|
|
// aldri hvorfor ingenting ble lagret/delt. Viser nå en reell feil og
|
|||
|
|
// holder arket åpent i stedet for å anta suksess.
|
|||
|
|
async function submitShot(result: {
|
|||
|
|
club: string
|
|||
|
|
distanceMeters: number
|
|||
|
|
startMethod: "gps" | "map_tap"
|
|||
|
|
startLat: number
|
|||
|
|
startLng: number
|
|||
|
|
endMethod: "gps" | "map_tap"
|
|||
|
|
endLat: number
|
|||
|
|
endLng: number
|
|||
|
|
share: boolean
|
|||
|
|
shareText: string
|
|||
|
|
}) {
|
|||
|
|
setSubmitError(null)
|
|||
|
|
setSubmitting(true)
|
|||
|
|
try {
|
|||
|
|
const res = await fetch(shotsUrl, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
credentials: "include",
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
club: result.club,
|
|||
|
|
distance_meters: result.distanceMeters,
|
|||
|
|
start_method: result.startMethod,
|
|||
|
|
start_lat: result.startLat,
|
|||
|
|
start_lng: result.startLng,
|
|||
|
|
end_method: result.endMethod,
|
|||
|
|
end_lat: result.endLat,
|
|||
|
|
end_lng: result.endLng,
|
|||
|
|
}),
|
|||
|
|
})
|
|||
|
|
if (!res.ok) {
|
|||
|
|
const body = await res.json().catch(() => null)
|
|||
|
|
const detail = body?.detail
|
|||
|
|
const message =
|
|||
|
|
typeof detail === "string"
|
|||
|
|
? detail
|
|||
|
|
: typeof detail?.message === "string"
|
|||
|
|
? detail.message
|
|||
|
|
: "Kunne ikke lagre slaget. Sjekk at avstanden er gyldig (over 0 meter) og prøv igjen."
|
|||
|
|
setSubmitError(message)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
let shot = normalizeShot(await res.json())
|
|||
|
|
setShareError(null)
|
|||
|
|
if (result.share) {
|
|||
|
|
const shareRes = await fetch(`${shotsRoundBaseUrl}/${shot.id}/share`, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
credentials: "include",
|
|||
|
|
body: JSON.stringify({ body: result.shareText }),
|
|||
|
|
})
|
|||
|
|
// Reell bug funnet 2026-08-08: dette svaret ble aldri sjekket -- en
|
|||
|
|
// avvist deling (f.eks. en driftsfeil) lot slaget lagres som om alt
|
|||
|
|
// gikk bra, ingen feilmelding, ingen melding i feeden. Slaget er
|
|||
|
|
// uansett lagret på dette tidspunktet -- arket lukkes derfor alltid
|
|||
|
|
// her (unngår en duplikat-innsending ved gjentatt "Lagre slag"), og
|
|||
|
|
// en mislykket deling vises separat ved siden av merkelappen i
|
|||
|
|
// stedet for å holde arket åpent.
|
|||
|
|
if (shareRes.ok) {
|
|||
|
|
shot = normalizeShot(await shareRes.json())
|
|||
|
|
} else {
|
|||
|
|
setShareError("Slaget ble lagret, men delingen feilet. Prøv å dele på nytt fra listen.")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setShots((prev) => [...prev, shot])
|
|||
|
|
setOpen(false)
|
|||
|
|
} catch {
|
|||
|
|
setSubmitError("Klarte ikke å nå serveren. Sjekk tilkoblingen og prøv igjen.")
|
|||
|
|
} finally {
|
|||
|
|
setSubmitting(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function shareExisting(shot: ShotRecord) {
|
|||
|
|
const res = await fetch(`${shotsRoundBaseUrl}/${shot.id}/share`, {
|
|||
|
|
method: "POST",
|
|||
|
|
headers: { "Content-Type": "application/json" },
|
|||
|
|
credentials: "include",
|
|||
|
|
body: JSON.stringify({ body: `⛳ ${shot.club}, ${shot.distance_meters} m – hull ${holeNumber}` }),
|
|||
|
|
})
|
|||
|
|
if (res.ok) {
|
|||
|
|
const updated = normalizeShot(await res.json())
|
|||
|
|
setShots((prev) => prev.map((s) => (s.id === shot.id ? updated : s)))
|
|||
|
|
setShareError(null)
|
|||
|
|
} else {
|
|||
|
|
setShareError("Delingen feilet. Prøv igjen om litt.")
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (readOnly) {
|
|||
|
|
// Skrivebeskyttet visning (fullført/eldre runde): fortsatt nyttig å SE
|
|||
|
|
// egne målte slag, bare uten å kunne måle/dele/slette nye.
|
|||
|
|
if (count === 0) return null
|
|||
|
|
return (
|
|||
|
|
<div className={cn("flex flex-col gap-1.5", variant === "inline" ? "" : "items-end")}>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
setListOpen((o) => !o)
|
|||
|
|
}}
|
|||
|
|
aria-expanded={listOpen}
|
|||
|
|
className="inline-flex min-h-11 items-center gap-1.5 rounded-full border border-dashed border-border bg-background px-3 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|||
|
|
>
|
|||
|
|
<Ruler className="size-3.5 shrink-0" aria-hidden="true" />
|
|||
|
|
{label ? `${label}: ` : ""}
|
|||
|
|
{count} slag målt
|
|||
|
|
<ChevronDown className={cn("size-3.5 shrink-0 transition-transform", listOpen && "rotate-180")} aria-hidden="true" />
|
|||
|
|
</button>
|
|||
|
|
{listOpen && <ShotList shots={shots} onDelete={undefined} onShare={undefined} />}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const addLabel = label ? `${label}: Mål et slag` : "Mål et slag"
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className={cn("flex flex-col gap-1.5", variant === "inline" ? "" : "items-end")}>
|
|||
|
|
<div className="flex items-center gap-1.5">
|
|||
|
|
{count > 0 && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
setListOpen((o) => !o)
|
|||
|
|
}}
|
|||
|
|
aria-expanded={listOpen}
|
|||
|
|
className={cn(
|
|||
|
|
"inline-flex items-center gap-1.5 rounded-full border border-dashed transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|||
|
|
variant === "inline"
|
|||
|
|
? "min-h-11 justify-center border-border bg-card px-4 text-base font-semibold text-foreground hover:bg-accent/50"
|
|||
|
|
: "min-h-11 border-border bg-background px-3 text-xs font-semibold text-muted-foreground hover:bg-accent/50",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Ruler className={variant === "inline" ? "size-5 shrink-0" : "size-3.5 shrink-0"} aria-hidden="true" />
|
|||
|
|
{label ? `${label}: ` : ""}
|
|||
|
|
{count} slag målt
|
|||
|
|
<ChevronDown className={cn("size-3.5 shrink-0 transition-transform", listOpen && "rotate-180")} aria-hidden="true" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
setSubmitError(null)
|
|||
|
|
setOpen(true)
|
|||
|
|
}}
|
|||
|
|
aria-label={addLabel}
|
|||
|
|
className={cn(
|
|||
|
|
"inline-flex items-center justify-center gap-1.5 rounded-full border border-dashed transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
|||
|
|
count > 0
|
|||
|
|
? "size-11 shrink-0 border-border bg-card text-foreground hover:bg-accent/50"
|
|||
|
|
: variant === "inline"
|
|||
|
|
? "min-h-11 justify-center border-border bg-card px-4 text-base font-semibold text-foreground hover:bg-accent/50"
|
|||
|
|
: "min-h-11 border-border bg-background px-3 text-xs font-semibold text-muted-foreground hover:bg-accent/50",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Plus className={cn(count > 0 ? "size-5" : variant === "inline" ? "size-5 shrink-0" : "size-3.5 shrink-0")} aria-hidden="true" />
|
|||
|
|
{count === 0 && addLabel}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{shareError && (
|
|||
|
|
<p role="alert" className="text-xs font-medium text-destructive">
|
|||
|
|
{shareError}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{listOpen && count > 0 && <ShotList shots={shots} onDelete={deleteShot} onShare={shareExisting} />}
|
|||
|
|
|
|||
|
|
{open && (
|
|||
|
|
<ShotMeasurementSheet
|
|||
|
|
holeNumber={holeNumber}
|
|||
|
|
existingShotCount={count}
|
|||
|
|
ownBagClubs={ownBagClubs}
|
|||
|
|
initialBearing={initialBearing}
|
|||
|
|
submitError={submitError}
|
|||
|
|
submitting={submitting}
|
|||
|
|
onSubmit={submitShot}
|
|||
|
|
onCancel={() => setOpen(false)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Satellittutsnitt for et allerede målt slag (brukerønske 2026-08-08: "jeg
|
|||
|
|
// burde kunne se på et satellittfoto hvor jeg har slått hvert slag" -- listen
|
|||
|
|
// viste tidligere kun tekst, ingen måte å se selve plasseringen). Samme
|
|||
|
|
// mønster som forhåndsvisningen i shot-measurement-sheet.tsx sitt
|
|||
|
|
// resultat-steg: klient-side, OFFENTLIG (URL-restriktert) Mapbox-token,
|
|||
|
|
// ingen server-tur-retur -- koordinatene er allerede en del av ShotRecord.
|
|||
|
|
function shotThumbnailUrl(shot: ShotRecord): string | null {
|
|||
|
|
if (!process.env.NEXT_PUBLIC_MAPBOX_TOKEN) return null
|
|||
|
|
return `https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v12/static/pin-s-a+ff5a1f(${shot.start_lng},${shot.start_lat}),pin-s-b+2f7a3f(${shot.end_lng},${shot.end_lat})/auto/160x160@2x?padding=30&access_token=${process.env.NEXT_PUBLIC_MAPBOX_TOKEN}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ShotList({
|
|||
|
|
shots,
|
|||
|
|
onDelete,
|
|||
|
|
onShare,
|
|||
|
|
}: {
|
|||
|
|
shots: ShotRecord[]
|
|||
|
|
onDelete?: (shotId: string) => void
|
|||
|
|
onShare?: (shot: ShotRecord) => void
|
|||
|
|
}) {
|
|||
|
|
return (
|
|||
|
|
<ul className="flex w-full min-w-[16rem] flex-col gap-1.5 rounded-xl border border-border bg-card p-1.5">
|
|||
|
|
{shots.map((shot) => {
|
|||
|
|
const thumbUrl = shotThumbnailUrl(shot)
|
|||
|
|
return (
|
|||
|
|
<li key={shot.id} className="flex items-center gap-3 rounded-lg p-1.5 text-sm">
|
|||
|
|
{thumbUrl ? (
|
|||
|
|
// eslint-disable-next-line @next/next/no-img-element -- ekstern Mapbox-URL, ikke next/image-verdt
|
|||
|
|
<img
|
|||
|
|
src={thumbUrl || "/placeholder.svg"}
|
|||
|
|
alt={`Satellittutsnitt av ${shot.club}-slaget, ${shot.distance_meters} meter, med start- og sluttpunkt markert`}
|
|||
|
|
className="size-14 shrink-0 rounded-lg border border-border object-cover"
|
|||
|
|
/>
|
|||
|
|
) : null}
|
|||
|
|
<span className="flex-1 truncate font-medium text-foreground">
|
|||
|
|
{shot.club} <span className="tabular-nums text-muted-foreground">— {shot.distance_meters} m</span>
|
|||
|
|
</span>
|
|||
|
|
{shot.shared ? (
|
|||
|
|
<span className="text-[11px] font-semibold text-primary">Delt</span>
|
|||
|
|
) : onShare ? (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
onShare(shot)
|
|||
|
|
}}
|
|||
|
|
className="text-[11px] font-semibold text-primary underline-offset-2 hover:underline"
|
|||
|
|
>
|
|||
|
|
Del
|
|||
|
|
</button>
|
|||
|
|
) : null}
|
|||
|
|
{onDelete && (
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation()
|
|||
|
|
onDelete(shot.id)
|
|||
|
|
}}
|
|||
|
|
aria-label={`Slett ${shot.club}, ${shot.distance_meters} meter`}
|
|||
|
|
className="flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|||
|
|
>
|
|||
|
|
<Trash2 className="size-4" aria-hidden="true" />
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
)
|
|||
|
|
})}
|
|||
|
|
</ul>
|
|||
|
|
)
|
|||
|
|
}
|