eval fix
This commit is contained in:
@@ -6,6 +6,7 @@ import { ChevronLeft, Calendar, Award, Droplets, MapPin, Tag, ExternalLink, Pack
|
||||
import TastingNoteForm from '@/components/TastingNoteForm';
|
||||
import StatusSwitcher from '@/components/StatusSwitcher';
|
||||
import TastingList from '@/components/TastingList';
|
||||
import DeleteBottleButton from '@/components/DeleteBottleButton';
|
||||
|
||||
export default async function BottlePage({ params }: { params: { id: string } }) {
|
||||
const supabase = createServerComponentClient({ cookies });
|
||||
@@ -103,8 +104,9 @@ export default async function BottlePage({ params }: { params: { id: string } })
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-2">
|
||||
<div className="pt-2 space-y-4">
|
||||
<StatusSwitcher bottleId={bottle.id} currentStatus={bottle.status} />
|
||||
<DeleteBottleButton bottleId={bottle.id} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import React, { useRef, useState } from 'react';
|
||||
import { Camera, Upload, CheckCircle2, AlertCircle, Sparkles } from 'lucide-react';
|
||||
import { Camera, Upload, CheckCircle2, AlertCircle, Sparkles, ExternalLink } from 'lucide-react';
|
||||
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { analyzeBottle } from '@/services/analyze-bottle';
|
||||
import { saveBottle } from '@/services/save-bottle';
|
||||
import { BottleMetadata } from '@/types/whisky';
|
||||
import { savePendingBottle } from '@/lib/offline-db';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { findMatchingBottle } from '@/services/find-matching-bottle';
|
||||
import Link from 'next/link';
|
||||
|
||||
// ... (skipping to line 192 in the actual file, index adjust needed)
|
||||
|
||||
interface CameraCaptureProps {
|
||||
onImageCaptured?: (base64Image: string) => void;
|
||||
@@ -24,6 +28,7 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [analysisResult, setAnalysisResult] = useState<BottleMetadata | null>(null);
|
||||
const [isQueued, setIsQueued] = useState(false);
|
||||
const [matchingBottle, setMatchingBottle] = useState<{ id: string; name: string } | null>(null);
|
||||
|
||||
const handleCapture = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
@@ -33,6 +38,7 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
|
||||
setError(null);
|
||||
setAnalysisResult(null);
|
||||
setIsQueued(false);
|
||||
setMatchingBottle(null);
|
||||
|
||||
try {
|
||||
const compressedBase64 = await compressImage(file);
|
||||
@@ -58,6 +64,13 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
|
||||
|
||||
if (response.success && response.data) {
|
||||
setAnalysisResult(response.data);
|
||||
|
||||
// Duplicate Check
|
||||
const match = await findMatchingBottle(response.data);
|
||||
if (match) {
|
||||
setMatchingBottle(match);
|
||||
}
|
||||
|
||||
if (onAnalysisComplete) {
|
||||
onAnalysisComplete(response.data);
|
||||
}
|
||||
@@ -177,38 +190,48 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
|
||||
className="hidden"
|
||||
/>
|
||||
|
||||
<button
|
||||
onClick={isQueued ? () => setPreviewUrl(null) : (previewUrl && analysisResult ? handleSave : triggerUpload)}
|
||||
disabled={isProcessing || isSaving}
|
||||
className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20 disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||
Wird gespeichert...
|
||||
</>
|
||||
) : isQueued ? (
|
||||
<>
|
||||
<CheckCircle2 size={20} />
|
||||
Nächste Flasche
|
||||
</>
|
||||
) : previewUrl && analysisResult ? (
|
||||
<>
|
||||
<CheckCircle2 size={20} />
|
||||
Im Vault speichern
|
||||
</>
|
||||
) : previewUrl ? (
|
||||
<>
|
||||
<Upload size={20} />
|
||||
Neu aufnehmen
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Camera size={20} />
|
||||
Kamera öffnen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{matchingBottle ? (
|
||||
<Link
|
||||
href={`/bottles/${matchingBottle.id}`}
|
||||
className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20"
|
||||
>
|
||||
<ExternalLink size={20} />
|
||||
Zum Whisky im Vault
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
onClick={isQueued ? () => setPreviewUrl(null) : (previewUrl && analysisResult ? handleSave : triggerUpload)}
|
||||
disabled={isProcessing || isSaving}
|
||||
className="w-full py-4 px-6 bg-amber-600 hover:bg-amber-700 text-white rounded-xl font-semibold flex items-center justify-center gap-2 transition-all active:scale-[0.98] shadow-lg shadow-amber-600/20 disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
|
||||
Wird gespeichert...
|
||||
</>
|
||||
) : isQueued ? (
|
||||
<>
|
||||
<CheckCircle2 size={20} />
|
||||
Nächste Flasche
|
||||
</>
|
||||
) : previewUrl && analysisResult ? (
|
||||
<>
|
||||
<CheckCircle2 size={20} />
|
||||
Im Vault speichern
|
||||
</>
|
||||
) : previewUrl ? (
|
||||
<>
|
||||
<Upload size={20} />
|
||||
Neu aufnehmen
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Camera size={20} />
|
||||
Kamera öffnen
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 text-red-500 text-sm bg-red-50 dark:bg-red-900/10 p-3 rounded-lg w-full">
|
||||
@@ -224,7 +247,25 @@ export default function CameraCapture({ onImageCaptured, onAnalysisComplete, onS
|
||||
</div>
|
||||
)}
|
||||
|
||||
{previewUrl && !isProcessing && !error && !isQueued && (
|
||||
{matchingBottle && (
|
||||
<div className="flex flex-col gap-2 p-4 bg-blue-50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-900/30 rounded-xl w-full">
|
||||
<div className="flex items-center gap-2 text-blue-600 dark:text-blue-400 font-bold text-sm">
|
||||
<AlertCircle size={16} />
|
||||
Bereits im Vault!
|
||||
</div>
|
||||
<p className="text-xs text-blue-500/80">
|
||||
Du hast diesen Whisky bereits in deiner Sammlung. Willst du direkt zur Flasche gehen?
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setMatchingBottle(null)}
|
||||
className="text-[10px] text-zinc-400 font-black uppercase text-left hover:text-zinc-600"
|
||||
>
|
||||
Trotzdem als neue Flasche speichern
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{previewUrl && !isProcessing && !error && !isQueued && !matchingBottle && (
|
||||
<div className="flex flex-col gap-3 w-full animate-in fade-in slide-in-from-top-4 duration-500">
|
||||
<div className="flex items-center gap-2 text-green-500 text-sm bg-green-50 dark:bg-green-900/10 p-3 rounded-lg w-full">
|
||||
<CheckCircle2 size={16} />
|
||||
|
||||
73
src/components/DeleteBottleButton.tsx
Normal file
73
src/components/DeleteBottleButton.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Trash2, Loader2, AlertTriangle } from 'lucide-react';
|
||||
import { deleteBottle } from '@/services/delete-bottle';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface DeleteBottleButtonProps {
|
||||
bottleId: string;
|
||||
}
|
||||
|
||||
export default function DeleteBottleButton({ bottleId }: DeleteBottleButtonProps) {
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleDelete = async () => {
|
||||
setIsDeleting(true);
|
||||
try {
|
||||
const res = await deleteBottle(bottleId);
|
||||
if (res.success) {
|
||||
router.push('/');
|
||||
router.refresh();
|
||||
} else {
|
||||
alert(res.error || 'Fehler beim Löschen');
|
||||
setIsDeleting(false);
|
||||
setShowConfirm(false);
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Löschen fehlgeschlagen');
|
||||
setIsDeleting(false);
|
||||
setShowConfirm(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (showConfirm) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-900/30 rounded-2xl animate-in fade-in zoom-in-95 duration-200">
|
||||
<div className="flex items-center gap-2 text-red-600 dark:text-red-400 font-bold text-sm">
|
||||
<AlertTriangle size={18} />
|
||||
Flasche wirklich löschen?
|
||||
</div>
|
||||
<p className="text-xs text-red-500/80">Diese Aktion kann nicht rückgängig gemacht werden. Alle Tasting Notes dieser Flasche gehen verloren.</p>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
className="flex-1 py-2 bg-red-600 hover:bg-red-700 text-white text-xs font-black uppercase rounded-xl transition-all disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{isDeleting ? <Loader2 size={14} className="animate-spin" /> : 'Ja, Löschen'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowConfirm(false)}
|
||||
disabled={isDeleting}
|
||||
className="flex-1 py-2 bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs font-black uppercase rounded-xl hover:bg-zinc-300 dark:hover:bg-zinc-700 transition-all"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
className="w-full py-4 px-6 border border-zinc-200 dark:border-zinc-800 text-zinc-400 hover:text-red-500 hover:border-red-500/30 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-2xl text-xs font-black uppercase tracking-widest flex items-center justify-center gap-2 transition-all group"
|
||||
>
|
||||
<Trash2 size={16} className="group-hover:scale-110 transition-transform" />
|
||||
Flasche aus Vault entfernen
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Calendar, Star, ArrowUpDown, Clock } from 'lucide-react';
|
||||
import { Calendar, Star, ArrowUpDown, Clock, Trash2, Loader2 } from 'lucide-react';
|
||||
import { deleteTasting } from '@/services/delete-tasting';
|
||||
|
||||
interface Tasting {
|
||||
id: string;
|
||||
@@ -10,6 +11,7 @@ interface Tasting {
|
||||
palate_notes?: string;
|
||||
finish_notes?: string;
|
||||
is_sample?: boolean;
|
||||
bottle_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
@@ -19,6 +21,23 @@ interface TastingListProps {
|
||||
|
||||
export default function TastingList({ initialTastings }: TastingListProps) {
|
||||
const [sortBy, setSortBy] = useState<'date-desc' | 'date-asc' | 'rating-desc' | 'rating-asc'>('date-desc');
|
||||
const [isDeleting, setIsDeleting] = useState<string | null>(null);
|
||||
|
||||
const handleDelete = async (tastingId: string, bottleId: string) => {
|
||||
if (!confirm('Bist du sicher, dass du diese Notiz löschen möchtest?')) return;
|
||||
|
||||
setIsDeleting(tastingId);
|
||||
try {
|
||||
const res = await deleteTasting(tastingId, bottleId);
|
||||
if (!res.success) {
|
||||
alert(res.error || 'Fehler beim Löschen');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Löschen fehlgeschlagen');
|
||||
} finally {
|
||||
setIsDeleting(null);
|
||||
}
|
||||
};
|
||||
|
||||
const sortedTastings = useMemo(() => {
|
||||
const result = [...initialTastings];
|
||||
@@ -87,9 +106,23 @@ export default function TastingList({ initialTastings }: TastingListProps) {
|
||||
{new Date(note.created_at).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(note.created_at).toLocaleDateString('de-DE')}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-[10px] text-zinc-400 font-black tracking-widest uppercase flex items-center gap-1">
|
||||
<Calendar size={12} />
|
||||
{new Date(note.created_at).toLocaleDateString('de-DE')}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(note.id, note.bottle_id)}
|
||||
disabled={!!isDeleting}
|
||||
className="p-2 text-zinc-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all disabled:opacity-50"
|
||||
title="Tasting löschen"
|
||||
>
|
||||
{isDeleting === note.id ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Trash2 size={14} />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
48
src/services/delete-bottle.ts
Normal file
48
src/services/delete-bottle.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
'use server';
|
||||
|
||||
import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export async function deleteBottle(bottleId: string) {
|
||||
const supabase = createServerActionClient({ cookies });
|
||||
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session) {
|
||||
throw new Error('Nicht autorisiert.');
|
||||
}
|
||||
|
||||
// 1. Get bottle to check ownership and get image path
|
||||
const { data: bottle, error: fetchError } = await supabase
|
||||
.from('bottles')
|
||||
.select('image_url, user_id')
|
||||
.eq('id', bottleId)
|
||||
.single();
|
||||
|
||||
if (fetchError || !bottle) {
|
||||
throw new Error('Flasche nicht gefunden.');
|
||||
}
|
||||
|
||||
if (bottle.user_id !== session.user.id) {
|
||||
throw new Error('Keine Berechtigung.');
|
||||
}
|
||||
|
||||
// 2. Delete bottle (Storage image cleanup could be added here, but RLS/Storage management is easier via DB trigger or manual cleanup)
|
||||
const { error: deleteError } = await supabase
|
||||
.from('bottles')
|
||||
.delete()
|
||||
.eq('id', bottleId);
|
||||
|
||||
if (deleteError) throw deleteError;
|
||||
|
||||
revalidatePath('/');
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Delete Bottle Error:', error);
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Fehler beim Löschen.',
|
||||
};
|
||||
}
|
||||
}
|
||||
33
src/services/delete-tasting.ts
Normal file
33
src/services/delete-tasting.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
'use server';
|
||||
|
||||
import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export async function deleteTasting(tastingId: string, bottleId: string) {
|
||||
const supabase = createServerActionClient({ cookies });
|
||||
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session) {
|
||||
throw new Error('Nicht autorisiert.');
|
||||
}
|
||||
|
||||
const { error: deleteError } = await supabase
|
||||
.from('tastings')
|
||||
.delete()
|
||||
.eq('id', tastingId)
|
||||
.eq('user_id', session.user.id);
|
||||
|
||||
if (deleteError) throw deleteError;
|
||||
|
||||
revalidatePath(`/bottles/${bottleId}`);
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Delete Tasting Error:', error);
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Fehler beim Löschen.',
|
||||
};
|
||||
}
|
||||
}
|
||||
46
src/services/find-matching-bottle.ts
Normal file
46
src/services/find-matching-bottle.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
'use server';
|
||||
|
||||
import { createServerActionClient } from '@supabase/auth-helpers-nextjs';
|
||||
import { cookies } from 'next/headers';
|
||||
import { BottleMetadata } from '@/types/whisky';
|
||||
|
||||
export async function findMatchingBottle(metadata: BottleMetadata) {
|
||||
const supabase = createServerActionClient({ cookies });
|
||||
|
||||
try {
|
||||
const { data: { session } } = await supabase.auth.getSession();
|
||||
if (!session) return null;
|
||||
|
||||
const userId = session.user.id;
|
||||
|
||||
// 1. Try matching by Whiskybase ID (most reliable)
|
||||
if (metadata.whiskybaseId) {
|
||||
const { data: wbMatch } = await supabase
|
||||
.from('bottles')
|
||||
.select('id, name, distillery')
|
||||
.eq('user_id', userId)
|
||||
.eq('whiskybase_id', metadata.whiskybaseId)
|
||||
.maybeSingle();
|
||||
|
||||
if (wbMatch) return wbMatch;
|
||||
}
|
||||
|
||||
// 2. Try matching by Name and Distillery (approximate)
|
||||
if (metadata.name && metadata.distillery) {
|
||||
const { data: nameMatch } = await supabase
|
||||
.from('bottles')
|
||||
.select('id, name, distillery')
|
||||
.eq('user_id', userId)
|
||||
.ilike('name', metadata.name)
|
||||
.ilike('distillery', metadata.distillery)
|
||||
.maybeSingle();
|
||||
|
||||
if (nameMatch) return nameMatch;
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('Find Matching Bottle Error:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user