feat(frontend): add recording matching UI
Add frontend components for auto-matching recording partners: - RecordingTab component with suggestions list and opt-out toggle - Tab navigation in EventChatPage (Chat, Uczestnicy, Nagrywanie) - Matching configuration in EventDetailsPage (deadline, run matching) - matchingAPI functions in api.js - Return registrationDeadline and matchingRunAt in GET /events/:slug/details UI allows users to: - View who will record their heats - View heats they need to record - Accept/reject suggestions - Opt-out from being a recorder - Set registration deadline (admin) - Manually trigger matching (admin)
This commit is contained in:
Radosław Gierwiało
@@ -36,13 +36,14 @@ const ParticipantsSidebar = ({
|
||||
hideMyHeats = false,
|
||||
onHideMyHeatsChange,
|
||||
onMatchWith,
|
||||
className = ''
|
||||
className = '',
|
||||
fullWidth = false
|
||||
}) => {
|
||||
const participantCount = users.length;
|
||||
const onlineCount = activeUsers.length;
|
||||
|
||||
return (
|
||||
<div className={`w-64 border-r bg-gray-50 p-4 overflow-y-auto ${className}`}>
|
||||
<div className={`${fullWidth ? 'w-full' : 'w-64 border-r'} bg-gray-50 p-4 overflow-y-auto ${className}`}>
|
||||
{/* Header */}
|
||||
<div className="mb-4">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">
|
||||
|
||||
374
frontend/src/components/recordings/RecordingTab.jsx
Normal file
374
frontend/src/components/recordings/RecordingTab.jsx
Normal file
@@ -0,0 +1,374 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Video, VideoOff, Clock, CheckCircle, XCircle, AlertTriangle, RefreshCw } from 'lucide-react';
|
||||
import { matchingAPI } from '../../services/api';
|
||||
import Avatar from '../common/Avatar';
|
||||
|
||||
/**
|
||||
* RecordingTab - Main component for managing recording partnerships
|
||||
* Shows suggestions for who will record user's heats and who user needs to record
|
||||
*/
|
||||
const RecordingTab = ({ slug, event, myHeats }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [suggestions, setSuggestions] = useState(null);
|
||||
const [recorderOptOut, setRecorderOptOut] = useState(false);
|
||||
const [updatingOptOut, setUpdatingOptOut] = useState(false);
|
||||
const [runningMatching, setRunningMatching] = useState(false);
|
||||
|
||||
// Load suggestions on mount
|
||||
useEffect(() => {
|
||||
loadSuggestions();
|
||||
}, [slug]);
|
||||
|
||||
const loadSuggestions = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const data = await matchingAPI.getSuggestions(slug);
|
||||
setSuggestions(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load suggestions:', err);
|
||||
setError('Nie udalo sie zaladowac sugestii');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOptOutChange = async (newValue) => {
|
||||
try {
|
||||
setUpdatingOptOut(true);
|
||||
await matchingAPI.setRecorderOptOut(slug, newValue);
|
||||
setRecorderOptOut(newValue);
|
||||
} catch (err) {
|
||||
console.error('Failed to update opt-out:', err);
|
||||
} finally {
|
||||
setUpdatingOptOut(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateStatus = async (suggestionId, status) => {
|
||||
try {
|
||||
await matchingAPI.updateSuggestionStatus(slug, suggestionId, status);
|
||||
// Reload suggestions
|
||||
await loadSuggestions();
|
||||
} catch (err) {
|
||||
console.error('Failed to update suggestion status:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRunMatching = async () => {
|
||||
try {
|
||||
setRunningMatching(true);
|
||||
await matchingAPI.runMatching(slug);
|
||||
await loadSuggestions();
|
||||
} catch (err) {
|
||||
console.error('Failed to run matching:', err);
|
||||
} finally {
|
||||
setRunningMatching(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate countdown to matching
|
||||
const getCountdown = () => {
|
||||
if (!event?.registrationDeadline) return null;
|
||||
const deadline = new Date(event.registrationDeadline);
|
||||
const now = new Date();
|
||||
const diff = deadline.getTime() - now.getTime();
|
||||
|
||||
if (diff <= 0) return null;
|
||||
|
||||
const hours = Math.floor(diff / (1000 * 60 * 60));
|
||||
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
||||
|
||||
return { hours, minutes };
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<RefreshCw className="w-8 h-8 animate-spin text-primary-600" />
|
||||
<p className="text-gray-600">Ladowanie...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-4">
|
||||
<div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">
|
||||
{error}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const countdown = getCountdown();
|
||||
const toBeRecorded = suggestions?.toBeRecorded || [];
|
||||
const toRecord = suggestions?.toRecord || [];
|
||||
const matchingRunAt = suggestions?.matchingRunAt;
|
||||
|
||||
return (
|
||||
<div className="p-4 space-y-6 overflow-y-auto h-full">
|
||||
{/* Header with info */}
|
||||
<div className="bg-gradient-to-r from-primary-50 to-primary-100 rounded-lg p-4">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Video className="w-6 h-6 text-primary-600" />
|
||||
<h3 className="text-lg font-semibold text-primary-900">Nagrywanie</h3>
|
||||
</div>
|
||||
<p className="text-sm text-primary-700">
|
||||
System automatycznie dobiera osoby do wzajemnego nagrywania wystepow.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Countdown or Status */}
|
||||
{countdown ? (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-amber-600" />
|
||||
<div>
|
||||
<p className="font-medium text-amber-800">
|
||||
Matching uruchomi sie za: {countdown.hours}h {countdown.minutes}min
|
||||
</p>
|
||||
<p className="text-sm text-amber-600">
|
||||
Po zamknieciu zapisow system automatycznie dobierze partnerow do nagrywania.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : matchingRunAt ? (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-green-800">Matching zakonczony</p>
|
||||
<p className="text-sm text-green-600">
|
||||
Ostatnie uruchomienie: {new Date(matchingRunAt).toLocaleString('pl-PL')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRunMatching}
|
||||
disabled={runningMatching}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
|
||||
{runningMatching ? 'Trwa...' : 'Uruchom ponownie'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<AlertTriangle className="w-5 h-5 text-gray-500" />
|
||||
<p className="text-gray-600">Matching nie zostal jeszcze uruchomiony</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleRunMatching}
|
||||
disabled={runningMatching}
|
||||
className="flex items-center gap-2 px-3 py-1.5 text-sm bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`w-4 h-4 ${runningMatching ? 'animate-spin' : ''}`} />
|
||||
{runningMatching ? 'Trwa...' : 'Uruchom matching'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* My heats to be recorded */}
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
|
||||
<Video className="w-5 h-5 text-primary-600" />
|
||||
Moje heaty do nagrania ({toBeRecorded.length})
|
||||
</h4>
|
||||
|
||||
{toBeRecorded.length === 0 ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
|
||||
{myHeats.length === 0
|
||||
? 'Nie masz zadeklarowanych heatow'
|
||||
: 'Brak sugestii - uruchom matching'
|
||||
}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{toBeRecorded.map((suggestion) => (
|
||||
<SuggestionCard
|
||||
key={suggestion.id || suggestion.heat?.id}
|
||||
suggestion={suggestion}
|
||||
type="toBeRecorded"
|
||||
onAccept={() => handleUpdateStatus(suggestion.id, 'accepted')}
|
||||
onReject={() => handleUpdateStatus(suggestion.id, 'rejected')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Heats I need to record */}
|
||||
<div>
|
||||
<h4 className="flex items-center gap-2 text-md font-semibold text-gray-900 mb-3">
|
||||
<VideoOff className="w-5 h-5 text-amber-600" />
|
||||
Nagrywam innych ({toRecord.length})
|
||||
</h4>
|
||||
|
||||
{toRecord.length === 0 ? (
|
||||
<div className="bg-gray-50 rounded-lg p-4 text-center text-gray-500">
|
||||
Nie masz przypisanych heatow do nagrywania
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{toRecord.map((suggestion) => (
|
||||
<SuggestionCard
|
||||
key={suggestion.id || suggestion.heat?.id}
|
||||
suggestion={suggestion}
|
||||
type="toRecord"
|
||||
onAccept={() => handleUpdateStatus(suggestion.id, 'accepted')}
|
||||
onReject={() => handleUpdateStatus(suggestion.id, 'rejected')}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Opt-out toggle */}
|
||||
<div className="border-t pt-4">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={recorderOptOut}
|
||||
onChange={(e) => handleOptOutChange(e.target.checked)}
|
||||
disabled={updatingOptOut}
|
||||
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
|
||||
/>
|
||||
<span className="text-sm text-gray-700">
|
||||
Nie chce nagrywac innych (opt-out)
|
||||
</span>
|
||||
{updatingOptOut && (
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-gray-400" />
|
||||
)}
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mt-1 ml-7">
|
||||
Jesli zaznaczysz, spadniesz na koniec kolejki przy przydzielaniu partnerow.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* SuggestionCard - Single suggestion item
|
||||
*/
|
||||
const SuggestionCard = ({ suggestion, type, onAccept, onReject }) => {
|
||||
const heat = suggestion.heat;
|
||||
const recorder = suggestion.recorder;
|
||||
const dancer = heat?.user;
|
||||
const status = suggestion.status;
|
||||
|
||||
// Format heat info
|
||||
const heatInfo = heat
|
||||
? `${heat.division?.abbreviation || '?'} ${heat.competitionType?.abbreviation || '?'} H${heat.heatNumber}`
|
||||
: 'Unknown heat';
|
||||
|
||||
const person = type === 'toBeRecorded' ? recorder : dancer;
|
||||
const personLabel = type === 'toBeRecorded' ? 'Nagrywa Cie:' : 'Nagrywasz:';
|
||||
|
||||
// Status badge
|
||||
const getStatusBadge = () => {
|
||||
switch (status) {
|
||||
case 'accepted':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 rounded">
|
||||
<CheckCircle className="w-3 h-3" />
|
||||
Zaakceptowano
|
||||
</span>
|
||||
);
|
||||
case 'rejected':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-red-100 text-red-800 rounded">
|
||||
<XCircle className="w-3 h-3" />
|
||||
Odrzucono
|
||||
</span>
|
||||
);
|
||||
case 'not_found':
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-800 rounded">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
Nie znaleziono
|
||||
</span>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
// No recorder found
|
||||
if (status === 'not_found') {
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-amber-100 rounded-full flex items-center justify-center">
|
||||
<AlertTriangle className="w-5 h-5 text-amber-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium text-amber-900">{heatInfo}</p>
|
||||
<p className="text-sm text-amber-700">Nie znaleziono dostepnego partnera</p>
|
||||
</div>
|
||||
</div>
|
||||
{getStatusBadge()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
{person ? (
|
||||
<Avatar
|
||||
src={person.avatar}
|
||||
username={person.username}
|
||||
size={40}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 bg-gray-200 rounded-full" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">{heatInfo}</p>
|
||||
<p className="text-sm text-gray-600">
|
||||
{personLabel} <span className="font-medium">@{person?.username || '?'}</span>
|
||||
{person?.city && (
|
||||
<span className="text-gray-400"> ({person.city})</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{status === 'pending' ? (
|
||||
<>
|
||||
<button
|
||||
onClick={onAccept}
|
||||
className="p-2 text-green-600 hover:bg-green-50 rounded-md transition-colors"
|
||||
title="Akceptuj"
|
||||
>
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={onReject}
|
||||
className="p-2 text-red-600 hover:bg-red-50 rounded-md transition-colors"
|
||||
title="Odrzuc"
|
||||
>
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
getStatusBadge()
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecordingTab;
|
||||
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from 'react';
|
||||
import { useParams, useNavigate, Link } from 'react-router-dom';
|
||||
import Layout from '../components/layout/Layout';
|
||||
import { useAuth } from '../contexts/AuthContext';
|
||||
import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X } from 'lucide-react';
|
||||
import { Send, UserPlus, Loader2, LogOut, AlertTriangle, QrCode, Edit2, Filter, X, MessageSquare, Users, Video } from 'lucide-react';
|
||||
import { connectSocket, disconnectSocket, getSocket } from '../services/socket';
|
||||
import { eventsAPI, heatsAPI, matchesAPI } from '../services/api';
|
||||
import HeatsBanner from '../components/heats/HeatsBanner';
|
||||
@@ -14,6 +14,7 @@ import ConfirmationModal from '../components/modals/ConfirmationModal';
|
||||
import Modal from '../components/modals/Modal';
|
||||
import useEventChat from '../hooks/useEventChat';
|
||||
import ParticipantsSidebar from '../components/events/ParticipantsSidebar';
|
||||
import RecordingTab from '../components/recordings/RecordingTab';
|
||||
|
||||
const EventChatPage = () => {
|
||||
const { slug } = useParams();
|
||||
@@ -50,6 +51,9 @@ const EventChatPage = () => {
|
||||
const [hideMyHeats, setHideMyHeats] = useState(false);
|
||||
const [showHeatsModal, setShowHeatsModal] = useState(false);
|
||||
|
||||
// Tab state: 'chat' | 'participants' | 'recording'
|
||||
const [activeTab, setActiveTab] = useState('chat');
|
||||
|
||||
const scrollToBottom = () => {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||
};
|
||||
@@ -397,40 +401,116 @@ const EventChatPage = () => {
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex h-[calc(100vh-280px)]">
|
||||
<ParticipantsSidebar
|
||||
users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
|
||||
activeUsers={activeUsers}
|
||||
userHeats={userHeats}
|
||||
userCompetitorNumbers={userCompetitorNumbers}
|
||||
myHeats={myHeats}
|
||||
hideMyHeats={hideMyHeats}
|
||||
onHideMyHeatsChange={setHideMyHeats}
|
||||
onMatchWith={handleMatchWith}
|
||||
/>
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b bg-gray-50">
|
||||
<nav className="flex">
|
||||
<button
|
||||
onClick={() => setActiveTab('chat')}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'chat'
|
||||
? 'border-primary-600 text-primary-600 bg-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Chat
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('participants')}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'participants'
|
||||
? 'border-primary-600 text-primary-600 bg-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<Users className="w-4 h-4" />
|
||||
Uczestnicy
|
||||
<span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
|
||||
{checkedInUsers.length}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('recording')}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'recording'
|
||||
? 'border-primary-600 text-primary-600 bg-white'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
|
||||
}`}
|
||||
>
|
||||
<Video className="w-4 h-4" />
|
||||
Nagrywanie
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Chat Area */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<ChatMessageList
|
||||
messages={messages}
|
||||
currentUserId={user.id}
|
||||
messagesEndRef={messagesEndRef}
|
||||
messagesContainerRef={messagesContainerRef}
|
||||
loadingOlder={loadingOlder}
|
||||
hasMore={hasMore}
|
||||
/>
|
||||
<div className="h-[calc(100vh-340px)]">
|
||||
{/* Chat Tab */}
|
||||
{activeTab === 'chat' && (
|
||||
<div className="flex h-full">
|
||||
{/* Sidebar - visible only on chat tab on larger screens */}
|
||||
<div className="hidden lg:block">
|
||||
<ParticipantsSidebar
|
||||
users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
|
||||
activeUsers={activeUsers}
|
||||
userHeats={userHeats}
|
||||
userCompetitorNumbers={userCompetitorNumbers}
|
||||
myHeats={myHeats}
|
||||
hideMyHeats={hideMyHeats}
|
||||
onHideMyHeatsChange={setHideMyHeats}
|
||||
onMatchWith={handleMatchWith}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="border-t p-4">
|
||||
<ChatInput
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
onSubmit={handleSendMessage}
|
||||
disabled={!isConnected}
|
||||
placeholder="Write a message..."
|
||||
{/* Chat Area */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
<ChatMessageList
|
||||
messages={messages}
|
||||
currentUserId={user.id}
|
||||
messagesEndRef={messagesEndRef}
|
||||
messagesContainerRef={messagesContainerRef}
|
||||
loadingOlder={loadingOlder}
|
||||
hasMore={hasMore}
|
||||
/>
|
||||
|
||||
{/* Message Input */}
|
||||
<div className="border-t p-4">
|
||||
<ChatInput
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
onSubmit={handleSendMessage}
|
||||
disabled={!isConnected}
|
||||
placeholder="Write a message..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participants Tab */}
|
||||
{activeTab === 'participants' && (
|
||||
<div className="h-full overflow-y-auto p-4">
|
||||
<ParticipantsSidebar
|
||||
users={getAllDisplayUsers().filter(u => !shouldHideUser(u.userId))}
|
||||
activeUsers={activeUsers}
|
||||
userHeats={userHeats}
|
||||
userCompetitorNumbers={userCompetitorNumbers}
|
||||
myHeats={myHeats}
|
||||
hideMyHeats={hideMyHeats}
|
||||
onHideMyHeatsChange={setHideMyHeats}
|
||||
onMatchWith={handleMatchWith}
|
||||
fullWidth={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recording Tab */}
|
||||
{activeTab === 'recording' && (
|
||||
<RecordingTab
|
||||
slug={slug}
|
||||
event={event}
|
||||
myHeats={myHeats}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Leave Event Button */}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams, Link } from 'react-router-dom';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { Copy, Check, Users, Calendar, MapPin, QrCode } from 'lucide-react';
|
||||
import { Copy, Check, Users, Calendar, MapPin, QrCode, Video, Clock, Save, RefreshCw } from 'lucide-react';
|
||||
import Layout from '../components/layout/Layout';
|
||||
import { eventsAPI } from '../services/api';
|
||||
import { eventsAPI, matchingAPI } from '../services/api';
|
||||
|
||||
export default function EventDetailsPage() {
|
||||
const { slug } = useParams();
|
||||
@@ -12,6 +12,11 @@ export default function EventDetailsPage() {
|
||||
const [error, setError] = useState('');
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Registration deadline state
|
||||
const [deadlineInput, setDeadlineInput] = useState('');
|
||||
const [savingDeadline, setSavingDeadline] = useState(false);
|
||||
const [runningMatching, setRunningMatching] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEventDetails();
|
||||
}, [slug]);
|
||||
@@ -21,6 +26,11 @@ export default function EventDetailsPage() {
|
||||
setLoading(true);
|
||||
const response = await eventsAPI.getDetails(slug);
|
||||
setEventDetails(response.data);
|
||||
// Initialize deadline input
|
||||
if (response.data?.event?.registrationDeadline) {
|
||||
const deadline = new Date(response.data.event.registrationDeadline);
|
||||
setDeadlineInput(deadline.toISOString().slice(0, 16)); // Format for datetime-local
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading event details:', err);
|
||||
setError(err.message || 'Failed to load event details');
|
||||
@@ -29,6 +39,34 @@ export default function EventDetailsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleSaveDeadline = async () => {
|
||||
try {
|
||||
setSavingDeadline(true);
|
||||
const deadline = deadlineInput ? new Date(deadlineInput).toISOString() : null;
|
||||
await matchingAPI.setRegistrationDeadline(slug, deadline);
|
||||
await fetchEventDetails(); // Refresh data
|
||||
} catch (err) {
|
||||
console.error('Failed to save deadline:', err);
|
||||
alert('Nie udalo sie zapisac deadline');
|
||||
} finally {
|
||||
setSavingDeadline(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRunMatching = async () => {
|
||||
try {
|
||||
setRunningMatching(true);
|
||||
const result = await matchingAPI.runMatching(slug);
|
||||
alert(`Matching zakonczony! Dopasowano: ${result.matched}, Nie znaleziono: ${result.notFound}`);
|
||||
await fetchEventDetails(); // Refresh data
|
||||
} catch (err) {
|
||||
console.error('Failed to run matching:', err);
|
||||
alert('Nie udalo sie uruchomic matchingu');
|
||||
} finally {
|
||||
setRunningMatching(false);
|
||||
}
|
||||
};
|
||||
|
||||
const copyToClipboard = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(eventDetails.checkin.url);
|
||||
@@ -210,6 +248,89 @@ export default function EventDetailsPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auto-Matching Configuration */}
|
||||
<div className="mt-6 bg-white rounded-lg shadow-md p-6">
|
||||
<h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
|
||||
<Video className="text-primary-600" />
|
||||
Auto-Matching (Nagrywanie)
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{/* Registration Deadline */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
<Clock size={16} className="inline mr-1" />
|
||||
Deadline rejestracji
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mb-2">
|
||||
Matching uruchomi sie 30 min po tym terminie
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={deadlineInput}
|
||||
onChange={(e) => setDeadlineInput(e.target.value)}
|
||||
className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
|
||||
/>
|
||||
<button
|
||||
onClick={handleSaveDeadline}
|
||||
disabled={savingDeadline}
|
||||
className="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 disabled:opacity-50 flex items-center gap-2"
|
||||
>
|
||||
{savingDeadline ? (
|
||||
<RefreshCw size={16} className="animate-spin" />
|
||||
) : (
|
||||
<Save size={16} />
|
||||
)}
|
||||
Zapisz
|
||||
</button>
|
||||
</div>
|
||||
{event.registrationDeadline && (
|
||||
<p className="text-sm text-green-600 mt-2">
|
||||
Aktualny deadline: {new Date(event.registrationDeadline).toLocaleString('pl-PL')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Matching Status & Run */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Status matchingu
|
||||
</label>
|
||||
{event.matchingRunAt ? (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-3">
|
||||
<p className="text-green-800 text-sm">
|
||||
Ostatnie uruchomienie: {new Date(event.matchingRunAt).toLocaleString('pl-PL')}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-3">
|
||||
<p className="text-amber-800 text-sm">
|
||||
Matching nie byl jeszcze uruchomiony
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={handleRunMatching}
|
||||
disabled={runningMatching}
|
||||
className="w-full px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
{runningMatching ? (
|
||||
<>
|
||||
<RefreshCw size={16} className="animate-spin" />
|
||||
Trwa matching...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Video size={16} />
|
||||
Uruchom Matching
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="mt-6 flex gap-4">
|
||||
<Link
|
||||
|
||||
@@ -388,4 +388,48 @@ export const dashboardAPI = {
|
||||
},
|
||||
};
|
||||
|
||||
// Recording Matching API (Auto-matching for recording partners)
|
||||
export const matchingAPI = {
|
||||
// Get match suggestions for current user
|
||||
async getSuggestions(slug) {
|
||||
const data = await fetchAPI(`/events/${slug}/match-suggestions`);
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Run matching algorithm (admin/trigger)
|
||||
async runMatching(slug) {
|
||||
const data = await fetchAPI(`/events/${slug}/run-matching`, {
|
||||
method: 'POST',
|
||||
});
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Accept or reject a suggestion
|
||||
async updateSuggestionStatus(slug, suggestionId, status) {
|
||||
const data = await fetchAPI(`/events/${slug}/match-suggestions/${suggestionId}/status`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ status }),
|
||||
});
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Set recorder opt-out preference
|
||||
async setRecorderOptOut(slug, optOut) {
|
||||
const data = await fetchAPI(`/events/${slug}/recorder-opt-out`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ optOut }),
|
||||
});
|
||||
return data.data;
|
||||
},
|
||||
|
||||
// Set registration deadline (admin)
|
||||
async setRegistrationDeadline(slug, deadline) {
|
||||
const data = await fetchAPI(`/events/${slug}/registration-deadline`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ registrationDeadline: deadline }),
|
||||
});
|
||||
return data.data;
|
||||
},
|
||||
};
|
||||
|
||||
export { ApiError };
|
||||
|
||||
Reference in New Issue
Block a user