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

dev day #79

Browse Source
This commit is contained in:
Tomas Dvorak
2025-11-02 01:04:02 +01:00
parent ac886502e0
commit b9cea0cd77
153 changed files with 43713 additions and 1700 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/index.html
+10 -1
View File
@@ -6,8 +6,9 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- Optional SVG logo if available in public folder (keeps ICO as fallback) -->
<!-- <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/logo.svg" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#000000" />
<meta name="color-scheme" content="light dark" />
<meta
name="description"
content="Oficiální webové stránky fotbalového klubu - aktuality, zápasy, tabulky, hráči a fotogalerie"
@@ -18,6 +19,14 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- Performance: preconnect to Google Fonts origins used by the app -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Performance: preconnect to YouTube origins for faster video/thumbnail loads -->
<link rel="preconnect" href="https://www.youtube.com" crossorigin />
<link rel="preconnect" href="https://i.ytimg.com" crossorigin />
<link rel="preconnect" href="https://s.ytimg.com" crossorigin />
<link rel="preconnect" href="https://www.google.com" crossorigin />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
frontend/public/service-worker.js
+37 -5
View File
@@ -1,19 +1,18 @@
/* eslint-disable no-restricted-globals */
// Service Worker for PWA support and offline functionality
const CACHE_VERSION = 'v1.0.0';
const CACHE_VERSION = 'v1.0.1';
const CACHE_NAME = `fotbal-club-cache-${CACHE_VERSION}`;
// Assets to cache on install
const STATIC_ASSETS = [
'/',
'/index.html',
'/static/css/main.css',
'/static/js/main.js',
'/manifest.json',
'/favicon.ico',
'/logo192.png',
'/logo512.png',
'/robots.txt',
];
// API endpoints to cache
@@ -75,11 +74,22 @@ self.addEventListener('fetch', (event) => {
return;
}
// Only handle same-origin requests
if (url.origin !== self.location.origin) {
return;
}
// Skip admin routes
if (url.pathname.startsWith('/admin')) {
return;
}
// Handle SPA navigations with app shell fallback
if (request.mode === 'navigate') {
event.respondWith(handleNavigationRequest(request));
return;
}
// Handle API requests
if (url.pathname.startsWith('/api/')) {
event.respondWith(handleAPIRequest(request));
@@ -114,8 +124,8 @@ async function handleStaticRequest(request) {
} catch (error) {
console.error('[SW] Fetch failed:', error);
// Return offline page if available
const cachedOffline = await caches.match('/offline.html');
// Return app shell (index.html) if available
const cachedOffline = await caches.match('/index.html');
if (cachedOffline) {
return cachedOffline;
}
@@ -129,6 +139,28 @@ async function handleStaticRequest(request) {
}
}
// Handle SPA navigation requests - Network First with index.html fallback
async function handleNavigationRequest(request) {
try {
const networkResponse = await fetch(request);
if (networkResponse && networkResponse.ok) {
return networkResponse;
}
} catch (error) {
console.error('[SW] Navigation fetch failed:', error);
}
// Fallback to cached index.html (app shell)
const cachedIndex = await caches.match('/index.html');
if (cachedIndex) {
return cachedIndex;
}
return new Response('Offline - Please check your connection', {
status: 503,
statusText: 'Service Unavailable',
headers: { 'Content-Type': 'text/plain' },
});
}
// Handle API requests - Network First strategy with cache fallback
async function handleAPIRequest(request) {
try {
frontend/src/App.tsx
+4
View File
@@ -52,6 +52,8 @@ import FilesAdminPage from './pages/admin/FilesAdminPage';
import ContactsAdminPage from './pages/admin/ContactsAdminPage';
import NavigationAdminPage from './pages/admin/NavigationAdminPage';
import ShortlinksAdminPage from './pages/admin/ShortlinksAdminPage';
import CommentsAdminPage from './pages/admin/CommentsAdminPage';
import EngagementAdminPage from './pages/admin/EngagementAdminPage';
import SemiAdminPage from './pages/SemiAdminPage';
import PollsAdminPage from './pages/admin/PollsAdminPage';
// Admin pages render their own AdminLayout internally
@@ -454,6 +456,8 @@ const App: React.FC = () => {
<Route path="/admin/soubory" element={<FilesAdminPage />} />
<Route path="/admin/kontakty" element={<ContactsAdminPage />} />
<Route path="/admin/navigace" element={<NavigationAdminPage />} />
<Route path="/admin/komentare" element={<CommentsAdminPage />} />
<Route path="/admin/engagement" element={<EngagementAdminPage />} />
</Route>
{/* Remaining protected routes that don't use AdminLayout */}
frontend/src/components/Navbar.tsx
+65 -2
View File
@@ -24,6 +24,7 @@ import {
VStack,
Divider,
Container,
Progress,
Modal,
ModalOverlay,
ModalContent,
@@ -53,6 +54,9 @@ import { getZoneramaManifestWithFallbacks } from '../services/zonerama';
import { getMyNewsletterToken } from '../services/public/newsletter';
import { API_URL } from '../services/api';
import { assetUrl } from '../utils/url';
import { getProfile as getEngagementProfile, EngagementProfile } from '../services/engagement';
import AchievementsModal from './engagement/AchievementsModal';
import RewardsModal from './engagement/RewardsModal';
type NavLink = { label: string; to?: string; items?: { label: string; to: string }[]; external?: boolean };
@@ -317,6 +321,9 @@ const Navbar: React.FC<{ fullWidth?: boolean; variant?: string }> = ({ fullWidth
const [navLoading, setNavLoading] = useState(true);
const containerMaxW = fullWidth ? 'full' as const : '7xl' as const;
const [windowWidth, setWindowWidth] = useState<number>(typeof window !== 'undefined' ? window.innerWidth : 1920);
const [engProfile, setEngProfile] = useState<EngagementProfile | null>(null);
const { isOpen: isAchOpen, onOpen: onAchOpen, onClose: onAchClose } = useDisclosure();
const { isOpen: isRewOpen, onOpen: onRewOpen, onClose: onRewClose } = useDisclosure();
useEffect(() => {
const onResize = () => setWindowWidth(window.innerWidth);
@@ -324,6 +331,34 @@ const Navbar: React.FC<{ fullWidth?: boolean; variant?: string }> = ({ fullWidth
return () => window.removeEventListener('resize', onResize);
}, []);
// Load engagement profile for avatar
useEffect(() => {
let mounted = true;
(async () => {
try {
if (!isAuthenticated) { setEngProfile(null); return; }
const p = await getEngagementProfile();
if (mounted) setEngProfile(p);
} catch {
if (mounted) setEngProfile(null);
}
})();
return () => { mounted = false; };
}, [isAuthenticated]);
useEffect(() => {
if (!isAuthenticated) return;
let disposed = false;
const handler = async () => {
try {
const p = await getEngagementProfile();
if (!disposed) setEngProfile(p);
} catch {}
};
window.addEventListener('engagement:refresh', handler as any);
return () => { disposed = true; window.removeEventListener('engagement:refresh', handler as any); };
}, [isAuthenticated]);
// Search modal state
const [query, setQuery] = useState('');
const submitSearch = () => {
@@ -737,11 +772,25 @@ const Navbar: React.FC<{ fullWidth?: boolean; variant?: string }> = ({ fullWidth
const navBorderBottomWidth = isTransparent ? '0px' : '1px';
const navBoxShadow = (isTransparent || isMinimal) ? 'none' : (scrolled ? 'sm' : 'none');
const levelProgress = useMemo(() => {
const xp = engProfile?.xp ?? 0;
let lvl = 1;
let threshold = 100;
let remaining = xp;
while (remaining >= threshold && lvl < 200) {
remaining -= threshold;
lvl++;
threshold += 100;
}
const pct = Math.max(0, Math.min(100, Math.floor((remaining / threshold) * 100)));
return { pct };
}, [engProfile?.xp]);
return (
<Box position="sticky" top={0} zIndex={1000}>
{/* Top bar with socials and quick external links */}
{(settings?.facebook_url || settings?.instagram_url || settings?.youtube_url || settings?.shop_url) && (
<Box bg={topBarBg} borderBottomWidth="1px" borderColor="border.subtle" py={1}>
<Box bg={topBarBg} borderBottomWidth="1px" borderColor="border.subtle" py={1} display={{ base: 'none', md: 'block' }}>
<Container maxW={containerMaxW} px={fullWidth ? 0 : undefined}>
<Flex align="center" justify="space-between" gap={2}>
<HStack spacing={2}>
@@ -928,9 +977,16 @@ const Navbar: React.FC<{ fullWidth?: boolean; variant?: string }> = ({ fullWidth
minW={0}
ml={2}
>
<Avatar size="sm" name={user?.name || 'Uživatel'} />
<Avatar size="sm" name={user?.name || 'Uživatel'} src={engProfile?.animated_avatar_url || engProfile?.avatar_url || undefined} />
</MenuButton>
<MenuList>
<MenuItem isDisabled>{`Úroveň ${engProfile?.level ?? 1} • ${engProfile?.points ?? 0} bodů`}</MenuItem>
<Box px={3} py={2}>
<Text fontSize="xs" color="gray.500">Progres</Text>
<Progress value={levelProgress.pct} size="xs" colorScheme="blue" borderRadius="full" mt={1} />
</Box>
<MenuItem onClick={onAchOpen}>Úspěchy</MenuItem>
<MenuItem onClick={onRewOpen}>Odměny</MenuItem>
<MenuItem as={RouterLink} to={accountPath}>Můj účet</MenuItem>
<MenuItem onClick={openMyNewsletterPrefs}>E‑mailové preference</MenuItem>
{isAdmin && <MenuItem as={RouterLink} to="/admin/nastaveni">Nastavení stránky</MenuItem>}
@@ -980,6 +1036,13 @@ const Navbar: React.FC<{ fullWidth?: boolean; variant?: string }> = ({ fullWidth
</ModalBody>
</ModalContent>
</Modal>
<AchievementsModal isOpen={isAchOpen} onClose={onAchClose} onOpenRewards={onRewOpen} />
<RewardsModal
isOpen={isRewOpen}
onClose={onRewClose}
availablePoints={engProfile?.points || 0}
onRedeemed={async () => { try { const p = await getEngagementProfile(); setEngProfile(p); } catch {} }}
/>
</Box>
</Box>
frontend/src/components/admin/AdminSidebar.tsx
+31 -22
View File
@@ -31,7 +31,8 @@ import {
FaBullhorn,
FaUserShield,
FaFileAlt,
FaLink
FaLink,
FaComments
} from 'react-icons/fa';
import { useAuth } from '../../contexts/AuthContext';
import { useQuery } from '@tanstack/react-query';
@@ -149,6 +150,7 @@ const getIconForPageType = (pageType?: string): any => {
files: FaFolder,
docs: FaBook,
shortlinks: FaLink,
engagement: FaAward,
};
return iconMap[pageType || ''] || FaFileAlt;
};
@@ -181,6 +183,9 @@ const AdminSidebar = ({
const hasShortlinks = useMemo(() => {
return navItems.some(it => (it.page_type === 'shortlinks') || (it.url === '/admin/shortlinks'));
}, [navItems]);
const hasEngagement = useMemo(() => {
return navItems.some(it => (it.page_type === 'engagement') || (it.url === '/admin/engagement'));
}, [navItems]);
// Restore scroll on mount
useEffect(() => {
@@ -361,16 +366,6 @@ const AdminSidebar = ({
);
})}
{/* MyUIbrix Editor - Special item */}
<NavItem
icon={FaPaintBrush}
onClick={(e) => {
e?.preventDefault();
window.open('/?myuibrix=edit', '_blank');
}}
>
MyUIbrix Editor
</NavItem>
{/* Ensure Shortlinks is present even if not configured in dynamic nav */}
{!hasShortlinks && (
<NavItem
@@ -381,6 +376,17 @@ const AdminSidebar = ({
Zkrácené odkazy
</NavItem>
)}
{/* Ensure Engagement page is present even if not configured in dynamic nav */}
{!hasEngagement && (
<NavItem
icon={FaAward}
to="/admin/engagement"
onClick={onClose}
>
Odměny & Úspěchy
</NavItem>
)}
</>
) : (
// Fallback to hardcoded navigation
@@ -530,6 +536,13 @@ const AdminSidebar = ({
>
Zprávy
</NavItem>
<NavItem
icon={FaComments}
to="/admin/komentare"
onClick={onClose}
>
Komentáře
</NavItem>
<NavItem
icon={FaAddressBook}
to="/admin/kontakty"
@@ -551,7 +564,13 @@ const AdminSidebar = ({
>
Ankety
</NavItem>
<NavItem
icon={FaAward}
to="/admin/engagement"
onClick={onClose}
>
Odměny & Úspěchy
</NavItem>
<Divider my={2} />
{isAdmin && (
@@ -560,16 +579,6 @@ const AdminSidebar = ({
Nastavení
</Text>
<NavItem
icon={FaPaintBrush}
onClick={(e) => {
e?.preventDefault();
window.open('/?myuibrix=edit', '_blank');
}}
>
MyUIbrix Editor
</NavItem>
<NavItem
icon={FaBars}
to="/admin/navigace"
frontend/src/components/admin/InstagramGeneratorButton.tsx
+140 -17
View File
@@ -1,11 +1,12 @@
import React from 'react';
import { IconButton, Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Textarea, useToast, Tooltip, Box } from '@chakra-ui/react';
import { Share2 } from 'lucide-react';
import { IconButton, Button, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, Textarea, useToast, Tooltip, Box, Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
import { Share2, Instagram, Twitter, Facebook, Copy } from 'lucide-react';
import { useAuth } from '../../contexts/AuthContext';
import { createShortLink } from '../../services/shortlinks';
import { createShortLink, createPublicShortLink } from '../../services/shortlinks';
import { Article, getArticleMatchLink } from '../../services/articles';
import { API_URL } from '../../services/api';
import { composeInstagramPostFromArticle, composeInstagramPostFromActivity, MatchSnapshot } from '../../services/instagram';
import { composeInstagramPostFromArticle, composeInstagramPostFromActivity, MatchSnapshot, stripHtml } from '../../services/instagram';
import { generateInstagramAI } from '../../services/ai';
import { usePublicSettings } from '../../hooks/usePublicSettings';
interface Props {
@@ -20,6 +21,7 @@ interface Props {
zIndex?: number;
variant?: 'button' | 'icon';
onGenerated?: (text: string, shortUrl: string) => void;
align?: 'left' | 'right';
}
const InstagramGeneratorButton: React.FC<Props> = ({
@@ -34,6 +36,7 @@ const InstagramGeneratorButton: React.FC<Props> = ({
zIndex = 40,
variant = 'icon',
onGenerated,
align = 'right',
}) => {
const { user } = useAuth();
const role = String(user?.role || '').toLowerCase();
@@ -45,7 +48,12 @@ const InstagramGeneratorButton: React.FC<Props> = ({
const [shortUrl, setShortUrl] = React.useState('');
const [loading, setLoading] = React.useState(false);
if (!isAdmin) return null;
// Build deterministic campaign id for UTM and shortlink code
const campaignId = React.useMemo(() => {
if (article?.id) return `article-${article.id}`;
if (activity?.id) return `activity-${activity.id}`;
return 'share';
}, [article?.id, activity?.id]);
const computeTarget = () => {
if (targetUrl) return targetUrl;
@@ -58,8 +66,7 @@ const InstagramGeneratorButton: React.FC<Props> = ({
const u = new URL(urlStr, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
if (!u.searchParams.get('utm_source')) u.searchParams.set('utm_source', 'instagram');
if (!u.searchParams.get('utm_medium')) u.searchParams.set('utm_medium', 'social');
const campaignBase = article ? `article-${article.id}` : (activity ? `activity-${activity.id}` : 'share');
if (!u.searchParams.get('utm_campaign')) u.searchParams.set('utm_campaign', campaignBase);
if (!u.searchParams.get('utm_campaign')) u.searchParams.set('utm_campaign', campaignId);
return u.toString();
} catch {
return urlStr;
@@ -76,14 +83,29 @@ const InstagramGeneratorButton: React.FC<Props> = ({
const fullUrl = withUtm(computeTarget());
if (!fullUrl) throw new Error('Nelze zjistit URL článku/aktivity');
// Deterministic shortlink code to keep link stable across generations
const code = article?.id ? `ig-a-${article.id}` : (activity?.id ? `ig-e-${activity.id}` : `ig-share`);
const payload = {
target_url: fullUrl,
title: article?.title || activity?.title || 'Link',
source_type: article ? 'article' : (activity ? 'event' : 'other'),
source_id: article?.id || activity?.id,
code,
} as any;
const res = await createShortLink(payload);
const sUrl = res?.short_url || '';
let sUrl = '';
try {
const res = await createShortLink(payload);
sUrl = res?.short_url || '';
} catch (err) {
// If code already exists or creation fails, fallback to computed short URL path
try {
const origin = typeof window !== 'undefined' ? window.location.origin : '';
sUrl = origin ? `${origin}/s/${code}` : fullUrl;
} catch {
sUrl = fullUrl;
}
}
setShortUrl(sUrl || fullUrl);
const clubName = publicSettings?.club_name || undefined;
@@ -130,9 +152,43 @@ const InstagramGeneratorButton: React.FC<Props> = ({
}
} catch {}
}
composed = composeInstagramPostFromArticle({ article, trackingUrl: sUrl || fullUrl, clubName, match: resolvedMatch });
// Try real AI caption generation first; fallback to template composer
try {
const ai = await generateInstagramAI({
type: 'article',
title: article.title,
content: stripHtml(article.content),
club_name: clubName,
link: sUrl || fullUrl,
match: resolvedMatch ? {
home: resolvedMatch.home,
away: resolvedMatch.away,
competition: resolvedMatch.competition,
date_time: resolvedMatch.date_time,
venue: resolvedMatch.venue,
score: resolvedMatch.score,
} : undefined,
});
composed = ai?.text?.trim() || '';
} catch {}
if (!composed) {
composed = composeInstagramPostFromArticle({ article, trackingUrl: sUrl || fullUrl, clubName, match: resolvedMatch });
}
} else if (activity) {
composed = composeInstagramPostFromActivity({ activity, trackingUrl: sUrl || fullUrl, clubName });
// Try AI generation first
try {
const ai = await generateInstagramAI({
type: 'event',
title: String(activity?.title || ''),
content: stripHtml(String(activity?.description || '')),
club_name: clubName,
link: sUrl || fullUrl,
});
composed = ai?.text?.trim() || '';
} catch {}
if (!composed) {
composed = composeInstagramPostFromActivity({ activity, trackingUrl: sUrl || fullUrl, clubName });
}
} else {
composed = `${clubName || 'Náš klub'}\n\n🔗 ${sUrl || fullUrl}`;
}
@@ -155,8 +211,63 @@ const InstagramGeneratorButton: React.FC<Props> = ({
}
};
const ButtonEl = (
<Tooltip label="Vygenerovat Instagram příspěvek" placement="left">
// Build share URL with platform-specific UTMs (base long URL)
const buildShareUrl = (platform: 'instagram' | 'twitter' | 'facebook' | 'copy'): string => {
const base = computeTarget();
try {
const u = new URL(base, typeof window !== 'undefined' ? window.location.origin : 'http://localhost');
if (!u.searchParams.get('utm_source')) u.searchParams.set('utm_source', platform);
if (!u.searchParams.get('utm_medium')) u.searchParams.set('utm_medium', 'social');
if (!u.searchParams.get('utm_campaign')) u.searchParams.set('utm_campaign', campaignId);
return u.toString();
} catch {
return base;
}
};
// Create or reuse a public shortlink for visitors for a given long URL
const getPublicShortUrl = async (longUrl: string): Promise<string> => {
try {
const res = await createPublicShortLink({ target_url: longUrl, title: article?.title || activity?.title });
return res?.short_url || longUrl;
} catch {
return longUrl;
}
};
const handleShareClick = async (platform: 'instagram' | 'twitter' | 'facebook' | 'copy') => {
const longUrl = buildShareUrl(platform);
const sUrl = await getPublicShortUrl(longUrl);
if (platform === 'copy') {
try {
await navigator.clipboard.writeText(sUrl);
toast({ status: 'success', title: 'Krátký odkaz zkopírován' });
} catch {
toast({ status: 'warning', title: 'Kopírování se nezdařilo' });
}
return;
}
if (platform === 'twitter') {
const text = article?.title || activity?.title || '';
const tw = `https://twitter.com/intent/tweet?url=${encodeURIComponent(sUrl)}&text=${encodeURIComponent(text)}`;
window.open(tw, '_blank');
return;
}
if (platform === 'facebook') {
const fb = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(sUrl)}`;
window.open(fb, '_blank');
return;
}
// Instagram has no official web share with prefilled text; open site and copy short link
try {
await navigator.clipboard.writeText(sUrl);
toast({ status: 'info', title: 'Krátký odkaz zkopírován', description: 'Vložte jej do Instagramu.' });
} catch {}
window.open('https://www.instagram.com/', '_blank');
};
const AdminButtonEl = (
<Tooltip label="Vygenerovat Instagram příspěvek" placement="right">
{variant === 'icon' ? (
<IconButton aria-label="IG post" icon={<Share2 size={18} />} colorScheme="brand" onClick={handleGenerate} isLoading={loading} size={size} />
) : (
@@ -167,15 +278,27 @@ const InstagramGeneratorButton: React.FC<Props> = ({
</Tooltip>
);
const VisitorShareEl = (
<Menu placement="top-start">
<MenuButton as={IconButton} aria-label="Sdílet" icon={<Share2 size={18} />} variant="solid" colorScheme="brand" />
<MenuList>
<MenuItem onClick={() => handleShareClick('instagram')} icon={<Instagram size={16} />}>Instagram</MenuItem>
<MenuItem onClick={() => handleShareClick('twitter')} icon={<Twitter size={16} />}>Twitter</MenuItem>
<MenuItem onClick={() => handleShareClick('facebook')} icon={<Facebook size={16} />}>Facebook</MenuItem>
<MenuItem onClick={() => handleShareClick('copy')} icon={<Copy size={16} />}>Kopírovat odkaz</MenuItem>
</MenuList>
</Menu>
);
return (
<>
{placement === 'fixed' ? (
<Box position="fixed" right={mr} bottom={mb} zIndex={zIndex}>
{ButtonEl}
<Box position="fixed" bottom={mb} zIndex={zIndex} {...(align === 'left' ? { left: mr } : { right: mr })}>
{isAdmin ? AdminButtonEl : VisitorShareEl}
</Box>
) : (
<Box position="absolute" top={2} right={2} zIndex={zIndex}>
{ButtonEl}
<Box position="absolute" top={2} zIndex={zIndex} {...(align === 'left' ? { left: 2 } : { right: 2 })}>
{isAdmin ? AdminButtonEl : VisitorShareEl}
</Box>
)}
frontend/src/components/admin/PollLinker.tsx
+6 -2
View File
@@ -272,9 +272,13 @@ const PollLinker: React.FC<PollLinkerProps> = ({ articleId, eventId, onPollsChan
}));
};
// Filter out polls that are already linked
// Filter out polls that are already linked elsewhere to avoid accidental reuse
const linkedPollIds = new Set(linkedPolls?.map(p => p.id) || []);
const availablePolls = allPolls?.filter(p => !linkedPollIds.has(p.id)) || [];
const availablePolls = allPolls?.filter(p => {
if (linkedPollIds.has(p.id)) return false; // already linked to this content, handled above
const linkedElsewhere = !!(p.related_article_id || p.related_event_id || p.related_match_id || p.related_video_url);
return !linkedElsewhere;
}) || [];
if (!articleId && !eventId) {
return null;
frontend/src/components/comments/CommentsSection.tsx
+250
View File
@@ -0,0 +1,250 @@
import React from 'react';
import { Box, VStack, HStack, Text, Heading, Textarea, Button, Avatar, IconButton, useColorModeValue, Spinner, Link as ChakraLink, Badge } from '@chakra-ui/react';
import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { listComments, createComment, updateComment, deleteComment, CommentItem, reactComment, unreactComment, requestUnban, reportComment } from '../../services/comments';
import { useAuth } from '../../contexts/AuthContext';
import { Pencil, Trash2, Send } from 'lucide-react';
import { Link as RouterLink } from 'react-router-dom';
type Props = {
targetType: 'article' | 'event' | 'gallery_album' | 'youtube_video';
targetId: string;
};
const PAGE_SIZE = 20;
const displayName = (u?: CommentItem['user']) => {
if (!u) return 'Anonym';
const name = `${u.first_name || ''} ${u.last_name || ''}`.trim();
return name || (u.email || 'Uživatel');
};
const CommentsSection: React.FC<Props> = ({ targetType, targetId }) => {
const cardBg = useColorModeValue('white', 'gray.800');
const border = useColorModeValue('gray.200', 'gray.700');
const muted = useColorModeValue('gray.600', 'gray.400');
const queryClient = useQueryClient();
const { isAuthenticated, user } = useAuth();
const commentsQuery = useInfiniteQuery({
queryKey: ['comments', targetType, targetId],
queryFn: ({ pageParam = 1 }) => listComments({ target_type: targetType, target_id: targetId, page: pageParam, page_size: PAGE_SIZE }),
getNextPageParam: (lastPage, pages) => {
const loaded = pages.reduce((sum, p) => sum + (p.items?.length || 0), 0);
return loaded < lastPage.total ? pages.length + 1 : undefined;
},
staleTime: 30_000,
});
const allItems = (commentsQuery.data?.pages || []).flatMap(p => p.items || []);
const [newContent, setNewContent] = React.useState('');
const [editingId, setEditingId] = React.useState<number | null>(null);
const [editContent, setEditContent] = React.useState('');
const [replyTo, setReplyTo] = React.useState<number | null>(null);
const [errorMsg, setErrorMsg] = React.useState<string | null>(null);
const [canRequestUnban, setCanRequestUnban] = React.useState<boolean>(false);
const createMut = useMutation({
mutationFn: (body: { content: string; parent_id?: number | null }) => createComment({ target_type: targetType, target_id: targetId, content: body.content, parent_id: body.parent_id }),
onSuccess: async (created) => {
setNewContent('');
setReplyTo(null);
setErrorMsg(null);
await queryClient.invalidateQueries({ queryKey: ['comments', targetType, targetId] });
if ((created as any)?.status === 'hidden') {
setErrorMsg('Váš komentář čeká na schválení (automatická moderace).');
}
try { window.dispatchEvent(new CustomEvent('engagement:refresh')); } catch {}
},
onError: (e: any) => {
const msg = e?.response?.data?.error || 'Nepodařilo se odeslat komentář';
setErrorMsg(msg);
if ((e?.response?.status || 0) === 403) setCanRequestUnban(true);
}
});
const updateMut = useMutation({
mutationFn: (args: { id: number; content: string }) => updateComment(args.id, { content: args.content }),
onSuccess: async () => {
setEditingId(null);
setEditContent('');
await queryClient.invalidateQueries({ queryKey: ['comments', targetType, targetId] });
},
});
const deleteMut = useMutation({
mutationFn: (id: number) => deleteComment(id),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['comments', targetType, targetId] });
},
});
const reactMut = useMutation({
mutationFn: (args: { id: number; type: string }) => reactComment(args.id, args.type),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['comments', targetType, targetId] });
},
});
const unreactMut = useMutation({
mutationFn: (id: number) => unreactComment(id),
onSuccess: async () => {
await queryClient.invalidateQueries({ queryKey: ['comments', targetType, targetId] });
},
});
const unbanMut = useMutation({
mutationFn: (message: string) => requestUnban(message),
onSuccess: () => {
setCanRequestUnban(false);
setErrorMsg('Žádost o odblokování odeslána.');
}
});
const reportMut = useMutation({
mutationFn: (args: { id: number; reason?: string }) => reportComment(args.id, args.reason),
onSuccess: async () => {
setErrorMsg('Děkujeme za nahlášení. Moderátor se na komentář podívá.');
},
});
const canEdit = (c: CommentItem) => {
if (!user) return false;
if (user.role === 'admin') return true;
return Number(user.id) === Number(c.user?.id);
};
const minChars = 6;
// Build simple threaded structure
const byParent: Record<string, CommentItem[]> = React.useMemo(() => {
const map: Record<string, CommentItem[]> = {};
for (const c of allItems) {
const key = String(c.parent_id || 0);
(map[key] = map[key] || []).push(c);
}
return map;
}, [allItems]);
const ReactionBar: React.FC<{ c: CommentItem }> = ({ c }) => {
const options: { key: string; label: string }[] = [
{ key: 'thumbs_up', label: '👍' },
{ key: 'heart', label: '❤️' },
{ key: 'smile', label: '😀' },
{ key: 'surprised', label: '😮' },
{ key: 'thumbs_down', label: '👎' },
];
const counts = c.reactions || {};
const active = c.my_reaction;
return (
<HStack spacing={2} mt={1}>
{options.map((o) => (
<Button key={o.key} size="xs" variant={active === o.key ? 'solid' : 'outline'} onClick={() => {
if (!isAuthenticated) return;
if (active === o.key) unreactMut.mutate(c.id); else reactMut.mutate({ id: c.id, type: o.key });
}}>
<HStack spacing={1}><Text as="span">{o.label}</Text><Text as="span" fontSize="xs">{counts[o.key] || 0}</Text></HStack>
</Button>
))}
</HStack>
);
};
const renderThread = (parentId: number | null, depth = 0) => {
const list = byParent[String(parentId || 0)] || [];
return (
<VStack align="stretch" spacing={3} pl={depth ? 6 : 0}>
{list.map((c) => (
<HStack key={c.id} align="start" spacing={3} borderWidth="1px" borderColor={border} borderRadius="md" p={3}>
<Avatar name={displayName(c.user)} size="sm" src={(c as any)?.user?.avatar_url || undefined} />
<VStack align="stretch" spacing={1} flex={1}>
<HStack justify="space-between">
<HStack spacing={2}>
<Text fontWeight="600">{displayName(c.user)}</Text>
<Text fontSize="sm" color={muted}>{new Date(c.created_at).toLocaleString()}</Text>
{c.is_edited && <Text fontSize="xs" color={muted}>(upraveno)</Text>}
</HStack>
{canEdit(c) && (
<HStack spacing={1}>
<IconButton aria-label="Upravit" size="xs" variant="ghost" icon={<Pencil size={16} />} onClick={() => { setEditingId(c.id); setEditContent(c.content); }} />
<IconButton aria-label="Smazat" size="xs" variant="ghost" colorScheme="red" icon={<Trash2 size={16} />} onClick={() => deleteMut.mutate(c.id)} />
</HStack>
)}
</HStack>
{editingId === c.id ? (
<VStack align="stretch" spacing={2}>
<Textarea value={editContent} onChange={(e) => setEditContent(e.target.value)} rows={3} />
<HStack>
<Button size="sm" colorScheme="blue" onClick={() => updateMut.mutate({ id: c.id, content: editContent.trim() })} isLoading={updateMut.isPending}>Uložit</Button>
<Button size="sm" variant="ghost" onClick={() => { setEditingId(null); setEditContent(''); }}>Zrušit</Button>
</HStack>
</VStack>
) : (
<Text whiteSpace="pre-wrap">{c.content}</Text>
)}
<ReactionBar c={c} />
<HStack>
{isAuthenticated && <Button size="xs" variant="ghost" onClick={() => setReplyTo(c.id)}>Odpovědět</Button>}
{isAuthenticated && <Button size="xs" variant="ghost" colorScheme="red" onClick={() => reportMut.mutate({ id: c.id })}>Nahlásit</Button>}
{c.status === 'hidden' && <Badge colorScheme="yellow">Čeká na schválení</Badge>}
</HStack>
{/* Replies */}
{renderThread(c.id, depth + 1)}
</VStack>
</HStack>
))}
</VStack>
);
};
return (
<Box mt={6} borderWidth="1px" borderColor={border} borderRadius="lg" bg={cardBg} p={4}>
<Heading as="h3" size="md" mb={3}>Komentáře</Heading>
{commentsQuery.isLoading ? (
<HStack><Spinner size="sm" /><Text>Načítám…</Text></HStack>
) : (
<VStack align="stretch" spacing={3}>
{allItems.length === 0 && (
<Text color={muted}>Zatím žádné komentáře.</Text>
)}
{renderThread(null)}
{commentsQuery.hasNextPage && (
<Button onClick={() => commentsQuery.fetchNextPage()} isLoading={commentsQuery.isFetchingNextPage} alignSelf="center" size="sm" variant="outline">Načíst další</Button>
)}
</VStack>
)}
<Box mt={4}>
{errorMsg && (
<Text color="orange.500" fontSize="sm" mb={2}>{errorMsg}</Text>
)}
{isAuthenticated ? (
<VStack align="stretch" spacing={2}>
{replyTo && (
<HStack justify="space-between">
<Text fontSize="sm" color={muted}>Odpověď na komentář #{replyTo}</Text>
<Button size="xs" variant="ghost" onClick={() => setReplyTo(null)}>Zrušit odpověď</Button>
</HStack>
)}
<Textarea placeholder="Napište komentář…" value={newContent} onChange={(e) => setNewContent(e.target.value)} rows={3} />
<HStack>
<Button leftIcon={<Send size={16} />} colorScheme="blue" onClick={() => createMut.mutate({ content: newContent.trim(), parent_id: replyTo })} isLoading={createMut.isPending} isDisabled={newContent.trim().length < minChars}>Odeslat</Button>
<Text fontSize="sm" color={muted}>Respektujte prosím pravidla slušné diskuse.</Text>
</HStack>
{canRequestUnban && (
<HStack>
<Button size="sm" variant="outline" onClick={() => unbanMut.mutate('Prosím o odblokování komentářů. Děkuji.')}>Požádat o odblokování</Button>
</HStack>
)}
</VStack>
) : (
<Text color={muted}>Pro přidání komentáře se prosím <ChakraLink as={RouterLink} to="/login" color="blue.500">přihlaste</ChakraLink>.</Text>
)}
</Box>
</Box>
);
};
export default CommentsSection;
frontend/src/components/common/CustomRichEditor.tsx
+241 -73
View File
@@ -98,10 +98,16 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
const [cropFile, setCropFile] = useState<File | null>(null);
const [crop, setCrop] = useState<Crop>({ unit: '%', width: 80, height: 80, x: 10, y: 10 });
const [cropQuality, setCropQuality] = useState<number>(85);
const [cropMaxWidth, setCropMaxWidth] = useState<number>(1500);
const [cropMaxWidth, setCropMaxWidth] = useState<number>(1920);
const [cropProcessing, setCropProcessing] = useState(false);
const imgRef = useRef<HTMLImageElement | null>(null);
// Link modal state
const [isLinkOpen, setIsLinkOpen] = useState(false);
const [linkText, setLinkText] = useState('');
const [linkUrl, setLinkUrl] = useState('');
const linkRangeRef = useRef<{ index: number; length: number } | null>(null);
// Force white mode for better readability in admin
const borderColor = 'gray.200';
const bgColor = 'white';
@@ -163,6 +169,38 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
return toolbarConfigs[toolbar] || toolbarConfigs.full;
}, [toolbar]);
// Clean transient selection styles before saving HTML
const cleanEditorHTML = useCallback((html: string): string => {
try {
const wrapper = document.createElement('div');
wrapper.innerHTML = html || '';
const imgs = wrapper.querySelectorAll('img');
imgs.forEach((img) => {
try {
img.removeAttribute('draggable');
const style = (img.getAttribute('style') || '').trim();
if (style) {
// Remove outline, box-shadow, cursor declarations
const filtered = style
.split(';')
.map((s) => s.trim())
.filter(Boolean)
.filter((decl) => {
const k = decl.split(':')[0]?.trim().toLowerCase();
return k !== 'outline' && k !== 'box-shadow' && k !== 'cursor';
})
.join('; ');
if (filtered) img.setAttribute('style', filtered);
else img.removeAttribute('style');
}
} catch {}
});
return wrapper.innerHTML;
} catch {
return html;
}
}, []);
// Image upload handler
const handleImageUpload = useCallback(() => {
const input = document.createElement('input');
@@ -183,17 +221,50 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
}, []);
// Memoize modules to prevent Quill reinitialization
const handleLinkToolbar = useCallback(() => {
const quill = quillRef.current?.getEditor();
if (!quill) return;
const range = quill.getSelection();
const index = range ? range.index : quill.getLength();
const length = range ? range.length : 0;
linkRangeRef.current = { index, length };
const selectedText = length > 0 ? quill.getText(index, length) : '';
setLinkText(selectedText || '');
setLinkUrl('');
setIsLinkOpen(true);
}, []);
const quillModules = useMemo(() => ({
toolbar: {
container: toolbarConfig,
handlers: {
image: onImageUpload ? handleImageUpload : undefined,
link: handleLinkToolbar,
},
},
clipboard: {
matchVisual: false,
},
}), [toolbarConfig, onImageUpload, handleImageUpload]);
}), [toolbarConfig, onImageUpload, handleImageUpload, handleLinkToolbar]);
const quillFormats = useMemo(
() => [
'header',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'indent',
'align',
'link',
'image',
'color',
'background',
],
[]
);
// Localize Quill toolbar tooltips/labels to Czech
useEffect(() => {
@@ -356,10 +427,31 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
img.onload = () => {
try {
quill.insertEmbed(index, 'image', absoluteUrl, 'api');
// Set default width to 50% of editor width (for better layout)
try {
const anyQuill = quill as any;
const leafInfo = anyQuill?.getLeaf ? anyQuill.getLeaf(index) : null;
const leaf = Array.isArray(leafInfo) ? leafInfo[0] : null;
const editorWidth = quill.root?.clientWidth || 0;
const px = Math.max(50, Math.round(editorWidth * 0.5));
let targetImg: HTMLImageElement | null = null;
if (leaf && leaf.domNode && (leaf.domNode as HTMLElement).tagName === 'IMG') {
targetImg = leaf.domNode as HTMLImageElement;
}
if (!targetImg) {
targetImg = quill.root.querySelector(`img[src="${absoluteUrl}"]`) as HTMLImageElement | null;
}
if (targetImg) {
targetImg.style.width = `${px}px`;
targetImg.style.maxWidth = '100%';
targetImg.style.height = 'auto';
try { targetImg.setAttribute('width', String(px)); } catch {}
}
} catch {}
// Move cursor after the image
quill.setSelection(index + 1, 0, 'api');
// Force content change to trigger re-render
onChangeRef.current(quill.root.innerHTML);
// Persist content so default width is saved
onChangeRef.current(cleanEditorHTML(quill.root.innerHTML));
toast({ title: 'Obrázek vložen', status: 'success', duration: 2000 });
} catch (e) {
console.error('Insert after preload error:', e);
@@ -386,7 +478,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
setCropFile(null);
setCrop({ unit: '%', width: 80, height: 80, x: 10, y: 10 });
setCropQuality(85);
setCropMaxWidth(1500);
setCropMaxWidth(1920);
}
};
@@ -416,10 +508,9 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
z-index: 1000;
`;
const rect = img.getBoundingClientRect();
const editorRect = editor.root.getBoundingClientRect();
const scrollTop = editor.root.scrollTop;
const scrollLeft = editor.root.scrollLeft;
// Position relative to Quill container (parent of .ql-editor)
const editorContainer = editor.root.parentElement as HTMLElement | null;
if (!editorContainer) return null;
const sizeLabel = document.createElement('div');
sizeLabel.style.cssText = `
position: absolute;
@@ -458,12 +549,12 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
const updateHandlePositions = () => {
const rect = img.getBoundingClientRect();
const editorRect = editor.root.getBoundingClientRect();
const containerRect = editorContainer.getBoundingClientRect();
const scrollTop = editor.root.scrollTop;
const scrollLeft = editor.root.scrollLeft;
container.style.left = `${rect.left - editorRect.left + scrollLeft}px`;
container.style.top = `${rect.top - editorRect.top + scrollTop}px`;
container.style.left = `${rect.left - containerRect.left + scrollLeft}px`;
container.style.top = `${rect.top - containerRect.top + scrollTop}px`;
container.style.width = `${rect.width}px`;
container.style.height = `${rect.height}px`;
};
@@ -581,7 +672,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
isResizing = false;
document.removeEventListener('pointermove', onPointerMove);
document.removeEventListener('pointerup', onPointerUp);
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
const id = selectedImageIdRef.current;
setTimeout(() => { if (id) { try { selectImageByIdRef.current?.(id); } catch {} } }, 30);
};
@@ -594,8 +685,8 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
updateHandlePositions();
updateSizeLabel(img.offsetWidth || img.width || 0);
editor.root.style.position = 'relative';
editor.root.appendChild(container);
editorContainer.style.position = editorContainer.style.position || 'relative';
editorContainer.appendChild(container);
container.appendChild(sizeLabel);
resizeHandle = container;
@@ -798,7 +889,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
isResizing = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
};
document.addEventListener('mousemove', onMouseMove);
@@ -859,7 +950,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
if (selectedImage) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
};
@@ -880,7 +971,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
e.preventDefault();
selectedImage.remove();
deselectImage();
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
toast({ title: 'Obrázek odstraněn', status: 'info', duration: 1500 });
}
};
@@ -891,11 +982,12 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
if (rafId) cancelAnimationFrame(rafId);
rafId = requestAnimationFrame(() => {
const rect = selectedImage!.getBoundingClientRect();
const editorRect = editor.root.getBoundingClientRect();
const editorContainer = editor.root.parentElement as HTMLElement | null;
const containerRect = editorContainer ? editorContainer.getBoundingClientRect() : editor.root.getBoundingClientRect();
const scrollTop = editor.root.scrollTop;
const scrollLeft = editor.root.scrollLeft;
resizeHandle!.style.left = `${rect.left - editorRect.left + scrollLeft}px`;
resizeHandle!.style.top = `${rect.top - editorRect.top + scrollTop}px`;
resizeHandle!.style.left = `${rect.left - containerRect.left + scrollLeft}px`;
resizeHandle!.style.top = `${rect.top - containerRect.top + scrollTop}px`;
resizeHandle!.style.width = `${rect.width}px`;
resizeHandle!.style.height = `${rect.height}px`;
});
@@ -974,6 +1066,10 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
setImageFilters(defaultFilters);
if (selectedImageElement) {
applyFiltersToImage(selectedImageElement, defaultFilters);
const editor = quillRef.current?.getEditor();
if (editor) {
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
}
}, [selectedImageElement, applyFiltersToImage]);
@@ -983,6 +1079,10 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
const newFilters = { ...prev, [key]: value };
if (selectedImageElement) {
applyFiltersToImage(selectedImageElement, newFilters);
const editor = quillRef.current?.getEditor();
if (editor) {
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
}
return newFilters;
});
@@ -1041,7 +1141,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
// Update editor content
const editor = quillRef.current?.getEditor();
if (editor) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
reselectAfterContentUpdate();
@@ -1073,7 +1173,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
const editor = quillRef.current?.getEditor();
if (editor) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
// Force overlay reposition
try { editor.root.dispatchEvent(new Event('scroll')); } catch {}
}
@@ -1103,7 +1203,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
setImageWidth(finalWidth);
setManualWidth(finalWidth.toString());
if (editor) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
// Keep selection active for subsequent operations (e.g., 50% → 75%)
reselectAfterContentUpdate();
@@ -1123,7 +1223,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
setImageWidth(currentWidth);
setManualWidth('');
if (editor) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
reselectAfterContentUpdate();
toast({ title: 'Šířka resetována', status: 'info', duration: 1200 });
@@ -1169,7 +1269,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
setShowImageToolbar(false);
const editor = quillRef.current?.getEditor();
if (editor) {
onChangeRef.current(editor.root.innerHTML);
onChangeRef.current(cleanEditorHTML(editor.root.innerHTML));
}
toast({ title: 'Obrázek odstraněn', status: 'info', duration: 1500 });
}
@@ -1200,26 +1300,83 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
cleaned = cleaned.replace(pattern, 'color: #1a202c');
});
onChangeRef.current(cleaned);
onChangeRef.current(cleanEditorHTML(cleaned));
};
// Apply bullet style (disc | circle | square) to the current list
const applyBulletStyle = useCallback((style: 'disc' | 'circle' | 'square') => {
const quill = quillRef.current?.getEditor();
if (!quill) return;
const range = quill.getSelection();
if (!range) return;
const [line] = quill.getLine(range.index);
const node = (line as any)?.domNode as HTMLElement | null;
if (!node) return;
// find nearest UL
let el: HTMLElement | null = node;
while (el && el.tagName !== 'UL' && el !== quill.root) {
el = el.parentElement;
}
if (el && el.tagName === 'UL') {
(el as HTMLElement).style.listStyleType = style;
onChangeRef.current(cleanEditorHTML(quill.root.innerHTML));
}
}, [onChangeRef]);
const insertOrUpdateLink = useCallback(() => {
const quill = quillRef.current?.getEditor();
if (!quill) return;
const range = linkRangeRef.current || quill.getSelection() || { index: quill.getLength(), length: 0 };
const text = linkText?.trim() || linkUrl?.trim();
const url = linkUrl?.trim();
if (!url) {
toast({ title: 'Zadejte URL', status: 'warning', duration: 1500 });
return;
}
quill.focus();
if (range.length > 0) {
// Replace selected text with provided text and link
quill.deleteText(range.index, range.length, 'user');
quill.insertText(range.index, text || url, 'link', url, 'user');
quill.setSelection(range.index + (text || url).length, 0, 'user');
} else {
quill.insertText(range.index, text || url, 'link', url, 'user');
quill.setSelection(range.index + (text || url).length, 0, 'user');
}
onChangeRef.current(cleanEditorHTML(quill.root.innerHTML));
setIsLinkOpen(false);
setLinkText('');
setLinkUrl('');
}, [linkText, linkUrl, toast]);
return (
<Box>
{/* Editor Controls */}
{!readOnly && onImageUpload && (
<HStack mb={2} spacing={2} justify="flex-start" flexWrap="wrap">
<Button
size="sm"
leftIcon={<ImageIcon size={16} />}
colorScheme="purple"
onClick={handleImageUpload}
>
Vložit obrázek
</Button>
<Text fontSize="xs" color="gray.500">
nebo použijte tlačítko obrázku v nástrojové liště
</Text>
</HStack>
{!readOnly && (
<VStack align="stretch" spacing={1} mb={2}>
{onImageUpload && (
<HStack spacing={2} justify="flex-start" flexWrap="wrap">
<Button
size="sm"
leftIcon={<ImageIcon size={16} />}
colorScheme="purple"
onClick={handleImageUpload}
>
Vložit obrázek
</Button>
<Text fontSize="xs" color="gray.500">
nebo použijte tlačítko obrázku v nástrojové liště
</Text>
</HStack>
)}
{/* Bullet style controls */}
<HStack spacing={2} justify="flex-start" flexWrap="wrap" pt={1}>
<Text fontSize="xs" color="gray.600">Styl odrážek:</Text>
<Button size="xs" variant="outline" onClick={() => applyBulletStyle('disc')}>• plné</Button>
<Button size="xs" variant="outline" onClick={() => applyBulletStyle('circle')}>○ kruh</Button>
<Button size="xs" variant="outline" onClick={() => applyBulletStyle('square')}>▪ čtverec</Button>
</HStack>
</VStack>
)}
<Box
@@ -1293,7 +1450,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
maxHeight: '70vh',
overflowY: 'auto',
bg: 'white !important',
color: '#1a202c !important',
color: '#1a202c',
padding: '16px',
lineHeight: '1.6',
'&::-webkit-scrollbar': {
@@ -1306,9 +1463,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
bg: 'gray.400',
borderRadius: '4px',
},
'h1, h2, h3, h4, h5, h6': {
color: '#1a202c !important',
},
'h1, h2, h3, h4, h5, h6': {},
'h1': {
fontSize: '2em !important',
fontWeight: 'bold !important',
@@ -1330,17 +1485,9 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
marginBottom: '1em !important',
lineHeight: '1.4 !important',
},
'p, li, span, div': {
color: '#2d3748 !important',
},
'strong, b': {
color: '#1a202c !important',
fontWeight: 'bold !important',
},
'a': {
color: '#3182ce !important',
textDecoration: 'underline',
},
'p, li, span, div': {},
'strong, b': { fontWeight: 'bold' },
'a': { textDecoration: 'underline' },
'blockquote': {
borderLeft: '4px solid #3182ce',
paddingLeft: '16px',
@@ -1391,22 +1538,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
color: '#a0aec0 !important',
fontStyle: 'italic',
},
// Prevent white and very light text colors
'.ql-editor [style*="color: rgb(255, 255, 255)"]': {
color: '#1a202c !important',
},
'.ql-editor [style*="color: white"]': {
color: '#1a202c !important',
},
'.ql-editor [style*="color: #fff"]': {
color: '#1a202c !important',
},
'.ql-editor [style*="color: #ffffff"]': {
color: '#1a202c !important',
},
'.ql-editor [style*="color: rgb(255,255,255)"]': {
color: '#1a202c !important',
},
// Allow user-chosen colors to show. White-on-white is handled during paste/sanitize only.
}}
>
{isMounted && (
@@ -1418,6 +1550,7 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
placeholder={placeholder}
ref={quillRef}
modules={quillModules}
formats={quillFormats}
/>
)}
</Box>
@@ -1449,7 +1582,6 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
pointerEvents="auto"
onClick={(e) => { e.stopPropagation(); }}
onMouseDown={(e) => { e.stopPropagation(); }}
onMouseUp={(e) => { e.stopPropagation(); }}
css={{
'&::-webkit-scrollbar': {
width: '6px',
@@ -1783,6 +1915,42 @@ const CustomRichEditor: React.FC<CustomRichEditorProps> = ({
</Box>
)}
{/* Crop Modal */}
{/* Link Modal */}
<Modal isOpen={isLinkOpen} onClose={() => setIsLinkOpen(false)} isCentered>
<ModalOverlay />
<ModalContent maxW="lg">
<ModalHeader>Vložit odkaz</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack align="stretch" spacing={3}>
<FormControl>
<FormLabel>Text odkazu</FormLabel>
<Input
value={linkText}
onChange={(e) => setLinkText(e.target.value)}
placeholder="Zobrazovaný text (nepovinné)"
/>
</FormControl>
<FormControl isRequired>
<FormLabel>URL</FormLabel>
<Input
value={linkUrl}
onChange={(e) => setLinkUrl(e.target.value)}
placeholder="https://... nebo /cesta"
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); insertOrUpdateLink(); } }}
/>
<FormHelperText>Zadejte plný nebo relativní odkaz</FormHelperText>
</FormControl>
</VStack>
</ModalBody>
<ModalFooter>
<Button variant="ghost" mr={3} onClick={() => setIsLinkOpen(false)}>Zrušit</Button>
<Button colorScheme="blue" onClick={insertOrUpdateLink}>Vložit</Button>
</ModalFooter>
</ModalContent>
</Modal>
{/* Crop Modal */}
{/* Image Preview Modal */}
<Modal isOpen={isPreviewOpen} onClose={() => setIsPreviewOpen(false)} size="6xl" isCentered>
frontend/src/components/common/SponsorsSection.tsx
+15 -3
View File
@@ -8,6 +8,7 @@ interface Sponsor {
logo: string;
url?: string;
tier?: string;
display_order?: number;
}
interface SponsorsSectionProps {
@@ -52,6 +53,7 @@ const SponsorsSection: React.FC<SponsorsSectionProps> = ({
logo: assetUrl(s.logo_url) || '/images/sponsors/placeholder.png',
url: s.website_url || undefined,
tier: s.tier,
display_order: typeof s.display_order === 'number' ? s.display_order : undefined,
}));
setSponsors(mapped);
setLoading(false);
@@ -72,9 +74,10 @@ const SponsorsSection: React.FC<SponsorsSectionProps> = ({
sponsorsData.map((s: any, i: number) => ({
id: s.id ?? i + 1,
name: s.name || 'Sponsor',
logo: s.logo_url || s.logoUrl || s.logo || '/images/sponsors/placeholder.png',
logo: assetUrl(s.logo_url || s.logoUrl || s.logo) || '/images/sponsors/placeholder.png',
url: s.url || s.website || s.link || '#',
tier: s.tier,
display_order: typeof s.display_order === 'number' ? s.display_order : undefined,
}))
);
}
@@ -95,8 +98,17 @@ const SponsorsSection: React.FC<SponsorsSectionProps> = ({
return null;
}
const title = sponsors.find((s: any) => s.tier === 'title') || sponsors[0];
const others = sponsors.filter((s) => s !== title);
const sorted = [...sponsors].sort((a: any, b: any) => {
const at = a.tier === 'general' ? 0 : 1;
const bt = b.tier === 'general' ? 0 : 1;
if (at !== bt) return at - bt;
const ao = (a as any).display_order ?? 9999;
const bo = (b as any).display_order ?? 9999;
if (ao !== bo) return ao - bo;
return String(a.name || '').localeCompare(String(b.name || ''));
});
const title = sorted.find((s: any) => s.tier === 'general') || sorted[0];
const others = sorted.filter((s) => s !== title);
return (
<section
frontend/src/components/common/TeamLogo.tsx
+83 -5
View File
@@ -9,9 +9,11 @@ import { assetUrl } from '../../utils/url';
let __teamOverridesCache: { ts: number; data: { by_id?: Record<string, { name?: string; logo_url?: string }>; by_name?: Record<string, string> } } | null = null;
const loadTeamOverrides = async (): Promise<{ by_id?: Record<string, { name?: string; logo_url?: string }>; by_name?: Record<string, string> }> => {
const now = Date.now();
if (__teamOverridesCache && now - __teamOverridesCache.ts < 60_000) {
const TTL = 5_000;
if (__teamOverridesCache && now - __teamOverridesCache.ts < TTL) {
return __teamOverridesCache.data || {};
}
// Try fresh public endpoint first
try {
const res = await fetch(`/api/v1/public/team-logo-overrides?t=${now}`, { cache: 'no-cache' });
if (res.ok) {
@@ -20,6 +22,7 @@ const loadTeamOverrides = async (): Promise<{ by_id?: Record<string, { name?: st
return json || {};
}
} catch {}
// Fallback to static cache snapshot
try {
const res2 = await fetch('/cache/prefetch/team_logo_overrides.json', { cache: 'no-cache' });
if (res2.ok) {
@@ -28,10 +31,45 @@ const loadTeamOverrides = async (): Promise<{ by_id?: Record<string, { name?: st
return json || {};
}
} catch {}
// Final fallback: previously cached data or empty
if (__teamOverridesCache) return __teamOverridesCache.data || {};
__teamOverridesCache = { ts: now, data: {} };
return {};
};
// Normalization helpers for name-based matching
const __normalize = (s?: string) => {
let out = String(s || '');
out = out
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.toLowerCase();
out = out.replace(/[\u2012\u2013\u2014\u2015\u2212]/g, '-');
out = out.replace(/\bn\.?\b/g, ' nad ');
out = out.replace(/\bp\.?\b/g, ' pod ');
out = out.replace(/[.,!;:()\[\]{}]/g, ' ');
// Remove legal suffixes often appended to Czech organizations
out = out.replace(/[\s,]*(z\.?\s*s\.?|o\.?\s*s\.?)\s*$/g, '');
// Remove common organization phrases
const orgPhrases = [
'fotbalovy klub',
'sportovni klub',
'telovychovna jednota',
'skolni sportovni klub',
'spolek',
'fotbal',
'futsal',
];
for (const phrase of orgPhrases) {
const re = new RegExp('(^|\\b)'+ phrase + '(\\b|$)', 'g');
out = out.replace(re, ' ');
}
// Remove common short prefixes/tokens (FK, FC, MFK, TJ, SK, SFC, AFK, BFK, HFK, etc.)
out = out.replace(/\b(1\.)?\s*(sfc|afc|fc|fk|mfk|tj|sk|afk|bfk|hfk)\b\.?/g, ' ');
out = out.replace(/\s+/g, ' ').trim();
return out;
};
interface TeamLogoProps extends Omit<ImageProps, 'src'> {
teamId?: string;
teamName?: string;
@@ -70,7 +108,7 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
setLoading(true);
setError(false);
// Load admin overrides (cached)
let overrides: { by_id?: Record<string, { name?: string; logo_url?: string }> } = {};
let overrides: { by_id?: Record<string, { name?: string; logo_url?: string }>; by_name?: Record<string, string> } = {} as any;
try { overrides = await loadTeamOverrides(); } catch {}
// Prefer local club logo for own team when IDs match
if (
@@ -89,9 +127,49 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
}
}
} else {
const url = await getTeamLogo(teamId, teamName, facrLogo);
if (mounted) {
setLogoUrl(url);
// Try name-based override first if ID override not found
let appliedByName = false;
try {
const byName: Record<string, string> = (overrides as any)?.by_name || {};
if (teamName && byName && Object.keys(byName).length > 0) {
const normMap: Record<string, string> = {};
for (const k of Object.keys(byName)) { normMap[__normalize(k)] = byName[k]; }
const normTeam = __normalize(teamName);
let candidate = byName[teamName] || normMap[normTeam];
if (!candidate) {
// Suffix/containment match after normalization to handle sponsors/affixes
const entries = Object.keys(byName).map((k) => ({ keyNorm: __normalize(k), url: byName[k] }));
for (const { keyNorm, url } of entries) {
if (!keyNorm) continue;
if (normTeam.endsWith(keyNorm) || keyNorm.endsWith(normTeam)) { candidate = url; break; }
}
}
if (!candidate) {
const t1 = normTeam.split(' ')[0];
if (t1 && t1.length >= 5) {
for (const { keyNorm, url } of Object.keys(byName).map((k) => ({ keyNorm: __normalize(k), url: byName[k] }))) {
const k1 = String(keyNorm).split(' ')[0];
if (k1 === t1) { candidate = url; break; }
}
}
}
if (candidate) {
appliedByName = true;
if (mounted) {
if (typeof candidate === 'string' && candidate.startsWith('/')) {
setLogoUrl(assetUrl(candidate) || candidate);
} else {
setLogoUrl(candidate);
}
}
}
}
} catch {}
if (!appliedByName) {
const url = await getTeamLogo(teamId, teamName, facrLogo);
if (mounted) {
setLogoUrl(url);
}
}
}
} catch (e) {
frontend/src/components/editor/MyUIbrixEditor.tsx
+77 -125
View File
@@ -97,6 +97,7 @@ import {
PREDEFINED_ELEMENTS,
PredefinedElement,
} from '../../services/pageElements';
import api from '../../services/api';
import { safeDOM } from '../../services/myuibrix';
import { useAuth } from '../../contexts/AuthContext';
import { useClubTheme } from '../../contexts/ClubThemeContext';
@@ -1515,12 +1516,22 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
const handleSave = async () => {
try {
const configsToSave: PageElementConfig[] = elementOrder.map((elementName, index) => ({
// Persist ALL elements that have order, styles, or variant/visibility changes
const knownOrder = [...elementOrder];
const extraNames = Array.from(new Set([
...Object.keys(elementStyles || {}),
...Object.keys(localChanges || {}),
...Array.from(visibleElements || new Set<string>())
].filter(Boolean))).filter(name => !knownOrder.includes(name));
const allNames = [...knownOrder, ...extraNames];
const configsToSave: PageElementConfig[] = allNames.map((elementName, idx) => ({
page_type: pageType,
element_name: elementName,
variant: localChanges[elementName] || 'default',
visible: visibleElements.has(elementName),
display_order: index,
visible: visibleElements.has(elementName) || elementName === 'style-pack' || elementName === 'container',
display_order: knownOrder.includes(elementName) ? knownOrder.indexOf(elementName) : idx,
settings: {
...(configs.find(c => c.element_name === elementName)?.settings || {}),
// Persist full styles object and custom CSS
@@ -1529,7 +1540,31 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
},
}));
await batchUpdatePageElementConfigs(configsToSave);
// Try admin batch first (works for admins in dev/prod)
let saved = false;
try {
await batchUpdatePageElementConfigs(configsToSave);
saved = true;
} catch (err: any) {
// Fallback for editors (403/401): use editor preview apply endpoint
const status = err?.response?.status || err?.status;
if (status !== 401 && status !== 403) throw err;
const sessionId = `${pageType}-autosave`;
const elements = configsToSave.map(cfg => ({
element_name: cfg.element_name,
variant: cfg.variant,
visible: Boolean(cfg.visible),
display_order: Number(cfg.display_order || 0),
custom_styles: ((cfg.settings as any)?.styles) || {},
}));
await api.post(`/editor/preview/${encodeURIComponent(sessionId)}/apply`, {
page_type: pageType,
elements,
});
saved = true;
}
if (!saved) return;
toast({
title: 'Změny úspěšně uloženy!',
@@ -1637,131 +1672,48 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
document.body.style.backgroundColor = '#e2e8f0';
document.body.style.userSelect = 'none'; // Prevent text selection during editing
// Apply viewport wrapper - wrap ALL content including navbar
if (!safeDOM.querySelector('.myuibrix-viewport-wrapper')) {
// Find all chakra containers (navbar + content) using safeDOM
const allContainers = safeDOM.querySelectorAll('.chakra-container');
const pageContainer = safeDOM.querySelector('.container');
if (allContainers.length > 0 && pageContainer) {
// Create viewport wrapper
const wrapper = document.createElement('div');
wrapper.className = 'myuibrix-viewport-wrapper';
wrapper.style.cssText = `
margin: 0 auto;
transition: all 0.3s ease;
background: white;
min-height: 100vh;
position: relative;
overflow: visible;
cursor: default;
width: 100%;
max-width: 100%;
`;
// Store reference to parent and next sibling for restoration
const firstContainer = allContainers[0];
const parent = firstContainer.parentElement;
const nextSibling = firstContainer.nextSibling;
if (parent) {
parent.setAttribute('data-myuibrix-restore', 'true');
// Move all chakra containers into wrapper using safeDOM
allContainers.forEach(container => {
// Store original styles
container.setAttribute('data-myuibrix-original-maxw',
(container as HTMLElement).style.maxWidth || '');
container.setAttribute('data-myuibrix-original-width',
(container as HTMLElement).style.width || '');
// Remove max-width constraints for viewport simulation
(container as HTMLElement).style.maxWidth = 'none';
(container as HTMLElement).style.width = '100%';
// Use safe appendChild to avoid React conflicts
safeDOM.appendChild(wrapper, container);
});
// Insert wrapper back into DOM using safeDOM
if (nextSibling) {
safeDOM.insertBefore(parent, wrapper, nextSibling);
} else {
safeDOM.appendChild(parent, wrapper);
}
}
}
const wrapperEl = safeDOM.querySelector('.container') as HTMLElement | null;
if (wrapperEl) {
try { wrapperEl.classList.add('myuibrix-viewport-wrapper'); } catch {}
try { wrapperEl.setAttribute('data-myuibrix-wrapped', '1'); } catch {}
try { wrapperEl.style.width = '100%'; } catch {}
try { wrapperEl.style.maxWidth = '100%'; } catch {}
try { wrapperEl.style.transition = 'all 0.3s ease'; } catch {}
try { wrapperEl.style.margin = '0 auto'; } catch {}
try { wrapperEl.style.transform = 'none'; } catch {}
try { wrapperEl.style.transformOrigin = ''; } catch {}
}
} else {
document.body.style.paddingTop = '0';
document.body.style.backgroundColor = '';
document.body.style.userSelect = '';
// Remove viewport wrapper and restore original structure
const wrapper = safeDOM.querySelector('.myuibrix-viewport-wrapper');
if (wrapper) {
const parent = safeDOM.querySelector('[data-myuibrix-restore]');
if (parent) {
// Move all children back to parent using safeDOM
const children = Array.from(wrapper.children);
children.forEach(child => {
// Restore original styles
const originalMaxW = child.getAttribute('data-myuibrix-original-maxw');
const originalWidth = child.getAttribute('data-myuibrix-original-width');
if (originalMaxW !== null) {
(child as HTMLElement).style.maxWidth = originalMaxW;
child.removeAttribute('data-myuibrix-original-maxw');
}
if (originalWidth !== null) {
(child as HTMLElement).style.width = originalWidth;
child.removeAttribute('data-myuibrix-original-width');
}
// Use safe appendChild to avoid React conflicts
safeDOM.appendChild(parent, child as Element);
});
parent.removeAttribute('data-myuibrix-restore');
// Use safeDOM to remove wrapper
if (wrapper.parentElement) {
safeDOM.removeChild(wrapper.parentElement, wrapper);
}
}
const wrapperEl = safeDOM.querySelector('.myuibrix-viewport-wrapper') as HTMLElement | null;
if (wrapperEl) {
try { wrapperEl.classList.remove('myuibrix-viewport-wrapper'); } catch {}
try { wrapperEl.removeAttribute('data-myuibrix-wrapped'); } catch {}
try { wrapperEl.style.width = ''; } catch {}
try { wrapperEl.style.maxWidth = ''; } catch {}
try { wrapperEl.style.transition = ''; } catch {}
try { wrapperEl.style.margin = ''; } catch {}
try { wrapperEl.style.transform = ''; } catch {}
try { wrapperEl.style.transformOrigin = ''; } catch {}
}
}
return () => {
document.body.style.paddingTop = '0';
document.body.style.backgroundColor = '';
document.body.style.userSelect = '';
const wrapper = safeDOM.querySelector('.myuibrix-viewport-wrapper');
if (wrapper) {
const parent = safeDOM.querySelector('[data-myuibrix-restore]');
if (parent) {
const children = Array.from(wrapper.children);
children.forEach(child => {
const originalMaxW = child.getAttribute('data-myuibrix-original-maxw');
const originalWidth = child.getAttribute('data-myuibrix-original-width');
if (originalMaxW !== null) {
(child as HTMLElement).style.maxWidth = originalMaxW;
child.removeAttribute('data-myuibrix-original-maxw');
}
if (originalWidth !== null) {
(child as HTMLElement).style.width = originalWidth;
child.removeAttribute('data-myuibrix-original-width');
}
// Use safe appendChild to avoid React conflicts
safeDOM.appendChild(parent, child as Element);
});
parent.removeAttribute('data-myuibrix-restore');
// Use safeDOM to remove wrapper
if (wrapper.parentElement) {
safeDOM.removeChild(wrapper.parentElement, wrapper);
}
}
const wrapperEl = safeDOM.querySelector('.myuibrix-viewport-wrapper') as HTMLElement | null;
if (wrapperEl) {
try { wrapperEl.classList.remove('myuibrix-viewport-wrapper'); } catch {}
try { wrapperEl.removeAttribute('data-myuibrix-wrapped'); } catch {}
try { wrapperEl.style.width = ''; } catch {}
try { wrapperEl.style.maxWidth = ''; } catch {}
try { wrapperEl.style.transition = ''; } catch {}
try { wrapperEl.style.margin = ''; } catch {}
try { wrapperEl.style.transform = ''; } catch {}
try { wrapperEl.style.transformOrigin = ''; } catch {}
}
};
}, [isEditing]);
@@ -1822,13 +1774,13 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
top={0}
left={0}
right={0}
bgGradient={`linear(to-r, ${primaryColor}, ${primaryColor}dd)`}
bg="rgba(17, 25, 40, 0.55)"
color="white"
p={3}
zIndex={9999}
boxShadow="0 4px 20px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1)"
backdropFilter="blur(10px)"
borderBottom="1px solid rgba(255,255,255,0.1)"
zIndex={10000}
boxShadow="0 10px 30px rgba(0,0,0,0.2)"
backdropFilter="saturate(180%) blur(14px)"
borderBottom="1px solid rgba(255,255,255,0.12)"
fontFamily="var(--chakra-fonts-body)"
>
<Flex align="center" justify="space-between" maxW="100%">
@@ -1974,10 +1926,10 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
position="fixed"
left={stylePanelRight ? undefined : 0}
right={stylePanelRight ? 0 : undefined}
top={0}
top="72px"
bottom={0}
width="380px"
zIndex={9998}
zIndex={10002}
overflow="hidden"
display="flex"
flexDirection="column"
@@ -2515,7 +2467,7 @@ const MyUIbrixStyleEditor: React.FC<MyUIbrixStyleEditorProps> = ({ pageType, onC
position="fixed"
left={panelPositions.layersPanel.x === 0 ? undefined : `${panelPositions.layersPanel.x}px`}
right={panelPositions.layersPanel.x === 0 ? 4 : undefined}
top={panelPositions.layersPanel.y === 0 ? 4 : `${panelPositions.layersPanel.y}px`}
top={panelPositions.layersPanel.y === 0 ? '72px' : `${panelPositions.layersPanel.y}px`}
bottom={panelPositions.layersPanel.y === 0 ? 4 : undefined}
transform={undefined}
width={`${panelPositions.layersPanel.width}px`}
frontend/src/components/editor/MyUIbrixErrorBoundary.tsx
+20 -11
View File
@@ -107,19 +107,28 @@ class MyUIbrixErrorBoundary extends Component<Props, State> {
}
});
// Remove viewport wrapper if exists
const wrapper = document.querySelector('.myuibrix-viewport-wrapper');
// Remove/cleanup viewport wrapper if exists
const wrapper = document.querySelector('.myuibrix-viewport-wrapper') as HTMLElement | null;
if (wrapper && wrapper.parentElement) {
try {
const parent = wrapper.parentElement;
Array.from(wrapper.children).forEach(child => {
try {
parent.appendChild(child);
} catch (e) {
console.warn('Failed to move child:', e);
}
});
wrapper.remove();
const parent = wrapper.parentElement as HTMLElement;
const parentHasRestore = parent.hasAttribute('data-myuibrix-restore');
if (parentHasRestore) {
Array.from(wrapper.children).forEach(child => {
try { parent.appendChild(child); } catch (e) { console.warn('Failed to move child:', e); }
});
wrapper.remove();
parent.removeAttribute('data-myuibrix-restore');
} else {
try { wrapper.classList.remove('myuibrix-viewport-wrapper'); } catch {}
try { wrapper.removeAttribute('data-myuibrix-wrapped'); } catch {}
try { (wrapper as HTMLElement).style.width = ''; } catch {}
try { (wrapper as HTMLElement).style.maxWidth = ''; } catch {}
try { (wrapper as HTMLElement).style.transition = ''; } catch {}
try { (wrapper as HTMLElement).style.margin = ''; } catch {}
try { (wrapper as HTMLElement).style.transform = ''; } catch {}
try { (wrapper as HTMLElement).style.transformOrigin = ''; } catch {}
}
} catch (e) {
console.warn('Failed to cleanup viewport wrapper:', e);
}
frontend/src/components/engagement/AchievementsModal.tsx
+81
View File
@@ -0,0 +1,81 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
Button,
VStack,
HStack,
Text,
Badge,
Icon,
useColorModeValue,
Spinner,
} from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { getAchievements } from '../../services/engagement';
import { CheckCircle, Circle } from 'lucide-react';
export type AchievementsModalProps = {
isOpen: boolean;
onClose: () => void;
onOpenRewards?: () => void;
};
const AchievementsModal: React.FC<AchievementsModalProps> = ({ isOpen, onClose, onOpenRewards }) => {
const cardBg = useColorModeValue('gray.50', 'gray.800');
const q = useQuery({
queryKey: ['engagement', 'achievements'],
queryFn: getAchievements,
enabled: isOpen,
staleTime: 10000,
});
const items = q.data?.achievements || [];
const counters = q.data?.counters || {} as any;
return (
<Modal isOpen={isOpen} onClose={onClose} size="lg">
<ModalOverlay />
<ModalContent>
<ModalHeader>Úspěchy</ModalHeader>
<ModalCloseButton />
<ModalBody>
{q.isLoading ? (
<HStack><Spinner size="sm" /><Text>Načítám…</Text></HStack>
) : (
<VStack align="stretch" spacing={3}>
<HStack spacing={3} bg={cardBg} p={3} borderRadius="md">
<Badge colorScheme="blue">Komentáře: {counters?.comments ?? 0}</Badge>
<Badge colorScheme="green">Hlasování: {counters?.votes ?? 0}</Badge>
<Badge colorScheme={counters?.newsletter ? 'purple' : 'gray'}>Newsletter: {counters?.newsletter ? 'ANO' : 'NE'}</Badge>
</HStack>
{items.map((a: any) => (
<HStack key={a.id} spacing={3} p={2} borderWidth="1px" borderRadius="md">
<Icon as={a.achieved ? CheckCircle : Circle} color={a.achieved ? 'green.400' : 'gray.400'} />
<VStack align="start" spacing={0} flex={1}>
<Text fontWeight="600">{a.title}</Text>
<Text fontSize="sm" color="gray.500">{a.description}</Text>
</VStack>
<Badge>{a.points} bodů</Badge>
</HStack>
))}
</VStack>
)}
</ModalBody>
<ModalFooter>
{onOpenRewards && (
<Button mr={3} onClick={() => { onClose(); onOpenRewards(); }} colorScheme="blue">Odměny</Button>
)}
<Button variant="ghost" onClick={onClose}>Zavřít</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default AchievementsModal;
frontend/src/components/engagement/RewardsModal.tsx
+105
View File
@@ -0,0 +1,105 @@
import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
Button,
VStack,
HStack,
Text,
Image,
Badge,
useColorModeValue,
Spinner,
useToast,
} from '@chakra-ui/react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getRewards, redeemReward, RewardItem } from '../../services/engagement';
export type RewardsModalProps = {
isOpen: boolean;
onClose: () => void;
availablePoints?: number;
onRedeemed?: () => void;
};
const RewardsModal: React.FC<RewardsModalProps> = ({ isOpen, onClose, availablePoints = 0, onRedeemed }) => {
const cardBg = useColorModeValue('gray.50', 'gray.800');
const toast = useToast();
const qc = useQueryClient();
const q = useQuery({
queryKey: ['engagement', 'rewards'],
queryFn: getRewards,
enabled: isOpen,
staleTime: 10000,
});
const redeemMut = useMutation({
mutationFn: (id: number) => redeemReward(id),
onSuccess: async (res) => {
toast({ title: res.status === 'approved' ? 'Odměna aktivována' : 'Žádost o odměnu odeslána', status: 'success', duration: 3000 });
await qc.invalidateQueries({ queryKey: ['engagement', 'profile'] });
if (onRedeemed) onRedeemed();
},
onError: (e: any) => {
const msg = e?.response?.data?.error || 'Nepodařilo se uplatnit odměnu';
toast({ title: 'Chyba', description: msg, status: 'error', duration: 3500 });
}
});
const items = (q.data || []) as RewardItem[];
return (
<Modal isOpen={isOpen} onClose={onClose} size="lg">
<ModalOverlay />
<ModalContent>
<ModalHeader>Odměny</ModalHeader>
<ModalCloseButton />
<ModalBody>
{q.isLoading ? (
<HStack><Spinner size="sm" /><Text>Načítám…</Text></HStack>
) : (
<VStack align="stretch" spacing={3}>
<HStack spacing={3} bg={cardBg} p={3} borderRadius="md">
<Badge colorScheme="blue">Dostupné body: {availablePoints}</Badge>
</HStack>
{items.map((it) => (
<HStack key={it.id} spacing={3} p={2} borderWidth="1px" borderRadius="md" align="center">
{it.image_url && (
<Image src={it.image_url} alt={it.name} boxSize="48px" objectFit="cover" borderRadius="md" />
)}
<VStack align="start" spacing={0} flex={1}>
<Text fontWeight="600">{it.name}</Text>
<Text fontSize="sm" color="gray.500">{it.type}</Text>
</VStack>
<Badge>{it.cost_points} bodů</Badge>
<Button
size="sm"
colorScheme="blue"
onClick={() => redeemMut.mutate(it.id)}
isLoading={redeemMut.isPending}
isDisabled={availablePoints < (it.cost_points || 0)}
>
Uplatnit
</Button>
</HStack>
))}
{items.length === 0 && (
<Text color="gray.500">Zatím nejsou k dispozici žádné odměny.</Text>
)}
</VStack>
)}
</ModalBody>
<ModalFooter>
<Button variant="ghost" onClick={onClose}>Zavřít</Button>
</ModalFooter>
</ModalContent>
</Modal>
);
};
export default RewardsModal;
frontend/src/components/home/ContactMap.tsx
+39
View File
@@ -221,6 +221,14 @@ const ContactMap: React.FC<ContactMapProps> = ({
map.scrollWheelZoom.disable();
});
// Invalidate size after initial mount to ensure tiles render fully
// (use a short delay to let layout settle)
try {
setTimeout(() => {
try { map.invalidateSize(); } catch {}
}, 150);
} catch {}
} catch (error) {
console.error('Error initializing map:', error);
setLoadError('Failed to initialize map');
@@ -240,6 +248,37 @@ const ContactMap: React.FC<ContactMapProps> = ({
};
}, [isLoaded]);
// Observe container visibility to invalidate size when it becomes visible (e.g., tabs, accordions)
useEffect(() => {
if (!mapRef.current) return;
const el = mapRef.current;
const observer = new IntersectionObserver((entries) => {
const e = entries[0];
if (e && e.isIntersecting && mapInstanceRef.current) {
try {
// Next frame ensures correct layout measurement
requestAnimationFrame(() => {
try { mapInstanceRef.current!.invalidateSize(); } catch {}
});
} catch {}
}
}, { root: null, threshold: 0.1 });
observer.observe(el);
return () => observer.disconnect();
}, [isLoaded]);
// Observe container resize to keep Leaflet in sync with layout changes
useEffect(() => {
if (!mapRef.current || !('ResizeObserver' in window)) return;
const el = mapRef.current;
const ro = new ResizeObserver(() => {
if (!mapInstanceRef.current) return;
try { mapInstanceRef.current.invalidateSize(); } catch {}
});
ro.observe(el);
return () => ro.disconnect();
}, [isLoaded]);
// Update center/zoom and marker when coords/zoom change
useEffect(() => {
if (!mapInstanceRef.current || !L) return;
frontend/src/components/home/MerchSection.tsx
+56 -1
View File
@@ -1,9 +1,10 @@
import { Box, SimpleGrid, Heading, Text, useColorModeValue, HStack, Button, Link, Badge } from '@chakra-ui/react';
import { useEffect, useState } from 'react';
import HorizontalScroller from '../ui/HorizontalScroller';
import { getClothing, ClothingItem } from '../../services/clothing';
import { Link as RouterLink } from 'react-router-dom';
const MerchSection: React.FC = () => {
const MerchSection: React.FC<{ variant?: 'grid' | 'carousel' | 'featured' | 'list' }> = ({ variant = 'grid' }) => {
const [items, setItems] = useState<ClothingItem[]>([]);
const [loading, setLoading] = useState(true);
const cardBg = useColorModeValue('white', 'gray.800');
@@ -26,6 +27,59 @@ const MerchSection: React.FC = () => {
if (loading || items.length === 0) return null;
// Carousel variant: horizontally scrollable cards
if (variant === 'carousel') {
return (
<Box>
<HStack justify="space-between" mb={3}>
<Heading as="h3" size="md">Oblečení týmu</Heading>
<Link as={RouterLink} to="/obleceni">
<Button size="sm" variant="outline" colorScheme="blue">Zobrazit vše</Button>
</Link>
</HStack>
<HorizontalScroller draggable>
{items.map((it) => (
<Box key={it.id} minW={{ base: '70%', md: '45%', lg: '28%' }}>
<a
href={it.url || '/obleceni'}
target={it.url ? "_blank" : undefined}
rel={it.url ? "noreferrer noopener" : undefined}
>
<Box
className="card"
bg={cardBg}
borderRadius="xl"
overflow="hidden"
boxShadow="sm"
borderWidth="1px"
transition="all 0.2s"
_hover={{ transform: 'translateY(-4px)', boxShadow: 'md' }}
>
<Box
aria-hidden
height={{ base: 140, md: 180 }}
bgSize="cover"
bgPos="center"
style={{ backgroundImage: `url(${it.image_url})` }}
/>
<Box p={3} borderTopWidth="1px">
<Text noOfLines={1} fontWeight="semibold" fontSize="sm">{it.title}</Text>
{it.price && it.price > 0 && (
<Badge colorScheme="blue" mt={1} fontSize="xs">
{it.price} {it.currency || 'Kč'}
</Badge>
)}
</Box>
</Box>
</a>
</Box>
))}
</HorizontalScroller>
</Box>
);
}
// Grid/list (default) variant
return (
<Box>
<HStack justify="space-between" mb={3}>
@@ -43,6 +97,7 @@ const MerchSection: React.FC = () => {
rel={it.url ? "noreferrer noopener" : undefined}
>
<Box
className="card"
bg={cardBg}
borderRadius="xl"
overflow="hidden"
frontend/src/components/home/TeamScroller.tsx
+7
View File
@@ -2,6 +2,7 @@ import { Box, Heading, HStack, VStack, Image, Text, useColorModeValue } from '@c
import { useQuery } from '@tanstack/react-query';
import { getPlayers, Player } from '../../services/players';
import { assetUrl } from '../../utils/url';
import { getCountryFlag, translateNationality } from '../../utils/nationality';
const TeamScroller: React.FC = () => {
const { data } = useQuery({ queryKey: ['players'], queryFn: getPlayers });
@@ -17,6 +18,12 @@ const TeamScroller: React.FC = () => {
<Image src={assetUrl(p.image_url) || '/logo192.png'} alt={p.first_name + ' ' + p.last_name} w="140px" h="140px" objectFit="cover" borderRadius="lg" fallbackSrc="/dist/img/logo-club-empty.svg" />
<Text fontWeight="bold" textAlign="center">{p.first_name} {p.last_name}</Text>
<Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{p.position}</Text>
{p.nationality ? (
<HStack spacing={2}>
<Text as="span" fontSize="lg">{getCountryFlag(p.nationality)}</Text>
<Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>{translateNationality(p.nationality)}</Text>
</HStack>
) : null}
{p.date_of_birth ? (
<Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>
Věk: {(() => { const a = calculateAge(p.date_of_birth); return a != null ? `${a} ${czYears(a)}` : '' })()}
frontend/src/components/home/VideosSection.tsx
+15 -2
View File
@@ -65,6 +65,13 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
const limit = Math.max(1, Math.min(12, settings?.videos_limit ?? 6));
const youtubeUrl = (settings as any)?.youtube_url || (settings as any)?.social_youtube || null;
useEffect(() => {
try {
if (isOpen) onClose();
setSelectedVideo(null);
} catch {}
}, [style, isOpen, onClose]);
useEffect(() => {
let canceled = false;
const run = async () => {
@@ -137,6 +144,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
return (
<Box
className="video-card card"
bg={cardBg}
borderRadius="xl"
overflow="hidden"
@@ -169,6 +177,9 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
alt={it.title}
width="100%"
height="100%"
loading="lazy"
decoding="async"
referrerPolicy="origin-when-cross-origin"
style={{ objectFit: 'cover' }}
/>
) : (
@@ -259,7 +270,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
</Button>
</Link>
</Box>
<HorizontalScroller draggable>
<HorizontalScroller key={`videos-hs-${style}-${items.length}`} draggable>
{items.map((it, idx) => (
<Box
key={it.key}
@@ -285,6 +296,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
title={selectedVideo.title}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
style={{ borderRadius: '8px' }}
/>
@@ -306,7 +318,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
<Button size="sm" variant="outline" colorScheme="blue">Více videí</Button>
</Link>
</Box>
<SimpleGrid columns={cols} spacing={4}>
<SimpleGrid key={`videos-grid-${style}-${items.length}`} columns={cols} spacing={4}>
{items.map((it, idx) => (
<Card key={it.key} it={it} idx={idx} />
))}
@@ -325,6 +337,7 @@ const VideosSection: React.FC<Props> = ({ videos, variant }) => {
title={selectedVideo.title}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
style={{ borderRadius: '8px' }}
/>
frontend/src/components/layout/Footer.tsx
+15 -3
View File
@@ -27,6 +27,8 @@ interface Sponsor {
logo_url?: string;
website_url?: string;
is_active?: boolean;
tier?: string;
display_order?: number;
}
const Footer: React.FC = () => {
@@ -114,7 +116,17 @@ const Footer: React.FC = () => {
spacing={6}
w="full"
>
{sponsors.map((sponsor) => (
{[...sponsors]
.sort((a: any, b: any) => {
const at = a?.tier === 'general' ? 0 : 1;
const bt = b?.tier === 'general' ? 0 : 1;
if (at !== bt) return at - bt;
const ao = (a as any)?.display_order ?? 9999;
const bo = (b as any)?.display_order ?? 9999;
if (ao !== bo) return ao - bo;
return String(a?.name || '').localeCompare(String(b?.name || ''));
})
.map((sponsor) => (
<Link
key={sponsor.id}
href={sponsor.website_url || '#'}
@@ -137,7 +149,6 @@ const Footer: React.FC = () => {
maxH="60px"
maxW="full"
objectFit="contain"
filter="brightness(0) invert(1)"
opacity={0.9}
_hover={{ opacity: 1 }}
/>
@@ -246,10 +257,11 @@ const Footer: React.FC = () => {
{/* Left: MyClub Logo & Text */}
<HStack spacing={4} align="center">
<Image
src="https://myclub.sportcreative.eu/logo.svg"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Crect width='200' height='50' fill='%23007bff'/%3E%3Ctext x='10' y='35' font-family='Arial' font-size='24' font-weight='bold' fill='%23fff'%3EMyClub%3C/text%3E%3C/svg%3E"
alt="MyClub"
h={{ base: '32px', md: '40px' }}
w="auto"
loading="lazy"
fallbackSrc="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50'%3E%3Ctext x='10' y='35' font-family='Arial' font-size='24' font-weight='bold' fill='%23000'%3EMyClub%3C/text%3E%3C/svg%3E"
/>
<VStack align="start" spacing={0}>
frontend/src/components/layout/MainLayout.tsx
+7 -7
View File
@@ -15,7 +15,7 @@ interface MainLayoutProps {
export const MainLayout: React.FC<MainLayoutProps> = ({ children, headerInsideContainer = false, showSponsorsSection = true }) => {
const [showTop, setShowTop] = useState(false);
const { getStyles, getVariant } = useAllPageElementConfigs('homepage');
const { getStyles, getVariant, refreshKey } = useAllPageElementConfigs('homepage');
const headerVariant = getVariant('header', 'unified');
const sponsorsVariant = getVariant('sponsors', 'grid');
const footerVariant = getVariant('footer', 'standard');
@@ -46,7 +46,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children, headerInsideCo
{headerIsInside ? (
<>
<Container maxW="container.xl" py={8}>
<Box as="header" data-element="header" data-variant={headerVariant} style={{ ...getStyles('header') }}>
<Box key={`header-${refreshKey}-${headerVariant}`} as="header" data-element="header" data-variant={headerVariant} style={{ ...getStyles('header') }}>
{headerVariant === 'sparta_navbar' ? (
<SpartaNavbar />
) : (
@@ -56,17 +56,17 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children, headerInsideCo
{children}
</Container>
{showSponsorsSection && (
<Box data-element="sponsors" data-variant={sponsorsVariant} style={{ ...getStyles('sponsors') }}>
<Box key={`sponsors-${refreshKey}-${sponsorsVariant}`} data-element="sponsors" data-variant={sponsorsVariant} style={{ ...getStyles('sponsors') }}>
<SponsorsSection />
</Box>
)}
<Box as="footer" data-element="footer" data-variant={footerVariant} style={{ ...getStyles('footer') }}>
<Box key={`footer-${refreshKey}-${footerVariant}`} as="footer" data-element="footer" data-variant={footerVariant} style={{ ...getStyles('footer') }}>
<Footer />
</Box>
</>
) : (
<>
<Box as="header" data-element="header" data-variant={headerVariant} style={{ ...getStyles('header') }}>
<Box key={`header-${refreshKey}-${headerVariant}`} as="header" data-element="header" data-variant={headerVariant} style={{ ...getStyles('header') }}>
{headerVariant === 'sparta_navbar' ? (
<SpartaNavbar />
) : (
@@ -78,11 +78,11 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children, headerInsideCo
</Container>
{/* Global sponsors section across front-facing pages */}
{showSponsorsSection && (
<Box data-element="sponsors" data-variant={sponsorsVariant} style={{ ...getStyles('sponsors') }}>
<Box key={`sponsors-${refreshKey}-${sponsorsVariant}`} data-element="sponsors" data-variant={sponsorsVariant} style={{ ...getStyles('sponsors') }}>
<SponsorsSection />
</Box>
)}
<Box as="footer" data-element="footer" data-variant={footerVariant} style={{ ...getStyles('footer') }}>
<Box key={`footer-${refreshKey}-${footerVariant}`} as="footer" data-element="footer" data-variant={footerVariant} style={{ ...getStyles('footer') }}>
<Footer />
</Box>
</>
frontend/src/components/newsletter/NewsletterSubscribe.tsx
+2
View File
@@ -45,6 +45,7 @@ export default function NewsletterSubscribe() {
duration: 7000,
isClosable: true,
});
try { window.dispatchEvent(new CustomEvent('engagement:refresh')); } catch {}
reset();
} catch (error) {
const errorMessage = error instanceof Error ? error.message : 'Nastala chyba při přihlašování k odběru';
@@ -85,6 +86,7 @@ export default function NewsletterSubscribe() {
id="email"
type="email"
placeholder="Váš e-mail"
autoComplete="email"
{...register('email', {
required: 'E-mail je povinný',
pattern: {
frontend/src/components/pack/MatchesSlider.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ const MatchesSlider: React.FC<{
{looped.map((m, idx) => (
<div
key={`${m.id || idx}-ticker`}
className="match-card"
className="match-card card"
onClick={(e) => { e.preventDefault(); onMatchClick?.(m, current?.name); }}
style={{ cursor: onMatchClick ? 'pointer' as const : 'default' as const }}
>
@@ -114,7 +114,7 @@ const MatchesSlider: React.FC<{
{(current?.matches || []).map((m, idx) => (
<div
key={m.id || idx}
className="match-card"
className="match-card card"
onClick={(e) => { e.preventDefault(); onMatchClick?.(m, current?.name); }}
style={{ cursor: onMatchClick ? 'pointer' as const : 'default' as const }}
>
frontend/src/components/polls/PollCard.tsx
+35 -9
View File
@@ -105,8 +105,8 @@ const PollCard: React.FC<PollCardProps> = ({
return votePoll(poll.id, {
option_ids: selectedOptions,
session_token: sessionToken,
voter_name: isAuthenticated ? (voterName || (user as any)?.name || undefined) : undefined,
voter_email: isAuthenticated ? (voterEmail || user?.email || undefined) : undefined,
voter_name: voterName || (isAuthenticated ? (user as any)?.name : undefined),
voter_email: voterEmail || (isAuthenticated ? user?.email : undefined),
});
},
onSuccess: async () => {
@@ -149,6 +149,10 @@ const PollCard: React.FC<PollCardProps> = ({
if (onVoteSuccess) {
onVoteSuccess();
}
try {
window.dispatchEvent(new CustomEvent('engagement:refresh'));
} catch {}
},
onError: (error: any) => {
toast({
@@ -540,6 +544,7 @@ const PollCard: React.FC<PollCardProps> = ({
<FormLabel fontSize="sm">Jméno (volitelné)</FormLabel>
<Input
size="sm"
autoComplete="name"
value={voterName || ((user as any)?.name || '')}
onChange={(e) => setVoterName(e.target.value)}
/>
@@ -549,19 +554,40 @@ const PollCard: React.FC<PollCardProps> = ({
<Input
size="sm"
type="email"
autoComplete="email"
value={voterEmail || (user?.email || '')}
onChange={(e) => setVoterEmail(e.target.value)}
/>
</FormControl>
</VStack>
) : (
<Text fontSize="sm" color="gray.500">
Chcete připojit své jméno k hlasu?{' '}
<Link as={RouterLink} color="blue.500" to="/login" state={{ from: location }}>
Přihlaste se
</Link>
.
</Text>
<VStack spacing={3} align="stretch">
<FormControl>
<FormLabel fontSize="sm">Jméno (volitelné)</FormLabel>
<Input
size="sm"
autoComplete="name"
value={voterName}
onChange={(e) => setVoterName(e.target.value)}
/>
</FormControl>
<FormControl>
<FormLabel fontSize="sm">E-mail (volitelné)</FormLabel>
<Input
size="sm"
type="email"
autoComplete="email"
value={voterEmail}
onChange={(e) => setVoterEmail(e.target.value)}
/>
</FormControl>
<Text fontSize="xs" color="gray.500">
Přihlášením se jméno a e-mail doplní automaticky.{' '}
<Link as={RouterLink} color="blue.500" to="/login" state={{ from: location }}>
Přihlásit se
</Link>
</Text>
</VStack>
)}
<Button
frontend/src/components/widgets/MatchesWidget.tsx
+67 -3
View File
@@ -11,6 +11,7 @@ import { cs } from 'date-fns/locale';
import { Match } from '../../types';
import { fetchTeamLogoOverrides } from '@/services/adminMatches';
import { assetUrl, sanitizeClubName } from '@/utils/url';
import { getCompetitionAliasesPublic, CompetitionAlias } from '@/services/competitionAliases';
import { TeamLogo } from '../common/TeamLogo';
import '../../styles/logos.css';
@@ -34,7 +35,11 @@ const formatMatchDate = (dateString: string) => {
}
};
export const MatchesWidget = () => {
export const MatchesWidget: React.FC<{
categoryName?: string;
hideEmpty?: boolean;
onMatchClick?: (match: Match) => void;
}> = ({ categoryName, hideEmpty = false, onMatchClick }) => {
const toast = useToast();
const [email, setEmail] = useState<string>('');
const [prefWeekly, setPrefWeekly] = useState<boolean>(true);
@@ -162,6 +167,53 @@ export const MatchesWidget = () => {
},
});
// Load competition aliases (public) to resolve competition names to unified aliases like "U11"
const aliasesQ = useQuery<{ list: CompetitionAlias[] }>({
queryKey: ['competition-aliases-public'],
queryFn: async () => {
try {
const list = await getCompetitionAliasesPublic();
return { list };
} catch {
return { list: [] as CompetitionAlias[] };
}
},
staleTime: 5 * 60 * 1000,
});
const normalize = (s?: string) => String(s || '')
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '')
.replace(/\s+/g, ' ')
.trim()
.toLowerCase();
const resolveAliasName = React.useCallback((compName?: string): string => {
const name = String(compName || '');
const normComp = normalize(name);
const list = aliasesQ.data?.list || [];
for (const a of list) {
const aAlias = normalize(a.alias);
const aOrig = normalize(a.original_name || '');
if (aOrig && (normComp.includes(aOrig) || aOrig.includes(normComp))) return a.alias;
if (aAlias && (normComp.includes(aAlias) || aAlias.includes(normComp))) return a.alias;
}
return name;
}, [aliasesQ.data?.list]);
const filteredMatches = React.useMemo(() => {
if (!Array.isArray(matches)) return [] as Match[];
if (!categoryName) return matches as Match[];
const needle = normalize(categoryName);
return (matches as Match[]).filter((m: any) => {
const comp = String((m as any).competitionName || '');
const resolved = resolveAliasName(comp);
const nComp = normalize(comp);
const nResolved = normalize(resolved);
return nResolved.includes(needle) || nComp.includes(needle);
});
}, [matches, categoryName, resolveAliasName]);
if (isLoading) {
return (
<Widget title="Nadcházející zápasy">
@@ -184,7 +236,8 @@ export const MatchesWidget = () => {
);
}
if (!matches || matches.length === 0) {
if (!filteredMatches || filteredMatches.length === 0) {
if (hideEmpty) return null;
return (
<Widget title="Nadcházející zápasy">
<VStack p={4} spacing={4}>
@@ -200,7 +253,7 @@ export const MatchesWidget = () => {
return (
<Widget title="Nadcházející zápasy">
<VStack spacing={{ base: 2, md: 3 }} align="stretch" divider={<Box borderBottomWidth="1px" borderColor="gray.200" />}>
{matches.map((match) => (
{filteredMatches.map((match) => (
<Box
key={match.id}
p={{ base: 3, md: 4 }}
@@ -209,6 +262,17 @@ export const MatchesWidget = () => {
borderRadius="lg"
transition="background-color 0.2s"
shadow="sm"
cursor={onMatchClick ? 'pointer' : 'default'}
role={onMatchClick ? 'button' as any : undefined}
tabIndex={onMatchClick ? 0 : undefined}
onClick={() => onMatchClick && onMatchClick(match)}
onKeyDown={(e) => {
if (!onMatchClick) return;
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onMatchClick(match);
}
}}
>
<HStack justify="space-between" mb={1} spacing={2} flexWrap="wrap">
<Text
frontend/src/data/defaultElements.ts
+1 -1
View File
@@ -100,7 +100,7 @@ export const DEFAULT_HOMEPAGE_ELEMENTS: PageElementConfig[] = [
{
page_type: 'homepage',
element_name: 'videos',
variant: 'grid',
variant: 'carousel',
visible: false,
display_order: 7,
settings: {},
frontend/src/hooks/usePageElementConfig.ts
+185 -5
View File
@@ -73,6 +73,7 @@ export const useAllPageElementConfigs = (pageType: string) => {
// Helper: inject style properties for each element into a single <style> tag
// This ensures style applying/previewing works even if components do not spread getStyles()
// Uses ultra-high specificity to override any component CSS
const updateInjectedStyleProps = (stylesMap: Record<string, Record<string, any>>) => {
try {
const styleId = 'myuibrix-style-props';
@@ -80,56 +81,190 @@ export const useAllPageElementConfigs = (pageType: string) => {
if (!styleEl) {
styleEl = document.createElement('style');
styleEl.id = styleId;
// Insert at end of head for maximum specificity
document.head.appendChild(styleEl);
}
const cssBlocks: string[] = [];
const toPx = (v: any): string => (typeof v === 'number' ? `${v}px` : `${v}`);
const addDecl = (decls: string[], prop: string, val: any, unit?: 'px' | '') => {
if (val === undefined || val === null || val === '') return;
const needsPx = unit === 'px';
const v = typeof val === 'number' && needsPx ? `${val}px` : `${val}`;
decls.push(`${prop}: ${v} !important;`);
};
const toKebab = (key: string) => key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
Object.entries(stylesMap || {}).forEach(([name, st]) => {
if (!st || typeof st !== 'object') return;
const decls: string[] = [];
// Track known keys we handle explicitly so we can inject the rest generically
const handled = new Set<string>();
addDecl(decls, 'font-family', st.fontFamily);
handled.add('fontFamily');
addDecl(decls, 'font-size', st.fontSize, 'px');
handled.add('fontSize');
addDecl(decls, 'font-weight', st.fontWeight);
handled.add('fontWeight');
addDecl(decls, 'line-height', st.lineHeight);
handled.add('lineHeight');
addDecl(decls, 'letter-spacing', st.letterSpacing, 'px');
handled.add('letterSpacing');
addDecl(decls, 'text-transform', st.textTransform);
handled.add('textTransform');
addDecl(decls, 'color', st.color);
handled.add('color');
addDecl(decls, 'background-color', st.backgroundColor);
handled.add('backgroundColor');
addDecl(decls, 'padding-top', st.paddingTop, 'px');
handled.add('paddingTop');
addDecl(decls, 'padding-right', st.paddingRight, 'px');
handled.add('paddingRight');
addDecl(decls, 'padding-bottom', st.paddingBottom, 'px');
handled.add('paddingBottom');
addDecl(decls, 'padding-left', st.paddingLeft, 'px');
handled.add('paddingLeft');
addDecl(decls, 'margin-top', st.marginTop, 'px');
handled.add('marginTop');
addDecl(decls, 'margin-right', st.marginRight, 'px');
handled.add('marginRight');
addDecl(decls, 'margin-bottom', st.marginBottom, 'px');
handled.add('marginBottom');
addDecl(decls, 'margin-left', st.marginLeft, 'px');
handled.add('marginLeft');
// width/height may be numbers (px) or strings (%, auto, etc.)
if (st.width !== undefined) addDecl(decls, 'width', st.width, typeof st.width === 'number' ? 'px' : '');
handled.add('width');
if (st.height !== undefined) addDecl(decls, 'height', st.height, typeof st.height === 'number' ? 'px' : '');
handled.add('height');
addDecl(decls, 'display', st.display);
handled.add('display');
addDecl(decls, 'grid-template-columns', st.gridTemplateColumns);
handled.add('gridTemplateColumns');
addDecl(decls, 'grid-template-rows', st.gridTemplateRows);
handled.add('gridTemplateRows');
addDecl(decls, 'grid-auto-flow', st.gridAutoFlow);
handled.add('gridAutoFlow');
addDecl(decls, 'grid-column-gap', st.gridColumnGap, 'px');
handled.add('gridColumnGap');
addDecl(decls, 'grid-row-gap', st.gridRowGap, 'px');
handled.add('gridRowGap');
addDecl(decls, 'align-items', st.alignItems);
handled.add('alignItems');
addDecl(decls, 'justify-items', st.justifyItems);
handled.add('justifyItems');
// Additional commonly used properties
addDecl(decls, 'gap', st.gap, 'px');
handled.add('gap');
// Borders
addDecl(decls, 'border', st.border);
handled.add('border');
if (st.borderTop !== undefined) addDecl(decls, 'border-top', st.borderTop);
handled.add('borderTop');
if (st.borderRight !== undefined) addDecl(decls, 'border-right', st.borderRight);
handled.add('borderRight');
if (st.borderBottom !== undefined) addDecl(decls, 'border-bottom', st.borderBottom);
handled.add('borderBottom');
if (st.borderLeft !== undefined) addDecl(decls, 'border-left', st.borderLeft);
handled.add('borderLeft');
if (st.borderRadius !== undefined) addDecl(decls, 'border-radius', st.borderRadius, typeof st.borderRadius === 'number' ? 'px' : '');
handled.add('borderRadius');
if (st.borderTopLeftRadius !== undefined) addDecl(decls, 'border-top-left-radius', st.borderTopLeftRadius, typeof st.borderTopLeftRadius === 'number' ? 'px' : '');
handled.add('borderTopLeftRadius');
if (st.borderTopRightRadius !== undefined) addDecl(decls, 'border-top-right-radius', st.borderTopRightRadius, typeof st.borderTopRightRadius === 'number' ? 'px' : '');
handled.add('borderTopRightRadius');
if (st.borderBottomLeftRadius !== undefined) addDecl(decls, 'border-bottom-left-radius', st.borderBottomLeftRadius, typeof st.borderBottomLeftRadius === 'number' ? 'px' : '');
handled.add('borderBottomLeftRadius');
if (st.borderBottomRightRadius !== undefined) addDecl(decls, 'border-bottom-right-radius', st.borderBottomRightRadius, typeof st.borderBottomRightRadius === 'number' ? 'px' : '');
handled.add('borderBottomRightRadius');
// Effects
addDecl(decls, 'box-shadow', st.boxShadow);
handled.add('boxShadow');
addDecl(decls, 'opacity', st.opacity);
handled.add('opacity');
// Positioning
addDecl(decls, 'position', st.position);
handled.add('position');
if (st.top !== undefined) addDecl(decls, 'top', st.top, typeof st.top === 'number' ? 'px' : '');
handled.add('top');
if (st.right !== undefined) addDecl(decls, 'right', st.right, typeof st.right === 'number' ? 'px' : '');
handled.add('right');
if (st.bottom !== undefined) addDecl(decls, 'bottom', st.bottom, typeof st.bottom === 'number' ? 'px' : '');
handled.add('bottom');
if (st.left !== undefined) addDecl(decls, 'left', st.left, typeof st.left === 'number' ? 'px' : '');
handled.add('left');
addDecl(decls, 'z-index', st.zIndex);
handled.add('zIndex');
// Overflow
addDecl(decls, 'overflow', st.overflow);
handled.add('overflow');
addDecl(decls, 'overflow-x', st.overflowX);
handled.add('overflowX');
addDecl(decls, 'overflow-y', st.overflowY);
handled.add('overflowY');
// Alignment (flex/grid)
addDecl(decls, 'justify-content', st.justifyContent);
handled.add('justifyContent');
addDecl(decls, 'align-content', st.alignContent);
handled.add('alignContent');
addDecl(decls, 'justify-self', st.justifySelf);
handled.add('justifySelf');
addDecl(decls, 'align-self', st.alignSelf);
handled.add('alignSelf');
addDecl(decls, 'place-items', st.placeItems);
handled.add('placeItems');
addDecl(decls, 'place-content', st.placeContent);
handled.add('placeContent');
addDecl(decls, 'place-self', st.placeSelf);
handled.add('placeSelf');
// Sizing constraints
if (st.maxWidth !== undefined) addDecl(decls, 'max-width', st.maxWidth, typeof st.maxWidth === 'number' ? 'px' : '');
handled.add('maxWidth');
if (st.minWidth !== undefined) addDecl(decls, 'min-width', st.minWidth, typeof st.minWidth === 'number' ? 'px' : '');
handled.add('minWidth');
if (st.maxHeight !== undefined) addDecl(decls, 'max-height', st.maxHeight, typeof st.maxHeight === 'number' ? 'px' : '');
handled.add('maxHeight');
if (st.minHeight !== undefined) addDecl(decls, 'min-height', st.minHeight, typeof st.minHeight === 'number' ? 'px' : '');
handled.add('minHeight');
// Text alignment
addDecl(decls, 'text-align', st.textAlign);
handled.add('textAlign');
// Generic fallback: inject any additional properties provided in styles
Object.keys(st).forEach((k) => {
if (k === 'customCSS') return;
if (!handled.has(k)) {
const val = (st as any)[k];
if (val !== undefined && val !== null && val !== '') {
addDecl(decls, toKebab(k), val);
}
}
});
if (decls.length > 0) {
cssBlocks.push(`[data-element="${name}"] { ${decls.join(' ')} }`);
// Ultra-high specificity selector: body > .container [data-element="name"]
// This overrides most component CSS without needing to modify every component
cssBlocks.push(`
body [data-element="${name}"],
.container [data-element="${name}"],
[data-element="${name}"].chakra-box,
[data-element="${name}"].section,
[data-element="${name}"] {
${decls.join('\n ')}
}`);
}
});
styleEl.textContent = cssBlocks.join('\n');
} catch {}
styleEl.textContent = `/* MyUIbrix Dynamic Styles - Auto-generated */\n${cssBlocks.join('\n\n')}`;
// Force browser to recalculate styles
if (typeof document !== 'undefined') {
// Trigger a reflow to ensure styles are applied immediately
document.body.offsetHeight; // Read operation forces reflow
}
} catch (e) {
console.error('[MyUIbrix] Style injection failed:', e);
}
};
const loadConfigs = async () => {
@@ -282,6 +417,8 @@ export const useAllPageElementConfigs = (pageType: string) => {
const { elementName, styles: newStyles, previewMode } = event.detail;
if (previewMode) {
console.log(`[MyUIbrix] Style change received for: ${elementName}`, newStyles);
// Only update state - let React apply the styles through component rendering
// This prevents conflicts with React's virtual DOM
setStyles(prev => {
@@ -289,22 +426,65 @@ export const useAllPageElementConfigs = (pageType: string) => {
...prev,
[elementName]: newStyles
};
// Also update injected CSS for global preview application
updateInjectedStyleProps(next);
// This ensures immediate visual feedback even before React re-renders
requestAnimationFrame(() => {
updateInjectedStyleProps(next);
});
// Live-inject custom CSS if provided, with enhanced specificity
try {
const css = String((newStyles && (newStyles as any).customCSS) || '').trim();
const styleId = `custom-css-${elementName}`;
const existing = document.getElementById(styleId);
if (existing) existing.remove();
if (css) {
const style = document.createElement('style');
style.id = styleId;
const hasBlocks = /\{[^}]*\}|@media|@keyframes/.test(css);
if (hasBlocks) {
// User wrote full CSS rules - use as-is
style.textContent = `/* Custom CSS for ${elementName} */\n${css}`;
} else {
// Simple declarations - wrap with high-specificity selector
const importantDecls = css
.split(';')
.map(s => s.trim())
.filter(Boolean)
.map(s => (/!important\s*$/.test(s) ? s : `${s} !important`))
.join(';\n ');
style.textContent = `/* Custom CSS for ${elementName} */\nbody [data-element="${elementName}"],\n.container [data-element="${elementName}"] {\n ${importantDecls};\n}`;
}
document.head.appendChild(style);
}
} catch (e) {
console.error(`[MyUIbrix] Custom CSS injection failed for ${elementName}:`, e);
}
return next;
});
// Force React re-render of affected component by incrementing refresh key
setRefreshKey(prev => prev + 1);
}
}) as EventListener;
window.addEventListener('myuibrix-change', handleMyUIbrixChange);
window.addEventListener('myuibrix-reorder', handleMyUIbrixReorder);
window.addEventListener('myuibrix-style-change', handleMyUIbrixStyleChange);
// Support force refresh event from editorController
const handleForceRefresh = ((event: CustomEvent) => {
updateInjectedStyleProps(styles);
}) as EventListener;
window.addEventListener('myuibrix-force-refresh', handleForceRefresh);
return () => {
active = false;
window.removeEventListener('myuibrix-change', handleMyUIbrixChange);
window.removeEventListener('myuibrix-reorder', handleMyUIbrixReorder);
window.removeEventListener('myuibrix-style-change', handleMyUIbrixStyleChange);
window.removeEventListener('myuibrix-force-refresh', handleForceRefresh);
try {
const s = document.getElementById('myuibrix-style-props');
if (s) s.remove();
frontend/src/index.tsx
+13 -7
View File
@@ -10,10 +10,13 @@ import 'react-quill/dist/quill.snow.css';
import 'react-image-crop/dist/ReactCrop.css';
// Custom editor styles AFTER quill base styles to ensure proper override
import './styles/custom-editor.css';
import App, { theme } from './App';
import { theme } from './App';
import AppLazy from './App.lazy';
import { ColorModeScript } from '@chakra-ui/react';
import reportWebVitals from './reportWebVitals';
import { HelmetProvider } from 'react-helmet-async';
import reportWebVitals from './reportWebVitals';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import { promptUserToUpdate } from './serviceWorkerRegistration';
// Cookie consent utilities
type Consent = { analytics?: boolean };
const getConsent = (): Consent | null => {
@@ -117,13 +120,13 @@ if (!rootElement) {
root.render(
<React.StrictMode>
<ErrorBoundary>
<HelmetProvider>
<HelmetProvider>
<ErrorBoundary>
{/* Ensure color mode (light/dark) persists and matches Chakra config before UI renders */}
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
<App />
</HelmetProvider>
</ErrorBoundary>
<AppLazy />
</ErrorBoundary>
</HelmetProvider>
</React.StrictMode>
);
// App rendered
@@ -153,3 +156,6 @@ if (!rootElement) {
// Report web vitals (disabled logging by default). Hook up your analytics here if needed.
reportWebVitals();
// Enable PWA service worker with user prompt on updates
serviceWorkerRegistration.register({ onUpdate: promptUserToUpdate });
frontend/src/pages/AboutPage.tsx
-3
View File
@@ -339,9 +339,6 @@ const AboutPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/ActivityDetailPage.tsx
+25 -3
View File
@@ -12,6 +12,7 @@ import EventLocationMap from '../components/events/EventLocationMap';
import EmbeddedPoll from '../components/polls/EmbeddedPoll';
import FilePreview from '../components/common/FilePreview';
import InstagramGeneratorButton from '../components/admin/InstagramGeneratorButton';
import CommentsSection from '../components/comments/CommentsSection';
const ActivityDetailPage: React.FC = () => {
const { id } = useParams();
@@ -122,6 +123,7 @@ const ActivityDetailPage: React.FC = () => {
targetUrl={typeof window !== 'undefined' ? window.location.href : undefined}
placement="fixed"
size="md"
align="left"
/>
<Container maxW="3xl">
{loading && (
@@ -179,10 +181,24 @@ const ActivityDetailPage: React.FC = () => {
' p': { lineHeight: 1.8, mb: 3 },
' ul, ol': { pl: 6, mb: 3 },
' a': { color: linkColor, textDecoration: 'underline', _hover: { color: linkHoverColor } },
' img': { maxWidth: '100%', borderRadius: 'md' },
' img': {
display: 'block',
maxWidth: '100%',
height: 'auto',
mt: 2,
border: 'none !important',
outline: 'none !important',
boxShadow: 'none !important',
cursor: 'default',
borderRadius: 'md',
},
}}
ref={contentRef}
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(toAbsoluteUploads(String(data.description))) }}
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(toAbsoluteUploads(String(data.description)), {
USE_PROFILES: { html: true },
ADD_TAGS: ['iframe'],
ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen', 'style', 'data-filters', 'data-img-id'],
}) }}
/>
)}
@@ -194,7 +210,9 @@ const ActivityDetailPage: React.FC = () => {
src={getYouTubeEmbedUrl(data.youtube_url) || ''}
title={data.title}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>
</Box>
@@ -214,6 +232,10 @@ const ActivityDetailPage: React.FC = () => {
<EmbeddedPoll eventId={data.id} maxPolls={2} />
)}
{data?.id && (
<CommentsSection targetType="event" targetId={String(data.id)} />
)}
{(Array.isArray(data.attachments) && data.attachments.length > 0) && (
<VStack align="stretch" spacing={3}>
<Heading as="h3" size="sm">Přílohy</Heading>
frontend/src/pages/AlbumDetailPage.tsx
+8
View File
@@ -22,6 +22,7 @@ import { ChevronRight, ExternalLink, Calendar, Image as ImageIcon } from 'lucide
import MainLayout from '../components/layout/MainLayout';
import { API_URL } from '../services/api';
import PhotoModal from '../components/gallery/PhotoModal';
import CommentsSection from '../components/comments/CommentsSection';
interface Photo {
id: string;
@@ -287,6 +288,13 @@ const AlbumDetailPage: React.FC = () => {
</Text>
</Box>
)}
{/* Comments */}
{album.id && (
<Box mt={6}>
<CommentsSection targetType="gallery_album" targetId={String(album.id)} />
</Box>
)}
</Container>
</Box>
frontend/src/pages/ArticleDetailPage.tsx
+158 -90
View File
@@ -6,14 +6,14 @@ import MainLayout from '../components/layout/MainLayout';
import DOMPurify from 'dompurify';
import { Helmet } from 'react-helmet-async';
import NewsletterCTA from '../components/common/NewsletterCTA';
import SponsorsSection from '../components/common/SponsorsSection';
import EmbeddedPoll from '../components/polls/EmbeddedPoll';
import { ExternalLink, ArrowRight, Eye, Clock } from 'lucide-react';
import { ArrowRight, Eye, Clock, SearchX } from 'lucide-react';
import React from 'react';
import { trackEvent as umamiTrackEvent, trackMatchView as umamiTrackMatchView, trackVideoPlay as umamiTrackVideoPlay, trackArticleView as umamiTrackArticleView } from '../utils/umami';
import { assetUrl } from '../utils/url';
import { API_URL } from '../services/api';
import TeamLogo from '../components/common/TeamLogo';
import MatchModal from '../components/home/MatchModal';
import { extractPalette } from '../utils/colors';
import { getTeamLogo } from '../utils/sportLogosAPI';
import FilePreview from '../components/common/FilePreview';
@@ -23,6 +23,7 @@ import { MatchSnapshot } from '../services/instagram';
import { Widget } from '../components/widgets/Widget';
import { MatchesWidget } from '../components/widgets/MatchesWidget';
import { getUpcomingEvents } from '../services/eventService';
import CommentsSection from '../components/comments/CommentsSection';
const toText = (html?: string) => {
if (!html) return '';
@@ -39,8 +40,7 @@ const ArticleDetailPage: React.FC = () => {
enabled: Boolean(slug || id),
});
// UI colors and public settings
const { data: publicSettings } = usePublicSettings();
const cardBg = useColorModeValue('white','gray.900');
@@ -54,6 +54,8 @@ const ArticleDetailPage: React.FC = () => {
// Derive opponent color (for right edge fade) from team logo
const [opponentColor, setOpponentColor] = React.useState<string | null>(null);
const [isMatchModalOpen, setIsMatchModalOpen] = React.useState(false);
const [selectedMatch, setSelectedMatch] = React.useState<any>(null);
// Placeholders; moved tracking effects below to avoid using variables before declaration
@@ -272,7 +274,7 @@ const ArticleDetailPage: React.FC = () => {
return DOMPurify.sanitize(transformed || '', {
USE_PROFILES: { html: true },
ADD_TAGS: ['iframe'],
ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen'],
ADD_ATTR: ['target', 'rel', 'allow', 'allowfullscreen', 'style', 'data-filters', 'data-img-id'],
});
}, [(data as any)?.content, toAbsoluteUploads]);
@@ -294,8 +296,74 @@ const ArticleDetailPage: React.FC = () => {
staleTime: 60_000,
});
const latestArticlesQuery = useQuery({
queryKey: ['latest-articles'],
queryFn: () => getArticles({ page: 1, page_size: 6, published: true }),
enabled: Boolean((isError || !data) && (slug || id)),
staleTime: 60_000,
});
if (isLoading) return <Spinner />;
if (isError || !data) return <Text color="red.500">Článek nenalezen</Text>;
if (isError || !data) return (
<MainLayout>
<Helmet>
<title>Článek nenalezen</title>
<meta name="robots" content="noindex" />
</Helmet>
<Container maxW="4xl" py={{ base: 12, md: 16 }}>
<Stack spacing={6} align="center" textAlign="center">
<Box color="blue.500">
<SearchX size={64} />
</Box>
<Heading size="xl">Článek nenalezen</Heading>
<Text color={textMuted} maxW="2xl">
Je nám líto, ale hledaný článek neexistuje, byl smazán nebo byl přesunut.
</Text>
<HStack spacing={3}>
<Button as={RouterLink} to="/news" colorScheme="blue">Zpět na novinky</Button>
<Button as={RouterLink} to="/" variant="ghost">Domů</Button>
</HStack>
</Stack>
{Array.isArray((latestArticlesQuery.data as any)?.data) && ((latestArticlesQuery.data as any)?.data?.length || 0) > 0 && (
<Box mt={12}>
<Heading as="h2" size="md" mb={4}>Nejnovější články</Heading>
<SimpleGrid columns={{ base: 1, sm: 2, md: 3 }} spacing={4}>
{((latestArticlesQuery.data as any).data || []).slice(0, 6).map((a: any) => {
const link = a.slug ? `/news/${a.slug}` : `/articles/${a.id}`;
return (
<Box
key={a.id}
as={RouterLink}
to={link}
borderWidth="1px"
borderRadius="lg"
p={3}
bg={cardBg}
_hover={{ textDecoration: 'none', boxShadow: 'md' }}
>
<Image
src={assetUrl(a.image_url) || '/stadium-placeholder.jpg'}
alt={a.title}
w="100%"
h="140px"
objectFit="cover"
borderRadius="md"
mb={2}
/>
<Text fontWeight="600" noOfLines={2}>{a.title}</Text>
{a.published_at && (
<Text fontSize="sm" color={textMuted}>{new Date(a.published_at).toLocaleDateString('cs-CZ')}</Text>
)}
</Box>
);
})}
</SimpleGrid>
</Box>
)}
</Container>
</MainLayout>
);
const title = (data as any).seo_title || data.title;
const description = (data as any).seo_description || toText(data.content).slice(0, 160);
@@ -317,6 +385,7 @@ const ArticleDetailPage: React.FC = () => {
targetUrl={typeof window !== 'undefined' ? window.location.href : undefined}
placement="fixed"
size="md"
align="left"
/>
<Helmet>
<title>{title}</title>
@@ -407,35 +476,14 @@ const ArticleDetailPage: React.FC = () => {
<Stack spacing={6}>
{/* Featured Image - smaller with subtle overlay */}
{data.image_url && (
<Box position="relative" borderRadius="xl" overflow="hidden">
<Image src={assetUrl(data.image_url) || data.image_url} alt={data.title} w="100%" h={{ base: '220px', md: '360px' }} objectFit="cover" />
<Box position="absolute" inset={0} bg="brand.primary" opacity={0.08} pointerEvents="none" />
<Box position="absolute" inset={0} bgGradient="linear(to-b, rgba(0,0,0,0.12), rgba(0,0,0,0.02))" pointerEvents="none" />
</Box>
)}
{/* YouTube Video Section - smaller and rounded */}
{(data as any)?.youtube_video_id && (
<Box borderWidth="1px" borderRadius="lg" p={{ base: 3, md: 4 }} bg={videoBg}>
<Heading as="h3" size="md" mb={2}>🎬 Video k článku</Heading>
<Box maxW="3xl" mx="auto" borderRadius="lg" overflow="hidden">
<AspectRatio ratio={16 / 9}>
<Box
as="iframe"
src={`https://www.youtube-nocookie.com/embed/${(data as any).youtube_video_id}`}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
title={(data as any).youtube_video_title || 'YouTube video'}
onLoad={() => umamiTrackEvent('Video Widget Shown', { id: (data as any).youtube_video_id, title: (data as any).youtube_video_title })}
onClick={() => umamiTrackVideoPlay((data as any).youtube_video_id, (data as any).youtube_video_title)}
/>
</AspectRatio>
</Box>
{(data as any).youtube_video_title ? (
<Text mt={2} color={videoTitleColor}>{(data as any).youtube_video_title}</Text>
) : null}
<Box borderRadius="xl" overflow="hidden">
<Image src={assetUrl(data.image_url) || data.image_url} alt={data.title} w="100%" h="auto" objectFit="contain" />
</Box>
)}
{(data as any)?.id ? (
<CommentsSection targetType="article" targetId={String((data as any).id)} />
) : null}
{/* Match Section - Card with logos, score/countdown, venue/date */}
{(matchLinkQuery.data as any)?.external_match_id && (
<Box position="relative" borderWidth="1px" borderRadius="lg" p={{ base: 4, md: 5 }} bg={cardBg} overflow="hidden">
@@ -476,12 +524,12 @@ const ArticleDetailPage: React.FC = () => {
const mins = Math.max(0, Math.floor((ms % (1000*60*60))/(1000*60)));
return (<Text fontSize="lg" fontWeight="700">Za {days} d {hours} h {mins} min</Text>);
})()}
{(facrMatchQuery.data as any).venue && <Text fontSize="sm" color={textMuted}>{String((facrMatchQuery.data as any).venue)}</Text>}
{(() => {
const dRaw = String((facrMatchQuery.data as any).date_time || (facrMatchQuery.data as any).date || '');
const d = new Date(dRaw);
return <Text fontSize="sm" color={textMuted}>{d.toLocaleDateString('cs-CZ')} {d.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' })}</Text>;
})()}
{(facrMatchQuery.data as any).venue && <Text fontSize="sm" color={textMuted}>{String((facrMatchQuery.data as any).venue)}</Text>}
</VStack>
<VStack flex={1} spacing={2} minW="0">
<TeamLogo size="custom" style={{ width: 64, height: 64 }} teamId={String((facrMatchQuery.data as any).away_team_id || (facrMatchQuery.data as any).away_id || '')} teamName={String((facrMatchQuery.data as any).away || (facrMatchQuery.data as any).away_team || '')} />
@@ -507,10 +555,45 @@ const ArticleDetailPage: React.FC = () => {
borderRadius="lg"
p={{ base: 4, md: 6 }}
ref={contentRef}
sx={{ 'ul, ol': { pl: 6, listStylePosition: 'outside' }, 'ul': { listStyleType: 'disc' }, 'ol': { listStyleType: 'decimal' }, 'li': { mb: 2 } }}
sx={{
'ul, ol': { pl: 6, listStylePosition: 'outside' },
'ul': { listStyleType: 'disc' },
'ol': { listStyleType: 'decimal' },
'li': { mb: 2 },
'img': {
display: 'block',
maxWidth: '100%',
height: 'auto',
mt: 2,
border: 'none !important',
outline: 'none !important',
boxShadow: 'none !important',
cursor: 'default !important',
},
}}
dangerouslySetInnerHTML={{ __html: safeContentHTML }}
/>
{/* YouTube Video Section - simplified */}
{(data as any)?.youtube_video_id && (
<Box>
<AspectRatio ratio={16 / 9}>
<Box
as="iframe"
src={`https://www.youtube-nocookie.com/embed/${(data as any).youtube_video_id}`}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
title={(data as any).youtube_video_title || 'YouTube video'}
onLoad={() => umamiTrackEvent('Video Widget Shown', { id: (data as any).youtube_video_id, title: (data as any).youtube_video_title })}
onClick={() => umamiTrackVideoPlay((data as any).youtube_video_id, (data as any).youtube_video_title)}
/>
</AspectRatio>
{(data as any).youtube_video_title ? (
<Text mt={2} color={videoTitleColor}>{(data as any).youtube_video_title}</Text>
) : null}
</Box>
)}
{/* Gallery Section - Mosaic of 5 images with grayscale + hover color */}
{((data as any)?.gallery_album_id || (data as any)?.gallery_album_url) && (
<Box borderWidth="1px" borderRadius="lg" p={{ base: 3, md: 4 }} bg={galleryBg} borderColor={galleryBorder}>
@@ -529,70 +612,46 @@ const ArticleDetailPage: React.FC = () => {
Zobrazit galerii
</Button>
</HStack>
{/* Custom 5-image mosaic */}
{Array.isArray(galleryAlbumQuery.data?.photos) && (galleryAlbumQuery.data?.photos?.length || 0) > 0 && (() => {
const photos = (galleryAlbumQuery.data?.photos ?? []).slice(0, 5);
if (photos.length < 5) {
return (
<SimpleGrid columns={{ base: 2, sm: 3 }} spacing={2}>
<SimpleGrid columns={{ base: 2, sm: 3 }} spacing={2} role="group">
{photos.map((p: any) => (
<Image key={p.id} src={p.image_1500} alt={String(p.id)} w="100%" h="140px" objectFit="cover" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} />
<Image key={p.id} src={p.image_1500} alt={String(p.id)} w="100%" h="140px" objectFit="cover" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} />
))}
</SimpleGrid>
);
}
return (
<Box position="relative" sx={{
<Box position="relative" role="group" sx={{
display: 'grid',
gridTemplateColumns: '1fr 1.2fr 1fr',
gridTemplateRows: 'repeat(2, 140px)',
gap: '8px'
}}>
<Image src={photos[0].image_1500} alt={String(photos[0].id)} sx={{ gridColumn: 1, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} borderRadius="md" />
<Image src={photos[1].image_1500} alt={String(photos[1].id)} sx={{ gridColumn: 1, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} borderRadius="md" />
<Image src={photos[2].image_1500} alt={String(photos[2].id)} sx={{ gridColumn: 2, gridRow: '1 / span 2' }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} borderRadius="md" />
<Image src={photos[3].image_1500} alt={String(photos[3].id)} sx={{ gridColumn: 3, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} borderRadius="md" />
<Image src={photos[4].image_1500} alt={String(photos[4].id)} sx={{ gridColumn: 3, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%)" _hover={{ filter: 'grayscale(0%)' }} borderRadius="md" />
<Image src={photos[0].image_1500} alt={String(photos[0].id)} sx={{ gridColumn: 1, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
<Image src={photos[1].image_1500} alt={String(photos[1].id)} sx={{ gridColumn: 1, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
<Image src={photos[2].image_1500} alt={String(photos[2].id)} sx={{ gridColumn: 2, gridRow: '1 / span 2' }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
<Image src={photos[3].image_1500} alt={String(photos[3].id)} sx={{ gridColumn: 3, gridRow: 1 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
<Image src={photos[4].image_1500} alt={String(photos[4].id)} sx={{ gridColumn: 3, gridRow: 2 }} objectFit="cover" w="100%" h="100%" filter="grayscale(100%) blur(1px)" transition="filter 0.2s ease" _hover={{ filter: 'grayscale(0%) blur(0)' }} _groupHover={{ filter: 'grayscale(0%) blur(0)' }} borderRadius="md" />
<Button as={RouterLink} to={(data as any).gallery_album_id ? `/galerie/album/${(data as any).gallery_album_id}` : '#'} size="sm" colorScheme="blue" position="absolute" top="50%" left="50%" transform="translate(-50%, -50%)" onClick={() => umamiTrackEvent('Gallery Link Click', { album_id: (data as any).gallery_album_id })}>Zobrazit galerii</Button>
</Box>
);
})()}
{/* Zonerama Attribution */}
<HStack mt={3} spacing={1} fontSize="xs" color="blue.700">
<Text>📸 Fotografie z</Text>
<Link
href={(data as any).gallery_album_url || `https://zonerama.com`}
isExternal
fontWeight="600"
color="blue.600"
display="inline-flex"
alignItems="center"
gap={1}
>
Zonerama
<ExternalLink size={12} />
</Link>
</HStack>
</Box>
</Box>
)}
{/* Embedded Poll - directly under content/gallery */}
{data?.id && <EmbeddedPoll articleId={(data as any).id} maxPolls={3} />}
</Stack>
</Box>
<VStack align="stretch" spacing={6} gridColumn={{ base: '1 / -1', lg: 'span 4' }}>
<Widget title="Podobné články">
{relatedArticlesQuery.isLoading ? (
<Text color={textMuted}>Načítám…</Text>
) : (() => {
const list = ((relatedArticlesQuery.data as any)?.data || [])
.filter((a: any) => a?.id !== (data as any)?.id)
.slice(0, 4);
if (!list.length) return <Text color={textMuted}>Žádné související články</Text>;
return (
{relatedArticlesQuery.isLoading ? null : (() => {
const list = ((relatedArticlesQuery.data as any)?.data || [])
.filter((a: any) => a?.id !== (data as any)?.id)
.slice(0, 4);
if (!list.length) return null;
return (
<Widget title="Podobné články">
<VStack spacing={3} align="stretch">
{list.map((a: any) => {
const link = a.slug ? `/news/${a.slug}` : `/articles/${a.id}`;
@@ -609,19 +668,28 @@ const ArticleDetailPage: React.FC = () => {
);
})}
</VStack>
);
})()}
</Widget>
</Widget>
);
})()}
<MatchesWidget />
<MatchesWidget
categoryName={(data as any)?.category?.name}
hideEmpty
onMatchClick={(m: any) => {
setSelectedMatch({ ...m, competition: (m as any).competitionName, competitionName: (m as any).competitionName });
setIsMatchModalOpen(true);
}}
/>
<Widget title="Nejbližší aktivity">
{upcomingEventsQuery.isLoading ? (
<Text color={textMuted}>Načítám…</Text>
) : (() => {
const items = Array.isArray(upcomingEventsQuery.data) ? (upcomingEventsQuery.data as any[]).slice(0, 3) : [];
if (!items.length) return <Text color={textMuted}>Žádné plánované aktivity</Text>;
return (
{(() => {
const all = Array.isArray(upcomingEventsQuery.data) ? (upcomingEventsQuery.data as any[]) : [];
const cat = (data as any)?.category?.name;
const items = cat
? all.filter((ev: any) => !ev?.category_name || String(ev.category_name) === String(cat)).slice(0, 3)
: all.slice(0, 3);
if (!items.length) return null;
return (
<Widget title="Nejbližší aktivity">
<VStack spacing={3} align="stretch">
{items.map((ev: any) => (
<HStack key={ev.id} as={RouterLink} to={`/aktivita/${ev.id}`} _hover={{ textDecoration: 'none' }} align="flex-start" spacing={3}>
@@ -634,9 +702,9 @@ const ArticleDetailPage: React.FC = () => {
</HStack>
))}
</VStack>
);
})()}
</Widget>
</Widget>
);
})()}
</VStack>
</SimpleGrid>
</Container>
@@ -658,11 +726,11 @@ const ArticleDetailPage: React.FC = () => {
</Box>
</Container>
)}
{/* Polls (Ankety) above CTA */}
{data?.id && <EmbeddedPoll articleId={(data as any).id} maxPolls={3} />}
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
<MatchModal isOpen={isMatchModalOpen} onClose={() => setIsMatchModalOpen(false)} match={selectedMatch} />
</MainLayout>
);
};
frontend/src/pages/BlogPage.tsx
+99 -17
View File
@@ -1,15 +1,16 @@
import React from 'react';
import { Box, Container, Heading, VStack, Image, Text, Skeleton, LinkBox, HStack, Select, Badge, useColorModeValue, Input, InputGroup, InputLeftElement, InputRightElement, IconButton, Grid, GridItem } from '@chakra-ui/react';
import { Box, Container, Heading, VStack, Image, Text, Skeleton, LinkBox, HStack, Select, Badge, useColorModeValue, Input, InputGroup, InputLeftElement, InputRightElement, IconButton, Grid, GridItem, useMediaQuery } from '@chakra-ui/react';
import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
import { getArticles, Article, Paginated, getFeaturedArticles } from '../services/articles';
import { getBanners, Banner as UIBanner } from '../services/banners';
import { Link as RouterLink, useSearchParams } from 'react-router-dom';
import { assetUrl } from '../utils/url';
import MainLayout from '../components/layout/MainLayout';
import { getCategories, CategoryItem } from '../services/categories';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { Eye, Clock, Search, X } from 'lucide-react';
import InstagramGeneratorButton from '../components/admin/InstagramGeneratorButton';
import { Helmet } from 'react-helmet-async';
const BlogTile: React.FC<{ article: Article; variant?: 'large' | 'small' }> = ({ article, variant }) => {
const link = article.slug ? `/news/${article.slug}` : `/articles/${article.id}`;
@@ -36,7 +37,17 @@ const BlogTile: React.FC<{ article: Article; variant?: 'large' | 'small' }> = ({
position="relative"
>
<Box position="relative">
<Image src={assetUrl(article.image_url) || '/stadium-placeholder.jpg'} alt={article.title} w="100%" h={imageH} objectFit="cover" />
<Image
src={assetUrl(article.image_url) || '/stadium-placeholder.jpg'}
alt={article.title}
w="100%"
h={imageH}
objectFit="cover"
loading={variant === 'large' ? 'eager' : 'lazy'}
decoding="async"
sizes={variant === 'large' ? '(min-width: 768px) 60vw, 100vw' : '100vw'}
fetchPriority={variant === 'large' ? 'high' as any : 'auto' as any}
/>
<Box position="absolute" inset={0} bgGradient="linear(to-t, rgba(0,0,0,0.55), rgba(0,0,0,0.15))" />
{categoryName && (
<Badge
@@ -204,6 +215,17 @@ const BlogPage: React.FC = () => {
const featuredIdSet = React.useMemo(() => new Set((featuredList || []).map((a) => a.id)), [featuredList]);
const visibleArticles = featuredList.length ? articles.filter((a) => !featuredIdSet.has(a.id)) : articles;
// Fetch inline article banners (active, placement=article_inline)
const articleBannersQ = useQuery<UIBanner[]>(
['banners', { placement: 'article_inline' }],
() => getBanners({ active: true, placement: 'article_inline' }),
{ staleTime: 60 * 1000 }
);
const articleBanners = (articleBannersQ.data || []) as UIBanner[];
// Decide insertion index depending on layout (1 column vs multi-column)
const [isSmUp] = useMediaQuery('(min-width: 30em)'); // Chakra sm breakpoint (~480px)
const insertionIndex = isSmUp ? 5 : 2;
// Infinite scroll via intersection observer
const sentinelRef = React.useRef<HTMLDivElement | null>(null);
React.useEffect(() => {
@@ -219,8 +241,42 @@ const BlogPage: React.FC = () => {
return () => io.disconnect();
}, [hasNextPage, isFetchingNextPage, fetchNextPage]);
// Derive page SEO title/description
const parts: string[] = ['Blog'];
if (categoryId) {
const cat = categories.find((c) => c.id === Number(categoryId));
if (cat?.name) parts.push(cat.name);
}
if (month) parts.push(month);
if (matchId) parts.push('Zápas');
if (qParam) parts.push(`Hledání: ${qParam}`);
const pageTitle = parts.join(' · ');
const pageDesc = qParam
? `Výsledky hledání článků pro „${qParam}“.`
: categoryId
? `Články v kategorii ${(categories.find((c) => c.id === Number(categoryId))?.name) || ''}.`
: 'Nejnovější články, rozhovory a novinky z klubu.';
const canonical = typeof window !== 'undefined' ? window.location.href : undefined;
return (
<MainLayout>
<Helmet>
<title>{pageTitle}</title>
<meta name="description" content={pageDesc} />
{canonical && <link rel="canonical" href={canonical} />}
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org',
'@type': 'ItemList',
itemListElement: (featuredList.concat(visibleArticles)).slice(0, 12).map((a, idx) => ({
'@type': 'ListItem',
position: idx + 1,
url: (typeof window !== 'undefined' ? window.location.origin : '') + (a.slug ? `/news/${a.slug}` : `/articles/${a.id}`),
name: a.title,
})),
})}
</script>
</Helmet>
<Box>
{/* Header like blog.html */}
<Box bg="transparent" color="inherit" py={{ base: 8, md: 10 }} mb={4} borderBottom="1px" borderColor={borderColor}>
@@ -322,18 +378,46 @@ const BlogPage: React.FC = () => {
{isLoading && Array.from({ length: 9 }).map((_, i) => (
<Skeleton key={i} h={{ base: '220px', md: '260px' }} borderRadius="md" mb={7} />
))}
{!isLoading && visibleArticles.map((a) => (
<Box
key={a.id}
mb={7}
sx={{
breakInside: 'avoid',
WebkitColumnBreakInside: 'avoid',
pageBreakInside: 'avoid',
}}
>
<BlogTile article={a} />
</Box>
{!isLoading && visibleArticles.map((a, idx) => (
<React.Fragment key={`row-${a.id}`}>
<Box
mb={7}
sx={{
breakInside: 'avoid',
WebkitColumnBreakInside: 'avoid',
pageBreakInside: 'avoid',
}}
>
<BlogTile article={a} />
</Box>
{articleBanners.length > 0 && idx === insertionIndex && (
<Box
key={`banner-inline-${articleBanners[0].id}`}
mb={7}
sx={{
breakInside: 'avoid',
WebkitColumnBreakInside: 'avoid',
pageBreakInside: 'avoid',
}}
>
<a
href={articleBanners[0].click_url || '#'}
target={articleBanners[0].click_url ? '_blank' : undefined}
rel={articleBanners[0].click_url ? 'noopener noreferrer' : undefined}
style={{ display: 'block' }}
>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img
src={assetUrl(articleBanners[0].image_url) || '/images/sponsors/placeholder.png'}
alt={articleBanners[0].name}
style={{ width: '100%', height: 'auto', display: 'block' }}
loading="lazy"
decoding="async"
/>
</a>
</Box>
)}
</React.Fragment>
))}
</Box>
{!isLoading && !featuredList.length && !visibleArticles.length && (
@@ -353,8 +437,6 @@ const BlogPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</Box>
</MainLayout>
);
frontend/src/pages/CalendarPage.tsx
-4
View File
@@ -7,7 +7,6 @@ import { cs } from 'date-fns/locale';
import { getCompetitionAliasesPublic, CompetitionAlias } from '../services/competitionAliases';
import { useSearchParams } from 'react-router-dom';
import { useCountdown, useMultipleCountdowns } from '../hooks/useCountdown';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { sortCategoriesWithOrder } from '../utils/categorySort';
import ClubModal from '../components/home/ClubModal';
@@ -1298,9 +1297,6 @@ const CalendarPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
{/* Club Modal for team statistics */}
<ClubModal
frontend/src/pages/ClubPage.tsx
-3
View File
@@ -3,7 +3,6 @@ import MainLayout from '../components/layout/MainLayout';
import { Box, Container, Heading, Text, Stack, Image, SimpleGrid, Divider } from '@chakra-ui/react';
import { usePublicSettings } from '../hooks/usePublicSettings';
import { assetUrl } from '../utils/url';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
const ClubPage: React.FC = () => {
@@ -48,8 +47,6 @@ const ClubPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/ContactPage.tsx
+172 -88
View File
@@ -33,9 +33,10 @@ import { useSettings } from '../hooks/useSettings';
import MainLayout from '../components/layout/MainLayout';
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';
import { getPublicContacts, GroupedContacts } from '../services/contactInfo';
import { facrApi } from '../services/facr/facrApi';
import { getCompetitionAliasesPublic } from '../services/competitionAliases';
type ContactFormData = {
name: string;
@@ -56,6 +57,9 @@ const ContactPage: React.FC = () => {
// Public contacts (grouped by category)
const [contactsData, setContactsData] = useState<GroupedContacts | null>(null);
const [contactsLoading, setContactsLoading] = useState(true);
// Club competitions (for tabs fallback) and aliases map
const [competitions, setCompetitions] = useState<Array<{ code?: string; name: string }>>([]);
const [aliasesMap, setAliasesMap] = useState<Record<string, string>>({});
const {
register,
@@ -121,6 +125,32 @@ const ContactPage: React.FC = () => {
return () => { mounted = false; };
}, []);
// Load club competitions + aliases (used to populate tabs when no contact categories are defined)
useEffect(() => {
(async () => {
try {
const clubId = (settings as any)?.club_id || '';
const clubType = ((settings as any)?.club_type || 'football') as 'football' | 'futsal';
let comps: Array<{ code?: string; name: string }> = [];
if (clubId) {
try {
const club = await facrApi.getClub(String(clubId), clubType);
const arr = Array.isArray((club as any)?.competitions) ? (club as any).competitions : [];
arr.forEach((c: any) => comps.push({ code: c.code, name: c.name || c.code }));
} catch {}
}
let amap: Record<string, string> = {};
try {
const list = await getCompetitionAliasesPublic();
list.forEach((a) => { if (a.code && a.alias) amap[a.code] = a.alias; });
} catch {}
const withAliases = comps.map((c) => ({ code: c.code, name: (c.code && amap[c.code]) ? amap[c.code] : c.name }));
setAliasesMap(amap);
setCompetitions(withAliases);
} catch {}
})();
}, [settings]);
const onSubmit = (data: ContactFormData) => {
mutate(data);
};
@@ -222,91 +252,148 @@ const ContactPage: React.FC = () => {
{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>
<Tabs colorScheme="blue" isFitted isLazy>
{(() => {
const categoryEntries = Object.entries(contactsData?.categories || {});
const compNames = competitions.map((c) => (c.code && aliasesMap[c.code]) ? aliasesMap[c.code] : c.name).filter(Boolean);
const useCategories = categoryEntries.length > 0;
const tabs = useCategories ? categoryEntries.map(([n]) => n) : compNames;
const hasOthers = uncategorized.length > 0;
return (
<>
<TabList>
{tabs.map((n) => (
<Tab key={n}>{n}</Tab>
))}
</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>
))}
</SimpleGrid>
</TabPanel>
)}
</TabPanels>
{hasOthers && <Tab>Ostatní</Tab>}
</TabList>
<TabPanels>
{useCategories
? categoryEntries.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>
))}
</SimpleGrid>
</TabPanel>
))
: tabs.map((name) => {
const persons = (contactsData?.categories || {})[name] || [];
return (
<TabPanel key={name} pt={4}>
{persons.length > 0 ? (
<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>
))}
</SimpleGrid>
) : (
<Text color="gray.500">Pro tuto kategorii zatím nemáme kontaktní osobu.</Text>
)}
</TabPanel>
);
})}
{hasOthers && (
<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>
))}
</SimpleGrid>
</TabPanel>
)}
</TabPanels>
</>
);
})()}
</Tabs>
</Box>
)}
@@ -422,9 +509,6 @@ const ContactPage: React.FC = () => {
</Box>
</VStack>
</Container>
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/GalleryPage.tsx
-4
View File
@@ -17,7 +17,6 @@ import {
import { Calendar, Image as ImageIcon, ExternalLink } from 'lucide-react';
import MainLayout from '../components/layout/MainLayout';
import { API_URL } from '../services/api';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
interface Album {
@@ -317,9 +316,6 @@ const GalleryPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/HomePage.tsx
+201 -98
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState, useMemo } from 'react';
import React, { useEffect, useRef, useState, useMemo, Suspense } from 'react';
import { IconButton, Tooltip } from '@chakra-ui/react';
import MainLayout from '../components/layout/MainLayout';
import { FiArrowRight, FiCalendar, FiUsers, FiAward, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
import { FiArrowRight, FiCalendar, FiUsers, FiAward, FiChevronLeft, FiChevronRight, FiEdit } from 'react-icons/fi';
import '../styles/theme.css';
import '../styles/sparta-styles.css';
import '../styles/club-styles.css';
@@ -11,19 +12,20 @@ import { assetUrl, sanitizeClubName } from '../utils/url';
import { getPlayers as apiGetPlayers, Player as ApiPlayer } from '../services/players';
import { getSponsors as apiGetSponsors, Sponsor as ApiSponsor } from '../services/sponsors';
import { getBanners as apiGetBanners, Banner as ApiBanner } from '../services/banners';
import BannerDisplay from '../components/banners/BannerDisplay';
import BlogCardsScroller from '../components/home/BlogCardsScroller';
import BlogSwiper from '../components/home/BlogSwiper';
import VideosSection from '../components/home/VideosSection';
import MerchSection from '../components/home/MerchSection';
import PollsWidget from '../components/home/PollsWidget';
import GallerySection from '../components/home/GallerySection';
import { translateNationality, getCountryFlag } from '../utils/nationality';
const BannerDisplay = React.lazy(() => import('../components/banners/BannerDisplay'));
const BlogCardsScroller = React.lazy(() => import('../components/home/BlogCardsScroller'));
const BlogSwiper = React.lazy(() => import('../components/home/BlogSwiper'));
const VideosSection = React.lazy(() => import('../components/home/VideosSection'));
const MerchSection = React.lazy(() => import('../components/home/MerchSection'));
const PollsWidget = React.lazy(() => import('../components/home/PollsWidget'));
const GallerySection = React.lazy(() => import('../components/home/GallerySection'));
import { getArticles as apiGetArticles, Article as ApiArticle } from '../services/articles';
import { getCompetitionAliasesPublic, CompetitionAlias } from '../services/competitionAliases';
import { getUpcomingEvents } from '../services/eventService';
import NewsletterSubscribe from '../components/newsletter/NewsletterSubscribe';
import MyUIbrixStyleEditor from '../components/editor/MyUIbrixEditor';
import MyUIbrixErrorBoundary from '../components/editor/MyUIbrixErrorBoundary';
const NewsletterSubscribe = React.lazy(() => import('../components/newsletter/NewsletterSubscribe'));
const MyUIbrixStyleEditor = React.lazy(() => import('../components/editor/MyUIbrixEditor'));
const MyUIbrixErrorBoundary = React.lazy(() => import('../components/editor/MyUIbrixErrorBoundary'));
import ClubModal from '../components/home/ClubModal';
import MatchModal from '../components/home/MatchModal';
import { useAllPageElementConfigs } from '../hooks/usePageElementConfig';
@@ -31,10 +33,11 @@ import { API_URL } from '../services/api';
import { TeamLogo } from '../components/common/TeamLogo';
import ClubHeroTopbar from '../components/home/ClubHeroTopbar';
import NewsList from '../components/pack/NewsList';
import StandingsCard from '../components/pack/StandingsCard';
const StandingsCard = React.lazy(() => import('../components/pack/StandingsCard'));
import NextMatch from '../components/pack/NextMatch';
import MatchesSlider from '../components/pack/MatchesSlider';
const MatchesSlider = React.lazy(() => import('../components/pack/MatchesSlider'));
import ActivitiesList from '../components/pack/ActivitiesList';
import { useAuth } from '../contexts/AuthContext';
// Types for real API-driven data
type NewsItem = {
@@ -100,7 +103,7 @@ const HomePage: React.FC = () => {
// Matches slider auto-centering handled internally by MatchesSlider component
// API-driven players and sponsors
type UiPlayer = { id:number|string; name:string; number?:number; position?:string; image?:string; slug?:string; age?: number };
type UiPlayer = { id:number|string; name:string; number?:number; position?:string; image?:string; slug?:string; age?: number; nationality?: string };
type UiSponsor = { id:number|string; name:string; logo:string; url?:string; tier?: string };
type UiBanner = { id:number|string; name:string; image:string; url?:string; placement?:string; width?:number; height?:number };
type UiMerch = { id?: number|string; title?: string; image_url: string; url?: string };
@@ -114,11 +117,14 @@ const HomePage: React.FC = () => {
const [merchItems, setMerchItems] = useState<UiMerch[]>([]);
const [merchEnabled, setMerchEnabled] = useState<boolean>(false);
const [upcomingEvents, setUpcomingEvents] = useState<UiEvent[]>([]);
const [defer, setDefer] = useState<boolean>(false);
// Aliases
const [aliases, setAliases] = useState<CompetitionAlias[]>([]);
const [aliasMap, setAliasMap] = useState<Record<string, { alias: string; original_name?: string }>>({});
const [settings, setSettings] = useState<any>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
const [isEditingMode, setIsEditingMode] = useState<boolean>(false);
const { user } = useAuth();
// MyUIbrix element configuration hook for live preview
const { getVariant, isVisible, getStyles, loading: configLoading, refreshKey } = useAllPageElementConfigs('homepage');
@@ -133,6 +139,18 @@ const HomePage: React.FC = () => {
} catch {}
}, [stylePack]);
useEffect(() => {
const ric: any = (window as any).requestIdleCallback || ((cb: any) => setTimeout(cb, 1));
ric(() => setDefer(true));
}, []);
useEffect(() => {
try {
const has = typeof document !== 'undefined' && document.body.classList.contains('myuibrix-edit-mode');
setIsEditingMode(!!has);
} catch {}
}, []);
const heroFallbackArticles = useMemo(() => featured.map((item, index) => ({
id: typeof item.id === 'number' ? item.id : index,
title: item.title,
@@ -402,6 +420,7 @@ const HomePage: React.FC = () => {
number: p.jersey_number,
position: p.position,
image: assetUrl(p.image_url) || undefined,
nationality: (p as any).nationality,
age: (function(iso?: string){
if (!iso) return undefined;
const d = new Date(iso);
@@ -1343,7 +1362,7 @@ const HomePage: React.FC = () => {
<div data-element="style-pack" data-variant={stylePack} style={{ display: 'none' }} />
{/* Above-hero club bar (MyUIbrix managed) */}
{isVisible('hero-topbar', true) && (
<section data-element="hero-topbar" data-variant={getVariant('hero-topbar', 'minimal')} style={{ ...getStyles('hero-topbar') }}>
<section key={`hero-topbar-${refreshKey}-${getVariant('hero-topbar', 'minimal')}`} data-element="hero-topbar" data-variant={getVariant('hero-topbar', 'minimal')} style={{ ...getStyles('hero-topbar') }}>
<ClubHeroTopbar
variant={(getVariant('hero-topbar', 'minimal') as any) as 'brand' | 'minimal' | 'badge'}
fullBleed={getVariant('header', 'unified') === 'fullwidth'}
@@ -1425,31 +1444,48 @@ const HomePage: React.FC = () => {
{/* Featured articles are now shown in the hero grid above, not here */}
{/* Sidebar banners (homepage_sidebar) */}
{/* Sidebar banners (homepage_sidebar) - fixed edge rail, left/right via MyUIbrix variant */}
{(banners || []).some(b => b.placement === 'homepage_sidebar') && (
<section data-element="sidebar" data-variant={getVariant('sidebar', 'right')} className="banner banner-sidebar" style={{ margin: '24px 0', ...getStyles('sidebar') }}>
{/* Simple responsive behavior: stack on mobile, sticky right rail on desktop */}
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<div style={{ width: 320, maxWidth: '100%', position: 'sticky' as const, top: 96 }}>
{(banners || []).filter(b => b.placement === 'homepage_sidebar').map((b) => (
<a key={b.id} href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'block', marginBottom: 12 }}>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img loading="lazy" src={b.image} alt={b.name} style={{ width: b.width ? `${b.width}px` : '100%', height: b.height ? `${b.height}px` : 'auto', maxWidth: '100%' }} />
</a>
))}
<section
key={`sidebar-${refreshKey}-${getVariant('sidebar', 'right')}`}
data-element="sidebar"
data-variant={getVariant('sidebar', 'right')}
className={`banner banner-sidebar sidebar-${getVariant('sidebar', 'right')}`}
style={{
// Use configured styles but force fixed rail placement
...getStyles('sidebar'),
position: 'fixed',
top: 112,
left: getVariant('sidebar', 'right') === 'left' ? 12 : 'auto',
right: getVariant('sidebar', 'right') === 'left' ? 'auto' : 12,
width: 320,
maxWidth: '100%',
zIndex: 50,
pointerEvents: 'none',
}}
>
{(banners || []).filter(b => b.placement === 'homepage_sidebar').map((b) => (
<div key={b.id} className="card" style={{ display: 'block', marginBottom: 12, pointerEvents: 'auto', padding: 4 }}>
<a href={b.url || '#'} target={b.url ? '_blank' : undefined} rel={b.url ? 'noopener noreferrer' : undefined} style={{ display: 'block' }}>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
<img loading="lazy" src={b.image} alt={b.name} style={{ width: b.width ? `${b.width}px` : '100%', height: b.height ? `${b.height}px` : 'auto', maxWidth: '100%' }} />
</a>
</div>
</div>
))}
</section>
)}
{getVariant('hero', heroStyle) === 'scroller' && isVisible('hero', true) && (
<section key={`hero-scroller-${refreshKey}`} data-element="hero" data-variant={getVariant('hero', heroStyle)} style={{ position: 'relative', ...getStyles('hero') }}>
<BlogCardsScroller />
<Suspense fallback={<div style={{ minHeight: 240 }} />}>
<BlogCardsScroller />
</Suspense>
</section>
)}
{(getVariant('hero', heroStyle) === 'swiper' || getVariant('hero', heroStyle) === 'swiper_full') && isVisible('hero', true) && (
<section key={`hero-swiper-${refreshKey}`} data-element="hero" data-variant={getVariant('hero', heroStyle)} style={getVariant('hero', heroStyle) === 'swiper_full' ? { position: 'relative', marginLeft: 'calc(50% - 50vw)', marginRight: 'calc(50% - 50vw)', ...getStyles('hero') } : { position: 'relative', ...getStyles('hero') }}>
<BlogSwiper fallbackArticles={heroFallbackArticles}
/>
<Suspense fallback={<div style={{ minHeight: 280 }} />}>
<BlogSwiper fallbackArticles={heroFallbackArticles} />
</Suspense>
</section>
)}
@@ -1493,36 +1529,41 @@ const HomePage: React.FC = () => {
);
})()
) : isVisible('matches', true) ? (
<NextMatch
data={{
home: matches[0]?.homeTeam || clubName,
home_logo_url: matches[0]?.homeLogoURL || clubLogo,
away: matches[0]?.awayTeam || 'Soupeř',
away_logo_url: matches[0]?.awayLogoURL,
}}
countdown={countdown}
elementProps={{ 'data-element': 'matches', 'data-variant': getVariant('matches', 'compact'), style: { position: 'relative', ...getStyles('matches') } }}
/>
<div className="card">
<NextMatch
key={`matches-${refreshKey}-${getVariant('matches', 'compact')}`}
data={{
home: matches[0]?.homeTeam || clubName,
home_logo_url: matches[0]?.homeLogoURL || clubLogo,
away: matches[0]?.awayTeam || 'Soupeř',
away_logo_url: matches[0]?.awayLogoURL,
}}
countdown={countdown}
elementProps={{ 'data-element': 'matches', 'data-variant': getVariant('matches', 'compact'), style: { position: 'relative', ...getStyles('matches') } }}
/>
</div>
) : null}
{/* Full-bleed top banner (homepage_top) */}
{(banners || []).some(b => b.placement === 'homepage_top') && (
<BannerDisplay banners={banners as any} placement="homepage_top" />
)}
{/* (Removed) Full-bleed top banner (homepage_top) */}
{/* Matches slider with scores by competition (moved after news+tables) */}
{facrCompetitions.length > 0 && (
<MatchesSlider
comps={facrCompetitions as any}
activeIndex={matchesTab}
onActiveChange={setMatchesTab}
onMatchClick={(m: any, compName?: string) => {
setSelectedMatch({ ...m, competition: compName, competitionName: compName });
setIsMatchModalOpen(true);
}}
variant={getVariant('matches-slider', 'carousel') as any}
elementProps={{ 'data-element': 'matches-slider', 'data-variant': getVariant('matches-slider', 'carousel'), style: { position: 'relative', ...getStyles('matches-slider') } }}
/>
defer ? (
<Suspense fallback={null}>
<MatchesSlider
key={`matches-slider-${refreshKey}-${getVariant('matches-slider', 'carousel')}`}
comps={facrCompetitions as any}
activeIndex={matchesTab}
onActiveChange={setMatchesTab}
onMatchClick={(m: any, compName?: string) => {
setSelectedMatch({ ...m, competition: compName, competitionName: compName });
setIsMatchModalOpen(true);
}}
variant={getVariant('matches-slider', 'carousel') as any}
elementProps={{ 'data-element': 'matches-slider', 'data-variant': getVariant('matches-slider', 'carousel'), style: { position: 'relative', ...getStyles('matches-slider') } }}
/>
</Suspense>
) : null
)}
{/* News + Tables: split into two independent sections */}
@@ -1545,12 +1586,13 @@ const HomePage: React.FC = () => {
return (
<section
key={`news-table-${refreshKey}-${newsVariant}-${getVariant('table', 'split_news')}`}
className="standings"
data-variant={variant}
style={{ marginTop: 32 }}
>
{showNews && (
<section data-element="news" data-variant={newsVariant} className="news-list" style={{ ...getStyles('news') }}>
<section key={`news-${refreshKey}-${newsVariant}`} data-element="news" data-variant={newsVariant} className="news-list" style={{ ...getStyles('news') }}>
<div className="section-head" style={{ marginTop: 0 }}>
<h3>Další aktuality</h3>
<a href="/news" className="see-all" style={{ fontSize: '0.85rem' }}>Zobrazit vše <FiArrowRight size={14} /></a>
@@ -1564,46 +1606,55 @@ const HomePage: React.FC = () => {
)}
{showTable && (
<div data-element="table" data-variant={getVariant('table', 'split_news')} style={{ ...getStyles('table') }}>
<div key={`table-${refreshKey}-${getVariant('table', 'split_news')}`} data-element="table" data-variant={getVariant('table', 'split_news')} style={{ ...getStyles('table') }}>
<div className="section-head" style={{ marginTop: 0, marginBottom: 12 }}>
<h3>Tabulky</h3>
<a href="/tabulky" className="see-all" style={{ fontSize: '0.85rem' }}>Zobrazit vše <FiArrowRight size={14} /></a>
</div>
<StandingsCard
variant={((): 'logos'|'plain' => { const v = getVariant('table_rows', 'logos'); return v === 'plain' ? 'plain' : 'logos'; })()}
rows={(matchingStanding?.table || matchingStanding?.rows || []) as any}
onRowClick={(row) => {
const clubData = {
team: (row as any).team?.name ?? (row as any).team ?? (row as any).club ?? '-',
team_id: (row as any).team_id || '',
team_logo_url: (row as any).team_logo_url,
rank: (row as any).position ?? (row as any).pos ?? (row as any).rank ?? 0,
played: (row as any).played ?? (row as any).matches ?? '-',
wins: (row as any).wins ?? (row as any).win ?? '-',
draws: (row as any).draws ?? (row as any).draw ?? '-',
losses: (row as any).losses ?? (row as any).loss ?? '-',
score: (row as any).score ?? '-',
points: (row as any).points ?? (row as any).pts ?? '-',
};
setSelectedClub(clubData);
setIsModalOpen(true);
}}
/>
{defer ? (
<Suspense fallback={null}>
<StandingsCard
variant={((): 'logos'|'plain' => { const v = getVariant('table_rows', 'logos'); return v === 'plain' ? 'plain' : 'logos'; })()}
rows={(matchingStanding?.table || matchingStanding?.rows || []) as any}
onRowClick={(row) => {
const clubData = {
team: (row as any).team?.name ?? (row as any).team ?? (row as any).club ?? '-',
team_id: (row as any).team_id || '',
team_logo_url: (row as any).team_logo_url,
rank: (row as any).position ?? (row as any).pos ?? (row as any).rank ?? 0,
played: (row as any).played ?? (row as any).matches ?? '-',
wins: (row as any).wins ?? (row as any).win ?? '-',
draws: (row as any).draws ?? (row as any).draw ?? '-',
losses: (row as any).losses ?? (row as any).loss ?? '-',
score: (row as any).score ?? '-',
points: (row as any).points ?? (row as any).pts ?? '-',
};
setSelectedClub(clubData);
setIsModalOpen(true);
}}
/>
</Suspense>
) : null}
{/* Banners under the table, inside the table column */}
{(banners || []).some(b => b.placement === 'homepage_under_table') && (
defer ? (
<Suspense fallback={null}>
<BannerDisplay banners={banners as any} placement="homepage_under_table" />
</Suspense>
) : null
)}
</div>
)}
</section>
);
})()}
{/* Banner under tables (homepage_under_table) */}
{(banners || []).some(b => b.placement === 'homepage_under_table') && (
<BannerDisplay banners={banners as any} placement="homepage_under_table" />
)}
{/* (Moved) Banner under tables now renders inside the table column above */}
{/* Competition tables moved into right column below */}
{upcomingEvents.length > 0 && isVisible('activities', true) && (
<section data-element="activities" data-variant={getVariant('activities', 'list')} style={{ marginTop: 32, marginBottom: 16, position: 'relative', ...getStyles('activities') }}>
<section key={`activities-${refreshKey}-${getVariant('activities', 'list')}`} data-element="activities" data-variant={getVariant('activities', 'list')} style={{ marginTop: 32, marginBottom: 16, position: 'relative', ...getStyles('activities') }}>
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
<div className="section-head" style={{ marginTop: 0 }}>
<h3>Aktivity</h3>
@@ -1616,17 +1667,18 @@ const HomePage: React.FC = () => {
{/* Players scroller */}
{players.length > 0 && isVisible('team', false) && (
<section data-element="team" data-variant={getVariant('team', 'grid')} className="players-scroller" style={{ marginTop: 32, position: 'relative', ...getStyles('team') }}>
<section key={`team-${refreshKey}-${getVariant('team', 'grid')}`} data-element="team" data-variant={getVariant('team', 'grid')} className="players-scroller" style={{ marginTop: 32, position: 'relative', ...getStyles('team') }}>
<div className="section-head">
<h3>Hráči</h3>
<a href="/players" className="see-all">Zobrazit vše <FiArrowRight /></a>
</div>
<div className="scroll-x">
{players.map((p) => (
<a key={p.id} href={p.slug ? `/players/${p.slug}` : `/players/${p.id}`} className="player-card">
<a key={p.id} href={p.slug ? `/players/${p.slug}` : `/players/${p.id}`} className="player-card card">
<div className="photo" style={{ backgroundImage: `url(${assetUrl(p.image) || p.image})` }} />
<div className="meta">{typeof p.number !== 'undefined' ? (<><span className="nr">#{p.number}</span> {p.name}</>) : p.name}</div>
<div className="pos">{p.position}</div>
{p.nationality ? (<div className="nat"><span className="flag" style={{ marginRight: 6 }}>{getCountryFlag(p.nationality)}</span>{translateNationality(p.nationality)}</div>) : null}
{typeof p.age === 'number' && <div className="age">{p.age} let</div>}
</a>
))}
@@ -1636,35 +1688,56 @@ const HomePage: React.FC = () => {
{/* Gallery */}
{isVisible('gallery', false) && (
<section data-element="gallery" data-variant={getVariant('gallery', 'grid')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('gallery') }}>
<section key={`gallery-${refreshKey}-${getVariant('gallery', 'grid')}`} data-element="gallery" data-variant={getVariant('gallery', 'grid')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('gallery') }}>
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
<GallerySection zoneramaUrl={galleryUrl} />
{defer ? (
<Suspense fallback={null}>
<GallerySection zoneramaUrl={galleryUrl} />
</Suspense>
) : null}
</div>
</section>
)}
{/* Videos */}
{isVisible('videos', false) && (
<section data-element="videos" data-variant={getVariant('videos', 'grid')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('videos') }}>
<section key={`videos-${refreshKey}-${getVariant('videos', 'carousel')}`} data-element="videos" data-variant={getVariant('videos', 'carousel')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('videos') }}>
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
<VideosSection variant={(getVariant('videos', 'grid') as any) as 'grid' | 'carousel'} />
{defer ? (
<Suspense fallback={null}>
<VideosSection
key={`videos-comp-${refreshKey}-${getVariant('videos', 'carousel')}`}
variant={(getVariant('videos', 'carousel') as any) as 'grid' | 'carousel'}
/>
</Suspense>
) : null}
</div>
</section>
)}
{isVisible('merch', true) && (
<section data-element="merch" data-variant={getVariant('merch', 'grid')} style={{ marginTop: 24, marginBottom: 24, position: 'relative', ...getStyles('merch') }}>
<section key={`merch-${refreshKey}-${getVariant('merch', 'grid')}`} data-element="merch" data-variant={getVariant('merch', 'grid')} style={{ marginTop: 24, marginBottom: 24, position: 'relative', ...getStyles('merch') }}>
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
<MerchSection />
{defer ? (
<Suspense fallback={null}>
<MerchSection variant={(getVariant('merch', 'grid') as any) as 'grid' | 'carousel' | 'featured' | 'list'} />
</Suspense>
) : null}
</div>
</section>
)}
{/* Polls / Voting */}
{isVisible('poll', false) && (
<section data-element="poll" data-variant={getVariant('poll', 'vertical')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('poll') }}>
<section key={`poll-${refreshKey}-${getVariant('poll', 'vertical')}`} data-element="poll" data-variant={getVariant('poll', 'vertical')} style={{ marginTop: 32, marginBottom: 32, position: 'relative', ...getStyles('poll') }}>
<div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 12px' }}>
<PollsWidget featuredOnly={true} maxPolls={1} title="Anketa" />
{defer ? (
<Suspense fallback={null}>
<div className="card">
<PollsWidget featuredOnly={true} maxPolls={1} title="Anketa" />
</div>
</Suspense>
) : null}
</div>
</section>
)}
@@ -1683,9 +1756,13 @@ const HomePage: React.FC = () => {
{/* CTA (Newsletter) moved up */}
{isVisible('newsletter', false) && (
<section data-element="newsletter" data-variant={getVariant('newsletter', 'default')} className="newsletter-cta" style={{ marginTop: 24, marginBottom: 24, position: 'relative', ...getStyles('newsletter') }}>
<section key={`newsletter-${refreshKey}-${getVariant('newsletter', 'default')}`} data-element="newsletter" data-variant={getVariant('newsletter', 'default')} className="newsletter-cta" style={{ marginTop: 24, marginBottom: 24, position: 'relative', ...getStyles('newsletter') }}>
<div className="card" style={{ maxWidth: 960, margin: '0 auto' }}>
<NewsletterSubscribe />
{defer ? (
<Suspense fallback={null}>
<NewsletterSubscribe />
</Suspense>
) : null}
</div>
</section>
)}
@@ -1829,9 +1906,35 @@ const HomePage: React.FC = () => {
console.log('Team clicked:', teamName);
}}
/>
<MyUIbrixErrorBoundary>
<MyUIbrixStyleEditor pageType="homepage" />
</MyUIbrixErrorBoundary>
{isEditingMode ? (
<Suspense fallback={null}>
<MyUIbrixErrorBoundary>
<MyUIbrixStyleEditor pageType="homepage" />
</MyUIbrixErrorBoundary>
</Suspense>
) : null}
{user?.role === 'admin' && !isEditingMode ? (
<div style={{ position: 'fixed', left: 16, bottom: 16, zIndex: 10000 }}>
<Tooltip label="Aktivovat MyUIbrix Editor" placement="right">
<IconButton
aria-label="Upravit stránku"
icon={<FiEdit />}
colorScheme="blue"
size="lg"
borderRadius="full"
onClick={() => {
try {
const url = new URL(window.location.href);
url.searchParams.set('myuibrix', 'edit');
window.history.replaceState({}, '', url.toString());
} catch {}
try { document.body.classList.add('myuibrix-edit-mode'); } catch {}
setIsEditingMode(true);
}}
/>
</Tooltip>
</div>
) : null}
</MainLayout>
);
};
frontend/src/pages/MatchDetailPage.tsx
-4
View File
@@ -5,7 +5,6 @@ import { Link as RouterLink, useParams } from 'react-router-dom';
import { usePublicSettings } from '../hooks/usePublicSettings';
import { useQuery } from '@tanstack/react-query';
import { getCompetitionAliasesPublic } from '../services/competitionAliases';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { API_URL } from '../services/api';
@@ -291,9 +290,6 @@ const MatchDetailPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/PlayerDetailPage.tsx
+26 -11
View File
@@ -3,15 +3,16 @@ import { useParams, Link as RouterLink } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { getPlayer } from '../services/public';
import { assetUrl } from '../utils/url';
import { Box, Badge, Button, Container, Divider, Heading, HStack, Image, SimpleGrid, Skeleton, Stack, Text, VStack } from '@chakra-ui/react';
import { Box, Badge, Button, Container, Divider, Heading, HStack, Image, SimpleGrid, Skeleton, Stack, Text, VStack, useColorModeValue } from '@chakra-ui/react';
import MainLayout from '../components/layout/MainLayout';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { translateNationality } from '../utils/nationality';
import { translateNationality, getCountryFlag } from '../utils/nationality';
const PlayerDetailPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const { data, isLoading, isError } = useQuery({ queryKey: ['player', id], queryFn: () => getPlayer(String(id)) });
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
if (isLoading) {
return (
@@ -45,6 +46,12 @@ const PlayerDetailPage: React.FC = () => {
<HStack justify="space-between">
<HStack spacing={3}>
<Heading as="h1" size={{ base: 'xl', md: '2xl' }}>{fullName}</Heading>
{typeof data.jersey_number === 'number' && (
<Badge colorScheme="blue" fontSize="md" px={3} py={1}>#{data.jersey_number}</Badge>
)}
{data.position && (
<Badge variant="subtle" colorScheme="purple" fontSize="md" px={3} py={1}>{data.position}</Badge>
)}
{!data.is_active && (
<Badge colorScheme="gray" fontSize="md" px={3} py={1}>Neaktivní</Badge>
)}
@@ -63,7 +70,7 @@ const PlayerDetailPage: React.FC = () => {
h={{ base: '300px', md: '400px' }}
/>
</Box>
<Stack spacing={3} bg="white" borderWidth="1px" borderRadius="lg" p={6} shadow="sm">
<Stack spacing={3} bg={cardBg} borderWidth="1px" borderColor={borderColor} borderRadius="lg" p={6} shadow="sm">
<Heading size="md" mb={2}>Informace o hráči</Heading>
{data.position && (
<Text><b>Pozice:</b> {data.position}</Text>
@@ -72,11 +79,25 @@ const PlayerDetailPage: React.FC = () => {
<Text><b>Číslo dresu:</b> <Text as="span" color="brand.primary" fontWeight="700">#{data.jersey_number}</Text></Text>
)}
{data.nationality && (
<Text><b>Národnost:</b> {translateNationality(data.nationality)}</Text>
<HStack>
<Text><b>Národnost:</b></Text>
<Text as="span" fontSize="xl">{getCountryFlag(data.nationality)}</Text>
<Text>{translateNationality(data.nationality)}</Text>
{data.date_of_birth ? (
<Text color={useColorModeValue('gray.600', 'gray.400')}>
— {(() => { const a = calculateAge(data.date_of_birth); return a != null ? `${a} ${czYears(a)}` : ''; })()}
</Text>
) : null}
</HStack>
)}
{data.date_of_birth && (
<Text><b>Datum narození:</b> {new Date(data.date_of_birth).toLocaleDateString('cs-CZ')} — {(() => { const a = calculateAge(data.date_of_birth); return a != null ? `${a} ${czYears(a)}` : '' })()}</Text>
)}
{data.team?.name ? (
<Text><b>Tým:</b> {data.team.name}</Text>
) : (typeof data.team_id === 'number' && data.team_id > 0) ? (
<Text><b>Tým ID:</b> {data.team_id}</Text>
) : null}
{(data.height || data.weight) && (
<Text>
<b>Výška/Váha:</b> {data.height ? `${data.height} cm` : '-'} / {data.weight ? `${data.weight} kg` : '-'}
@@ -88,18 +109,12 @@ const PlayerDetailPage: React.FC = () => {
{data.phone && (
<Text><b>Telefon:</b> <a href={`tel:${normalizeTel(data.phone)}`}>{data.phone}</a></Text>
)}
{typeof data.team_id === 'number' && data.team_id > 0 && (
<Text><b>Tým ID:</b> {data.team_id}</Text>
)}
</Stack>
</SimpleGrid>
</VStack>
</Container>
<NewsletterCTA />
<SponsorsSection />
</Box>
</MainLayout>
);
frontend/src/pages/PlayersPage.tsx
+19 -15
View File
@@ -1,12 +1,12 @@
import { Box, Container, Heading, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue } from '@chakra-ui/react';
import { Box, Container, Heading, HStack, Image, SimpleGrid, Spinner, Stack, Text, VStack, useColorModeValue, Badge } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { getPlayers } from '../services/public';
import type { Player } from '../services/public';
import { assetUrl } from '../utils/url';
import { Link as RouterLink } from 'react-router-dom';
import MainLayout from '../components/layout/MainLayout';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import { translateNationality, getCountryFlag } from '../utils/nationality';
const PlayersPage: React.FC = () => {
const { data, isLoading, isError } = useQuery<Player[]>({ queryKey: ['players'], queryFn: getPlayers });
@@ -55,18 +55,25 @@ const PlayersPage: React.FC = () => {
transition="all 0.2s ease"
spacing={3}
>
<Image
src={assetUrl(p.image_url) || '/logo512.png'}
alt={`${p.first_name} ${p.last_name}`}
objectFit="cover"
borderRadius="md"
w="100%"
h="240px"
/>
<Box position="relative" borderRadius="md" overflow="hidden">
<Image
src={assetUrl(p.image_url) || '/logo512.png'}
alt={`${p.first_name} ${p.last_name}`}
objectFit="cover"
w="100%"
h="240px"
/>
{typeof p.jersey_number === 'number' && (
<Badge position="absolute" top="10px" left="10px" colorScheme="blue" fontSize="0.85rem" px={3} py={1} borderRadius="md" boxShadow="sm">#{p.jersey_number}</Badge>
)}
</Box>
<Text fontWeight="bold" fontSize="lg">{p.first_name} {p.last_name}</Text>
<Text color={textSecondary}>{p.position}</Text>
{p.jersey_number ? (
<Text color="brand.primary" fontWeight="600">#{p.jersey_number}</Text>
{p.nationality ? (
<HStack spacing={2} color={textSecondary}>
<Text as="span" fontSize="lg">{getCountryFlag(p.nationality)}</Text>
<Text>{translateNationality(p.nationality)}</Text>
</HStack>
) : null}
</Stack>
))}
@@ -76,9 +83,6 @@ const PlayersPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</Box>
</MainLayout>
);
frontend/src/pages/SearchPage.tsx
+22 -4
View File
@@ -31,7 +31,6 @@ import { useSearchParams, useNavigate, Link as RouterLink } from 'react-router-d
import MainLayout from '../components/layout/MainLayout';
import { searchAll, SearchResults } from '../services/search';
import NewsletterCTA from '../components/common/NewsletterCTA';
import SponsorsSection from '../components/common/SponsorsSection';
import { assetUrl } from '../utils/url';
const SearchPage: React.FC = () => {
@@ -372,6 +371,23 @@ const SearchPage: React.FC = () => {
{m.date && <Text fontSize="xs" color="gray.500">{m.date} {m.time}</Text>}
</Flex>
))}
{results.matches.length < 3 && results.matchesPast.slice(0, 3 - results.matches.length).map((m) => (
<Flex key={m.id} p={3} bg={bgColor} borderWidth="1px" borderRadius="md" justify="space-between" flexWrap="wrap" gap={2}>
<HStack gap={2}>
{m.metadata?.home_logo_url && <Image src={m.metadata.home_logo_url} alt="" boxSize="24px" objectFit="contain" />}
<Text fontSize="sm" fontWeight="medium">{highlight(m.title, q)}</Text>
{m.metadata?.away_logo_url && <Image src={m.metadata.away_logo_url} alt="" boxSize="24px" objectFit="contain" />}
</HStack>
<HStack gap={2}>
{(typeof m.metadata?.result_home === 'number' && typeof m.metadata?.result_away === 'number') ? (
<Badge colorScheme="purple" fontSize="xs">{m.metadata.result_home}:{m.metadata.result_away}</Badge>
) : (m.metadata?.result ? (
<Badge colorScheme="purple" fontSize="xs">{m.metadata.result}</Badge>
) : null)}
{m.date && <Text fontSize="xs" color="gray.500">{m.date} {m.time}</Text>}
</HStack>
</Flex>
))}
</VStack>
{(results.matches.length + results.matchesPast.length) > 3 && (
<Button mt={3} size="sm" onClick={() => setActiveTab('matches')}>
@@ -506,6 +522,11 @@ const SearchPage: React.FC = () => {
{m.metadata?.away_logo_url && <Image src={m.metadata.away_logo_url} alt="" boxSize="32px" objectFit="contain" />}
</HStack>
<HStack gap={2}>
{(typeof m.metadata?.result_home === 'number' && typeof m.metadata?.result_away === 'number') ? (
<Badge colorScheme="purple" fontSize="sm">{m.metadata.result_home}:{m.metadata.result_away}</Badge>
) : (m.metadata?.result ? (
<Badge colorScheme="purple" fontSize="sm">{m.metadata.result}</Badge>
) : null)}
{m.date && <Text fontSize="sm" color="gray.500">{m.date} {m.time}</Text>}
{m.subtitle && <Badge>{highlight(m.subtitle, q)}</Badge>}
</HStack>
@@ -765,9 +786,6 @@ const SearchPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</Container>
</MainLayout>
);
frontend/src/pages/SetupPage.tsx
+1
View File
@@ -899,6 +899,7 @@ const SetupPage: React.FC = () => {
<FormControl>
<FormLabel>JWT tajemství</FormLabel>
<Input value={jwtSecret} onChange={(e) => setJwtSecret(e.target.value)} placeholder="Ponechte prázdné pro stávající hodnotu" />
<FormHelperText>Tajný klíč pro přihlášení (JWT). Nechte prázdné pro ponechání stávající hodnoty.</FormHelperText>
<Button mt={2} size="sm" onClick={() => setJwtSecret(generateJwtSecret())}>Vygenerovat bezpečné tajemství</Button>
</FormControl>
<Box>
frontend/src/pages/SponsorsPage.tsx
+12 -5
View File
@@ -3,6 +3,7 @@ import { useQuery, useMutation } from '@tanstack/react-query';
import { getSponsors, sendContact } from '../services/public';
import MainLayout from '../components/layout/MainLayout';
import { useForm } from 'react-hook-form';
import { assetUrl } from '../utils/url';
type ContactFormData = { name: string; email: string; subject: string; message: string; source?: string };
@@ -41,9 +42,15 @@ const SponsorsPage: React.FC = () => {
return <Text color="red.500">{errMsg}</Text>;
}
// Group sponsors by tier
const generalPartners = data?.filter((s) => s.tier === 'general') || [];
const standardSponsors = data?.filter((s) => s.tier !== 'general') || [];
// Group sponsors by tier and sort within groups
const sorter = (a: any, b: any) => {
const ao = (a?.display_order ?? 9999);
const bo = (b?.display_order ?? 9999);
if (ao !== bo) return ao - bo;
return String(a?.name || '').localeCompare(String(b?.name || ''));
};
const generalPartners = (data?.filter((s) => s.tier === 'general') || []).slice().sort(sorter);
const standardSponsors = (data?.filter((s) => s.tier !== 'general') || []).slice().sort(sorter);
return (
<MainLayout>
@@ -60,7 +67,7 @@ const SponsorsPage: React.FC = () => {
{generalPartners.map((s) => (
<Stack key={s.id} align="center" bg={cardBg} p={6} borderRadius="lg" borderWidth="2px" borderColor={borderColor} boxShadow="md">
<Link href={s.website_url || '#'} isExternal>
<Image src={s.logo_url || '/logo192.png'} alt={s.name} height="100px" objectFit="contain" />
<Image src={assetUrl(s.logo_url) || '/logo192.png'} alt={s.name} height="100px" objectFit="contain" />
</Link>
<Text fontWeight="semibold" fontSize="lg">{s.name}</Text>
</Stack>
@@ -77,7 +84,7 @@ const SponsorsPage: React.FC = () => {
{standardSponsors.map((s) => (
<Stack key={s.id} align="center" bg={cardBg} p={4} borderRadius="md" borderWidth="1px" borderColor={borderColor}>
<Link href={s.website_url || '#'} isExternal>
<Image src={s.logo_url || '/logo192.png'} alt={s.name} height="60px" objectFit="contain" />
<Image src={assetUrl(s.logo_url) || '/logo192.png'} alt={s.name} height="60px" objectFit="contain" />
</Link>
<Text fontSize="sm">{s.name}</Text>
</Stack>
frontend/src/pages/TablesPage.tsx
-4
View File
@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from 'react';
import MainLayout from '../components/layout/MainLayout';
import { Box, Container, Heading, Text, Tabs, TabList, TabPanels, Tab, TabPanel, Table, Thead, Tbody, Tr, Th, Td, Flex, Spinner, Badge, Link, useColorModeValue } from '@chakra-ui/react';
import { getCompetitionAliasesPublic, CompetitionAlias } from '../services/competitionAliases';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import ClubModal from '../components/home/ClubModal';
import { usePublicSettings } from '../hooks/usePublicSettings';
@@ -237,9 +236,6 @@ const TablesPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
<ClubModal
isOpen={isModalOpen}
frontend/src/pages/VideosPage.tsx
+10 -4
View File
@@ -26,8 +26,8 @@ import { useClubTheme } from '../contexts/ClubThemeContext';
import { usePublicSettings } from '../hooks/usePublicSettings';
import { getCachedYouTube, YouTubeVideo } from '../services/youtube';
import { FaPlay, FaExternalLinkAlt, FaYoutube } from 'react-icons/fa';
import SponsorsSection from '../components/common/SponsorsSection';
import NewsletterCTA from '../components/common/NewsletterCTA';
import CommentsSection from '../components/comments/CommentsSection';
type RenderItem = {
key: string;
@@ -179,6 +179,9 @@ const VideosPage: React.FC = () => {
alt={item.title}
width="100%"
height="100%"
loading="lazy"
decoding="async"
referrerPolicy="origin-when-cross-origin"
style={{ objectFit: 'cover' }}
/>
) : (
@@ -330,6 +333,7 @@ const VideosPage: React.FC = () => {
title={selectedVideo.title}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
loading="lazy"
referrerPolicy="strict-origin-when-cross-origin"
style={{ borderRadius: '8px' }}
/>
@@ -362,6 +366,11 @@ const VideosPage: React.FC = () => {
</Link>
)}
</HStack>
{selectedVideo.videoId && (
<Box mt={4}>
<CommentsSection targetType="youtube_video" targetId={selectedVideo.videoId} />
</Box>
)}
</Box>
</Box>
)}
@@ -371,9 +380,6 @@ const VideosPage: React.FC = () => {
{/* Newsletter CTA */}
<NewsletterCTA />
{/* Sponsors Section */}
<SponsorsSection />
</MainLayout>
);
};
frontend/src/pages/admin/AdminActivitiesPage.tsx
+38 -13
View File
@@ -103,14 +103,31 @@ const AdminActivitiesPage: React.FC = () => {
onSave: async (data) => {
// If event has ID, update it
if (data.id) {
return await updateEvent(data.id, data);
try {
return await updateEvent(data.id, data);
} catch (e: any) {
const status = e?.response?.status;
if (status === 404) {
if (data.title?.trim() && data.start_time) {
const created = await createEvent(data);
if (created?.id) {
setEditing(prev => ({ ...prev, id: created.id } as any));
setDraftKey(`draft-activity-${created.id}`);
try { localStorage.removeItem('draft-activity-new'); } catch {}
}
return created;
}
}
throw e;
}
}
// If no ID and has title, create as draft
// If no ID and has minimal required fields, create as draft
if (data.title?.trim() && data.start_time) {
const created = await createEvent(data);
// Update editing state with new ID
if (created?.id) {
setEditing(prev => ({ ...prev, id: created.id } as any));
setDraftKey(`draft-activity-${created.id}`);
try { localStorage.removeItem('draft-activity-new'); } catch {}
}
return created;
}
@@ -258,11 +275,16 @@ const AdminActivitiesPage: React.FC = () => {
const handleRecoverDraft = () => {
const draft = loadDraft<Partial<Event>>(draftKey);
if (draft) {
setEditing(draft);
const isNewDraft = draftKey === 'draft-activity-new';
const restored: any = { ...draft };
if (isNewDraft && restored.id) {
delete restored.id;
}
setEditing(restored);
// Restore location if present
if ((draft as any)?.latitude && (draft as any)?.longitude) {
setLocationLat((draft as any).latitude);
setLocationLng((draft as any).longitude);
if ((restored as any)?.latitude && (restored as any)?.longitude) {
setLocationLat((restored as any).latitude);
setLocationLng((restored as any).longitude);
}
onOpen();
}
@@ -334,12 +356,15 @@ const AdminActivitiesPage: React.FC = () => {
try {
setAiLoading(true);
const e = editing || {};
// Build a helpful Czech prompt including known fields
const stripHtml = (s: string) => String(s || '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
const lines: string[] = [];
const clubName = String(settingsQ?.data?.club_name || '').trim();
if (clubName) lines.push(`Klub: ${clubName}`);
if (e.type) lines.push(`Typ: ${e.type}`);
if (e.description) lines.push(`Poznámky: ${e.description}`);
if (!aiOverwrite && e.description) {
const plain = stripHtml(e.description as any);
if (plain) lines.push(`Stávající text (pro kontext): ${plain}`);
}
const base = lines.join('\n');
const toneText = aiTone === 'informative'
? 'neutrálním, věcným a stručným stylem (bez nadsázky)'
@@ -347,12 +372,12 @@ const AdminActivitiesPage: React.FC = () => {
? 'formálním a profesionálním stylem (bez příkras)'
: 'přátelským, ale věcným a stručným stylem (bez nadsázky)';
const safeUserPrompt = (aiPrompt || 'Napiš krátkou neutrální pozvánku na klubovou aktivitu.').trim();
const constraints = 'Nevkládej datum ani místo (lokalitu) do textu. Neuváděj konkrétní čas nebo adresu. Vyhýbej se superlativům, hyperbolám a marketingovým frázím. Nepoužívej slova jako „neopakovatelný“, „epický“, „úchvatný“ apod. Preferuj 1–2 krátké odstavce nebo stručné odrážky. Dbej na věcný a střízlivý tón.';
const prompt = `${safeUserPrompt}\n\nPiš ${toneText}, česky, s důrazem na jasnost a pozvánku k účasti. ${constraints}\nDetaily:\n${base}`.trim();
const constraints = 'Nevkládej datum ani místo (lokalitu) do textu. Neuváděj konkrétní čas nebo adresu. Vyhýbej se superlativům, hyperbolám a marketingovým frázím. Nepoužívej slova jako „neopakovatelný“, „epický“, „úchvatný“ apod. Preferuj 2–3 krátké odstavce NEBO stručný seznam s odrážkami. Používej HTML značky ul/li pro odrážky a strong pro zvýraznění. Bez nadpisů (nepoužívej H1/H2). Dbej na věcný a střízlivý tón.';
const prompt = `${safeUserPrompt}\n\nPiš ${toneText}, česky, s důrazem na jasnost a pozvánku k účasti. ${constraints}\nCílová délka: 80–120 slov.\nDetaily:\n${base}`.trim();
const { data } = await api.post('/ai/blog/generate', {
prompt,
audience: clubName ? `Fanoušci klubu ${clubName}, oznámení/pozvánka` : 'Fanoušci klubu, oznámení/pozvánka',
min_words: 60,
min_words: 100,
});
// Handle potential JSON string response from AI (defensive parsing)
@@ -535,7 +560,7 @@ const AdminActivitiesPage: React.FC = () => {
<Tr><Td colSpan={8}>Načítání…</Td></Tr>
)}
{!isLoading && events.map(ev => (
<Tr key={ev.id}>
<Tr key={ev.id} opacity={ev.is_public ? 1 : 0.6}>
<Td>
{(ev as any).image_url ? (
<ThumbnailPreview
frontend/src/pages/admin/ArticlesAdminPage.tsx
+165 -61
View File
@@ -26,7 +26,7 @@ import PollLinker from '../../components/admin/PollLinker';
import ThumbnailPreview from '../../components/common/ThumbnailPreview';
import FilePreview from '../../components/common/FilePreview';
import SaveStatusIndicator from '../../components/common/SaveStatusIndicator';
import DraftRecoveryModal from '../../components/common/DraftRecoveryModal';
import { useAutoSave, loadDraft, getDraftMetadata } from '../../hooks/useAutoSave';
import { getCachedYouTube, YouTubeVideo } from '../../services/youtube';
@@ -91,15 +91,16 @@ const MatchLinkBadge: React.FC<{ articleId: number }> = ({ articleId }) => {
const label = m
? `${String(m.home || m.home_team || '')} ${String(scoreText)} ${String(m.away || m.away_team || '')}`
: `ID: ${String(mid)}`;
const linkHref = (m && (m.facr_link || m.report_url)) ? String(m.facr_link || m.report_url) : '';
return (
<HStack spacing={2}>
<Badge colorScheme={color as any} title={m?.competitionName ? String(m.competitionName) : undefined}>Zápas: {label}</Badge>
{m?.report_url ? (
{linkHref ? (
<IconButton
aria-label="Otevřít FACR"
aria-label="Otevřít zápas na fotbal.cz"
size="xs"
as="a"
href={String(m.report_url)}
href={linkHref}
target="_blank"
rel="noopener noreferrer"
icon={<FiExternalLink />}
@@ -180,6 +181,7 @@ const ArticlesAdminPage = () => {
const [editing, setEditing] = useState<EditingArticle | null>(null);
const [showDraftRecovery, setShowDraftRecovery] = useState(false);
const [draftKey, setDraftKey] = useState<string>('');
const [localDraft, setLocalDraft] = useState<EditingArticle | null>(null);
@@ -268,7 +270,33 @@ const ArticlesAdminPage = () => {
onSave: async (data) => {
// If article has ID, update it as draft
if (data.id) {
return await updateArticle(data.id, { ...data as any, published: false });
try {
return await updateArticle(data.id, { ...data as any, published: false });
} catch (e: any) {
const status = e?.response?.status;
if (status === 404 && data.title?.trim()) {
const payload: CreateArticlePayload = {
title: data.title || 'Koncept článku',
content: data.content || '',
image_url: data.image_url || '',
category_name: data.category_name,
published: false,
slug: data.slug || '',
seo_title: data.seo_title || '',
seo_description: data.seo_description || '',
og_image_url: data.og_image_url || '',
featured: data.featured || false,
};
const created = await createArticle(payload);
if (created?.id) {
setEditing(prev => ({ ...prev, id: created.id } as any));
setDraftKey(`draft-article-${created.id}`);
try { localStorage.removeItem('draft-article-new'); } catch {}
}
return created;
}
throw e;
}
}
// If no ID, create as draft
if (data.title?.trim()) {
@@ -277,7 +305,7 @@ const ArticlesAdminPage = () => {
content: data.content || '',
image_url: data.image_url || '',
category_name: data.category_name,
published: false, // Always save as draft
published: false,
slug: data.slug || '',
seo_title: data.seo_title || '',
seo_description: data.seo_description || '',
@@ -285,9 +313,10 @@ const ArticlesAdminPage = () => {
featured: data.featured || false,
};
const created = await createArticle(payload);
// Update editing state with new ID
if (created?.id) {
setEditing(prev => ({ ...prev, id: created.id } as any));
setDraftKey(`draft-article-${created.id}`);
try { localStorage.removeItem('draft-article-new'); } catch {}
}
return created;
}
@@ -298,16 +327,28 @@ const ArticlesAdminPage = () => {
enabled: isOpen && editing !== null,
});
// Check for draft on component mount
React.useEffect(() => {
const key = 'draft-article-new';
setDraftKey(key);
const metadata = getDraftMetadata(key);
if (metadata && metadata.age < 1440) { // Less than 24 hours old
setShowDraftRecovery(true);
}
// Load local new-draft and expose in list (no popup)
const refreshLocalDraft = React.useCallback(() => {
try {
const key = 'draft-article-new';
const metadata = getDraftMetadata(key);
if (metadata && metadata.age < 1440) {
const d = loadDraft<EditingArticle>(key);
if (d) {
const restored: any = { ...d };
if (restored.id) delete restored.id;
setLocalDraft(restored);
return;
}
}
} catch {}
setLocalDraft(null);
}, []);
React.useEffect(() => {
refreshLocalDraft();
}, [refreshLocalDraft]);
// Fetch cached Zonerama gallery from prefetch
const fetchCachedGallery = useCallback(async () => {
try {
@@ -661,7 +702,7 @@ const ArticlesAdminPage = () => {
return;
}
const { seoTitle, seoDescription } = generateSeoMetadata(aiTitle);
const { seoTitle, seoDescription } = generateSeoMetadata(aiTitle, aiHtml);
setEditing((prev) => ({
...(prev || {}),
title: aiTitle,
@@ -685,20 +726,17 @@ const ArticlesAdminPage = () => {
});
const openCreate = () => {
// Check for existing draft
const key = 'draft-article-new';
setDraftKey(key);
const metadata = getDraftMetadata(key);
if (metadata && metadata.age < 1440) {
// Show recovery modal
setShowDraftRecovery(true);
if (localDraft) {
setEditing(localDraft);
setActiveTabIndex(1);
} else {
// No draft, start fresh
setEditing({ title: '', content: '', featured: false, published: false } as any);
setActiveTabIndex(0); // Start on AI tab for new articles
setAiPrompt(''); // Clear AI prompt
onOpen();
setActiveTabIndex(0);
}
setAiPrompt('');
onOpen();
};
const openEdit = (a: Article) => {
@@ -733,14 +771,20 @@ const ArticlesAdminPage = () => {
setMatchIdInput('');
setEditing(null);
onClose();
refreshLocalDraft();
};
// Draft recovery handlers
const handleRecoverDraft = () => {
const draft = loadDraft<EditingArticle>(draftKey);
if (draft) {
setEditing(draft);
setActiveTabIndex(1); // Go to Základní tab
const isNewDraft = draftKey === 'draft-article-new';
const restored: any = { ...draft };
if (isNewDraft && restored.id) {
delete restored.id;
}
setEditing(restored);
setActiveTabIndex(1);
onOpen();
}
setShowDraftRecovery(false);
@@ -859,15 +903,45 @@ const ArticlesAdminPage = () => {
[deleteMut, toast]
);
const generateSeoMetadata = (title: string) => {
const baseTitle = title ? `${title} | ${process.env.REACT_APP_SITE_NAME || 'Fotbalový klub'}` : (process.env.REACT_APP_SITE_NAME || 'Fotbalový klub');
const description = title
? `Přečtěte si více o ${title.toLowerCase()}. Aktuální informace, novinky a zajímavosti z našeho fotbalového klubu.`
: 'Oficiální stránky našeho fotbalového klubu. Aktuality, zápasy, výsledky a další informace.';
const generateSeoMetadata = (title: string, content?: string) => {
const clubName = String(settingsQ.data?.club_name || process.env.REACT_APP_SITE_NAME || 'Fotbalový klub');
const baseTitle = title ? `${title} | ${clubName}` : clubName;
const toPlain = (html?: string): string => {
try {
const div = document.createElement('div');
div.innerHTML = String(html || '');
return (div.textContent || div.innerText || '').replace(/\s+/g, ' ').trim();
} catch {
return String(html || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
}
};
const makeExcerpt = (text: string, limit = 28): string => {
if (!text) return '';
const words = text.split(' ').filter(Boolean);
const excerpt = words.slice(0, limit).join(' ');
return words.length > limit ? `${excerpt}...` : excerpt;
};
let description = '';
const src = toPlain(content);
if (src) {
description = makeExcerpt(src, 28);
}
if (!description) {
const t = (title || '').trim();
description = t ? `Přečtěte si více: ${t}.` : `Aktuální informace z klubu ${clubName}.`;
}
if (description.length > 160) {
description = description.slice(0, 157).replace(/\s+\S*$/, '') + '...';
}
return {
seoTitle: baseTitle,
seoDescription: description.length > 160 ? description.substring(0, 157) + '...' : description
seoDescription: description
};
};
@@ -897,7 +971,7 @@ const ArticlesAdminPage = () => {
const handleTitleChange = (title: string) => {
if (!editing) return;
const { seoTitle, seoDescription } = generateSeoMetadata(title);
const { seoTitle, seoDescription } = generateSeoMetadata(title, (editing as any)?.content);
setEditing(prev => ({
...(prev as any),
title,
@@ -1232,8 +1306,49 @@ const ArticlesAdminPage = () => {
{isLoading && (
<Tr><Td colSpan={6}><Spinner size="sm" /></Td></Tr>
)}
{!isLoading && localDraft && (
<Tr key="local-draft" opacity={0.6}>
<Td>
<ThumbnailPreview
src={assetUrl((localDraft as any).image_url) || '/dist/img/logo-club-empty.svg'}
alt={(localDraft as any).title || 'Koncept'}
size="48px"
previewSize="350px"
/>
</Td>
<Td>
<VStack align="start" spacing={0}>
<Text fontWeight="medium">{(localDraft as any).title || 'Bez názvu (koncept)'}</Text>
<Text fontSize="xs" color="gray.500">Koncept (lokálně uložený)</Text>
</VStack>
</Td>
<Td>
<Badge colorScheme="gray" fontSize="xs">
{(localDraft as any).category_name || 'Bez kategorie'}
</Badge>
</Td>
<Td>
<Switch size="sm" isChecked={!!(localDraft as any).featured} isDisabled />
</Td>
<Td>
<Badge colorScheme="gray">Koncept</Badge>
</Td>
<Td isNumeric>
<HStack spacing={1} justify="flex-end">
<IconButton aria-label="Upravit koncept" size="sm" icon={<FiEdit2 />} onClick={openCreate} />
<IconButton
aria-label="Smazat koncept"
size="sm"
colorScheme="red"
icon={<FiTrash2 />}
onClick={() => { try { localStorage.removeItem('draft-article-new'); } catch {} setLocalDraft(null); toast({ title: 'Koncept odstraněn', status: 'success', duration: 2000 }); }}
/>
</HStack>
</Td>
</Tr>
)}
{!isLoading && articles.map((a) => (
<Tr key={a.id}>
<Tr key={a.id} opacity={a.published ? 1 : 0.6}>
<Td>
<ThumbnailPreview
src={assetUrl(a.image_url) || '/dist/img/logo-club-empty.svg'}
@@ -1769,20 +1884,7 @@ const ArticlesAdminPage = () => {
</VStack>
</Box>
{/* OG Image for Social Sharing */}
<FormControl>
<FormLabel>OG obrázek pro sdílení (volitelné)</FormLabel>
<FormHelperText mb={2}>
Speciální obrázek pro sdílení na sociálních sítích. Pokud není nastaveno, použije se titulní obrázek.
</FormHelperText>
<HStack>
<Image src={assetUrl((editing as any)?.og_image_url) || assetUrl(editing?.image_url) || '/dist/img/logo-club-empty.svg'} alt="og" boxSize="80px" objectFit="cover" borderRadius="md" />
<Button as="label" leftIcon={<FiUpload />} variant="outline">
Nahrát OG obrázek
<Input type="file" display="none" accept="image/*" onChange={(e) => onUploadOg(e.target.files?.[0])} />
</Button>
</HStack>
</FormControl>
{/* File Attachments */}
<FormControl>
@@ -2009,6 +2111,19 @@ const ArticlesAdminPage = () => {
/>
<FormHelperText fontSize="xs">Automaticky generováno z obsahu článku</FormHelperText>
</FormControl>
<FormControl>
<FormLabel>OG obrázek pro sdílení (volitelné)</FormLabel>
<FormHelperText mb={2}>
Speciální obrázek pro sdílení na sociálních sítích. Pokud není nastaveno, použije se titulní obrázek.
</FormHelperText>
<HStack>
<Image src={assetUrl((editing as any)?.og_image_url) || assetUrl(editing?.image_url) || '/dist/img/logo-club-empty.svg'} alt="og" boxSize="80px" objectFit="cover" borderRadius="md" />
<Button as="label" leftIcon={<FiUpload />} variant="outline">
Nahrát OG obrázek
<Input type="file" display="none" accept="image/*" onChange={(e) => onUploadOg(e.target.files?.[0])} />
</Button>
</HStack>
</FormControl>
</VStack>
</AccordionPanel>
</AccordionItem>
@@ -2223,17 +2338,6 @@ const ArticlesAdminPage = () => {
</Modal>
{/* Draft Recovery Modal */}
<DraftRecoveryModal
isOpen={showDraftRecovery}
onClose={() => setShowDraftRecovery(false)}
onRecover={handleRecoverDraft}
onDiscard={handleDiscardDraft}
onDeleteOnly={handleDeleteOnly}
draftAge={getDraftMetadata(draftKey)?.age || null}
entityType="článek"
/>
</AdminLayout>
);
};
frontend/src/pages/admin/BannersAdminPage.tsx
+35 -19
View File
@@ -1,10 +1,10 @@
import React, { useState, useRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import { Box, Button, FormControl, FormLabel, Heading, HStack, IconButton, Image, Input, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Spinner, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue, useDisclosure, useToast, VStack, Select, Text, Switch, Badge, Alert, AlertIcon, AlertTitle, AlertDescription, Divider, Grid, GridItem } from '@chakra-ui/react';
import { FiPlus, FiEdit2, FiTrash2, FiUpload, FiAlertCircle, FiCheckCircle } from 'react-icons/fi';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import AdminLayout from '../../layouts/AdminLayout';
import { Banner as AdminBanner, getBanners, createBanner, updateBanner, deleteBanner } from '../../services/banners';
import { uploadFile } from '../../services/articles';
import { uploadFile, getArticles } from '../../services/articles';
import { assetUrl } from '../../utils/url';
// Banner placement presets with dimensions and descriptions
@@ -19,15 +19,6 @@ type BannerPreset = {
};
const BANNER_PRESETS: BannerPreset[] = [
{
value: 'homepage_top',
label: 'Hlavní banner (Homepage - vrchol)',
description: 'Hlavní reklamní plocha nahoře, zobrazena všem návštěvníkům',
width: 1200,
height: 200,
aspectRatio: 6,
position: 'top'
},
{
value: 'homepage_middle',
label: 'Střední banner (Homepage - střed)',
@@ -39,8 +30,8 @@ const BANNER_PRESETS: BannerPreset[] = [
},
{
value: 'homepage_sidebar',
label: 'Postranní banner (Homepage - sidebar)',
description: 'Menší banner v pravém postranním panelu',
label: 'Postranní banner (Homepage - okraj obrazovky)',
description: 'Menší banner ukotvený u levého/pravého okraje obrazovky (nastavitelné v editoru: Sidebar varianta vlevo/vpravo)',
width: 300,
height: 250,
aspectRatio: 1.2,
@@ -86,6 +77,7 @@ const BannersAdminPage: React.FC = () => {
const [imageResolution, setImageResolution] = useState<{ width: number; height: number } | null>(null);
const [recommendedPlacements, setRecommendedPlacements] = useState<BannerPreset[]>([]);
const [uploadingImage, setUploadingImage] = useState(false);
const [hasArticles, setHasArticles] = useState<boolean>(true);
const fileInputRef = useRef<HTMLInputElement>(null);
const { isOpen, onOpen, onClose } = useDisclosure();
@@ -142,6 +134,18 @@ const BannersAdminPage: React.FC = () => {
onClose();
};
// Determine if at least one published article exists to allow "Banner v článcích"
useEffect(() => {
(async () => {
try {
const resp = await getArticles({ page: 1, page_size: 1, published: true });
setHasArticles(((resp?.total ?? 0) > 0) || ((resp?.data?.length ?? 0) > 0));
} catch {
setHasArticles(true); // fail-open so UI is not unnecessarily blocked
}
})();
}, []);
const createMut = useMutation({
mutationFn: (payload: any) => createBanner(payload),
onSuccess: () => { toast({ title: 'Banner vytvořen', status: 'success' }); qc.invalidateQueries({ queryKey: ['admin-banners'] }); closeModal(); },
@@ -277,7 +281,7 @@ const BannersAdminPage: React.FC = () => {
{!isLoading && banners.map((b: AdminBanner) => {
const preset = getPreset((b as any).placement);
return (
<Tr key={b.id}>
<Tr key={b.id} opacity={b.is_active ? 1 : 0.6}>
<Td>
<Image src={assetUrl((b as any).image_url) || '/logo192.png'} alt={b.name} boxSize="56px" objectFit="contain" bg={inputBg} borderRadius="md" />
</Td>
@@ -402,11 +406,23 @@ const BannersAdminPage: React.FC = () => {
}}
>
<option value="">— vyberte umístění —</option>
{BANNER_PRESETS.map(preset => (
<option key={preset.value} value={preset.value}>
{preset.label} ({preset.width}×{preset.height})
</option>
))}
{BANNER_PRESETS.map(preset => {
const isArticleInline = preset.value === 'article_inline';
const disabled = isArticleInline && !hasArticles;
const label = isArticleInline && !hasArticles
? `${preset.label} — nelze použít (na webu zatím není žádný článek)`
: `${preset.label} (${preset.width}×${preset.height})`;
return (
<option
key={preset.value}
value={preset.value}
disabled={disabled}
title={isArticleInline && !hasArticles ? 'Tuto pozici lze použít až když existuje alespoň 1 publikovaný článek.' : preset.description}
>
{label}
</option>
);
})}
</Select>
{editing?.placement && (() => {
const preset = getPreset((editing as any).placement);
frontend/src/pages/admin/CommentsAdminPage.tsx
+178
View File
@@ -0,0 +1,178 @@
import React from 'react';
import AdminLayout from '../../layouts/AdminLayout';
import { Box, Heading, HStack, VStack, Button, Select, Input, Table, Thead, Tbody, Tr, Th, Td, Text, Badge, IconButton, useToast, Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, useDisclosure, FormControl, FormLabel, NumberInput, NumberInputField } from '@chakra-ui/react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { adminListComments, adminUpdateCommentStatus, adminBanUser, adminListUnbanRequests, adminResolveUnban } from '../../services/admin/comments';
import { deleteComment } from '../../services/comments';
import { FiTrash2 } from 'react-icons/fi';
const CommentsAdminPage: React.FC = () => {
const [status, setStatus] = React.useState<string>('');
const [targetType, setTargetType] = React.useState<string>('');
const [targetId, setTargetId] = React.useState<string>('');
const [userId, setUserId] = React.useState<string>('');
const [page, setPage] = React.useState<number>(1);
const toast = useToast();
const qc = useQueryClient();
const listQ = useQuery({
queryKey: ['admin-comments', { status, targetType, targetId, userId, page }],
queryFn: () => adminListComments({ status: status as any, target_type: targetType, target_id: targetId, user_id: userId, page, page_size: 50 }),
keepPreviousData: true,
});
const unbanQ = useQuery({
queryKey: ['admin-unban-requests'],
queryFn: adminListUnbanRequests,
});
const updateStatusMut = useMutation({
mutationFn: (args: { id: number; s: 'visible'|'hidden' }) => adminUpdateCommentStatus(args.id, args.s),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-comments'] }); },
});
const deleteMut = useMutation({
mutationFn: (id: number) => deleteComment(id),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-comments'] }); toast({ status: 'success', title: 'Smazáno' }); },
});
const [banUserId, setBanUserId] = React.useState<number | null>(null);
const banModal = useDisclosure();
const [banReason, setBanReason] = React.useState<string>('Porušení pravidel diskuse');
const [banHours, setBanHours] = React.useState<number>(0);
const banMut = useMutation({
mutationFn: () => adminBanUser(banUserId || 0, banReason, banHours),
onSuccess: async () => { banModal.onClose(); setBanUserId(null); toast({ status: 'success', title: 'Uživatel zablokován' }); },
});
const resolveUnbanMut = useMutation({
mutationFn: (args: { id: number; action: 'approve'|'reject' }) => adminResolveUnban(args.id, args.action),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-unban-requests'] }); toast({ status: 'success', title: 'Vyřízeno' }); },
});
const items = listQ.data?.items || [];
return (
<AdminLayout>
<Box>
<Heading size="md" mb={4}>Komentáře (moderace)</Heading>
<VStack align="stretch" spacing={3} mb={4}>
<HStack>
<Select placeholder="Status" value={status} onChange={(e) => { setStatus(e.target.value); setPage(1); }} maxW="200px">
<option value="visible">Viditelné</option>
<option value="hidden">Skryté</option>
</Select>
<Select placeholder="Typ cíle" value={targetType} onChange={(e) => { setTargetType(e.target.value); setPage(1); }} maxW="220px">
<option value="article">Článek</option>
<option value="event">Aktivita</option>
<option value="gallery_album">Galerie</option>
<option value="youtube_video">YouTube video</option>
</Select>
<Input placeholder="Target ID" value={targetId} onChange={(e) => { setTargetId(e.target.value); setPage(1); }} maxW="200px" />
<Input placeholder="User ID" value={userId} onChange={(e) => { setUserId(e.target.value); setPage(1); }} maxW="200px" />
</HStack>
</VStack>
<Box borderWidth="1px" borderRadius="md" overflowX="auto">
<Table size="sm">
<Thead>
<Tr>
<Th>ID</Th>
<Th>Uživatel</Th>
<Th>Cíl</Th>
<Th>Obsah</Th>
<Th>Spam</Th>
<Th>Status</Th>
<Th>Akce</Th>
</Tr>
</Thead>
<Tbody>
{items.map((c) => (
<Tr key={c.id}>
<Td>#{c.id}</Td>
<Td>#{c.user?.id} {c.user?.first_name} {c.user?.last_name}</Td>
<Td><Badge>{c.target_type}</Badge> <Text as="span">{c.target_id}</Text></Td>
<Td maxW="420px"><Text noOfLines={2}>{c.content}</Text></Td>
<Td>{(c as any).spam_score ? <Badge colorScheme={(c as any).spam_score > 0.5 ? 'orange' : 'green'}>{(c as any).spam_score.toFixed(2)}</Badge> : '-'}</Td>
<Td>
<HStack>
<Button size="xs" variant={c.status === 'visible' ? 'solid' : 'outline'} onClick={() => updateStatusMut.mutate({ id: c.id, s: 'visible' })}>Viditelné</Button>
<Button size="xs" variant={c.status === 'hidden' ? 'solid' : 'outline'} onClick={() => updateStatusMut.mutate({ id: c.id, s: 'hidden' })}>Skryté</Button>
</HStack>
</Td>
<Td>
<HStack>
<IconButton aria-label="Smazat" size="xs" icon={<FiTrash2 />} onClick={() => deleteMut.mutate(c.id)} />
<Button size="xs" variant="outline" onClick={() => { setBanUserId(c.user?.id as any); banModal.onOpen(); }}>Ban</Button>
</HStack>
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
<Heading size="sm" mt={6} mb={2}>Žádosti o odblokování</Heading>
<Box borderWidth="1px" borderRadius="md" overflowX="auto">
<Table size="sm">
<Thead>
<Tr>
<Th>ID</Th>
<Th>Uživatel</Th>
<Th>Text</Th>
<Th>Status</Th>
<Th>Akce</Th>
</Tr>
</Thead>
<Tbody>
{(unbanQ.data?.items || []).map((r) => (
<Tr key={r.id}>
<Td>#{r.id}</Td>
<Td>#{r.user_id}</Td>
<Td maxW="480px"><Text noOfLines={2}>{r.message}</Text></Td>
<Td><Badge>{r.status}</Badge></Td>
<Td>
<HStack>
<Button size="xs" colorScheme="green" variant="outline" onClick={() => resolveUnbanMut.mutate({ id: r.id, action: 'approve' })}>Povolit</Button>
<Button size="xs" colorScheme="red" variant="outline" onClick={() => resolveUnbanMut.mutate({ id: r.id, action: 'reject' })}>Zamítnout</Button>
</HStack>
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
{/* Ban modal */}
<Modal isOpen={banModal.isOpen} onClose={banModal.onClose} isCentered>
<ModalOverlay />
<ModalContent>
<ModalHeader>Zablokovat uživatele #{banUserId}</ModalHeader>
<ModalCloseButton />
<ModalBody>
<VStack align="stretch" spacing={3}>
<FormControl>
<FormLabel>Důvod</FormLabel>
<Input value={banReason} onChange={(e) => setBanReason(e.target.value)} />
</FormControl>
<FormControl>
<FormLabel>Doba (hodiny) – 0 = trvale</FormLabel>
<NumberInput min={0} value={banHours} onChange={(v) => setBanHours(Number(v) || 0)}>
<NumberInputField />
</NumberInput>
</FormControl>
</VStack>
</ModalBody>
<ModalFooter>
<HStack>
<Button onClick={banModal.onClose}>Zrušit</Button>
<Button colorScheme="red" isLoading={banMut.isPending} onClick={() => banMut.mutate()}>Zablokovat</Button>
</HStack>
</ModalFooter>
</ModalContent>
</Modal>
</Box>
</AdminLayout>
);
};
export default CommentsAdminPage;
frontend/src/pages/admin/EngagementAdminPage.tsx
+209
View File
@@ -0,0 +1,209 @@
import React from 'react';
import AdminLayout from '../../layouts/AdminLayout';
import {
Box,
Heading,
HStack,
VStack,
Button,
Input,
Select,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
Text,
Badge,
IconButton,
useToast,
Switch,
NumberInput,
NumberInputField,
Image,
Divider,
} from '@chakra-ui/react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
adminListRewards,
adminCreateReward,
adminUpdateReward,
adminDeleteReward,
adminListRedemptions,
adminUpdateRedemptionStatus,
AdminRewardItem,
AdminRedemption,
} from '../../services/admin/engagement';
import { FiTrash2 } from 'react-icons/fi';
const EngagementAdminPage: React.FC = () => {
const toast = useToast();
const qc = useQueryClient();
const rewardsQ = useQuery({
queryKey: ['admin-engagement-rewards'],
queryFn: () => adminListRewards(),
});
const redemptionsQ = useQuery({
queryKey: ['admin-engagement-redemptions'],
queryFn: () => adminListRedemptions(),
});
const [form, setForm] = React.useState({
name: '',
type: 'avatar_static',
cost_points: 50,
image_url: '',
stock: 0,
active: true,
});
const createMut = useMutation({
mutationFn: () => adminCreateReward(form),
onSuccess: async () => {
setForm({ name: '', type: 'avatar_static', cost_points: 50, image_url: '', stock: 0, active: true });
await qc.invalidateQueries({ queryKey: ['admin-engagement-rewards'] });
toast({ status: 'success', title: 'Odměna vytvořena' });
},
onError: (e: any) => toast({ status: 'error', title: e?.response?.data?.error || 'Chyba při vytváření odměny' }),
});
const updateMut = useMutation({
mutationFn: (args: { id: number; body: Partial<AdminRewardItem> }) => adminUpdateReward(args.id, args.body as any),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-engagement-rewards'] }); toast({ status: 'success', title: 'Aktualizováno' }); },
});
const deleteMut = useMutation({
mutationFn: (id: number) => adminDeleteReward(id),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-engagement-rewards'] }); toast({ status: 'success', title: 'Smazáno' }); },
});
const redStatusMut = useMutation({
mutationFn: (args: { id: number; action: 'approve'|'reject'|'fulfill' }) => adminUpdateRedemptionStatus(args.id, args.action),
onSuccess: async () => { await qc.invalidateQueries({ queryKey: ['admin-engagement-redemptions'] }); toast({ status: 'success', title: 'Status aktualizován' }); },
});
const rewards = rewardsQ.data || [];
const redemptions = redemptionsQ.data || [];
return (
<AdminLayout>
<Box>
<Heading size="md" mb={4}>Odměny & Úspěchy</Heading>
<VStack align="stretch" spacing={4}>
<Box>
<Heading size="sm" mb={2}>Vytvořit novou odměnu</Heading>
<VStack align="stretch" spacing={3} borderWidth="1px" borderRadius="md" p={3}>
<HStack>
<Input placeholder="Název" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} maxW="280px" />
<Select value={form.type} onChange={(e) => setForm({ ...form, type: e.target.value })} maxW="220px">
<option value="avatar_static">Avatar (statický)</option>
<option value="avatar_animated">Avatar (animovaný)</option>
<option value="merch_coupon">Merch kupon</option>
<option value="custom">Vlastní</option>
</Select>
<NumberInput value={form.cost_points} min={0} maxW="180px" onChange={(v) => setForm({ ...form, cost_points: Number(v) || 0 })}>
<NumberInputField placeholder="Body" />
</NumberInput>
<NumberInput value={form.stock} min={0} maxW="160px" onChange={(v) => setForm({ ...form, stock: Number(v) || 0 })}>
<NumberInputField placeholder="Sklad" />
</NumberInput>
<Input placeholder="Obrázek URL" value={form.image_url} onChange={(e) => setForm({ ...form, image_url: e.target.value })} />
<HStack>
<Text>Aktivní</Text>
<Switch isChecked={form.active} onChange={(e) => setForm({ ...form, active: e.target.checked })} />
</HStack>
<Button colorScheme="blue" onClick={() => createMut.mutate()} isLoading={createMut.isPending} isDisabled={!form.name.trim()}>Vytvořit</Button>
</HStack>
</VStack>
</Box>
<Divider />
<Box>
<Heading size="sm" mb={2}>Odměny</Heading>
<Box borderWidth="1px" borderRadius="md" overflowX="auto">
<Table size="sm">
<Thead>
<Tr>
<Th>ID</Th>
<Th>Název</Th>
<Th>Typ</Th>
<Th>Body</Th>
<Th>Sklad</Th>
<Th>Obrázek</Th>
<Th>Aktivní</Th>
<Th>Akce</Th>
</Tr>
</Thead>
<Tbody>
{rewards.map((r: AdminRewardItem) => (
<Tr key={r.id}>
<Td>#{r.id}</Td>
<Td>{r.name}</Td>
<Td><Badge>{r.type}</Badge></Td>
<Td>
<NumberInput size="sm" value={r.cost_points} min={0} maxW="120px" onChange={(v) => updateMut.mutate({ id: r.id, body: { cost_points: Number(v) || 0 } })}>
<NumberInputField />
</NumberInput>
</Td>
<Td>
<NumberInput size="sm" value={r.stock || 0} min={0} maxW="100px" onChange={(v) => updateMut.mutate({ id: r.id, body: { stock: Number(v) || 0 } })}>
<NumberInputField />
</NumberInput>
</Td>
<Td>{r.image_url ? <Image src={r.image_url} alt={r.name} boxSize="40px" objectFit="cover" borderRadius="md" /> : '-'}</Td>
<Td>
<Switch isChecked={!!r.active} onChange={(e) => updateMut.mutate({ id: r.id, body: { active: e.target.checked } })} />
</Td>
<Td>
<IconButton aria-label="Smazat" size="xs" icon={<FiTrash2 />} onClick={() => deleteMut.mutate(r.id)} />
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
</Box>
<Box>
<Heading size="sm" mt={6} mb={2}>Uplatnění odměn</Heading>
<Box borderWidth="1px" borderRadius="md" overflowX="auto">
<Table size="sm">
<Thead>
<Tr>
<Th>ID</Th>
<Th>Uživatel</Th>
<Th>Odměna</Th>
<Th>Status</Th>
<Th>Akce</Th>
</Tr>
</Thead>
<Tbody>
{redemptions.map((d: AdminRedemption) => (
<Tr key={d.id}>
<Td>#{d.id}</Td>
<Td>#{d.user_id}</Td>
<Td>#{d.reward_id}</Td>
<Td><Badge>{d.status}</Badge></Td>
<Td>
<HStack>
<Button size="xs" variant="outline" onClick={() => redStatusMut.mutate({ id: d.id, action: 'approve' })}>Schválit</Button>
<Button size="xs" variant="outline" colorScheme="red" onClick={() => redStatusMut.mutate({ id: d.id, action: 'reject' })}>Zamítnout</Button>
<Button size="xs" variant="outline" colorScheme="green" onClick={() => redStatusMut.mutate({ id: d.id, action: 'fulfill' })}>Vydat</Button>
</HStack>
</Td>
</Tr>
))}
</Tbody>
</Table>
</Box>
</Box>
</VStack>
</Box>
</AdminLayout>
);
};
export default EngagementAdminPage;
frontend/src/pages/admin/FilesAdminPage.tsx
+41
View File
@@ -45,6 +45,7 @@ import {
Divider,
Code,
Icon,
Progress,
} from '@chakra-ui/react';
import { useState, useMemo } from 'react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
@@ -62,6 +63,7 @@ import {
refreshFileTracking,
formatFileSize,
getFileIcon,
getStorageUsage,
} from '../../services/files';
import { API_URL } from '../../services/api';
import { assetUrl } from '../../utils/url';
@@ -103,6 +105,12 @@ const FilesAdminPage: React.FC = () => {
queryFn: getDuplicateFiles,
});
// Storage usage
const { data: storageUsage } = useQuery({
queryKey: ['admin-files-usage'],
queryFn: getStorageUsage,
});
// Delete mutation
const deleteMutation = useMutation({
mutationFn: ({ id, force }: { id: number; force: boolean }) => deleteFile(id, force),
@@ -111,6 +119,7 @@ const FilesAdminPage: React.FC = () => {
qc.invalidateQueries({ queryKey: ['admin-files'] });
qc.invalidateQueries({ queryKey: ['admin-files-unused'] });
qc.invalidateQueries({ queryKey: ['admin-files-duplicates'] });
qc.invalidateQueries({ queryKey: ['admin-files-usage'] });
onDeleteClose();
setDeleteTarget(null);
setForceDelete(false);
@@ -144,6 +153,7 @@ const FilesAdminPage: React.FC = () => {
qc.invalidateQueries({ queryKey: ['admin-files'] });
qc.invalidateQueries({ queryKey: ['admin-files-unused'] });
qc.invalidateQueries({ queryKey: ['admin-files-duplicates'] });
qc.invalidateQueries({ queryKey: ['admin-files-usage'] });
},
onError: () => {
toast({ title: 'Chyba při skenování', status: 'error' });
@@ -307,6 +317,37 @@ const FilesAdminPage: React.FC = () => {
</HStack>
</HStack>
{storageUsage && (
<VStack align="stretch" spacing={2}>
{(storageUsage.status === 'warn' || storageUsage.status === 'critical') && (
<Alert status={storageUsage.status === 'critical' ? 'error' : 'warning'} borderRadius="md">
<AlertIcon />
<Box>
<AlertTitle>
{storageUsage.status === 'critical' ? 'Úložiště téměř plné' : 'Dochází místo v úložišti'}
</AlertTitle>
<AlertDescription>
Využito {storageUsage.percent.toFixed(1)}% ({formatFileSize(storageUsage.used_bytes)} z {formatFileSize(storageUsage.quota_bytes)}).
</AlertDescription>
</Box>
</Alert>
)}
<HStack>
<Text fontWeight="medium">Využití úložiště</Text>
<Spacer />
<Text fontSize="sm" color="gray.500">
{formatFileSize(storageUsage.used_bytes)} / {formatFileSize(storageUsage.quota_bytes)} ({storageUsage.percent.toFixed(1)}%)
</Text>
</HStack>
<Progress
value={Math.min(100, storageUsage.percent)}
colorScheme={storageUsage.status === 'critical' ? 'red' : storageUsage.status === 'warn' ? 'orange' : 'blue'}
height="10px"
borderRadius="md"
/>
</VStack>
)}
<Tabs colorScheme="blue" variant="enclosed">
<TabList>
<Tab>Všechny soubory ({allFiles.length})</Tab>
frontend/src/pages/admin/MatchesAdminPage.tsx
+43 -111
View File
@@ -25,12 +25,7 @@ import {
FormLabel,
Input,
Stack,
InputGroup,
InputRightElement,
List,
ListItem,
FormErrorMessage,
Image,
useBreakpointValue,
Wrap,
WrapItem,
@@ -39,15 +34,15 @@ import {
} from '@chakra-ui/react';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import AdminLayout from '../../layouts/AdminLayout';
import { putMatchOverride, fetchTeamLogoOverrides } from '../../services/adminMatches';
import { putMatchOverride } from '../../services/adminMatches';
import { getPublicSettings } from '../../services/settings';
import { useEffect, useMemo, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { parse, format } from 'date-fns';
import { assetUrl } from '../../utils/url';
import { batchFetchLogosFromSportLogosAPI } from '../../utils/sportLogosAPI';
import { API_URL } from '../../services/api';
import TeamLogo from '../../components/common/TeamLogo';
import { getCompetitionAliasesPublic } from '../../services/competitionAliases';
const MatchesAdminPage = () => {
const queryClient = useQueryClient();
@@ -57,16 +52,8 @@ const MatchesAdminPage = () => {
const [form, setForm] = useState({
venue_override: '',
date_time_edit: '',
notes: '',
});
const { data: overrides = {} } = useQuery({
queryKey: ['teamLogoOverrides'],
queryFn: fetchTeamLogoOverrides,
staleTime: 5 * 60 * 1000,
});
const overridesById: Record<string, { name?: string; logo_url?: string }> = (overrides as any)?.by_id || {};
const normalizeName = (s: string) => {
let out = String(s || '');
out = out
@@ -91,64 +78,8 @@ const MatchesAdminPage = () => {
out = out.replace(/\s+/g, ' ').trim();
return out;
};
const byName: Record<string, string> = (overrides as any)?.by_name || {};
const byNameNormalized = useMemo(() => {
const idx: Record<string, string> = {};
for (const k of Object.keys(byName)) idx[normalizeName(k)] = byName[k];
return idx;
}, [byName]);
// Build name index from overrides by_id for cases where team_id is missing in cached data
const overridesNameIndex = useMemo(() => {
const idx: Record<string, { id: string; name: string; logo_url: string }> = {};
try {
for (const [id, v] of Object.entries(overridesById)) {
const name = String((v as any)?.name || '').trim();
const logo = String((v as any)?.logo_url || '').trim();
if (!name) continue;
const norm = normalizeName(name);
if (!norm) continue;
idx[norm] = { id, name, logo_url: logo };
}
} catch {}
return idx;
}, [overridesById]);
const [sportLogosMap, setSportLogosMap] = useState<Record<string, string>>({});
const getLogo = (teamName?: string, teamId?: string, facrOriginal?: string) => {
if (!teamName) return assetUrl('/dist/img/logo-club-empty.svg') as string;
// 0) Admin override by team ID takes precedence
if (teamId && overridesById[teamId] && overridesById[teamId]?.logo_url) {
const u = String(overridesById[teamId].logo_url);
if (u.startsWith('/')) return assetUrl(u) as string;
return u;
}
// 0.5) If no ID, but override exists for normalized name, use it
try {
const hit = overridesNameIndex[normalizeName(teamName)];
if (hit && hit.logo_url) {
const u = String(hit.logo_url);
if (u.startsWith('/')) return assetUrl(u) as string;
return u;
}
} catch {}
// 1) LogoAPI map by team ID
if (teamId && sportLogosMap[String(teamId)]) return sportLogosMap[String(teamId)];
// 2) Local/legacy overrides by name
let overrideUrl = byName[teamName];
if (!overrideUrl) overrideUrl = byNameNormalized[normalizeName(teamName)];
if (overrideUrl) {
if (overrideUrl.startsWith('/')) return assetUrl(overrideUrl) as string;
return overrideUrl;
}
// 3) FACR original if provided
if (facrOriginal) return facrOriginal;
// Fallback placeholder
return '/dist/img/logo-club-empty.svg';
};
// Team name/logo editing removed
const { data: matches = [], isLoading, error } = useQuery<any[], Error>({
@@ -201,23 +132,7 @@ const MatchesAdminPage = () => {
}));
},
});
useEffect(() => {
if (!Array.isArray(matches) || matches.length === 0) return;
const ids = new Set<string>();
for (const m of matches as any[]) {
if (m.home_id) ids.add(String(m.home_id));
if (m.away_id) ids.add(String(m.away_id));
}
if (ids.size === 0) return;
(async () => {
try {
const map = await batchFetchLogosFromSportLogosAPI(Array.from(ids));
setSportLogosMap(map);
} catch (e) {
console.warn('Failed to batch fetch logos:', e);
}
})();
}, [matches]);
// Filters
const [teamFilter, setTeamFilter] = useState('');
@@ -273,13 +188,37 @@ const MatchesAdminPage = () => {
const ts = stripPrefixes(team);
return !!clubNorm && (t.includes(clubNorm) || ts.includes(clubStrip) || t.endsWith(clubStrip) || clubStrip.endsWith(ts));
};
// Load competition aliases (ordered by display_order in backend)
const { data: compAliases = [] } = useQuery({
queryKey: ['competition-aliases-public'],
queryFn: getCompetitionAliasesPublic,
});
const competitionOptions = useMemo(() => {
const set = new Set<string>();
for (const m of matches) {
if (m.competitionName) set.add(String(m.competitionName));
}
return Array.from(set).sort((a, b) => a.localeCompare(b));
}, [matches]);
const arr = Array.from(set);
const getOrder = (name: string): number => {
if (!Array.isArray(compAliases) || compAliases.length === 0) return Number.MAX_SAFE_INTEGER;
const n = normalizeName(name);
for (let i = 0; i < compAliases.length; i++) {
const al: any = compAliases[i] as any;
const a1 = normalizeName(String(al.alias || ''));
const a2 = normalizeName(String(al.original_name || ''));
if ((a1 && (n.includes(a1) || a1.includes(n))) || (a2 && (n.includes(a2) || a2.includes(n)))) {
return i;
}
}
return Number.MAX_SAFE_INTEGER;
};
return arr.sort((a, b) => {
const oa = getOrder(a);
const ob = getOrder(b);
if (oa !== ob) return oa - ob;
return a.localeCompare(b);
});
}, [matches, compAliases]);
const filteredMatches = matches.filter((m: any) => {
// team filter
const teamOk = normalizedTeam
@@ -440,7 +379,6 @@ const MatchesAdminPage = () => {
const payload: any = {
venue_override: form.venue_override,
date_time_override: form.date_time_edit,
notes: form.notes,
};
Object.keys(payload).forEach((k) => {
if (payload[k as keyof typeof payload] === '') payload[k as keyof typeof payload] = null;
@@ -481,7 +419,6 @@ const MatchesAdminPage = () => {
setForm({
venue_override: m.venue || '',
date_time_edit: localStr,
notes: '',
});
setIsOpen(true);
};
@@ -902,11 +839,12 @@ const MatchesAdminPage = () => {
</Td>
<Td>
<HStack spacing={2}>
<Image
src={getLogo(m.home || m.home_team || '', m.home_id, m.home_logo_url)}
<TeamLogo
teamId={m.home_id ? String(m.home_id) : undefined}
teamName={m.home || m.home_team || ''}
facrLogo={m.home_logo_url}
size="small"
alt={m.home || m.home_team || ''}
boxSize="24px"
objectFit="contain"
loading="lazy"
decoding="async"
draggable={false}
@@ -922,11 +860,12 @@ const MatchesAdminPage = () => {
</Td>
<Td>
<HStack spacing={2}>
<Image
src={getLogo(m.away || m.away_team || '', m.away_id, m.away_logo_url)}
<TeamLogo
teamId={m.away_id ? String(m.away_id) : undefined}
teamName={m.away || m.away_team || ''}
facrLogo={m.away_logo_url}
size="small"
alt={m.away || m.away_team || ''}
boxSize="24px"
objectFit="contain"
loading="lazy"
decoding="async"
draggable={false}
@@ -992,14 +931,7 @@ const MatchesAdminPage = () => {
{/* Team name/logo editing removed */}
<FormControl>
<FormLabel>Poznámka</FormLabel>
<Input
placeholder="Libovolná poznámka (interní)"
value={form.notes}
onChange={(e) => setForm((f) => ({ ...f, notes: e.target.value }))}
/>
</FormControl>
</Stack>
)}
</DrawerBody>
frontend/src/pages/admin/PlayersAdminPage.tsx
+10 -3
View File
@@ -40,7 +40,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import AdminLayout from '../../layouts/AdminLayout';
import { Player, getPlayers, createPlayer, updatePlayer, deletePlayer } from '../../services/players';
import { uploadFile } from '../../services/articles';
import { translateNationality } from '../../utils/nationality';
import { translateNationality, getCountryFlag } from '../../utils/nationality';
import ThumbnailPreview from '../../components/common/ThumbnailPreview';
import { assetUrl } from '../../utils/url';
@@ -376,7 +376,7 @@ const PlayersAdminPage: React.FC = () => {
<Tbody>
{isLoading && (<Tr><Td colSpan={7}>Načítám...</Td></Tr>)}
{!isLoading && (data || []).map((p) => (
<Tr key={p.id}>
<Tr key={p.id} opacity={p.is_active ? 1 : 0.6}>
<Td>
<ThumbnailPreview
src={assetUrl(p.image_url) || '/logo192.png'}
@@ -388,7 +388,14 @@ const PlayersAdminPage: React.FC = () => {
</Td>
<Td>{p.first_name} {p.last_name}</Td>
<Td>{p.position || '-'}</Td>
<Td>{p.nationality ? translateNationality(p.nationality) : '-'}</Td>
<Td>
{p.nationality ? (
<HStack spacing={2}>
<span>{getCountryFlag(p.nationality)}</span>
<span>{translateNationality(p.nationality)}</span>
</HStack>
) : '-'}
</Td>
<Td>{p.jersey_number ?? '-'}</Td>
<Td><Switch isChecked={!!p.is_active} onChange={() => { if (p.id != null) updateMut.mutate({ id: p.id, payload: { is_active: !p.is_active } }); }} /></Td>
<Td>
frontend/src/pages/admin/PollsAdminPage.tsx
+156 -9
View File
@@ -66,12 +66,18 @@ import {
updatePoll,
deletePoll,
getPollStats,
getPollVotes,
Poll,
CreatePollRequest,
UpdatePollRequest,
PollStats,
PollVote,
} from '../../services/polls';
import { getCachedYouTube, YouTubeVideo } from '../../services/youtube';
import { Doughnut, Line, Bar } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, BarElement } from 'chart.js';
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement, BarElement);
const PollsAdminPage: React.FC = () => {
const toast = useToast();
@@ -187,6 +193,40 @@ const PollsAdminPage: React.FC = () => {
enabled: !!selectedPollStats?.poll?.id,
});
// Votes list (admin details)
const { data: votesData, isLoading: isLoadingVotes } = useQuery<PollVote[]>({
queryKey: ['poll-votes', selectedPollStats?.poll?.id],
queryFn: () => getPollVotes(selectedPollStats!.poll.id),
enabled: !!selectedPollStats?.poll?.id,
});
const exportVotesCSV = () => {
if (!votesData) return;
const header = ['id','poll_id','option_id','option_text','user_id','user_email','user_first_name','user_last_name','voter_name','voter_email','session_token','created_at'];
const rows = votesData.map(v => [
v.id,
v.poll_id,
v.option_id,
JSON.stringify(v.option_text || ''),
v.user_id ?? '',
v.user_email || '',
v.user_first_name || '',
v.user_last_name || '',
v.voter_name || '',
v.voter_email || '',
v.session_token || '',
v.created_at,
]);
const csv = [header.join(','), ...rows.map(r => r.join(','))].join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `poll_${selectedPollStats?.poll?.id || ''}_votes.csv`;
a.click();
URL.revokeObjectURL(url);
};
const resetForm = () => {
setFormData({
title: '',
@@ -514,7 +554,7 @@ const PollsAdminPage: React.FC = () => {
</Thead>
<Tbody>
{polls?.map((poll) => (
<Tr key={poll.id}>
<Tr key={poll.id} opacity={poll.status === 'draft' ? 0.6 : 1}>
<Td>
<VStack align="start" spacing={0}>
<Text fontWeight="bold">{poll.title}</Text>
@@ -1010,16 +1050,123 @@ const PollsAdminPage: React.FC = () => {
<Heading size="sm" mb={4}>
Hlasy podle dnů
</Heading>
<VStack spacing={2} align="stretch">
{(statsData.votes_by_day || []).map((day) => (
<HStack key={day.date} justify="space-between">
<Text>{new Date(day.date).toLocaleDateString('cs-CZ')}</Text>
<Badge>{day.count} hlasů</Badge>
</HStack>
))}
</VStack>
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
<Box>
<VStack spacing={2} align="stretch">
{(statsData.votes_by_day || []).map((day) => (
<HStack key={day.date} justify="space-between">
<Text>{new Date(day.date).toLocaleDateString('cs-CZ')}</Text>
<Badge>{day.count} hlasů</Badge>
</HStack>
))}
</VStack>
</Box>
<Box>
<Line
data={{
labels: (statsData.votes_by_day || []).map(d => new Date(d.date).toLocaleDateString('cs-CZ')),
datasets: [
{
label: 'Hlasy',
data: (statsData.votes_by_day || []).map(d => d.count),
borderColor: '#3182ce',
backgroundColor: 'rgba(49,130,206,0.2)',
tension: 0.3,
},
],
}}
options={{ responsive: true, plugins: { legend: { display: false } } }}
/>
</Box>
</SimpleGrid>
</Box>
)}
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={6}>
<Box>
<Heading size="sm" mb={3}>Složení hlasujících</Heading>
<Doughnut
data={{
labels: ['Přihlášení', 'Hosté'],
datasets: [
{
data: [statsData.authenticated_votes, statsData.guest_votes],
backgroundColor: ['#2f855a', '#718096'],
},
],
}}
options={{ plugins: { legend: { position: 'bottom' } } }}
/>
</Box>
<Box>
<Heading size="sm" mb={3}>Rozdělení hlasů podle možností</Heading>
<Bar
data={{
labels: (statsData.poll.options || []).map(o => o.text),
datasets: [
{
label: 'Hlasy',
data: (statsData.poll.options || []).map(o => o.vote_count),
backgroundColor: '#3182ce',
},
],
}}
options={{
responsive: true,
plugins: { legend: { display: false } },
scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
}}
/>
</Box>
</SimpleGrid>
<Box>
<HStack justify="space-between" mb={3}>
<Heading size="sm">Hlasující</Heading>
<Button size="sm" onClick={exportVotesCSV} isDisabled={!votesData || votesData.length === 0}>Export CSV</Button>
</HStack>
{isLoadingVotes ? (
<HStack><Spinner size="sm" /><Text>Načítání hlasů...</Text></HStack>
) : (votesData && votesData.length > 0) ? (
<Box overflowX="auto">
<Table size="sm" variant="simple">
<Thead>
<Tr>
<Th>Datum</Th>
<Th>Jméno</Th>
<Th>E-mail</Th>
<Th>Typ</Th>
<Th>Možnost</Th>
<Th>Session</Th>
</Tr>
</Thead>
<Tbody>
{votesData.slice(0, 100).map((v) => {
const name = v.voter_name || ((v.user_first_name || '') + ' ' + (v.user_last_name || '')).trim();
const email = v.voter_email || v.user_email || '';
const type = v.user_id ? 'Přihlášený' : 'Host';
const session = (v.session_token || '').slice(-8);
return (
<Tr key={v.id}>
<Td>{new Date(v.created_at).toLocaleString('cs-CZ')}</Td>
<Td>{name || '-'}</Td>
<Td>{email || '-'}</Td>
<Td><Badge colorScheme={v.user_id ? 'green' : 'gray'}>{type}</Badge></Td>
<Td>{v.option_text}</Td>
<Td>{session}</Td>
</Tr>
);
})}
</Tbody>
</Table>
{votesData.length > 100 && (
<Text fontSize="xs" color="gray.500" mt={2}>Zobrazeno 100 z {votesData.length} hlasů</Text>
)}
</Box>
) : (
<Text fontSize="sm" color="gray.500">Žádné hlasy k zobrazení.</Text>
)}
</Box>
</VStack>
) : null}
</ModalBody>
frontend/src/pages/admin/SponsorsAdminPage.tsx
+1 -1
View File
@@ -184,7 +184,7 @@ const SponsorsAdminPage: React.FC = () => {
<Tbody>
{isLoading && (<Tr><Td colSpan={7}>Načítám...</Td></Tr>)}
{!isLoading && (data || []).map((s) => (
<Tr key={s.id}>
<Tr key={s.id} opacity={s.is_active ? 1 : 0.6}>
<Td>
<Image src={normalizeImageUrl(s.logo_url)} alt={s.name} boxSize="48px" objectFit="contain" />
</Td>
frontend/src/pages/admin/TeamsAdminPage.tsx
+76 -6
View File
@@ -193,6 +193,9 @@ const TeamsAdminPage = () => {
}
return idx;
}, [byName]);
const byNamePairs = useMemo(() => {
return Object.keys(byName || {}).map((k) => ({ keyNorm: normalize(k), url: byName[k] }));
}, [byName]);
const getLogo = (teamName?: string, teamId?: string, original?: string) => {
if (!teamName) return assetUrl('/dist/img/logo-club-empty.svg') as string;
@@ -204,9 +207,27 @@ const TeamsAdminPage = () => {
}
// Priority 0.5: Try match by override name when team_id is missing
try {
const hit = overridesNameIndex[normalize(teamName)];
if (hit && hit.logo_url) {
const u = String(hit.logo_url);
const norm = normalize(teamName);
let hit = overridesNameIndex[norm];
if (!hit) {
// Suffix/containment match: allow sponsor words before/after core name
for (const [keyNorm, val] of Object.entries(overridesNameIndex)) {
if (!keyNorm) continue;
if (norm.endsWith(keyNorm) || keyNorm.endsWith(norm)) { hit = val as any; break; }
}
}
if (!hit) {
const norm2 = normalize(teamName);
const t1 = norm2.split(' ')[0];
if (t1 && t1.length >= 5) {
for (const [keyNorm, val] of Object.entries(overridesNameIndex)) {
const k1 = String(keyNorm).split(' ')[0];
if (k1 === t1) { hit = val as any; break; }
}
}
}
if (hit && (hit as any).logo_url) {
const u = String((hit as any).logo_url);
if (u.startsWith('/')) return assetUrl(u) as string;
return u;
}
@@ -217,6 +238,14 @@ const TeamsAdminPage = () => {
const norm = normalize(teamName);
overrideUrl = byNameNormalized[norm];
}
if (!overrideUrl) {
// Suffix/containment against normalized keys
const norm = normalize(teamName);
for (const { keyNorm, url } of byNamePairs) {
if (!keyNorm) continue;
if (norm.endsWith(keyNorm) || keyNorm.endsWith(norm)) { overrideUrl = url; break; }
}
}
if (overrideUrl) {
if (typeof overrideUrl === 'string' && overrideUrl.startsWith('/')) {
return assetUrl(overrideUrl) as string;
@@ -245,9 +274,25 @@ const TeamsAdminPage = () => {
// If no ID, but override exists for the normalized name, use canonical override name
try {
if (teamName) {
const hit = overridesNameIndex[normalize(teamName)];
if (hit && hit.name) {
return hit.name;
const norm = normalize(teamName);
let hit = overridesNameIndex[norm];
if (!hit) {
for (const [keyNorm, val] of Object.entries(overridesNameIndex)) {
if (!keyNorm) continue;
if (norm.endsWith(keyNorm) || keyNorm.endsWith(norm)) { hit = val as any; break; }
}
}
if (!hit) {
const t1 = norm.split(' ')[0];
if (t1 && t1.length >= 5) {
for (const [keyNorm, val] of Object.entries(overridesNameIndex)) {
const k1 = String(keyNorm).split(' ')[0];
if (k1 === t1) { hit = val as any; break; }
}
}
}
if (hit && (hit as any).name) {
return (hit as any).name as string;
}
}
} catch {}
@@ -407,6 +452,7 @@ const TeamsAdminPage = () => {
} catch {}
if (logoUrl) {
let uploadAttempted = false;
let shouldUpload = Boolean(uploadedFile);
try {
const abs = logoUrl.startsWith('/') ? new URL(logoUrl, backendOrigin).toString() : logoUrl;
@@ -426,6 +472,7 @@ const TeamsAdminPage = () => {
} catch {}
if (shouldUpload) {
uploadAttempted = true;
setExternalUploadStatus('uploading');
setExternalUploadError(null);
try {
@@ -447,6 +494,17 @@ const TeamsAdminPage = () => {
if (logaResult.url) {
logoUrl = logaResult.url;
}
try {
let confirmedUrl: string | null = null;
for (let i = 0; i < 10; i++) {
confirmedUrl = await fetchLogoFromLogoAPI(form.external_team_id, primaryName);
if (confirmedUrl) break;
await new Promise((r) => setTimeout(r, 700));
}
if (confirmedUrl) {
logoUrl = confirmedUrl;
}
} catch {}
} else {
setExternalUploadStatus('error');
setExternalUploadError(logaResult.error || 'Nepodařilo se nahrát logo');
@@ -460,6 +518,18 @@ const TeamsAdminPage = () => {
setExternalUploadError(error?.message || 'Upload failed');
}
}
if (uploadAttempted) {
try {
const abs = logoUrl.startsWith('/') ? new URL(logoUrl, backendOrigin).toString() : logoUrl;
const host = new URL(abs).hostname.toLowerCase();
if (host !== 'logoapi.sportcreative.eu') {
throw new Error('Externí upload loga ještě není dostupný. Zkuste uložit znovu za chvíli.');
}
} catch (e: any) {
throw new Error(e?.message || 'Externí upload loga selhal');
}
}
}
await putTeamLogoOverride(form.external_team_id, primaryName, logoUrl);
frontend/src/services/admin/comments.ts
+44
View File
@@ -0,0 +1,44 @@
import api from '../../services/api';
import { CommentItem } from '../../services/comments';
export type AdminCommentsList = {
items: CommentItem[];
total: number;
page: number;
page_size: number;
};
export async function adminListComments(params: { status?: 'visible'|'hidden'; target_type?: string; target_id?: string; user_id?: string; page?: number; page_size?: number; }): Promise<AdminCommentsList> {
const res = await api.get('/admin/comments', { params });
return res.data as AdminCommentsList;
}
export async function adminUpdateCommentStatus(id: number, status: 'visible'|'hidden'): Promise<{ ok: boolean }>{
const res = await api.patch(`/admin/comments/${id}/status`, { status });
return res.data as { ok: boolean };
}
export async function adminBanUser(user_id: number, reason: string, duration_hours?: number): Promise<{ ok: boolean }>{
const res = await api.post('/admin/comments/ban', { user_id, reason, duration_hours: duration_hours || 0 });
return res.data as { ok: boolean };
}
export type UnbanRequest = {
id: number;
user_id: number;
message: string;
status: 'pending'|'approved'|'rejected';
created_at: string;
resolved_by_id?: number | null;
resolved_at?: string | null;
};
export async function adminListUnbanRequests(): Promise<{ items: UnbanRequest[] }>{
const res = await api.get('/admin/comments/unban-requests');
return res.data as { items: UnbanRequest[] };
}
export async function adminResolveUnban(id: number, action: 'approve'|'reject'): Promise<{ ok: boolean }>{
const res = await api.post(`/admin/comments/unban-requests/${id}/resolve`, { action });
return res.data as { ok: boolean };
}
frontend/src/services/admin/engagement.ts
+68
View File
@@ -0,0 +1,68 @@
import api from '../api';
import { RewardItem } from '../../services/engagement';
export type AdminRewardItem = RewardItem & {
active: boolean;
stock: number;
metadata?: Record<string, any>;
created_at?: string;
updated_at?: string;
};
export type AdminRewardsResponse = { items: AdminRewardItem[] };
export async function adminListRewards(params?: { active?: boolean }): Promise<AdminRewardItem[]> {
const res = await api.get('/admin/engagement/rewards', { params });
return (res.data as AdminRewardsResponse).items || [];
}
export async function adminCreateReward(body: {
name: string;
type: string;
cost_points: number;
image_url?: string;
stock?: number;
active?: boolean;
metadata?: Record<string, any>;
}): Promise<AdminRewardItem> {
const res = await api.post('/admin/engagement/rewards', body);
return res.data as AdminRewardItem;
}
export async function adminUpdateReward(id: number, body: Partial<{
name: string;
type: string;
cost_points: number;
image_url: string;
stock: number;
active: boolean;
metadata: Record<string, any>;
}>): Promise<{ ok: boolean }>{
const res = await api.put(`/admin/engagement/rewards/${id}`, body);
return res.data as { ok: boolean };
}
export async function adminDeleteReward(id: number): Promise<{ ok: boolean }>{
const res = await api.delete(`/admin/engagement/rewards/${id}`);
return res.data as { ok: boolean };
}
export type AdminRedemption = {
id: number;
user_id: number;
reward_id: number;
status: 'pending'|'approved'|'rejected'|'fulfilled'|string;
created_at?: string;
};
export type AdminRedemptionsResponse = { items: AdminRedemption[] };
export async function adminListRedemptions(params?: { status?: string }): Promise<AdminRedemption[]> {
const res = await api.get('/admin/engagement/redemptions', { params });
return (res.data as AdminRedemptionsResponse).items || [];
}
export async function adminUpdateRedemptionStatus(id: number, action: 'approve'|'reject'|'fulfill'): Promise<{ ok: boolean; status: string }>{
const res = await api.patch(`/admin/engagement/redemptions/${id}`, { action });
return res.data as { ok: boolean; status: string };
}
frontend/src/services/ai.ts
+33
View File
@@ -28,6 +28,39 @@ export async function generateBlogAI(payload: AIGenerateBlogReq): Promise<AIGene
return parsedData;
}
// Instagram generation
export interface AIGenerateInstagramMatch {
home?: string;
away?: string;
competition?: string;
date_time?: string;
venue?: string;
score?: string;
}
export interface AIGenerateInstagramReq {
type?: 'article' | 'event' | 'generic' | string;
title?: string;
content?: string;
club_name?: string;
link: string;
hashtags?: string[];
audience?: string;
tone?: string;
match?: AIGenerateInstagramMatch | null;
}
export interface AIGenerateInstagramResp { text: string }
export async function generateInstagramAI(payload: AIGenerateInstagramReq): Promise<AIGenerateInstagramResp> {
const { data } = await api.post<AIGenerateInstagramResp>('/ai/instagram/generate', payload);
let parsed: any = data;
if (typeof parsed === 'string') {
try { parsed = JSON.parse(parsed); } catch { parsed = { text: '' }; }
}
return parsed as AIGenerateInstagramResp;
}
export interface AIGenerateCSSReq {
prompt: string;
element_name?: string;
frontend/src/services/api.ts
+37 -2
View File
@@ -35,14 +35,49 @@ export const api: AxiosInstance = axios.create({
timeout: 20000, // 20 seconds to better tolerate slower endpoints
});
// Simple in-memory CSRF token cache
let csrfTokenCache: { token: string; fetchedAt: number } | null = null;
async function getCsrfToken(): Promise<string | null> {
try {
// Refresh token every 45 minutes
const now = Date.now();
if (csrfTokenCache && now - csrfTokenCache.fetchedAt < 45 * 60 * 1000) {
return csrfTokenCache.token;
}
const res = await fetch(`${API_URL.replace(/\/$/, '')}/csrf-token`, {
credentials: 'include',
headers: { 'Accept': 'application/json' },
});
if (!res.ok) return null;
const data = await res.json();
const token = data?.csrf_token || null;
if (token) {
csrfTokenCache = { token, fetchedAt: now };
}
return token;
} catch {
return null;
}
}
// Request interceptor - attach bearer token when available
api.interceptors.request.use(
(config: InternalAxiosRequestConfig) => {
async (config: InternalAxiosRequestConfig) => {
const token = getToken();
config.headers = config.headers || {};
if (token) {
config.headers = config.headers || {};
(config.headers as any).Authorization = `Bearer ${token}`;
}
// For cookie-based flows (no Bearer header), attach X-CSRF-Token on mutating methods
const method = (config.method || 'get').toLowerCase();
const isMutating = method === 'post' || method === 'put' || method === 'patch' || method === 'delete';
const hasAuth = !!(config.headers as any).Authorization;
if (isMutating && !hasAuth) {
const csrf = await getCsrfToken();
if (csrf) {
(config.headers as any)['X-CSRF-Token'] = csrf;
}
}
return config;
},
(error) => {
frontend/src/services/clothing.ts
+7 -18
View File
@@ -1,5 +1,4 @@
import axios from 'axios';
import { API_URL as API_BASE_URL } from './api';
import api from './api';
export interface ClothingItem {
id: number;
@@ -21,44 +20,34 @@ export interface ClothingResponse {
// Public endpoint - get all active clothing items
export const getClothing = async (): Promise<ClothingItem[]> => {
const response = await axios.get<ClothingResponse>(`${API_BASE_URL}/clothing`);
const response = await api.get<ClothingResponse>('/clothing');
return response.data.data;
};
// Admin endpoint - get all clothing items
export const getClothingAdmin = async (): Promise<ClothingItem[]> => {
const response = await axios.get<ClothingResponse>(`${API_BASE_URL}/admin/clothing`, {
withCredentials: true,
});
const response = await api.get<ClothingResponse>('/admin/clothing');
return response.data.data;
};
// Admin endpoint - create clothing item
export const createClothing = async (data: Partial<ClothingItem>): Promise<ClothingItem> => {
const response = await axios.post<ClothingItem>(`${API_BASE_URL}/admin/clothing`, data, {
withCredentials: true,
});
const response = await api.post<ClothingItem>('/admin/clothing', data);
return response.data;
};
// Admin endpoint - update clothing item
export const updateClothing = async (id: number, data: Partial<ClothingItem>): Promise<ClothingItem> => {
const response = await axios.put<ClothingItem>(`${API_BASE_URL}/admin/clothing/${id}`, data, {
withCredentials: true,
});
const response = await api.put<ClothingItem>(`/admin/clothing/${id}`, data);
return response.data;
};
// Admin endpoint - delete clothing item
export const deleteClothing = async (id: number): Promise<void> => {
await axios.delete(`${API_BASE_URL}/admin/clothing/${id}`, {
withCredentials: true,
});
await api.delete(`/admin/clothing/${id}`);
};
// Admin endpoint - update display order
export const updateClothingOrder = async (items: Array<{ id: number; display_order: number }>): Promise<void> => {
await axios.post(`${API_BASE_URL}/admin/clothing/reorder`, items, {
withCredentials: true,
});
await api.post('/admin/clothing/reorder', items);
};
frontend/src/services/comments.ts
+72
View File
@@ -0,0 +1,72 @@
import api from './api';
export type TargetType = 'article' | 'event' | 'gallery_album' | 'youtube_video';
export type CommentItem = {
id: number;
target_type: TargetType;
target_id: string;
parent_id?: number | null;
content: string;
status?: 'visible' | 'hidden';
is_edited?: boolean;
edited_at?: string | null;
created_at: string;
updated_at: string;
reactions?: Record<string, number>;
my_reaction?: string;
user: {
id: number;
first_name?: string;
last_name?: string;
email?: string;
role?: string;
};
};
export type CommentsResponse = {
items: CommentItem[];
total: number;
page: number;
page_size: number;
};
export async function listComments(params: { target_type: TargetType; target_id: string; page?: number; page_size?: number; }): Promise<CommentsResponse> {
const res = await api.get('/comments', { params });
return res.data as CommentsResponse;
}
export async function createComment(body: { target_type: TargetType; target_id: string; content: string; parent_id?: number | null; }): Promise<CommentItem> {
const res = await api.post('/comments', body);
return res.data as CommentItem;
}
export async function updateComment(id: number, body: { content: string; }): Promise<CommentItem> {
const res = await api.put(`/comments/${id}`, body);
return res.data as CommentItem;
}
export async function deleteComment(id: number): Promise<{ ok: boolean }>{
const res = await api.delete(`/comments/${id}`);
return res.data as { ok: boolean };
}
export async function reactComment(id: number, type: string): Promise<{ ok: boolean }>{
const res = await api.post(`/comments/${id}/react`, { type });
return res.data as { ok: boolean };
}
export async function unreactComment(id: number): Promise<{ ok: boolean }>{
const res = await api.delete(`/comments/${id}/react`);
return res.data as { ok: boolean };
}
export async function requestUnban(message: string): Promise<{ ok: boolean }>{
const res = await api.post('/comments/unban-request', { message });
return res.data as { ok: boolean };
}
export async function reportComment(id: number, reason?: string): Promise<{ ok: boolean }>{
const res = await api.post(`/comments/${id}/report`, { reason });
return res.data as { ok: boolean };
}
frontend/src/services/engagement.ts
+66
View File
@@ -0,0 +1,66 @@
import api from './api';
export type EngagementProfile = {
user_id: number;
points: number;
level: number;
xp: number;
avatar_url?: string;
animated_avatar_url?: string;
achievements: number;
};
export async function getProfile(): Promise<EngagementProfile> {
const res = await api.get('/engagement/profile');
return res.data as EngagementProfile;
}
export type RewardItem = {
id: number;
name: string;
type: 'avatar_static' | 'avatar_animated' | 'merch_coupon' | 'custom' | string;
cost_points: number;
image_url?: string;
stock?: number;
active?: boolean;
metadata?: Record<string, any>;
};
export async function getRewards(): Promise<RewardItem[]> {
const res = await api.get('/engagement/rewards');
return res.data as RewardItem[];
}
export async function patchAvatar(body: { avatar_url?: string; animated_avatar_url?: string }): Promise<{ ok: boolean }>{
const res = await api.patch('/engagement/avatar', body);
return res.data as { ok: boolean };
}
export async function redeemReward(reward_id: number): Promise<{ ok: boolean; status: string }>{
const res = await api.post('/engagement/redeem', { reward_id });
return res.data as { ok: boolean; status: string };
}
export type AchievementsResponse = {
achievements: Array<{
id: number;
code: string;
title: string;
description: string;
points: number;
xp: number;
icon?: string;
achieved: boolean;
achieved_at?: string;
}>;
counters: {
comments: number;
votes: number;
newsletter: boolean;
};
};
export async function getAchievements(): Promise<AchievementsResponse> {
const res = await api.get('/engagement/achievements');
return res.data as AchievementsResponse;
}
frontend/src/services/files.ts
+18
View File
@@ -45,6 +45,17 @@ export interface DuplicateFiles {
[hash: string]: FileInfo[];
}
export interface StorageUsage {
used_bytes: number;
used_count: number;
quota_mb: number;
quota_bytes: number;
percent: number;
warn_percent: number;
critical_percent: number;
status: 'ok' | 'warn' | 'critical';
}
export const getAllFiles = async (params?: {
search?: string;
mime_type?: string;
@@ -72,6 +83,13 @@ export const getDuplicateFiles = async (): Promise<DuplicateFiles> => {
return response.data;
};
export const getStorageUsage = async (): Promise<StorageUsage> => {
const response = await axios.get(`${API_URL}/admin/files/usage`, {
withCredentials: true,
});
return response.data;
};
export const getFileUsages = async (fileId: number): Promise<any[]> => {
const response = await axios.get(`${API_URL}/admin/files/${fileId}/usages`, {
withCredentials: true,
frontend/src/services/navigation.ts
+51 -8
View File
@@ -27,31 +27,73 @@ export interface SocialLink {
icon?: string;
}
// Normalize backend objects (backend may return `ID` instead of `id`)
function normalizeNavItem(raw: any): NavigationItem {
if (!raw || typeof raw !== 'object') return raw as NavigationItem;
const id = raw.id ?? raw.ID;
const children = Array.isArray(raw.children)
? raw.children.map((c: any) => normalizeNavItem(c))
: undefined;
return {
id,
label: raw.label,
url: raw.url,
icon: raw.icon,
type: raw.type,
page_type: raw.page_type,
page_id: raw.page_id,
visible: raw.visible,
display_order: raw.display_order,
parent_id: raw.parent_id,
children,
target: raw.target,
css_class: raw.css_class,
requires_auth: raw.requires_auth,
requires_admin: raw.requires_admin,
} as NavigationItem;
}
function normalizeSocialLink(raw: any): SocialLink {
if (!raw || typeof raw !== 'object') return raw as SocialLink;
const id = raw.id ?? raw.ID;
return {
id,
platform: raw.platform,
url: raw.url,
display_order: raw.display_order,
visible: raw.visible,
icon: raw.icon,
} as SocialLink;
}
// Public endpoints
export const getNavigationItems = async (): Promise<NavigationItem[]> => {
const response = await api.get(`/navigation`);
return response.data;
const data = Array.isArray(response.data) ? response.data : [];
return data.map((it: any) => normalizeNavItem(it));
};
export const getSocialLinks = async (): Promise<SocialLink[]> => {
const response = await api.get(`/social-links`);
return response.data;
const data = Array.isArray(response.data) ? response.data : [];
return data.map((it: any) => normalizeSocialLink(it));
};
// Admin endpoints
export const getAllNavigationItems = async (): Promise<NavigationItem[]> => {
const response = await api.get(`/admin/navigation`);
return response.data;
const data = Array.isArray(response.data) ? response.data : [];
return data.map((it: any) => normalizeNavItem(it));
};
export const createNavigationItem = async (item: Partial<NavigationItem>): Promise<NavigationItem> => {
const response = await api.post(`/admin/navigation`, item);
return response.data;
return normalizeNavItem(response.data);
};
export const updateNavigationItem = async (id: number, item: Partial<NavigationItem>): Promise<NavigationItem> => {
const response = await api.put(`/admin/navigation/${id}`, item);
return response.data;
return normalizeNavItem(response.data);
};
export const deleteNavigationItem = async (id: number): Promise<void> => {
@@ -65,17 +107,18 @@ export const reorderNavigationItems = async (orders: { id: number; display_order
// Social links admin endpoints
export const getAllSocialLinks = async (): Promise<SocialLink[]> => {
const response = await api.get(`/admin/social-links`);
return response.data;
const data = Array.isArray(response.data) ? response.data : [];
return data.map((it: any) => normalizeSocialLink(it));
};
export const createSocialLink = async (link: Partial<SocialLink>): Promise<SocialLink> => {
const response = await api.post(`/admin/social-links`, link);
return response.data;
return normalizeSocialLink(response.data);
};
export const updateSocialLink = async (id: number, link: Partial<SocialLink>): Promise<SocialLink> => {
const response = await api.put(`/admin/social-links/${id}`, link);
return response.data;
return normalizeSocialLink(response.data);
};
export const deleteSocialLink = async (id: number): Promise<void> => {
frontend/src/services/pageElements.ts
+8 -19
View File
@@ -1,5 +1,4 @@
import axios from 'axios';
import { API_URL as API_BASE_URL } from './api';
import api from './api';
import { IconType } from 'react-icons';
import {
FaRegClipboard,
@@ -52,7 +51,7 @@ export interface PageElementConfig {
// Public endpoints
export const getPageElementConfigs = async (pageType: string): Promise<PageElementConfig[]> => {
const response = await axios.get(`${API_BASE_URL}/page-elements`, {
const response = await api.get('/page-elements', {
params: { page_type: pageType }
});
return response.data || [];
@@ -60,36 +59,26 @@ export const getPageElementConfigs = async (pageType: string): Promise<PageEleme
// Admin endpoints
export const getAllPageElementConfigs = async (): Promise<PageElementConfig[]> => {
const response = await axios.get(`${API_BASE_URL}/admin/page-elements`, {
withCredentials: true,
});
const response = await api.get('/admin/page-elements');
return response.data || [];
};
export const createOrUpdatePageElementConfig = async (config: Partial<PageElementConfig>): Promise<PageElementConfig> => {
const response = await axios.post(`${API_BASE_URL}/admin/page-elements`, config, {
withCredentials: true,
});
const response = await api.post('/admin/page-elements', config);
return response.data;
};
export const updatePageElementConfig = async (id: number, config: Partial<PageElementConfig>): Promise<PageElementConfig> => {
const response = await axios.put(`${API_BASE_URL}/admin/page-elements/${id}`, config, {
withCredentials: true,
});
const response = await api.put(`/admin/page-elements/${id}`, config);
return response.data;
};
export const deletePageElementConfig = async (id: number): Promise<void> => {
await axios.delete(`${API_BASE_URL}/admin/page-elements/${id}`, {
withCredentials: true,
});
await api.delete(`/admin/page-elements/${id}`);
};
export const batchUpdatePageElementConfigs = async (configs: PageElementConfig[]): Promise<{ message: string; updated: number; created: number }> => {
const response = await axios.post(`${API_BASE_URL}/admin/page-elements/batch`, configs, {
withCredentials: true,
});
const response = await api.post('/admin/page-elements/batch', configs);
return response.data;
};
@@ -138,7 +127,7 @@ export const PREDEFINED_ELEMENTS: PredefinedElement[] = [
// Media - Média
{ name: 'gallery', label: 'Galerie', description: 'Fotogalerie', icon: FaImages, category: 'media', defaultVariant: 'grid' },
{ name: 'videos', label: 'Videa', description: 'YouTube videa a sestřihy', icon: FaVideo, category: 'media', defaultVariant: 'grid' },
{ name: 'videos', label: 'Videa', description: 'YouTube videa a sestřihy', icon: FaVideo, category: 'media', defaultVariant: 'carousel' },
{ name: 'live', label: 'Live Stream', description: 'Živé přenosy zápasů', icon: FaBroadcastTower, category: 'media', defaultVariant: 'featured' },
{ name: 'podcast', label: 'Podcast', description: 'Zvukové podcasty a komentáře', icon: FaPodcast, category: 'media', defaultVariant: 'list' },
{ name: 'social', label: 'Sociální Sítě', description: 'Příspěvky ze sociálních sítí', icon: FaHashtag, category: 'media', defaultVariant: 'grid' },
frontend/src/services/polls.ts
+20
View File
@@ -161,6 +161,21 @@ export interface PollStats {
guest_votes: number;
}
export interface PollVote {
id: number;
poll_id: number;
option_id: number;
option_text: string;
user_id?: number;
user_email?: string;
user_first_name?: string;
user_last_name?: string;
voter_name?: string;
voter_email?: string;
session_token?: string;
created_at: string;
}
// Public API
export const getPolls = async (params?: {
@@ -242,6 +257,11 @@ export const getPollStats = async (id: number): Promise<PollStats> => {
return response.data;
};
export const getPollVotes = async (id: number): Promise<PollVote[]> => {
const response = await api.get(`/admin/polls/${id}/votes`);
return response.data.votes as PollVote[];
};
// Helper to generate a session token for guest voting
export const generateSessionToken = (): string => {
const stored = localStorage.getItem('poll_session_token');
frontend/src/services/public.ts
+3 -1
View File
@@ -18,6 +18,7 @@ export type Player = {
email?: string;
phone?: string;
team_id?: number;
team?: { id?: number; name?: string };
};
export type Sponsor = { id: number; name: string; logo_url?: string; website_url?: string; tier?: string; display_order?: number };
export type Category = { id?: number; name: string; slug?: string; url?: string; children?: Category[] };
@@ -39,7 +40,8 @@ function normalizePlayer(p: any): Player {
weight: p.weight ?? p.Weight ?? undefined,
email: p.email ?? p.Email ?? undefined,
phone: p.phone ?? p.Phone ?? undefined,
team_id: p.team_id ?? p.TeamID ?? undefined,
team_id: p.team_id ?? p.TeamID ?? (p.team?.id ?? p.Team?.ID) ?? undefined,
team: (p.team || p.Team) ? { id: (p.team?.id ?? p.Team?.ID), name: (p.team?.name ?? p.Team?.Name ?? p.Team?.name) } : undefined,
} as Player;
}
frontend/src/services/search.ts
+19
View File
@@ -200,6 +200,17 @@ export async function searchAll(query: string): Promise<SearchResults> {
if (!(ts instanceof Date) || isNaN(ts.getTime())) continue;
// Past only
if (ts.getTime() >= now.getTime()) continue;
// Parse score if present (e.g., "2:1")
const scoreText = String(m?.score || '').trim();
let result_home: number | undefined;
let result_away: number | undefined;
if (scoreText) {
const mm = scoreText.match(/^(\d+)\s*:\s*(\d+)$/);
if (mm) {
result_home = parseInt(mm[1], 10);
result_away = parseInt(mm[2], 10);
}
}
out.push({
id: m?.match_id || m?.matchId,
home: m?.home,
@@ -210,6 +221,10 @@ export async function searchAll(query: string): Promise<SearchResults> {
venue: m?.venue,
home_logo_url: m?.home_logo_url,
away_logo_url: m?.away_logo_url,
// include score fields when available so UI can render them
score: scoreText || undefined,
result_home,
result_away,
});
}
}
@@ -387,6 +402,10 @@ export async function searchAll(query: string): Promise<SearchResults> {
away_logo_url: m.away_logo_url,
venue: m.venue,
external_match_id: m.match_id || m.id,
// Pass through result fields when available
result: (m.result || m.result_text || m.score) || undefined,
result_home: typeof m.result_home === 'number' ? m.result_home : undefined,
result_away: typeof m.result_away === 'number' ? m.result_away : undefined,
},
score: Math.max(
scoreMatch(m.home || '', q),
frontend/src/services/shortlinks.ts
+6
View File
@@ -29,6 +29,12 @@ export async function createShortLink(payload: CreateShortLinkPayload): Promise<
}
}
// Public shortlink creation for visitors (no auth; backend validates allowed host)
export async function createPublicShortLink(payload: { target_url: string; title?: string }): Promise<ShortLinkResponse> {
const res = await api.post<ShortLinkResponse>('/shortlinks/public', payload);
return res.data;
}
export async function listShortLinks(): Promise<{ items: any[] }> {
const res = await api.get<{ items: any[] }>('/admin/shortlinks');
return res.data;
frontend/src/services/youtube.ts
+22 -5
View File
@@ -18,20 +18,37 @@ export type YouTubeChannelPayload = {
videos: YouTubeVideo[];
};
// Simple in-memory cache for YouTube payload (per-session)
let ytMemCache: { payload: YouTubeChannelPayload | null; fetchedAt: number } | null = null;
const YT_CACHE_TTL_MS = 60 * 60 * 1000; // 1 hour
export const getCachedYouTube = async (): Promise<YouTubeChannelPayload | null> => {
const now = Date.now();
if (ytMemCache && now - ytMemCache.fetchedAt < YT_CACHE_TTL_MS) {
return sortByPublishedDate(ytMemCache.payload) as YouTubeChannelPayload | null;
}
try {
const res = await api.get('/youtube/videos');
const primary = res?.data as YouTubeChannelPayload | undefined;
const hasVideos = Array.isArray(primary?.videos) && (primary!.videos.length > 0);
// If backend responded with 204 or empty payload, fall back to the static cached JSON
let out: YouTubeChannelPayload | null = null;
if (res.status === 204 || !primary || !hasVideos) {
const fallback = await fetchStaticYouTubeCache();
return sortByPublishedDate(fallback);
out = await fetchStaticYouTubeCache();
} else {
out = primary || null;
}
return sortByPublishedDate(primary) as YouTubeChannelPayload;
if (out) {
ytMemCache = { payload: out, fetchedAt: now };
}
return sortByPublishedDate(out) as YouTubeChannelPayload | null;
} catch {
// Fallback: fetch static cached JSON directly from backend /cache path to avoid stressing external API
return await fetchStaticYouTubeCache();
const out = await fetchStaticYouTubeCache();
if (out) {
ytMemCache = { payload: out, fetchedAt: now };
}
return out;
}
};
@@ -40,7 +57,7 @@ const fetchStaticYouTubeCache = async (): Promise<YouTubeChannelPayload | null>
try {
const origin = new URL(API_URL, typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000').origin;
const url = `${origin}/cache/prefetch/youtube_channel.json`;
const resp = await fetch(url, { cache: 'no-cache' });
const resp = await fetch(url, { cache: 'force-cache' });
if (!resp.ok) return null;
const data = (await resp.json()) as YouTubeChannelPayload;
return sortByPublishedDate(data);
frontend/src/styles/custom-editor.css
+26 -21
View File
@@ -76,6 +76,10 @@
margin-right: 2px;
border-radius: 4px;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.ql-toolbar.ql-snow button:hover {
@@ -131,6 +135,11 @@
border-radius: 4px;
padding: 4px 8px;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 32px;
}
.ql-toolbar.ql-snow .ql-picker-label:hover {
@@ -155,6 +164,22 @@
z-index: 6000 !important;
}
/* Center icons and enlarge align icon */
.ql-toolbar .ql-picker-label svg {
width: 18px;
height: 18px;
}
.ql-toolbar .ql-align .ql-picker-label svg {
width: 18px;
height: 18px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-background .ql-picker-label {
display: inline-flex;
align-items: center;
justify-content: center;
}
.ql-toolbar.ql-snow .ql-picker-options .ql-picker-item {
border-radius: 4px;
padding: 6px 8px;
@@ -195,7 +220,6 @@
font-weight: 700;
margin: 0.67em 0;
line-height: 1.2;
color: #1a202c;
}
.ql-editor h2 {
@@ -203,7 +227,6 @@
font-weight: 600;
margin: 0.75em 0;
line-height: 1.3;
color: #1a202c;
}
.ql-editor h3 {
@@ -211,7 +234,6 @@
font-weight: 600;
margin: 1em 0;
line-height: 1.4;
color: #2d3748;
}
.ql-editor p {
@@ -379,26 +401,9 @@
color: #1a202c !important;
}
/* Ensure all text elements have visible colors */
.ql-editor p,
.ql-editor span,
.ql-editor div,
.ql-editor li {
color: #2d3748;
}
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
color: #1a202c;
}
/* Let Quill inline color styles take precedence; keep only weight for bold */
.ql-editor strong,
.ql-editor b {
color: #1a202c;
font-weight: bold;
}
frontend/src/styles/home-style-pack.css
+2 -1
View File
@@ -66,7 +66,8 @@ body.style-pack-modern .section-head h3::after { width: 64px; }
/* Banner placements */
[data-element="banner"][data-variant="top"],
[data-element="banner"][data-variant="bottom"] { text-align: center; }
[data-element="sidebar"] img { border-radius: 8px; }
[data-element="sidebar"] img { border-radius: 10px; }
[data-element="sidebar"] { scroll-margin-top: 112px; }
/* two-column news + table layout */
.standings {
frontend/src/utils/logger.ts
+105
View File
@@ -0,0 +1,105 @@
/**
* Production-safe logging utility
* Automatically suppresses console.log in production while preserving errors/warnings
*/
const isDevelopment = process.env.NODE_ENV === 'development';
const isTest = process.env.NODE_ENV === 'test';
export const logger = {
/**
* Debug logs - only in development
*/
debug: (...args: any[]) => {
if (isDevelopment) {
console.log('[DEBUG]', ...args);
}
},
/**
* Info logs - development and staging
*/
info: (...args: any[]) => {
if (isDevelopment || process.env.REACT_APP_ENV === 'staging') {
console.log('[INFO]', ...args);
}
},
/**
* Warning logs - always shown
*/
warn: (...args: any[]) => {
console.warn('[WARN]', ...args);
},
/**
* Error logs - always shown and sent to monitoring
*/
error: (...args: any[]) => {
console.error('[ERROR]', ...args);
// Send to error tracking service in production
if (!isDevelopment && !isTest && window.umami) {
try {
const errorMessage = args.map(arg =>
typeof arg === 'object' ? JSON.stringify(arg) : String(arg)
).join(' ');
window.umami.track('error', { message: errorMessage.substring(0, 500) });
} catch (e) {
// Silently fail if tracking unavailable
}
}
},
/**
* Performance logging - measures execution time
*/
time: (label: string) => {
if (isDevelopment) {
console.time(label);
}
},
timeEnd: (label: string) => {
if (isDevelopment) {
console.timeEnd(label);
}
},
/**
* Group logging - only in development
*/
group: (label: string) => {
if (isDevelopment) {
console.group(label);
}
},
groupEnd: () => {
if (isDevelopment) {
console.groupEnd();
}
},
/**
* Table logging - only in development
*/
table: (data: any) => {
if (isDevelopment) {
console.table(data);
}
}
};
// Export as default for easier imports
export default logger;
// Type declaration for umami
declare global {
interface Window {
umami?: {
track: (eventName: string, eventData?: Record<string, any>) => void;
};
}
}
frontend/src/utils/nationality.ts
+124
View File
@@ -118,3 +118,127 @@ export function translateNationality(code?: string): string {
// Return original if no translation found
return code;
}
// Convert a 2-letter ISO country code to a flag emoji
export function countryCodeToEmoji(cc?: string): string {
if (!cc) return '';
const v = cc.trim().toUpperCase();
if (!/^[A-Z]{2}$/.test(v)) return '';
return v.replace(/./g, (ch) => String.fromCodePoint(127397 + ch.charCodeAt(0)));
}
// Get an emoji flag for a given nationality string (code like "CZ" or English name like "Czechia")
export function getCountryFlag(nationality?: string): string {
if (!nationality) return '';
const n = nationality.trim();
if (!n) return '';
// If already a 2-letter code
if (/^[A-Za-z]{2}$/.test(n)) {
// Normalize UK to GB for emoji
const code = n.toUpperCase() === 'UK' ? 'GB' : n.toUpperCase();
return countryCodeToEmoji(code);
}
// Map of English and Czech names to ISO alpha-2 codes (subset covering our translations)
const nameToCode: Record<string, string> = {
'Czechia': 'CZ',
'Czech Republic': 'CZ',
'Česká republika': 'CZ',
'Slovakia': 'SK',
'Slovensko': 'SK',
'Poland': 'PL',
'Polsko': 'PL',
'Germany': 'DE',
'Německo': 'DE',
'Austria': 'AT',
'Rakousko': 'AT',
'Ukraine': 'UA',
'Ukrajina': 'UA',
'France': 'FR',
'Francie': 'FR',
'Spain': 'ES',
'Španělsko': 'ES',
'Italy': 'IT',
'Itálie': 'IT',
'England': 'GB',
'United Kingdom': 'GB',
'Velká Británie': 'GB',
'United States': 'US',
'USA': 'US',
'Brazil': 'BR',
'Argentina': 'AR',
'Portugal': 'PT',
'Netherlands': 'NL',
'Nizozemsko': 'NL',
'Belgium': 'BE',
'Belgie': 'BE',
'Switzerland': 'CH',
'Švýcarsko': 'CH',
'Sweden': 'SE',
'Švédsko': 'SE',
'Norway': 'NO',
'Norsko': 'NO',
'Denmark': 'DK',
'Dánsko': 'DK',
'Finland': 'FI',
'Finsko': 'FI',
'Russia': 'RU',
'Rusko': 'RU',
'Croatia': 'HR',
'Chorvatsko': 'HR',
'Serbia': 'RS',
'Srbsko': 'RS',
'Slovenia': 'SI',
'Slovinsko': 'SI',
'Hungary': 'HU',
'Maďarsko': 'HU',
'Romania': 'RO',
'Rumunsko': 'RO',
'Bulgaria': 'BG',
'Bulharsko': 'BG',
'Greece': 'GR',
'Řecko': 'GR',
'Turkey': 'TR',
'Turecko': 'TR',
'Japan': 'JP',
'Japonsko': 'JP',
'China': 'CN',
'Čína': 'CN',
'South Korea': 'KR',
'Jižní Korea': 'KR',
'Australia': 'AU',
'Austrálie': 'AU',
'New Zealand': 'NZ',
'Nový Zéland': 'NZ',
'Canada': 'CA',
'Kanada': 'CA',
'Mexico': 'MX',
'Mexiko': 'MX',
'Ireland': 'IE',
'Irsko': 'IE',
'Iceland': 'IS',
'Island': 'IS',
'Bosnia and Herzegovina': 'BA',
'Bosna a Hercegovina': 'BA',
'Montenegro': 'ME',
'Černá Hora': 'ME',
'North Macedonia': 'MK',
'Severní Makedonie': 'MK',
'Albania': 'AL',
'Albánie': 'AL',
'Luxembourg': 'LU',
'Lucembursko': 'LU',
'Moldova': 'MD',
'Moldavsko': 'MD',
'Lithuania': 'LT',
'Litva': 'LT',
'Latvia': 'LV',
'Lotyšsko': 'LV',
'Estonia': 'EE',
'Estonsko': 'EE',
'Belarus': 'BY',
'Bělorusko': 'BY',
};
const code = nameToCode[n] || nameToCode[n.replace(/\s+/g, ' ').trim()] || nameToCode[n.toLowerCase().replace(/\b\w/g, (l) => l.toUpperCase())];
if (code) return countryCodeToEmoji(code);
return '';
}