+
Správa banneru
+
+
+
+
+
+
Styl banneru
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Předvolby stylů
+
+
Informační
+
Upozornění
+
Úspěch
+
Chyba
+
+
+
+ Náhled banneru se zde zobrazí
+
+
+
+
Uživatelé
@@ -123,6 +240,189 @@
return response;
};
+
+ // DOM Elements
+ const bannerText = document.getElementById('bannerText');
+ const bannerVisible = document.getElementById('bannerVisible');
+ const bannerBgColor = document.getElementById('bannerBgColor');
+ const bannerTextColor = document.getElementById('bannerTextColor');
+ const bannerTextAlign = document.getElementById('bannerTextAlign');
+ const bannerFontSize = document.getElementById('bannerFontSize');
+ const bannerPadding = document.getElementById('bannerPadding');
+ const bannerPreview = document.getElementById('bannerPreview');
+ const bgColorPreview = document.getElementById('bgColorPreview');
+ const textColorPreview = document.getElementById('textColorPreview');
+ const saveBannerBtn = document.getElementById('saveBannerBtn');
+ const stylePresets = document.querySelectorAll('.style-preset');
+
+ // Preset styles
+ const presets = {
+ info: {
+ backgroundColor: '#cce5ff',
+ textColor: '#004085',
+ textAlign: 'left'
+ },
+ warning: {
+ backgroundColor: '#fff3cd',
+ textColor: '#856404',
+ textAlign: 'center'
+ },
+ success: {
+ backgroundColor: '#d4edda',
+ textColor: '#155724',
+ textAlign: 'center'
+ },
+ error: {
+ backgroundColor: '#f8d7da',
+ textColor: '#721c24',
+ textAlign: 'center'
+ }
+ };
+
+ // Load current banner
+ async function loadBanner() {
+ try {
+ const response = await fetch('/api/banner');
+ if (!response.ok) throw new Error('Failed to load banner');
+
+ const banner = await response.json();
+
+ // Update form fields
+ bannerText.value = banner.text || '';
+ bannerVisible.checked = banner.style.isVisible !== false;
+ bannerBgColor.value = banner.style.backgroundColor || '#f8d7da';
+ bannerTextColor.value = banner.style.textColor || '#721c24';
+ bannerTextAlign.value = banner.style.textAlign || 'center';
+ bannerFontSize.value = parseInt(banner.style.fontSize || '16');
+ bannerPadding.value = parseInt(banner.style.padding || '10');
+
+ updateColorPreviews();
+ updateBannerPreview();
+
+ } catch (error) {
+ console.error('Error loading banner:', error);
+ alert('Nepodařilo se načíst banner');
+ }
+ }
+
+ // Save banner
+ async function saveBanner() {
+ try {
+ const bannerData = {
+ text: bannerText.value,
+ style: {
+ backgroundColor: bannerBgColor.value,
+ textColor: bannerTextColor.value,
+ textAlign: bannerTextAlign.value,
+ fontSize: `${bannerFontSize.value}px`,
+ padding: `${bannerPadding.value}px`,
+ isVisible: bannerVisible.checked
+ }
+ };
+
+ const response = await fetch('/api/banner/update', {
+ method: 'POST',
+ body: JSON.stringify(bannerData)
+ });
+
+ if (!response.ok) throw new Error('Failed to save banner');
+
+ alert('Banner byl úspěšně uložen');
+ updateBannerPreview();
+
+ } catch (error) {
+ console.error('Error saving banner:', error);
+ alert('Nepodařilo se uložit banner');
+ }
+ }
+
+ // Update color previews
+ function updateColorPreviews() {
+ bgColorPreview.style.backgroundColor = bannerBgColor.value;
+ textColorPreview.style.backgroundColor = bannerTextColor.value;
+ }
+
+ // Update banner preview
+ function updateBannerPreview() {
+ if (!bannerText.value.trim()) {
+ bannerPreview.style.display = 'none';
+ return;
+ }
+
+
+ bannerPreview.style.display = 'block';
+ bannerPreview.textContent = bannerText.value;
+ bannerPreview.style.backgroundColor = bannerBgColor.value;
+ bannerPreview.style.color = bannerTextColor.value;
+ bannerPreview.style.textAlign = bannerTextAlign.value;
+ bannerPreview.style.fontSize = `${bannerFontSize.value}px`;
+ bannerPreview.style.padding = `${bannerPadding.value}px`;
+ }
+
+ // Apply preset
+ function applyPreset(preset) {
+ const style = presets[preset];
+ if (!style) return;
+
+ bannerBgColor.value = style.backgroundColor;
+ bannerTextColor.value = style.textColor;
+ bannerTextAlign.value = style.textAlign;
+
+ updateColorPreviews();
+ updateBannerPreview();
+ }
+
+ // Event Listeners
+ bannerBgColor.addEventListener('input', () => {
+ updateColorPreviews();
+ updateBannerPreview();
+ });
+
+ bannerTextColor.addEventListener('input', () => {
+ updateColorPreviews();
+ updateBannerPreview();
+ });
+
+ [bannerText, bannerTextAlign, bannerFontSize, bannerPadding, bannerVisible].forEach(el => {
+ el.addEventListener('change', updateBannerPreview);
+ el.addEventListener('input', updateBannerPreview);
+ });
+
+ stylePresets.forEach(preset => {
+ preset.addEventListener('click', () => applyPreset(preset.dataset.preset));
+ });
+
+ saveBannerBtn.addEventListener('click', saveBanner);
+
+ // Initialize
+ async function fetch(resource, init = {}) {
+ // Add auth token to headers if it exists
+ const token = localStorage.getItem('token');
+ if (token) {
+ init.headers = {
+ ...init.headers,
+ 'Authorization': `Bearer ${token}`,
+ 'Content-Type': 'application/json'
+ };
+ }
+
+ const response = await window.fetch(resource, {
+ credentials: 'same-origin',
+ ...init
+ });
+
+ if (response.status === 401) {
+ // Unauthorized - redirect to login
+ window.location.href = '/admin';
+ return;
+ }
+
+
+ return response;
+ }
+
+ // Load banner when page loads
+ document.addEventListener('DOMContentLoaded', loadBanner);;