TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-04 10:42:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

upload

Browse Source
This commit is contained in:
Tomáš Dvořák
2025-10-16 13:32:05 +02:00
commit 12cba639b9
663 changed files with 168914 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/home/ClubModal.tsx
+211
View File
@@ -0,0 +1,211 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
Button,
Box,
Text,
VStack,
HStack,
Badge,
Flex,
useColorModeValue,
} from '@chakra-ui/react';
import { TeamLogo } from '../common/TeamLogo';
interface ClubModalProps {
isOpen: boolean;
onClose: () => void;
club: {
team: string;
team_id?: string;
team_logo_url?: string;
rank?: string | number;
played?: string | number;
wins?: string | number;
draws?: string | number;
losses?: string | number;
score?: string;
points?: string | number;
// Additional fields from FACR
goals_scored?: string | number;
goals_conceded?: string | number;
goal_difference?: string | number;
form?: string; // Last 5 matches form (e.g., "WWDWL")
position_change?: number; // +/- change in position
} | null;
clubType?: 'football' | 'futsal';
}
const ClubModal: React.FC<ClubModalProps> = ({ isOpen, onClose, club, clubType = 'football' }) => {
if (!club) return null;
// Theme-aware colors
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'whiteAlpha.300');
const fallbackBg = useColorModeValue('gray.100', 'gray.700');
const fallbackText = useColorModeValue('gray.600', 'gray.300');
return (
<Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
<ModalOverlay bg="blackAlpha.600" backdropFilter="blur(4px)" />
<ModalContent>
<ModalHeader>
<Flex align="center" gap={3}>
<TeamLogo
teamId={club.team_id}
teamName={club.team}
facrLogo={club.team_logo_url}
size="large"
alt={club.team}
borderRadius="full"
bg={cardBg}
borderWidth="1px"
borderColor={borderColor}
fallbackIcon={
<Box
w="48px"
h="48px"
bg={fallbackBg}
borderRadius="full"
display="flex"
alignItems="center"
justifyContent="center"
color={fallbackText}
fontSize="lg"
fontWeight="bold"
borderWidth="1px"
borderColor={borderColor}
>
{club.team.substring(0, 2).toUpperCase()}
</Box>
}
/>
<Box>
<Text fontSize="xl" fontWeight="bold">
{club.team}
</Text>
{club.rank && (
<Badge colorScheme="blue" fontSize="sm">
{club.rank}. místo
</Badge>
)}
</Box>
</Flex>
</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack spacing={4} align="stretch">
{/* Statistics */}
<Box
borderWidth="1px"
borderRadius="lg"
p={4}
bg={useColorModeValue('gray.50', 'gray.700')}
borderColor={borderColor}
>
<Text fontSize="md" fontWeight="semibold" mb={3} color={useColorModeValue('gray.700', 'gray.200')}>
Statistiky
</Text>
<VStack spacing={2} align="stretch">
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Odehráno zápasů:</Text>
<Text fontWeight="bold" color={useColorModeValue('gray.800', 'gray.100')}>{club.played || 0}</Text>
</HStack>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Výhry:</Text>
<Text fontWeight="bold" color="green.600">
{club.wins || 0}
</Text>
</HStack>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Remízy:</Text>
<Text fontWeight="bold" color={useColorModeValue('gray.600', 'gray.400')}>
{club.draws || 0}
</Text>
</HStack>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Prohry:</Text>
<Text fontWeight="bold" color="red.600">
{club.losses || 0}
</Text>
</HStack>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Skóre:</Text>
<Text fontWeight="bold" color={useColorModeValue('gray.800', 'gray.100')}>{club.score || '0:0'}</Text>
</HStack>
{(club.goals_scored !== undefined || club.goals_conceded !== undefined) && (
<>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Vstřelené góly:</Text>
<Text fontWeight="bold" color="green.500">{club.goals_scored || 0}</Text>
</HStack>
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Obdržené góly:</Text>
<Text fontWeight="bold" color="red.500">{club.goals_conceded || 0}</Text>
</HStack>
</>
)}
{club.goal_difference !== undefined && (
<HStack justify="space-between">
<Text color={useColorModeValue('gray.600', 'gray.300')}>Skóre rozdíl:</Text>
<Text fontWeight="bold" color={Number(club.goal_difference) >= 0 ? 'green.600' : 'red.600'}>
{Number(club.goal_difference) > 0 ? '+' : ''}{club.goal_difference}
</Text>
</HStack>
)}
<HStack justify="space-between" pt={2} borderTopWidth="1px" borderColor={borderColor}>
<Text color={useColorModeValue('gray.700', 'gray.200')} fontWeight="semibold">Body:</Text>
<Badge colorScheme="blue" fontSize="lg" px={3} py={1}>
{club.points || 0}
</Badge>
</HStack>
</VStack>
</Box>
{/* Form (Last 5 matches) */}
{club.form && (
<Box
borderWidth="1px"
borderRadius="lg"
p={4}
bg={useColorModeValue('gray.50', 'gray.700')}
borderColor={borderColor}
>
<Text fontSize="md" fontWeight="semibold" mb={3} color={useColorModeValue('gray.700', 'gray.200')}>
Forma (posledních 5 zápasů)
</Text>
<HStack spacing={2} justify="center">
{club.form.split('').map((result, idx) => (
<Badge
key={idx}
colorScheme={result === 'W' ? 'green' : result === 'D' ? 'yellow' : 'red'}
fontSize="md"
px={3}
py={1}
borderRadius="md"
>
{result === 'W' ? 'V' : result === 'D' ? 'R' : 'P'}
</Badge>
))}
</HStack>
</Box>
)}
</VStack>
</ModalBody>
<ModalFooter>
<Button colorScheme="gray" onClick={onClose}>
Zavřít
</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default ClubModal;