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)
2025-11-23 18:50:35 +01:00
parent c18416ad6f
commit a5a1296a4e
6 changed files with 657 additions and 35 deletions
--- a/frontend/src/pages/EventChatPage.jsx
+++ b/frontend/src/pages/EventChatPage.jsx
@@ -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 */}
--- a/frontend/src/pages/EventDetailsPage.jsx
+++ b/frontend/src/pages/EventDetailsPage.jsx
@@ -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