robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Complete Flight Recorder with Session Closing and UI feedback

Browse Source
This commit is contained in:
robin
2025-12-19 21:06:16 +01:00
parent 822dc18bfc
commit fdc1dd01e5
3 changed files with 95 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/sessions/[id]/page.tsx
View File

@@ -6,6 +6,7 @@ import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkl
import Link from 'next/link'; import Link from 'next/link';
import AvatarStack from '@/components/AvatarStack'; import AvatarStack from '@/components/AvatarStack';
import { deleteSession } from '@/services/delete-session'; import { deleteSession } from '@/services/delete-session';
import { closeSession } from '@/services/close-session';
import { useSession } from '@/context/SessionContext'; import { useSession } from '@/context/SessionContext';
import { useParams, useRouter } from 'next/navigation'; import { useParams, useRouter } from 'next/navigation';
import { useI18n } from '@/i18n/I18nContext'; import { useI18n } from '@/i18n/I18nContext';
@@ -28,6 +29,7 @@ interface Session {
id: string; id: string;
name: string; name: string;
scheduled_at: string; scheduled_at: string;
ended_at?: string;
} }
interface SessionTasting { interface SessionTasting {
@@ -62,6 +64,7 @@ export default function SessionDetailPage() {
const { activeSession, setActiveSession } = useSession(); const { activeSession, setActiveSession } = useSession();
const [isAddingParticipant, setIsAddingParticipant] = useState(false); const [isAddingParticipant, setIsAddingParticipant] = useState(false);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
const [isClosing, setIsClosing] = useState(false);
useEffect(() => { useEffect(() => {
fetchSessionData(); 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 () => { const handleDeleteSession = async () => {
if (!confirm('Möchtest du diese Session wirklich löschen? Alle Verknüpfungen gehen verloren.')) return; 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="space-y-2">
<div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest"> <div className="flex items-center gap-2">
<Sparkles size={14} /> <div className="flex items-center gap-2 text-amber-600 font-black uppercase text-[10px] tracking-widest">
Tasting Session <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> </div>
<h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter"> <h1 className="text-4xl md:text-5xl font-black text-zinc-900 dark:text-white tracking-tighter">
{session.name} {session.name}
@@ -259,22 +284,25 @@ export default function SessionDetailPage() {
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{activeSession?.id !== session.id ? ( {!session.ended_at && (
<button activeSession?.id !== session.id ? (
onClick={() => setActiveSession({ id: session.id, name: session.name })} <button
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" 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 <Play size={18} fill="currentColor" />
</button> Starten
) : ( </button>
<button ) : (
onClick={() => setActiveSession(null)} <button
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" onClick={handleCloseSession}
> disabled={isClosing}
<Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" /> 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"
Session Stoppen >
</button> {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 <button

26
src/components/SessionList.tsx
View File

@@ -13,6 +13,7 @@ interface Session {
id: string; id: string;
name: string; name: string;
scheduled_at: string; scheduled_at: string;
ended_at?: string;
participant_count?: number; participant_count?: number;
whisky_count?: number; whisky_count?: number;
participants?: string[]; participants?: string[];
@@ -195,8 +196,11 @@ export default function SessionList() {
}`} }`}
> >
<Link href={`/sessions/${session.id}`} className="flex-1 space-y-1 min-w-0"> <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.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>
<div className={`flex items-center gap-4 text-[10px] font-black uppercase tracking-widest ${activeSession?.id === session.id ? 'text-white/80' : 'text-zinc-400'}`}> <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"> <span className="flex items-center gap-1">
@@ -218,13 +222,19 @@ export default function SessionList() {
</Link> </Link>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{activeSession?.id !== session.id ? ( {activeSession?.id !== session.id ? (
<button !session.ended_at ? (
onClick={() => setActiveSession({ id: session.id, name: session.name })} <button
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" onClick={() => setActiveSession({ id: session.id, name: session.name })}
title="Start Session" 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> <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"> <div className="p-2 bg-white/20 text-white rounded-xl">
<Check size={18} /> <Check size={18} />

30
src/services/close-session.ts Normal file
View 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',
};
}
}