gdg

admin-dashboard.html

@@ -664,7 +664,7 @@
                         <div class="mt-3">
                             <label>Pozice obrázku:</label>
                             <div class="btn-group w-100" role="group">
-                                <button type="button" class="btn btn-outline-secondary image-pos-btn" data-pos="left">
+                                <button type="button" class="btn btn-outline-primary image-pos-btn active" data-pos="left">
                                     <i class="fas fa-align-left"></i> Vlevo
                                 </button>
                                 <button type="button" class="btn btn-outline-secondary image-pos-btn" data-pos="center">
@@ -673,11 +673,7 @@
                                 <button type="button" class="btn btn-outline-secondary image-pos-btn" data-pos="right">
                                     <i class="fas fa-align-right"></i> Vpravo
                                 </button>
-                                <button type="button" class="btn btn-outline-primary image-pos-btn" data-pos="custom" id="customPosBtn">
-                                    <i class="fas fa-hand-pointer"></i> Vlastní
-                                </button>
                             </div>
-                            <small class="text-muted">Pro vlastní pozici přetáhněte obrázek myší</small>
                         </div>
                     </div>
                 </form>
@@ -888,8 +884,6 @@ function updateBannerPreview() {
 
 // Initialize when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    initDragAndDrop();
-    
     // Initialize banner preview elements
     bannerVisible = document.getElementById('bannerVisibility');
     bannerBgColor = document.getElementById('bannerBgColor');
@@ -902,6 +896,15 @@ document.addEventListener('DOMContentLoaded', () => {
     bannerBorderRadius = document.getElementById('bannerBorderRadius');
     bannerPreview = document.getElementById('bannerPreview');
     
+    // Initialize drag and drop and image upload
+    initDragAndDrop();
+    
+    // Set up file input change event
+    const bannerImageInput = document.getElementById('bannerImage');
+    if (bannerImageInput) {
+        bannerImageInput.addEventListener('change', handleImageUpload);
+    }
+    
     // Set up event listeners for preview updates
     const previewInputs = [
         bannerVisible, bannerBgColor, bannerTextColor, bannerText, 
@@ -924,7 +927,7 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
     
-    // Initialize other functionality
+    // Initialize save button
     saveBannerBtn = document.getElementById('saveBannerBtn');
     if (saveBannerBtn) {
         saveBannerBtn.addEventListener('click', saveBanner);
@@ -933,8 +936,17 @@ document.addEventListener('DOMContentLoaded', () => {
     // Set up color input listeners
     setupColorInputListeners();
     
+    // Set up remove image button
+    const removeImageBtn = document.getElementById('removeImageBtn');
+    if (removeImageBtn) {
+        removeImageBtn.addEventListener('click', removeImage);
+    }
+    
     // Initial preview update
     updateBannerPreview();
+    
+    // Load existing banner data
+    loadBanner();
 });
 
 // Handle dropped files
@@ -976,7 +988,7 @@ function handleImageUpload(event) {
     // Show loading state
     const previewContainer = document.getElementById('imagePreviewContainer');
     const dragDropMessage = document.querySelector('.drag-drop-message');
-    const bannerImagePreview = document.getElementById('bannerImagePreview');
+    const bannerPreview = document.getElementById('bannerPreview');
     
     if (previewContainer) {
         previewContainer.style.display = 'block';
@@ -996,6 +1008,7 @@ function handleImageUpload(event) {
         const bannerImagePreview = document.getElementById('bannerImagePreview');
         if (bannerImagePreview) {
             bannerImagePreview.src = e.target.result;
+            bannerImagePreview.style.display = 'block';
             bannerImagePreview.classList.remove('d-none');
             
             // Show remove button
@@ -1007,6 +1020,13 @@ function handleImageUpload(event) {
             
             // Update the banner preview
             updateBannerPreview();
+            
+            // Show the preview container
+            if (previewContainer) {
+                previewContainer.style.display = 'block';
+                previewContainer.innerHTML = '';
+                previewContainer.appendChild(bannerImagePreview);
+            }
         }
         
         // Hide loading container
@@ -1019,6 +1039,9 @@ function handleImageUpload(event) {
         if (bannerTemplates) {
             bannerTemplates.style.display = 'block';
         }
+        
+        // Update banner preview with the new image
+        updateBannerPreview();
     };
     
     reader.onerror = function() {
@@ -1277,28 +1300,35 @@ async function saveBanner(event) {
             formData.append('style[borderRadius]', template.borderRadius ? `${template.borderRadius}px` : '8px');
         }
         
-        // Add image dimensions if available
+        // Add image position
+        const imagePosition = document.querySelector('.image-pos-btn.active')?.dataset.pos || 'center';
+        formData.append('style[imagePosition]', imagePosition);
+        
+        // Add custom position if needed
+        if (imagePosition === 'custom') {
+            formData.append('style[imageX]', currentImageX || '0');
+            formData.append('style[imageY]', currentImageY || '0');
+        }
+        
+        // Add image dimensions
         const imageWidth = document.getElementById('bannerImageWidth');
         const imageHeight = document.getElementById('bannerImageHeight');
         
         if (imageWidth && imageHeight) {
             formData.append('imageWidth', imageWidth.value || '300');
             formData.append('imageHeight', imageHeight.value || '200');
+            formData.append('style[imageWidth]', imageWidth.value || '300');
+            formData.append('style[imageHeight]', imageHeight.value || '200');
         }
         
-        // Add current image if available
+        // Handle image upload if a new image was selected
-        if (currentImage) {
-            // If currentImage is a data URL, we need to convert it to a file
-            if (currentImage.startsWith('data:image')) {
-                const blob = await fetch(currentImage).then(r => r.blob());
-                formData.append('image', blob, 'banner-image.jpg');
-            } else {
-                // It's already a file, just append it
         const fileInput = document.getElementById('bannerImage');
         if (fileInput.files.length > 0) {
             formData.append('image', fileInput.files[0]);
-                }
+        } else if (currentImage && currentImage.startsWith('data:image')) {
-            }
+            // If we have a data URL but no file input, convert it to a blob
+            const blob = await fetch(currentImage).then(r => r.blob());
+            formData.append('image', blob, 'banner-image.jpg');
         }
         
         // Log form data for debugging (without the actual file data)
@@ -1410,30 +1440,21 @@ function updateColorPreviews() {
 
 // Remove image
 function removeImage() {
-    const fileInput = document.getElementById('bannerImage');
+    const bannerImageInput = document.getElementById('bannerImage');
-    const preview = document.getElementById('imagePreview');
+    const bannerImagePreview = document.getElementById('bannerImagePreview');
-    const previewContainer = document.getElementById('imagePreviewContainer');
     const removeBtn = document.getElementById('removeImageBtn');
     const dragDropMessage = document.querySelector('.drag-drop-message');
-    const removeImageInput = document.getElementById('removeImage');
+    const previewContainer = document.getElementById('imagePreviewContainer');
-    const bannerTemplates = document.getElementById('bannerTemplates');
-    const imageSizeControls = document.getElementById('imageSizeControls');
     
     // Reset file input
-    if (fileInput) {
+    if (bannerImageInput) {
-        fileInput.value = '';
+        bannerImageInput.value = '';
     }
     
-    // Clear preview
+    // Hide image preview
-    if (preview) {
+    if (bannerImagePreview) {
-        preview.src = '';
+        bannerImagePreview.src = '';
-        preview.style.display = 'none';
+        bannerImagePreview.style.display = 'none';
-    }
-    
-    // Hide preview container and show upload message
-    if (previewContainer) {
-        previewContainer.style.display = 'none';
-        previewContainer.innerHTML = '';
     }
     
     // Hide remove button
@@ -1446,19 +1467,9 @@ function removeImage() {
         dragDropMessage.style.display = 'flex';
     }
     
-    // Hide templates when no image is present
+    // Reset preview container
-    if (bannerTemplates) {
+    if (previewContainer) {
-        bannerTemplates.style.display = 'none';
+        previewContainer.style.display = 'none';
-    }
-    
-    // Hide size controls
-    if (imageSizeControls) {
-        imageSizeControls.style.display = 'none';
-    }
-    
-    // Update hidden input to indicate image removal
-    if (removeImageInput) {
-        removeImageInput.value = 'true';
     }
     
     // Clear current image

index.html

@@ -33,15 +33,40 @@
                 
                 if (!bannerContainer || !bannerContent) return;
                 
-                // Apply styles to container
+                // Log the banner data for debugging
-                bannerContainer.style.borderRadius = (banner.style.borderRadius ? `${banner.style.borderRadius}px` : '8px');
+                console.log('Banner data:', JSON.stringify(banner, null, 2));
                 
-                // Handle image
+                // Get style values with fallbacks
-                let content = '';
+                const style = banner.style || {};
-                if (banner.image) {
+                const borderRadius = style.borderRadius || '8';
-                    const imagePosition = banner.style.imagePosition || 'right';
+                const backgroundColor = style.backgroundColor || '#f8f9fa';
-                    const imageWidth = banner.style.imageWidth || 300;
+                const textColor = style.textColor || '#212529';
-                    const imageHeight = banner.style.imageHeight || 200;
+                const textAlign = style.textAlign || 'left';
+                const fontSize = style.fontSize || '16px';
+                const padding = style.padding || '20px';
+                const margin = style.margin || '20px';
+                
+                // Create banner content container
+                let content = `
+                    <div style="
+                        background-color: ${backgroundColor};
+                        color: ${textColor};
+                        text-align: ${textAlign};
+                        font-size: ${fontSize};
+                        padding: ${padding};
+                        margin: ${margin} 0;
+                        border-radius: ${borderRadius}px;
+                        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                        overflow: hidden;
+                    ">
+                `;
+                
+                // Handle image if it exists
+                if (banner.Image) {
+                    const imageUrl = banner.Image.startsWith('http') ? banner.Image : banner.Image;
+                    const imagePosition = style.imagePosition || 'right';
+                    const imageWidth = style.imageWidth || 300;
+                    const imageHeight = style.imageHeight || 200;
                     
                     // Create image element with styles
                     const imgStyle = `
@@ -50,10 +75,10 @@
                         width: ${imageWidth}px;
                         max-height: ${imageHeight}px;
                         object-fit: contain;
-                        border-radius: ${banner.style.borderRadius || '0'}px;
+                        border-radius: ${borderRadius}px;
                         ${imagePosition === 'left' ? 'float: left; margin-right: 20px;' : ''}
                         ${imagePosition === 'right' ? 'float: right; margin-left: 20px;' : ''}
-                        ${imagePosition === 'center' ? 'display: block; margin: 0 auto;' : ''}
+                        ${imagePosition === 'center' ? 'display: block; margin: 0 auto 20px;' : ''}
                     `;
                     
                     // Create image container
@@ -61,10 +86,10 @@
                         <div class="banner-image-container" style="
                             display: inline-block;
                             max-width: 100%;
-                            margin-bottom: 10px;
+                            ${imagePosition === 'top' || imagePosition === 'bottom' ? 'margin-bottom: 20px;' : ''}
                         ">
                             <img 
-                                src="${banner.image}" 
+                                src="${imageUrl}" 
                                 style="${imgStyle}" 
                                 alt="Banner obrázek"
                                 class="banner-image"
@@ -72,70 +97,52 @@
                         </div>`;
                         
                     // Wrap image with link if URL is provided
-                    if (banner.link) {
+                    if (banner.Link) {
                         imgContainer = `
-                            <a href="${banner.link}" target="_blank" style="text-decoration: none;">
+                            <a href="${banner.Link}" target="_blank" style="text-decoration: none; display: inline-block;">
                                 ${imgContainer}
                             </a>`;
                     }
                     
-                    // Create text content with styles
+                    // Add image to content based on position
-                    const textStyle = `
+                    if (['left', 'top'].includes(imagePosition)) {
-                        font-size: ${banner.style.fontSize || '16px'};
+                        content += imgContainer;
-                        color: ${banner.style.textColor || '#000'};
+                    }
-                        text-align: ${banner.style.textAlign || 'left'};
-                        margin: 0;
-                        padding: 10px 0;
-                        line-height: 1.5;
-                    `;
                     
-                    const textElement = `
+                    // Add text content
-                        <div class="banner-text" style="${textStyle}">
+                    if (banner.Text) {
-                            ${banner.text || ''}
+                        content += `
-                        </div>`;
-                    
-                    // Create container with proper layout
-                    content = `
-                        <div class="banner-content" style="
-                            ${banner.style.backgroundColor ? `background-color: ${banner.style.backgroundColor};` : ''}
-                            ${banner.style.padding ? `padding: ${banner.style.padding}px;` : 'padding: 20px;'}
-                            overflow: hidden;
-                            display: flex;
-                            flex-direction: ${imagePosition === 'bottom' ? 'column' : 'row'};
-                            align-items: center;
-                            gap: 20px;
-                            border-radius: ${banner.style.borderRadius || '8px'};
-                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                        ">
-                            ${imagePosition === 'left' || imagePosition === 'top' ? imgContainer : ''}
-                            <div style="flex: 1;">
-                                ${textElement}
-                            </div>
-                            ${imagePosition === 'right' || imagePosition === 'bottom' ? imgContainer : ''}
-                        </div>`;
-                } else {
-                    // No image, just show text
-                    content = `
-                        <div class="banner-content" style="
-                            ${banner.style.backgroundColor ? `background-color: ${banner.style.backgroundColor};` : ''}
-                            ${banner.style.padding ? `padding: ${banner.style.padding}px;` : 'padding: 20px;'}
-                            display: flex; 
-                            align-items: center; 
-                            justify-content: center; 
-                            min-height: 100px;
-                            border-radius: ${banner.style.borderRadius || '8px'};
-                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-                        ">
                             <div class="banner-text" style="
-                                text-align: ${banner.style.textAlign || 'center'}; 
+                                margin: 0;
-                                color: ${banner.style.textColor || '#666'}; 
+                                padding: 0;
-                                font-size: ${banner.style.fontSize || '16px'};
+                                line-height: 1.5;
+                                ${imagePosition === 'left' || imagePosition === 'right' ? 'overflow: hidden;' : ''}
                             ">
-                                ${banner.text || 'Žádný text banneru'}
+                                ${banner.Text}
-                            </div>
                             </div>`;
                     }
                     
+                    // Add image if position is right or bottom
+                    if (['right', 'bottom'].includes(imagePosition)) {
+                        content += imgContainer;
+                    }
+                } else {
+                    // No image, just show text
+                    if (banner.Text) {
+                        content += `
+                            <div class="banner-text" style="
+                                margin: 0;
+                                padding: 0;
+                                line-height: 1.5;
+                            ">
+                                ${banner.Text}
+                            </div>`;
+                    }
+                }
+                
+                // Close the banner content container
+                content += '</div>';
+                
                 bannerContent.innerHTML = content;
                 bannerContainer.style.display = 'block';