Add events

frontend/src/pages/MarathonPage.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react'
 import { useParams, useNavigate, Link } from 'react-router-dom'
-import { marathonsApi } from '@/api'
-import type { Marathon } from '@/types'
+import { marathonsApi, eventsApi, challengesApi } from '@/api'
+import type { Marathon, ActiveEvent, Challenge } from '@/types'
 import { Button, Card, CardContent } from '@/components/ui'
 import { useAuthStore } from '@/store/auth'
-import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft } from 'lucide-react'
+import { EventBanner } from '@/components/EventBanner'
+import { EventControl } from '@/components/EventControl'
+import { Users, Calendar, Trophy, Play, Settings, Copy, Check, Loader2, Trash2, Globe, Lock, CalendarCheck, UserPlus, Gamepad2, ArrowLeft, Zap } from 'lucide-react'
 import { format } from 'date-fns'
 
 export function MarathonPage() {
@@ -12,10 +14,13 @@ export function MarathonPage() {
   const navigate = useNavigate()
   const user = useAuthStore((state) => state.user)
   const [marathon, setMarathon] = useState<Marathon | null>(null)
+  const [activeEvent, setActiveEvent] = useState<ActiveEvent | null>(null)
+  const [challenges, setChallenges] = useState<Challenge[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [copied, setCopied] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
   const [isJoining, setIsJoining] = useState(false)
+  const [showEventControl, setShowEventControl] = useState(false)
 
   useEffect(() => {
     loadMarathon()
@@ -26,6 +31,22 @@ export function MarathonPage() {
     try {
       const data = await marathonsApi.get(parseInt(id))
       setMarathon(data)
+
+      // Load event data if marathon is active
+      if (data.status === 'active' && data.my_participation) {
+        const eventData = await eventsApi.getActive(parseInt(id))
+        setActiveEvent(eventData)
+
+        // Load challenges for event control if organizer
+        if (data.my_participation.role === 'organizer') {
+          try {
+            const challengesData = await challengesApi.list(parseInt(id))
+            setChallenges(challengesData)
+          } catch {
+            // Ignore if no challenges
+          }
+        }
+      }
     } catch (error) {
       console.error('Failed to load marathon:', error)
       navigate('/marathons')
@@ -34,6 +55,16 @@ export function MarathonPage() {
     }
   }
 
+  const refreshEvent = async () => {
+    if (!id) return
+    try {
+      const eventData = await eventsApi.getActive(parseInt(id))
+      setActiveEvent(eventData)
+    } catch (error) {
+      console.error('Failed to refresh event:', error)
+    }
+  }
+
   const getInviteLink = () => {
     if (!marathon) return ''
     return `${window.location.origin}/invite/${marathon.invite_code}`
@@ -234,6 +265,42 @@ export function MarathonPage() {
         </Card>
       </div>
 
+      {/* Active event banner */}
+      {marathon.status === 'active' && activeEvent?.event && (
+        <div className="mb-8">
+          <EventBanner activeEvent={activeEvent} onRefresh={refreshEvent} />
+        </div>
+      )}
+
+      {/* Event control for organizers */}
+      {marathon.status === 'active' && isOrganizer && (
+        <Card className="mb-8">
+          <CardContent>
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="font-medium text-white flex items-center gap-2">
+                <Zap className="w-5 h-5 text-yellow-500" />
+                Управление событиями
+              </h3>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowEventControl(!showEventControl)}
+              >
+                {showEventControl ? 'Скрыть' : 'Показать'}
+              </Button>
+            </div>
+            {showEventControl && activeEvent && (
+              <EventControl
+                marathonId={marathon.id}
+                activeEvent={activeEvent}
+                challenges={challenges}
+                onEventChange={refreshEvent}
+              />
+            )}
+          </CardContent>
+        </Card>
+      )}
+
       {/* Invite link */}
       {marathon.status !== 'finished' && (
         <Card className="mb-8">