Add covers
This commit is contained in:
501
frontend/src/components/MarathonSettingsModal.tsx
Normal file
501
frontend/src/components/MarathonSettingsModal.tsx
Normal file
@@ -0,0 +1,501 @@
|
||||
import { useState, useRef, useEffect } from 'react'
|
||||
import { useForm } from 'react-hook-form'
|
||||
import { zodResolver } from '@hookform/resolvers/zod'
|
||||
import { z } from 'zod'
|
||||
import { marathonsApi } from '@/api'
|
||||
import type { Marathon, GameProposalMode } from '@/types'
|
||||
import { NeonButton, Input } from '@/components/ui'
|
||||
import { useToast } from '@/store/toast'
|
||||
import {
|
||||
X, Camera, Trash2, Loader2, Save, Globe, Lock, Users, UserCog, Sparkles, Zap
|
||||
} from 'lucide-react'
|
||||
|
||||
const settingsSchema = z.object({
|
||||
title: z.string().min(1, 'Название обязательно').max(100, 'Максимум 100 символов'),
|
||||
description: z.string().optional(),
|
||||
start_date: z.string().min(1, 'Дата начала обязательна'),
|
||||
is_public: z.boolean(),
|
||||
game_proposal_mode: z.enum(['all_participants', 'organizer_only']),
|
||||
auto_events_enabled: z.boolean(),
|
||||
})
|
||||
|
||||
type SettingsForm = z.infer<typeof settingsSchema>
|
||||
|
||||
interface MarathonSettingsModalProps {
|
||||
marathon: Marathon
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onUpdate: (marathon: Marathon) => void
|
||||
}
|
||||
|
||||
export function MarathonSettingsModal({
|
||||
marathon,
|
||||
isOpen,
|
||||
onClose,
|
||||
onUpdate,
|
||||
}: MarathonSettingsModalProps) {
|
||||
const toast = useToast()
|
||||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||||
|
||||
const [isUploading, setIsUploading] = useState(false)
|
||||
const [isDeleting, setIsDeleting] = useState(false)
|
||||
const [coverPreview, setCoverPreview] = useState<string | null>(null)
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
watch,
|
||||
setValue,
|
||||
reset,
|
||||
formState: { errors, isSubmitting, isDirty },
|
||||
} = useForm<SettingsForm>({
|
||||
resolver: zodResolver(settingsSchema),
|
||||
defaultValues: {
|
||||
title: marathon.title,
|
||||
description: marathon.description || '',
|
||||
start_date: marathon.start_date
|
||||
? new Date(marathon.start_date).toISOString().slice(0, 16)
|
||||
: '',
|
||||
is_public: marathon.is_public,
|
||||
game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
|
||||
auto_events_enabled: marathon.auto_events_enabled,
|
||||
},
|
||||
})
|
||||
|
||||
const isPublic = watch('is_public')
|
||||
const gameProposalMode = watch('game_proposal_mode')
|
||||
const autoEventsEnabled = watch('auto_events_enabled')
|
||||
|
||||
// Reset form when marathon changes
|
||||
useEffect(() => {
|
||||
reset({
|
||||
title: marathon.title,
|
||||
description: marathon.description || '',
|
||||
start_date: marathon.start_date
|
||||
? new Date(marathon.start_date).toISOString().slice(0, 16)
|
||||
: '',
|
||||
is_public: marathon.is_public,
|
||||
game_proposal_mode: marathon.game_proposal_mode as GameProposalMode,
|
||||
auto_events_enabled: marathon.auto_events_enabled,
|
||||
})
|
||||
setCoverPreview(null)
|
||||
}, [marathon, reset])
|
||||
|
||||
// Handle escape key
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape' && isOpen) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
return () => window.removeEventListener('keydown', handleKeyDown)
|
||||
}, [isOpen, onClose])
|
||||
|
||||
// Prevent body scroll when modal is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden'
|
||||
} else {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
return () => {
|
||||
document.body.style.overflow = ''
|
||||
}
|
||||
}, [isOpen])
|
||||
|
||||
const onSubmit = async (data: SettingsForm) => {
|
||||
try {
|
||||
const updated = await marathonsApi.update(marathon.id, {
|
||||
title: data.title,
|
||||
description: data.description || undefined,
|
||||
start_date: new Date(data.start_date).toISOString(),
|
||||
is_public: data.is_public,
|
||||
game_proposal_mode: data.game_proposal_mode,
|
||||
auto_events_enabled: data.auto_events_enabled,
|
||||
})
|
||||
onUpdate(updated)
|
||||
toast.success('Настройки сохранены')
|
||||
onClose()
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось сохранить настройки')
|
||||
}
|
||||
}
|
||||
|
||||
const handleCoverClick = () => {
|
||||
fileInputRef.current?.click()
|
||||
}
|
||||
|
||||
const handleCoverChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0]
|
||||
if (!file) return
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
toast.error('Файл должен быть изображением')
|
||||
return
|
||||
}
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
toast.error('Максимальный размер файла 5 МБ')
|
||||
return
|
||||
}
|
||||
|
||||
// Show preview immediately
|
||||
const previewUrl = URL.createObjectURL(file)
|
||||
setCoverPreview(previewUrl)
|
||||
|
||||
setIsUploading(true)
|
||||
try {
|
||||
const updated = await marathonsApi.uploadCover(marathon.id, file)
|
||||
onUpdate(updated)
|
||||
toast.success('Обложка загружена')
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось загрузить обложку')
|
||||
setCoverPreview(null)
|
||||
} finally {
|
||||
setIsUploading(false)
|
||||
// Reset input
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteCover = async () => {
|
||||
setIsDeleting(true)
|
||||
try {
|
||||
const updated = await marathonsApi.deleteCover(marathon.id)
|
||||
onUpdate(updated)
|
||||
setCoverPreview(null)
|
||||
toast.success('Обложка удалена')
|
||||
} catch (err: unknown) {
|
||||
const error = err as { response?: { data?: { detail?: string } } }
|
||||
toast.error(error.response?.data?.detail || 'Не удалось удалить обложку')
|
||||
} finally {
|
||||
setIsDeleting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const displayCover = coverPreview || marathon.cover_url
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className="absolute inset-0 bg-black/70 backdrop-blur-sm animate-in fade-in duration-200"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Modal */}
|
||||
<div className="relative glass rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-in zoom-in-95 fade-in duration-200 border border-dark-600 custom-scrollbar">
|
||||
{/* Header */}
|
||||
<div className="sticky top-0 z-10 bg-dark-800/95 backdrop-blur-sm border-b border-dark-600 px-6 py-4 flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold text-white">Настройки марафона</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-white transition-colors p-1"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Cover Image */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Обложка марафона
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCoverClick}
|
||||
disabled={isUploading || isDeleting}
|
||||
className="relative w-full h-48 rounded-xl overflow-hidden bg-dark-700 border-2 border-dashed border-dark-500 hover:border-neon-500/50 transition-all"
|
||||
>
|
||||
{displayCover ? (
|
||||
<img
|
||||
src={displayCover}
|
||||
alt="Обложка марафона"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex flex-col items-center justify-center text-gray-500">
|
||||
<Camera className="w-10 h-10 mb-2" />
|
||||
<span className="text-sm">Нажмите для загрузки</span>
|
||||
<span className="text-xs text-gray-600 mt-1">JPG, PNG до 5 МБ</span>
|
||||
</div>
|
||||
)}
|
||||
{(isUploading || isDeleting) && (
|
||||
<div className="absolute inset-0 bg-dark-900/80 flex items-center justify-center">
|
||||
<Loader2 className="w-8 h-8 text-neon-500 animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
{displayCover && !isUploading && !isDeleting && (
|
||||
<div className="absolute inset-0 bg-dark-900/70 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Camera className="w-8 h-8 text-neon-500" />
|
||||
<span className="ml-2 text-white">Изменить</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
{displayCover && !isUploading && !isDeleting && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDeleteCover}
|
||||
className="absolute top-2 right-2 p-2 rounded-lg bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleCoverChange}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||
{/* Title */}
|
||||
<Input
|
||||
label="Название"
|
||||
placeholder="Введите название марафона"
|
||||
error={errors.title?.message}
|
||||
{...register('title')}
|
||||
/>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Описание (необязательно)
|
||||
</label>
|
||||
<textarea
|
||||
className="input min-h-[100px] resize-none w-full"
|
||||
placeholder="Расскажите о вашем марафоне..."
|
||||
{...register('description')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Start date */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Дата начала
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="input w-full"
|
||||
{...register('start_date')}
|
||||
/>
|
||||
{errors.start_date && (
|
||||
<p className="text-red-400 text-xs mt-1">{errors.start_date.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Marathon type */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Тип марафона
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('is_public', false, { shouldDirty: true })}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
||||
${!isPublic
|
||||
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${!isPublic ? 'bg-neon-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Lock className={`w-5 h-5 ${!isPublic ? 'text-neon-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${!isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Закрытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Вход только по коду приглашения
|
||||
</div>
|
||||
{!isPublic && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('is_public', true, { shouldDirty: true })}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left group
|
||||
${isPublic
|
||||
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${isPublic ? 'bg-accent-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Globe className={`w-5 h-5 ${isPublic ? 'text-accent-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${isPublic ? 'text-white' : 'text-gray-300'}`}>
|
||||
Открытый
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Виден всем пользователям
|
||||
</div>
|
||||
{isPublic && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-accent-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Game proposal mode */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Кто может предлагать игры
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'all_participants', { shouldDirty: true })}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
||||
${gameProposalMode === 'all_participants'
|
||||
? 'border-neon-500/50 bg-neon-500/10 shadow-[0_0_14px_rgba(34,211,238,0.08)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${gameProposalMode === 'all_participants' ? 'bg-neon-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Users className={`w-5 h-5 ${gameProposalMode === 'all_participants' ? 'text-neon-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${gameProposalMode === 'all_participants' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Все участники
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
С модерацией организатором
|
||||
</div>
|
||||
{gameProposalMode === 'all_participants' && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-neon-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('game_proposal_mode', 'organizer_only', { shouldDirty: true })}
|
||||
className={`
|
||||
relative p-4 rounded-xl border-2 transition-all duration-300 text-left
|
||||
${gameProposalMode === 'organizer_only'
|
||||
? 'border-accent-500/50 bg-accent-500/10 shadow-[0_0_14px_rgba(139,92,246,0.08)]'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl mb-3 flex items-center justify-center transition-colors
|
||||
${gameProposalMode === 'organizer_only' ? 'bg-accent-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<UserCog className={`w-5 h-5 ${gameProposalMode === 'organizer_only' ? 'text-accent-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className={`font-semibold mb-1 ${gameProposalMode === 'organizer_only' ? 'text-white' : 'text-gray-300'}`}>
|
||||
Только организатор
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Без модерации
|
||||
</div>
|
||||
{gameProposalMode === 'organizer_only' && (
|
||||
<div className="absolute top-3 right-3">
|
||||
<Sparkles className="w-4 h-4 text-accent-400" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Auto events toggle */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||
Автоматические события
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setValue('auto_events_enabled', !autoEventsEnabled, { shouldDirty: true })}
|
||||
className={`
|
||||
w-full p-4 rounded-xl border-2 transition-all duration-300 text-left flex items-center gap-4
|
||||
${autoEventsEnabled
|
||||
? 'border-yellow-500/50 bg-yellow-500/10'
|
||||
: 'border-dark-600 bg-dark-700/50 hover:border-dark-500'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<div className={`
|
||||
w-10 h-10 rounded-xl flex items-center justify-center transition-colors flex-shrink-0
|
||||
${autoEventsEnabled ? 'bg-yellow-500/20' : 'bg-dark-600'}
|
||||
`}>
|
||||
<Zap className={`w-5 h-5 ${autoEventsEnabled ? 'text-yellow-400' : 'text-gray-400'}`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className={`font-semibold ${autoEventsEnabled ? 'text-white' : 'text-gray-300'}`}>
|
||||
{autoEventsEnabled ? 'Включены' : 'Выключены'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
Случайные бонусные события во время марафона
|
||||
</div>
|
||||
</div>
|
||||
<div className={`
|
||||
w-12 h-7 rounded-full transition-colors relative flex-shrink-0
|
||||
${autoEventsEnabled ? 'bg-yellow-500' : 'bg-dark-600'}
|
||||
`}>
|
||||
<div className={`
|
||||
absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform
|
||||
${autoEventsEnabled ? 'left-6' : 'left-1'}
|
||||
`} />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 pt-4 border-t border-dark-600">
|
||||
<NeonButton
|
||||
type="button"
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={onClose}
|
||||
>
|
||||
Отмена
|
||||
</NeonButton>
|
||||
<NeonButton
|
||||
type="submit"
|
||||
className="flex-1"
|
||||
isLoading={isSubmitting}
|
||||
disabled={!isDirty}
|
||||
icon={<Save className="w-4 h-4" />}
|
||||
>
|
||||
Сохранить
|
||||
</NeonButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user