ZHAW/BA_TTS_Annotation_Plattform
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added sidemenu in annotation for quicknavigation, fixed some responsive issues

Browse Source
This commit is contained in:
averel10
2026-03-20 14:11:19 +01:00
parent 392e54d1e6
commit 20e251710a
10 changed files with 306 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/experiments/page.tsx
View File

@@ -16,7 +16,7 @@ export default async function ExperimentsAdminPage() {
} }
return ( return (
<div className="px-4 sm:px-6 lg:px-8 py-8"> <div>
<Link <Link
href="/admin" href="/admin"
className="text-blue-500 hover:text-blue-600 mb-6 inline-block" className="text-blue-500 hover:text-blue-600 mb-6 inline-block"

4
src/app/layout.tsx
View File

@@ -10,10 +10,10 @@ export default function RootLayout({
}) { }) {
return ( return (
<html> <html>
<body className="flex flex-col min-h-screen"> <body className="flex flex-col min-h-screen md:h-screen">
<AudioProvider> <AudioProvider>
<Header /> <Header />
<main className="flex-grow"> <main className="flex-1 overflow-hidden">
{children} {children}
</main> </main>
<Footer /> <Footer />

2
src/app/page.tsx
View File

@@ -46,7 +46,7 @@ export default async function HomePage() {
); );
return ( return (
<div className="max-w-2xl mx-auto py-8"> <div className="max-w-2xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
<h1 className="text-2xl font-bold text-gray-800 mb-2">Experimente</h1> <h1 className="text-2xl font-bold text-gray-800 mb-2">Experimente</h1>
<p className="text-gray-500 mb-8"> <p className="text-gray-500 mb-8">
Wählen Sie ein Experiment aus, um mit der Annotation zu beginnen oder fortzufahren. Wählen Sie ein Experiment aus, um mit der Annotation zu beginnen oder fortzufahren.

116
src/components/AnnotationViews/AnnotationPageView.tsx
View File

@@ -6,6 +6,7 @@ import { saveAnnotations } from '@/app/actions/annotations';
import { DIALECT_LABELS, type DatasetEntryForAnnotation } from '@/lib/dialects'; import { DIALECT_LABELS, type DatasetEntryForAnnotation } from '@/lib/dialects';
import SingleChoiceEntryView from './SingleChoiceEntryView'; import SingleChoiceEntryView from './SingleChoiceEntryView';
import SingleChoiceBinaryEntryView from './SingleChoiceBinaryEntryView'; import SingleChoiceBinaryEntryView from './SingleChoiceBinaryEntryView';
import AnnotationSidebarNavigation from './AnnotationSidebarNavigation';
export interface EntryViewProps { export interface EntryViewProps {
entry: DatasetEntryForAnnotation; entry: DatasetEntryForAnnotation;
@@ -95,6 +96,7 @@ export default function AnnotationPageView({
}, [entries]); }, [entries]);
const [currentIndex, setCurrentIndex] = useState(startingIndex); const [currentIndex, setCurrentIndex] = useState(startingIndex);
const [sidebarOpen, setSidebarOpen] = useState(false);
const currentEntry = entries[currentIndex]; const currentEntry = entries[currentIndex];
const isComplete = entries.every((e) => e.annotation !== null); const isComplete = entries.every((e) => e.annotation !== null);
@@ -127,18 +129,70 @@ export default function AnnotationPageView({
const viewElement = getViewComponent(); const viewElement = getViewComponent();
if (!viewElement) { if (!viewElement) {
return ( return (
<div className="max-w-xl mx-auto py-16 text-center"> <div className="flex flex-col h-full bg-white">
<div className="flex flex-1 overflow-hidden">
{/* Sidebar with transition */}
<div className={`${sidebarOpen ? 'w-64' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
<AnnotationSidebarNavigation
entries={entries}
currentIndex={currentIndex}
onSelectEntry={setCurrentIndex}
annotatedCount={annotatedCount}
/>
</div>
<div className="flex-1 flex flex-col overflow-hidden">
{/* Toggle button */}
<div className="sticky top-0 z-50 bg-white border-b border-gray-200 px-4 py-2">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="hidden md:block text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
title={sidebarOpen ? 'Sidebar ausblenden' : 'Sidebar anzeigen'}
>
{sidebarOpen ? '✕' : '☰'}
</button>
</div>
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<p className="text-gray-600">Unbekannter Annotation-Typ: {viewType}</p> <p className="text-gray-600">Unbekannter Annotation-Typ: {viewType}</p>
<Link href="/" className="text-blue-600 hover:underline mt-4 inline-block"> <Link href="/" className="text-blue-600 hover:underline mt-4 inline-block">
← Startseite ← Startseite
</Link> </Link>
</div> </div>
</div>
</div>
</div>
</div>
); );
} }
if (isComplete) { if (isComplete) {
return ( return (
<div className="max-w-xl mx-auto text-center py-20"> <div className="flex flex-col h-full bg-white">
<div className="flex flex-1 overflow-hidden">
{/* Sidebar with transition */}
<div className={`${sidebarOpen ? 'w-64' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
<AnnotationSidebarNavigation
entries={entries}
currentIndex={currentIndex}
onSelectEntry={setCurrentIndex}
annotatedCount={annotatedCount}
/>
</div>
{/* Main content area */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Toggle button */}
<div className="sticky top-0 z-50 bg-white border-b border-gray-200 px-4 py-2">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="hidden md:block text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
title={sidebarOpen ? 'Sidebar ausblenden' : 'Sidebar anzeigen'}
>
{sidebarOpen ? '✕' : '☰'}
</button>
</div>
<div className="flex-1 overflow-y-auto">
<div className="max-w-3xl mx-auto text-center py-20">
<div className="text-5xl mb-4">✓</div> <div className="text-5xl mb-4">✓</div>
<h1 className="text-3xl font-bold text-green-600 mb-3">Fertig!</h1> <h1 className="text-3xl font-bold text-green-600 mb-3">Fertig!</h1>
<p className="text-gray-600 mb-8"> <p className="text-gray-600 mb-8">
@@ -151,20 +205,47 @@ export default function AnnotationPageView({
Zurück zur Startseite Zurück zur Startseite
</Link> </Link>
</div> </div>
</div>
</div>
</div>
</div>
); );
} }
return ( return (
<div className="max-w-3xl mx-auto"> <div className="flex flex-col h-full bg-white">
{/* ── Top bar ─────────────────────────────────────────── */} <div className="flex flex-1 overflow-hidden">
<div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pt-4 pb-3 mb-6"> {/* Sidebar with transition */}
<div className="flex items-center justify-between mb-2"> <div className={`${sidebarOpen ? 'w-64' : 'w-0'} transition-all duration-300 ease-in-out overflow-hidden`}>
<AnnotationSidebarNavigation
entries={entries}
currentIndex={currentIndex}
onSelectEntry={setCurrentIndex}
annotatedCount={annotatedCount}
/>
</div>
{/* Main content area */}
<div className="flex-1 flex flex-col overflow-hidden">
{/* Top bar */}
<div className="sticky top-0 z-40 bg-white border-b border-gray-200 p-4">
<div className="flex items-center justify-between max-w-4xl mx-auto">
{/* Toggle and Home buttons */}
<div className="flex gap-2">
<button
onClick={() => setSidebarOpen(!sidebarOpen)}
className="hidden md:block text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
title={sidebarOpen ? 'Sidebar ausblenden' : 'Sidebar anzeigen'}
>
{sidebarOpen ? '✕' : '☰'}
</button>
<Link <Link
href="/" href="/"
className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors" className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
> >
← Startseite ← Startseite
</Link> </Link>
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<button <button
onClick={handlePrevious} onClick={handlePrevious}
@@ -180,26 +261,21 @@ export default function AnnotationPageView({
> >
Weiter → Weiter →
</button> </button>
</div> </div>
</div> </div>
{/* Progress bar */}
<div className="w-full bg-gray-200 rounded-full h-2.5">
<div
className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
style={{ width: `${progressPct}%` }}
/>
</div>
<div className="flex justify-between">
<div className="text-xs text-gray-400 mt-1 text-left">{annotatedCount}/{entries.length} annotiert</div>
<div className="text-xs text-gray-400 mt-1 text-right">{progressPct}% abgeschlossen</div>
</div>
</div> </div>
{/* ── Sample entry ────────────────────────────────────── */} {/* Sample content - scrollable */}
<div className="flex flex-col gap-6"> <div className="flex-1 overflow-y-auto m-4">
<div className="max-w-4xl mx-auto">
<div className="flex flex-col gap-4">
{viewElement} {viewElement}
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
); );
} }

89
src/components/AnnotationViews/AnnotationSidebarNavigation.tsx Normal file
View File

@@ -0,0 +1,89 @@
'use client';
import { DatasetEntryForAnnotation } from '@/lib/dialects';
import { useEffect, useRef } from 'react';
interface AnnotationSidebarNavigationProps {
entries: DatasetEntryForAnnotation[];
currentIndex: number;
onSelectEntry: (index: number) => void;
annotatedCount: number;
}
export default function AnnotationSidebarNavigation({
entries,
currentIndex,
onSelectEntry,
annotatedCount
}: AnnotationSidebarNavigationProps) {
const progressPct = Math.round((annotatedCount / entries.length) * 100);
const activeButtonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
activeButtonRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}, [currentIndex]);
return (
<aside className="hidden md:flex md:flex-col w-64 h-full bg-gray-50 border-r border-gray-200 p-4 overflow-hidden">
{/* Header - fixed at top */}
<div className="mb-6 flex-shrink-0">
<h2 className="font-semibold text-gray-900 mb-2">Fortschritt</h2>
<div className="space-y-2">
<div className="w-full bg-gray-200 rounded-full h-2.5">
<div
className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
style={{ width: `${progressPct}%` }}
/>
</div>
<p className="text-xs text-gray-600">
{annotatedCount}/{entries.length} annotiert ({progressPct}%)
</p>
</div>
</div>
{/* Divider */}
<div className="border-b border-gray-200 mb-4 flex-shrink-0" />
{/* Entries List - scrollable middle section with max height */}
<div className="space-y-1 flex-1 min-h-0 overflow-hidden flex flex-col">
<h3 className="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-3 px-2 flex-shrink-0">
Samples
</h3>
<div className="space-y-1 overflow-y-auto max-h-96">
{entries.map((entry, index) => (
<button
ref={index === currentIndex ? activeButtonRef : null}
key={entry.id}
onClick={() => onSelectEntry(index)}
className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
index === currentIndex
? 'bg-blue-100 text-blue-900 border-l-4 border-blue-500 font-medium'
: entry.annotation !== null
? 'bg-green-50 text-gray-700 hover:bg-green-100'
: 'bg-white text-gray-700 hover:bg-gray-100'
}`}
title={`Entry ${index + 1}`}
>
<div className="flex items-center gap-2">
{/* Status indicator */}
<span
className={`inline-block w-2 h-2 rounded-full flex-shrink-0 ${
index === currentIndex
? 'bg-blue-600'
: entry.annotation !== null
? 'bg-green-500'
: 'bg-gray-300'
}`}
/>
{/* Entry number and filename */}
<span className="truncate">
{index + 1}. {`Sample ${index + 1}`}
</span>
</div>
</button>
))}
</div>
</div>
</aside>
);
}

4
src/components/AnnotationViews/SingleChoiceBinaryEntryView.tsx
View File

@@ -71,9 +71,9 @@ export default function SingleChoiceBinaryEntryView({
{/* Dialect + question */} {/* Dialect + question */}
<div className="mt-4 mb-3"> <div className="mt-4 mb-3">
<p className="text-sm font-semibold text-gray-700"> <div className="text-sm font-semibold text-gray-700">
{question} {question}
</p> </div>
</div> </div>
{/* Radio Select */} {/* Radio Select */}

4
src/components/AnnotationViews/SingleChoiceEntryView.tsx
View File

@@ -72,9 +72,9 @@ export default function SingleChoiceEntryView({
{/* Dialect + question */} {/* Dialect + question */}
<div className="mt-4 mb-3"> <div className="mt-4 mb-3">
<p className="text-sm font-semibold text-gray-700"> <div className="text-sm font-semibold text-gray-700">
{question} {question}
</p> </div>
</div> </div>
{/* Rating buttons */} {/* Rating buttons */}

2
src/components/Footer.tsx
View File

@@ -2,7 +2,7 @@ export function Footer() {
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
return ( return (
<footer className="bg-gray-800 text-gray-300 mt-12"> <footer className="bg-gray-800 text-gray-300">
<div className="px-4 sm:px-6 lg:px-8 py-8"> <div className="px-4 sm:px-6 lg:px-8 py-8">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
<div> <div>

68
src/components/Header.tsx
View File

@@ -2,9 +2,11 @@
import { authClient } from '@/lib/auth-client'; import { authClient } from '@/lib/auth-client';
import Link from 'next/link'; import Link from 'next/link';
import { useState } from 'react';
export function Header() { export function Header() {
const { data: session, isPending: loading } = authClient.useSession(); const { data: session, isPending: loading } = authClient.useSession();
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const handleSignOut = async () => { const handleSignOut = async () => {
try { try {
@@ -18,11 +20,14 @@ export function Header() {
<header className="sticky top-0 z-50 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg"> <header className="sticky top-0 z-50 bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg">
<div className="px-4 sm:px-6 lg:px-8"> <div className="px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-5"> <div className="flex justify-between items-center py-5">
<Link href="/" className="text-2xl font-bold hover:text-blue-100 transition-colors"> {/* Logo */}
TTS Dialektannotations-Plattform <Link href="/" className="font-bold hover:text-blue-100 transition-colors text-lg sm:text-2xl">
<span className="hidden sm:inline">TTS Dialektannotations-Plattform</span>
<span className="sm:hidden">Dialektannotation</span>
</Link> </Link>
<nav className="flex items-center gap-6"> {/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-6">
{loading ? ( {loading ? (
<span className="text-sm text-blue-100">Laden...</span> <span className="text-sm text-blue-100">Laden...</span>
) : session ? ( ) : session ? (
@@ -55,8 +60,65 @@ export function Header() {
</Link> </Link>
)} )}
</nav> </nav>
{/* Mobile Menu Button */}
<button
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="md:hidden p-2"
title={mobileMenuOpen ? 'Menü schließen' : 'Menü öffnen'}
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{mobileMenuOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div> </div>
</div> </div>
{/* Mobile Fullscreen Menu */}
{mobileMenuOpen && (
<div className="md:hidden fixed inset-0 top-16 bg-blue-700 z-40 flex flex-col p-4 space-y-4">
{loading ? (
<span className="text-sm text-blue-100">Laden...</span>
) : session ? (
<>
<div className="text-center py-4 border-b border-blue-600">
<p className="text-xs text-blue-100 uppercase tracking-wide">Willkommen zurück</p>
<p className="text-sm font-semibold">{session.user?.email}</p>
</div>
{(session.user as any)?.admin && (
<Link
href="/admin"
onClick={() => setMobileMenuOpen(false)}
className="px-4 py-3 bg-yellow-500 hover:bg-yellow-600 text-white font-semibold rounded-lg transition-colors text-center"
>
Admin
</Link>
)}
<button
onClick={() => {
handleSignOut();
setMobileMenuOpen(false);
}}
className="px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-colors"
>
Abmelden
</button>
</>
) : (
<Link
href="/user/sign-in"
onClick={() => setMobileMenuOpen(false)}
className="px-4 py-3 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-lg transition-colors text-center"
>
Anmelden
</Link>
)}
</div>
)}
</header> </header>
); );
} }

13
src/components/WaveformPlayer.tsx
View File

@@ -188,17 +188,22 @@ export default function WaveformPlayer({
)} )}
</button> </button>
{/* Waveform canvas */} {/* Waveform canvas - hidden on small screens */}
<canvas <canvas
ref={canvasRef} ref={canvasRef}
width={480} width={480}
height={48} height={48}
className="flex-1 rounded" className="hidden sm:flex flex-1 rounded"
style={{ imageRendering: 'pixelated' }} style={{ imageRendering: 'pixelated' }}
/> />
{/* Duration */} {/* Time display - shown on small screens instead of waveform */}
<span className="flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums"> <div className="sm:hidden text-sm text-gray-500 tabular-nums">
{fmt(currentTime)}/{fmt(duration)}
</div>
{/* Duration - hidden on small screens */}
<span className="hidden sm:flex flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
{fmt(duration)} {fmt(duration)}
</span> </span>
</div> </div>