mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-05 03:02:56 +00:00
dev day #71
This commit is contained in:
Tomas Dvorak
@@ -31,7 +31,7 @@ import { useForm } from 'react-hook-form';
|
||||
import { sendContact } from '../services/public';
|
||||
import { useSettings } from '../hooks/useSettings';
|
||||
import MainLayout from '../components/layout/MainLayout';
|
||||
import { FiMail, FiPhone } from 'react-icons/fi';
|
||||
import { FiMail, FiPhone, FiMapPin } from 'react-icons/fi';
|
||||
import { trackContactSubmit, trackFormSubmit } from '../utils/umami';
|
||||
import SponsorsSection from '../components/common/SponsorsSection';
|
||||
import ContactMap from '../components/home/ContactMap';
|
||||
@@ -142,7 +142,13 @@ const ContactPage: React.FC = () => {
|
||||
const uncategorized = contactsData?.uncategorized || [];
|
||||
const hasContacts = categories.length > 0 || uncategorized.length > 0;
|
||||
|
||||
if (!hasLocation && !hasContacts) return null;
|
||||
const hasContactInfo = !!(
|
||||
(settings as any)?.contact_address ||
|
||||
(settings as any)?.contact_phone ||
|
||||
(settings as any)?.contact_email
|
||||
);
|
||||
|
||||
if (!hasLocation && !hasContacts && !hasContactInfo) return null;
|
||||
|
||||
return (
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
|
||||
@@ -162,97 +168,149 @@ const ContactPage: React.FC = () => {
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Categories as tabs on the right */}
|
||||
{hasContacts && (
|
||||
<Box bg={bgColor} p={4} borderRadius="lg" borderWidth="1px" borderColor={borderColor} boxShadow="sm">
|
||||
<Heading size="md" mb={3}>Kontaktní osoby</Heading>
|
||||
<Tabs colorScheme="blue" isFitted>
|
||||
<TabList>
|
||||
{categories.map(([name]) => (
|
||||
<Tab key={name}>{name}</Tab>
|
||||
))}
|
||||
{uncategorized.length > 0 && <Tab>Ostatní</Tab>}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{categories.map(([name, persons]) => (
|
||||
<TabPanel key={name} pt={4}>
|
||||
<SimpleGrid columns={{ base: 1, sm: 2 }} spacing={4}>
|
||||
{persons.map((contact) => (
|
||||
<Box key={contact.id} bg={bgColor} p={4} borderRadius="md" borderWidth="1px" borderColor={borderColor}>
|
||||
<VStack align="start" spacing={3}>
|
||||
{contact.image_url && (
|
||||
<Avatar src={contact.image_url} name={contact.name} size="lg" />
|
||||
)}
|
||||
<Box>
|
||||
<Heading size="sm">{contact.name}</Heading>
|
||||
{contact.position && (
|
||||
<Badge colorScheme="blue" mt={1}>{contact.position}</Badge>
|
||||
)}
|
||||
{/* Right column: contact info card (if any) + contacts tabs */}
|
||||
{(hasContactInfo || hasContacts) && (
|
||||
<VStack align="stretch" spacing={4}>
|
||||
{hasContactInfo && (
|
||||
<Box bg={bgColor} p={4} borderRadius="lg" borderWidth="1px" borderColor={borderColor} boxShadow="sm">
|
||||
<Heading size="md" mb={3}>Kontaktní údaje</Heading>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{(settings as any)?.contact_address && (
|
||||
<HStack align="start">
|
||||
<Icon as={FiMapPin} boxSize={5} color="blue.500" mt={1} />
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontWeight="bold">Adresa</Text>
|
||||
<Text>{(settings as any)?.contact_address}</Text>
|
||||
{(settings as any)?.contact_city && (
|
||||
<Text>
|
||||
{(settings as any)?.contact_zip && `${(settings as any)?.contact_zip} `}
|
||||
{(settings as any)?.contact_city}
|
||||
</Text>
|
||||
)}
|
||||
{(settings as any)?.contact_country && <Text>{(settings as any)?.contact_country}</Text>}
|
||||
</VStack>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{(settings as any)?.contact_phone && (
|
||||
<HStack align="start">
|
||||
<Icon as={FiPhone} boxSize={5} color="blue.500" mt={1} />
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontWeight="bold">Telefon</Text>
|
||||
<Link href={`tel:${(settings as any)?.contact_phone}`} color="blue.500">
|
||||
{(settings as any)?.contact_phone}
|
||||
</Link>
|
||||
</VStack>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{(settings as any)?.contact_email && (
|
||||
<HStack align="start">
|
||||
<Icon as={FiMail} boxSize={5} color="blue.500" mt={1} />
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontWeight="bold">Email</Text>
|
||||
<Link href={`mailto:${(settings as any)?.contact_email}`} color="blue.500">
|
||||
{(settings as any)?.contact_email}
|
||||
</Link>
|
||||
</VStack>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{hasContacts && (
|
||||
<Box bg={bgColor} p={4} borderRadius="lg" borderWidth="1px" borderColor={borderColor} boxShadow="sm">
|
||||
<Heading size="md" mb={3}>Kontaktní osoby</Heading>
|
||||
<Tabs colorScheme="blue" isFitted>
|
||||
<TabList>
|
||||
{categories.map(([name]) => (
|
||||
<Tab key={name}>{name}</Tab>
|
||||
))}
|
||||
{uncategorized.length > 0 && <Tab>Ostatní</Tab>}
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
{categories.map(([name, persons]) => (
|
||||
<TabPanel key={name} pt={4}>
|
||||
<SimpleGrid columns={{ base: 1, sm: 2 }} spacing={4}>
|
||||
{persons.map((contact) => (
|
||||
<Box key={contact.id} bg={bgColor} p={4} borderRadius="md" borderWidth="1px" borderColor={borderColor}>
|
||||
<VStack align="start" spacing={3}>
|
||||
{contact.image_url && (
|
||||
<Avatar src={contact.image_url} name={contact.name} size="lg" />
|
||||
)}
|
||||
<Box>
|
||||
<Heading size="sm">{contact.name}</Heading>
|
||||
{contact.position && (
|
||||
<Badge colorScheme="blue" mt={1}>{contact.position}</Badge>
|
||||
)}
|
||||
</Box>
|
||||
{contact.description && (
|
||||
<Text fontSize="sm" color="gray.600">{contact.description}</Text>
|
||||
)}
|
||||
<VStack align="start" spacing={1}>
|
||||
{contact.email && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiMail} color="blue.500" />
|
||||
<Link href={`mailto:${contact.email}`} color="blue.500" fontSize="sm">{contact.email}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
{contact.phone && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiPhone} color="blue.500" />
|
||||
<Link href={`tel:${contact.phone}`} color="blue.500" fontSize="sm">{contact.phone}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
{contact.description && (
|
||||
<Text fontSize="sm" color="gray.600">{contact.description}</Text>
|
||||
)}
|
||||
<VStack align="start" spacing={1}>
|
||||
{contact.email && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiMail} color="blue.500" />
|
||||
<Link href={`mailto:${contact.email}`} color="blue.500" fontSize="sm">{contact.email}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
{contact.phone && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiPhone} color="blue.500" />
|
||||
<Link href={`tel:${contact.phone}`} color="blue.500" fontSize="sm">{contact.phone}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</TabPanel>
|
||||
))}
|
||||
{uncategorized.length > 0 && (
|
||||
<TabPanel pt={4}>
|
||||
<SimpleGrid columns={{ base: 1, sm: 2 }} spacing={4}>
|
||||
{uncategorized.map((contact) => (
|
||||
<Box key={contact.id} bg={bgColor} p={4} borderRadius="md" borderWidth="1px" borderColor={borderColor}>
|
||||
<VStack align="start" spacing={3}>
|
||||
{contact.image_url && (
|
||||
<Avatar src={contact.image_url} name={contact.name} size="lg" />
|
||||
)}
|
||||
<Box>
|
||||
<Heading size="sm">{contact.name}</Heading>
|
||||
{contact.position && (
|
||||
<Badge colorScheme="blue" mt={1}>{contact.position}</Badge>
|
||||
)}
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</TabPanel>
|
||||
))}
|
||||
{uncategorized.length > 0 && (
|
||||
<TabPanel pt={4}>
|
||||
<SimpleGrid columns={{ base: 1, sm: 2 }} spacing={4}>
|
||||
{uncategorized.map((contact) => (
|
||||
<Box key={contact.id} bg={bgColor} p={4} borderRadius="md" borderWidth="1px" borderColor={borderColor}>
|
||||
<VStack align="start" spacing={3}>
|
||||
{contact.image_url && (
|
||||
<Avatar src={contact.image_url} name={contact.name} size="lg" />
|
||||
)}
|
||||
<Box>
|
||||
<Heading size="sm">{contact.name}</Heading>
|
||||
{contact.position && (
|
||||
<Badge colorScheme="blue" mt={1}>{contact.position}</Badge>
|
||||
)}
|
||||
</Box>
|
||||
{contact.description && (
|
||||
<Text fontSize="sm" color="gray.600">{contact.description}</Text>
|
||||
)}
|
||||
<VStack align="start" spacing={1}>
|
||||
{contact.email && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiMail} color="blue.500" />
|
||||
<Link href={`mailto:${contact.email}`} color="blue.500" fontSize="sm">{contact.email}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
{contact.phone && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiPhone} color="blue.500" />
|
||||
<Link href={`tel:${contact.phone}`} color="blue.500" fontSize="sm">{contact.phone}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
{contact.description && (
|
||||
<Text fontSize="sm" color="gray.600">{contact.description}</Text>
|
||||
)}
|
||||
<VStack align="start" spacing={1}>
|
||||
{contact.email && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiMail} color="blue.500" />
|
||||
<Link href={`mailto:${contact.email}`} color="blue.500" fontSize="sm">{contact.email}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
{contact.phone && (
|
||||
<HStack spacing={2}>
|
||||
<Icon as={FiPhone} color="blue.500" />
|
||||
<Link href={`tel:${contact.phone}`} color="blue.500" fontSize="sm">{contact.phone}</Link>
|
||||
</HStack>
|
||||
)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</TabPanel>
|
||||
)}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
</TabPanel>
|
||||
)}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
)}
|
||||
</SimpleGrid>
|
||||
);
|
||||
|
||||
@@ -24,6 +24,7 @@ import ClubModal from '../components/home/ClubModal';
|
||||
import MatchModal from '../components/home/MatchModal';
|
||||
import { useAllPageElementConfigs } from '../hooks/usePageElementConfig';
|
||||
import { API_URL } from '../services/api';
|
||||
import { TeamLogo } from '../components/common/TeamLogo';
|
||||
|
||||
// Types for real API-driven data
|
||||
type NewsItem = {
|
||||
@@ -336,6 +337,8 @@ const HomePage: React.FC = () => {
|
||||
time,
|
||||
home: m.home,
|
||||
away: m.away,
|
||||
home_id: m.home_id,
|
||||
away_id: m.away_id,
|
||||
home_logo_url: getOverrideLogo(m.home, m.home_logo_url),
|
||||
away_logo_url: getOverrideLogo(m.away, m.away_logo_url),
|
||||
score: m.score,
|
||||
@@ -1339,7 +1342,15 @@ const HomePage: React.FC = () => {
|
||||
<div className="container" data-element="container" style={{ ...getStyles('container') }}>
|
||||
{/* Header: logo + club name */}
|
||||
<div className="home-header">
|
||||
<img src={assetUrl(clubLogo) || '/images/club-logo.png'} alt="Klub" />
|
||||
<TeamLogo
|
||||
teamId={settings?.club_id}
|
||||
teamName={clubName}
|
||||
facrLogo={assetUrl(clubLogo) || undefined}
|
||||
size="custom"
|
||||
alt="Klub"
|
||||
borderRadius="full"
|
||||
style={{ width: 56, height: 56 }}
|
||||
/>
|
||||
<div>
|
||||
<h1 style={{ margin: 0 }}>{clubName}</h1>
|
||||
<div className="subtitle" style={{ fontSize: '0.95rem' }}>Oficiální web klubu</div>
|
||||
@@ -1462,7 +1473,15 @@ const HomePage: React.FC = () => {
|
||||
<FiChevronLeft size={24} />
|
||||
</button>
|
||||
<div className="team">
|
||||
<img className="logo" src={assetUrl(show?.home_logo_url) || assetUrl(clubLogo) || '/images/club-logo.png'} alt="Domácí" />
|
||||
<TeamLogo
|
||||
className="logo"
|
||||
teamId={show?.home_id}
|
||||
teamName={show?.home}
|
||||
facrLogo={show?.home_logo_url}
|
||||
size="custom"
|
||||
alt="Domácí"
|
||||
borderRadius="full"
|
||||
/>
|
||||
<div>{sanitizeClubName(show?.home || matches[0]?.homeTeam || clubName)}</div>
|
||||
</div>
|
||||
<div className="countdown">
|
||||
@@ -1471,7 +1490,15 @@ const HomePage: React.FC = () => {
|
||||
<div style={{ fontSize: '0.8rem', opacity: 0.85 }}>Začátek zápasu</div>
|
||||
</div>
|
||||
<div className="team">
|
||||
<img className="logo" src={assetUrl(show?.away_logo_url) || '/images/club-opponent.png'} alt="Hosté" />
|
||||
<TeamLogo
|
||||
className="logo"
|
||||
teamId={show?.away_id}
|
||||
teamName={show?.away}
|
||||
facrLogo={show?.away_logo_url}
|
||||
size="custom"
|
||||
alt="Hosté"
|
||||
borderRadius="full"
|
||||
/>
|
||||
<div>{sanitizeClubName(show?.away || matches[0]?.awayTeam || 'Soupeř')}</div>
|
||||
</div>
|
||||
<button
|
||||
@@ -1535,7 +1562,14 @@ const HomePage: React.FC = () => {
|
||||
</div>
|
||||
<div className="teams">
|
||||
<div className="team">
|
||||
<img src={assetUrl(m.home_logo_url)} alt={m.home} />
|
||||
<TeamLogo
|
||||
teamId={m.home_id}
|
||||
teamName={m.home}
|
||||
facrLogo={m.home_logo_url}
|
||||
size="custom"
|
||||
alt={m.home}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<div className="name">{sanitizeClubName(m.home)}</div>
|
||||
</div>
|
||||
<div className="score">
|
||||
@@ -1550,7 +1584,14 @@ const HomePage: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
<div className="team">
|
||||
<img src={assetUrl(m.away_logo_url)} alt={m.away} />
|
||||
<TeamLogo
|
||||
teamId={m.away_id}
|
||||
teamName={m.away}
|
||||
facrLogo={m.away_logo_url}
|
||||
size="custom"
|
||||
alt={m.away}
|
||||
borderRadius="full"
|
||||
/>
|
||||
<div className="name">{sanitizeClubName(m.away)}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1680,8 +1721,11 @@ const HomePage: React.FC = () => {
|
||||
<td style={{ padding: '10px 8px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>
|
||||
{row.team_logo_url && (
|
||||
<img
|
||||
src={assetUrl(row.team_logo_url)}
|
||||
<TeamLogo
|
||||
teamId={row.team_id}
|
||||
teamName={row.team?.name ?? row.team ?? row.club}
|
||||
facrLogo={row.team_logo_url}
|
||||
size="custom"
|
||||
alt={row.team?.name ?? row.team ?? row.club ?? '-'}
|
||||
style={{ width: '24px', height: '24px', borderRadius: '50%', objectFit: 'cover', background: 'var(--bg-soft)', border: '1px solid var(--card-border)', flexShrink: 0 }}
|
||||
/>
|
||||
@@ -1757,7 +1801,7 @@ const HomePage: React.FC = () => {
|
||||
{isVisible('gallery', false) && (
|
||||
<section data-element="gallery" style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('gallery') }}>
|
||||
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
|
||||
<GallerySection />
|
||||
<GallerySection zoneramaUrl={galleryUrl} />
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
@@ -129,20 +129,9 @@ const SponsorsAdminPage: React.FC = () => {
|
||||
if (!file) return;
|
||||
try {
|
||||
const res = await uploadFile(file);
|
||||
const apiOrigin = new URL(API_URL, window.location.origin).origin;
|
||||
// If backend returned an absolute URL pointing to the dev host (same origin as app), rewrite to API origin
|
||||
let url = res.url || '';
|
||||
try {
|
||||
const parsed = new URL(url, window.location.origin);
|
||||
const appOrigin = window.location.origin;
|
||||
if (parsed.origin === appOrigin) {
|
||||
// replace with API origin while keeping path
|
||||
url = apiOrigin + parsed.pathname + parsed.search + parsed.hash;
|
||||
}
|
||||
} catch (e) {
|
||||
// ignore
|
||||
}
|
||||
setEditing((prev) => ({ ...(prev || {}), logo_url: url }));
|
||||
// uploadFile already normalizes to a backend-relative URL like '/uploads/2025/10/...'
|
||||
// Store that relative path to keep it portable across environments
|
||||
setEditing((prev) => ({ ...(prev || {}), logo_url: res.url || '' }));
|
||||
toast({ title: 'Logo nahráno', status: 'success' });
|
||||
} catch (err) {
|
||||
toast({ title: 'Nahrání loga selhalo', status: 'error' });
|
||||
|
||||
Reference in New Issue
Block a user