feat: Complete Flight Recorder with Session Closing and UI feedback
This commit is contained in:
@@ -6,6 +6,7 @@ import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkl
|
||||
import Link from 'next/link';
|
||||
import AvatarStack from '@/components/AvatarStack';
|
||||
import { deleteSession } from '@/services/delete-session';
|
||||
import { closeSession } from '@/services/close-session';
|
||||
import { useSession } from '@/context/SessionContext';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useI18n } from '@/i18n/I18nContext';
|
||||
@@ -28,6 +29,7 @@ interface Session {
|
||||
id: string;
|
||||
name: string;
|
||||
scheduled_at: string;
|
||||
ended_at?: string;
|
||||
}
|
||||
|
||||
interface SessionTasting {
|
||||
@@ -62,6 +64,7 @@ export default function SessionDetailPage() {
|
||||
const { activeSession, setActiveSession } = useSession();
|
||||
const [isAddingParticipant, setIsAddingParticipant] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessionData();
|
||||
@@ -148,6 +151,23 @@ export default function SessionDetailPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseSession = async () => {
|
||||
if (!confirm('Möchtest du diese Session wirklich abschließen?')) return;
|
||||
|
||||
setIsClosing(true);
|
||||
const result = await closeSession(id as string);
|
||||
|
||||
if (result.success) {
|
||||
if (activeSession?.id === id) {
|
||||
setActiveSession(null);
|
||||
}
|
||||
fetchSessionData();
|
||||
} else {
|
||||
alert(result.error);
|
||||
}
|
||||
setIsClosing(false);
|
||||
};
|
||||
|
||||
const handleDeleteSession = async () => {
|
||||
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return;
|
||||
|
||||
@@ -230,9 +250,14 @@ export default function SessionDetailPage() {
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
|
||||
<Sparkles size={14} />
|
||||
Tasting Session
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
|
||||
<Sparkles size={14} />
|
||||
Tasting Session
|
||||
</div>
|
||||
{session.ended_at && (
|
||||
<span className="bg-zinc-100 dark:bg-zinc-800 text-zinc-500 text-[8px] font-black px-2 py-0.5 rounded-md uppercase tracking-widest border border-zinc-200 dark:border-zinc-700">Abgeschlossen</span>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
|
||||
{session.name}
|
||||
@@ -259,22 +284,25 @@ export default function SessionDetailPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{activeSession?.id !== session.id ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
|
||||
>
|
||||
<Play size={18} fill="currentColor" />
|
||||
Session Starten
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setActiveSession(null)}
|
||||
className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
|
||||
>
|
||||
<Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />
|
||||
Session Stoppen
|
||||
</button>
|
||||
{!session.ended_at && (
|
||||
activeSession?.id !== session.id ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="px-6 py-3 bg-amber-600 hover:bg-amber-700 text-white rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 transition-all shadow-xl shadow-amber-600/20"
|
||||
>
|
||||
<Play size={18} fill="currentColor" />
|
||||
Starten
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleCloseSession}
|
||||
disabled={isClosing}
|
||||
className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
|
||||
>
|
||||
{isClosing ? <Loader2 size={18} className="animate-spin" /> : <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />}
|
||||
Beenden
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
<button
|
||||
|
||||
@@ -13,6 +13,7 @@ interface Session {
|
||||
id: string;
|
||||
name: string;
|
||||
scheduled_at: string;
|
||||
ended_at?: string;
|
||||
participant_count?: number;
|
||||
whisky_count?: number;
|
||||
participants?: string[];
|
||||
@@ -195,8 +196,11 @@ export default function SessionList() {
|
||||
}`}
|
||||
>
|
||||
<Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0">
|
||||
<div className={`font-bold truncate ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
|
||||
<div className={`font-bold truncate flex items-center gap-2 ${activeSession?.id === session.id ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
|
||||
{session.name}
|
||||
{session.ended_at && (
|
||||
<span className={`text-[8px] font-black uppercase px-1.5 py-0.5 rounded border ${activeSession?.id === session.id ? 'bg-white/20 border-white/30 text-white' : 'bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700 text-zinc-400'}`}>Closed</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}>
|
||||
<span className="flex items-center gap-1">
|
||||
@@ -218,13 +222,19 @@ export default function SessionList() {
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
{activeSession?.id !== session.id ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
|
||||
title="Start Session"
|
||||
>
|
||||
<GlassWater size={18} />
|
||||
</button>
|
||||
!session.ended_at ? (
|
||||
<button
|
||||
onClick={() => setActiveSession({ id: session.id, name: session.name })}
|
||||
className="p-2 bg-white dark:bg-zinc-700 text-amber-600 rounded-xl shadow-sm border border-zinc-200 dark:border-zinc-600 hover:scale-110 transition-transform"
|
||||
title="Start Session"
|
||||
>
|
||||
<GlassWater size={18} />
|
||||
</button>
|
||||
) : (
|
||||
<div className="p-2 bg-zinc-100 dark:bg-zinc-800/50 text-zinc-400 rounded-xl border border-zinc-200 dark:border-zinc-700 opacity-50">
|
||||
<Check size={18} />
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="p-2 bg-white/20 text-white rounded-xl">
|
||||
<Check size={18} />
|
||||
|
||||
30
src/services/close-session.ts
Normal file
30
src/services/close-session.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
'use server';
|
||||
|
||||
import { createClient } from '@/lib/supabase/server';
|
||||
import { revalidatePath } from 'next/cache';
|
||||
|
||||
export async function closeSession(sessionId: string) {
|
||||
const supabase = await createClient();
|
||||
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('tasting_sessions')
|
||||
.update({
|
||||
ended_at: new Date().toISOString(),
|
||||
})
|
||||
.eq('id', sessionId);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
revalidatePath(`/sessions/${sessionId}`);
|
||||
revalidatePath('/');
|
||||
|
||||
return { success: true };
|
||||
} catch (error) {
|
||||
console.error('Close Session Error:', error);
|
||||
return {
|
||||
success: false,
|
||||
error: error instanceof Error ? error.message : 'Fehler beim Beenden der Session',
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user