From b55da8d642fb5e9c221a658cb047ab8f3fb00c36 Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Fri, 30 May 2025 10:39:27 +0200 Subject: [PATCH] e --- admin-dashboard.html | 300 +++++++++++++++++++++++++++++++++---------- 1 file changed, 230 insertions(+), 70 deletions(-) diff --git a/admin-dashboard.html b/admin-dashboard.html index 76aa5f4..af447dd 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -1834,26 +1834,62 @@ async function editApp(appId) { document.getElementById('appColorText').value = app.color; } - // Show icon preview if exists + // Handle icon preview const iconPreview = document.getElementById('customIconPreview'); const selectedIcon = document.getElementById('selectedIcon'); + const appIcon = document.getElementById('appIcon'); + const customIconInput = document.getElementById('customIconInput'); - if (app.icon) { - if (app.icon.startsWith('http') || app.icon.startsWith('/')) { - iconPreview.src = app.icon; - iconPreview.classList.remove('hidden'); - selectedIcon.classList.add('hidden'); - } else { - iconPreview.src = `/uploads/${app.icon}`; - iconPreview.classList.remove('hidden'); - selectedIcon.classList.add('hidden'); - } - document.getElementById('appIcon').value = 'custom'; - } else { + // Reset all icon states first + if (iconPreview) { + iconPreview.src = ''; iconPreview.classList.add('hidden'); - selectedIcon.classList.remove('hidden'); - document.getElementById('appIcon').value = ''; } + if (selectedIcon) { + selectedIcon.className = 'fas fa-cube text-2xl text-gray-400'; + selectedIcon.classList.add('hidden'); + } + + // Set the appropriate icon based on the app data + if (app.icon) { + if (app.icon.startsWith('http') || app.icon.startsWith('/') || app.icon.startsWith('data:')) { + // Custom uploaded image + if (iconPreview) { + iconPreview.src = app.icon; + iconPreview.classList.remove('hidden'); + if (selectedIcon) selectedIcon.classList.add('hidden'); + } + if (appIcon) appIcon.value = 'custom'; + } else if (app.icon.startsWith('fa-')) { + // Font Awesome icon + if (selectedIcon) { + selectedIcon.className = `fas ${app.icon} text-2xl text-gray-400`; + selectedIcon.classList.remove('hidden'); + if (iconPreview) iconPreview.classList.add('hidden'); + } + if (appIcon) appIcon.value = app.icon; + + // Highlight the selected icon in the picker + const iconElements = document.querySelectorAll('.icon-option'); + iconElements.forEach(el => { + if (el.getAttribute('data-icon') === app.icon) { + el.classList.add('selected'); + } else { + el.classList.remove('selected'); + } + }); + } + } else { + // No icon + if (selectedIcon) { + selectedIcon.className = 'fas fa-cube text-2xl text-gray-400'; + selectedIcon.classList.remove('hidden'); + } + if (appIcon) appIcon.value = ''; + } + + // Reset file input + if (customIconInput) customIconInput.value = ''; // Show the modal document.getElementById('appModal').classList.remove('hidden'); @@ -1875,29 +1911,42 @@ function openAddAppModal() { // Update title document.getElementById('appModalTitle').textContent = 'Přidat aplikaci'; - // Reset file input and preview + // Reset icon selection + const appIcon = document.getElementById('appIcon'); const customIconInput = document.getElementById('customIconInput'); const customIconPreview = document.getElementById('customIconPreview'); const selectedIcon = document.getElementById('selectedIcon'); - if (customIconInput && customIconPreview && selectedIcon) { - customIconInput.value = ''; + if (appIcon) appIcon.value = ''; + if (customIconInput) customIconInput.value = ''; + if (customIconPreview) { customIconPreview.src = ''; customIconPreview.classList.add('hidden'); + } + if (selectedIcon) { + selectedIcon.className = 'fas fa-cube text-2xl text-gray-400'; selectedIcon.classList.remove('hidden'); } // Reset color picker to default const colorInput = document.getElementById('appColor'); - if (colorInput) { - colorInput.value = '#4a6cf7'; - } + const colorText = document.getElementById('appColorText'); + if (colorInput) colorInput.value = '#4a6cf7'; + if (colorText) colorText.value = '#4a6cf7'; + + // Reset icon picker selection + const selectedIcons = document.querySelectorAll('.icon-option.selected'); + selectedIcons.forEach(icon => icon.classList.remove('selected')); // Show the modal const modal = document.getElementById('appModal'); if (modal) { modal.classList.remove('hidden'); } + + // Set focus to the first input field + const firstInput = form?.querySelector('input, textarea, select'); + if (firstInput) firstInput.focus(); } function closeAppModal() { @@ -1909,39 +1958,76 @@ function setupFileInput() { const fileInput = document.getElementById('customIconInput'); const previewImg = document.getElementById('customIconPreview'); const selectedIcon = document.getElementById('selectedIcon'); + const appIcon = document.getElementById('appIcon'); - if (!fileInput || !previewImg || !selectedIcon) return; + if (!fileInput || !previewImg || !selectedIcon || !appIcon) return; fileInput.addEventListener('change', function() { const file = this.files[0]; - if (file) { - // Check if the file is an image - if (file.type.startsWith('image/')) { - const reader = new FileReader(); - reader.onload = function(e) { - previewImg.src = e.target.result; - previewImg.classList.remove('hidden'); - selectedIcon.classList.add('hidden'); - - // Set the appIcon value to 'custom' to indicate a custom icon is being used - document.getElementById('appIcon').value = 'custom'; - } - reader.readAsDataURL(file); - } else { - previewImg.classList.add('hidden'); - selectedIcon.classList.remove('hidden'); - showNotification('Vyberte prosím obrázek (JPG, PNG, GIF, SVG)', 'warning'); - this.value = ''; // Reset the file input - } - } else { - previewImg.classList.add('hidden'); - selectedIcon.classList.remove('hidden'); - document.getElementById('appIcon').value = ''; + if (!file) { + resetIconSelection(); + return; } + + // Check file type + if (!file.type.startsWith('image/')) { + showNotification('Vyberte prosím obrázek (JPG, PNG, GIF, SVG)', 'warning'); + resetIconSelection(); + return; + } + + // Check file size (max 2MB) + if (file.size > 2 * 1024 * 1024) { + showNotification('Obrázek je příliš velký. Maximální velikost je 2MB.', 'error'); + resetIconSelection(); + return; + } + + // Create preview + const reader = new FileReader(); + reader.onload = function(e) { + previewImg.src = e.target.result; + previewImg.classList.remove('hidden'); + selectedIcon.classList.add('hidden'); + + // Set a special value to indicate a custom icon is being used + appIcon.value = 'custom'; + + // Show success message + showNotification('Vlastní ikona byla úspěšně nahrána', 'success'); + }; + + reader.onerror = function() { + showNotification('Chyba při načítání obrázku', 'error'); + resetIconSelection(); + }; + + reader.readAsDataURL(file); }); + + function resetIconSelection() { + fileInput.value = ''; + previewImg.src = ''; + previewImg.classList.add('hidden'); + selectedIcon.classList.remove('hidden'); + appIcon.value = ''; + } } document.addEventListener('DOMContentLoaded', function() { + // Initialize file input for custom icon upload + setupFileInput(); + + // Add click handler for custom icon button + const customIconBtn = document.getElementById('customIconBtn'); + const customIconInput = document.getElementById('customIconInput'); + if (customIconBtn && customIconInput) { + customIconBtn.addEventListener('click', function(e) { + e.preventDefault(); + customIconInput.click(); + }); + } + const appColor = document.getElementById('appColor'); const appColorText = document.getElementById('appColorText'); @@ -2034,24 +2120,33 @@ function filterIcons() { // Select an icon function selectIcon(iconClass) { const selectedIcon = document.getElementById('selectedIcon'); - const appIconClass = document.getElementById('appIconClass'); - const fileName = document.getElementById('fileName'); + const customIconPreview = document.getElementById('customIconPreview'); const iconPreview = document.getElementById('iconPreview'); const appIcon = document.getElementById('appIcon'); - if (selectedIcon) selectedIcon.className = `fas ${iconClass} text-xl`; - if (appIconClass) appIconClass.value = iconClass; - if (fileName) fileName.textContent = iconClass.replace('fa-', '').replace(/-/g, ' '); + // Show the selected icon and hide custom icon preview + if (selectedIcon) { + selectedIcon.className = `fas ${iconClass} text-2xl text-gray-400`; + selectedIcon.classList.remove('hidden'); + } + if (customIconPreview) { + customIconPreview.src = ''; + customIconPreview.classList.add('hidden'); + } + + // Set the app icon value to the selected icon class + if (appIcon) appIcon.value = iconClass; + + // Reset file input + const customIconInput = document.getElementById('customIconInput'); + if (customIconInput) customIconInput.value = ''; // Update preview with random color const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'purple', 'pink', 'gray']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; if (iconPreview) { - iconPreview.className = `w-12 h-12 rounded-full bg-${randomColor}-100 text-${randomColor}-600 flex items-center justify-center mr-3`; + iconPreview.className = `mt-2 flex items-center justify-center w-16 h-16 bg-${randomColor}-100 rounded-md overflow-hidden`; } - - // Reset file input if an icon is selected - if (appIcon) appIcon.value = ''; } // Initialize icon picker when the page loads @@ -3098,57 +3193,122 @@ function setupDraggableImage() { const templateConfigs = { 'default': { name: 'Výchozí', - containerStyle: 'background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);', + background: 'linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%)', + backgroundColor: '#f5f7fa', + textColor: '#2d3748', textStyle: 'color: #2d3748; font-weight: 500;', buttonStyle: 'background: #4a6cf7; color: white; border: none; padding: 8px 16px; border-radius: 4px;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 4, + buttonBackground: '#4a6cf7', + buttonTextColor: '#ffffff', + buttonBorder: 'none' }, 'modern': { name: 'Moderní', - containerStyle: 'background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);', + background: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)', + backgroundColor: '#84fab0', + textColor: '#1a365d', textStyle: 'color: #1a365d; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.1);', buttonStyle: 'background: #2b6cb0; color: white; border: 2px solid #2c5282; padding: 8px 20px; border-radius: 25px;', isVisible: true, - background: 'linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)', - backgroundColor: '#84fab0', - textColor: '#1a365d' + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 25, + buttonBackground: '#2b6cb0', + buttonTextColor: '#ffffff', + buttonBorder: '2px solid #2c5282' }, 'elegant': { name: 'Elegantní', - containerStyle: 'background: linear-gradient(to right, #f5f7fa 0%, #e4e8f0 100%); border-left: 4px solid #4a5568;', + background: 'linear-gradient(to right, #f5f7fa 0%, #e4e8f0 100%)', + backgroundColor: '#f5f7fa', + textColor: '#2d3748', textStyle: 'color: #2d3748; font-family: Georgia, serif;', buttonStyle: 'background: #4a5568; color: white; border: none; padding: 8px 16px; border-radius: 2px; letter-spacing: 1px;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 8, + buttonBackground: '#4a5568', + buttonTextColor: '#ffffff', + buttonBorder: 'none' }, 'alert': { name: 'Upozornění', - containerStyle: 'background: #fff3cd; border: 1px solid #ffeeba;', + background: '#fff3cd', + backgroundColor: '#fff3cd', + textColor: '#856404', textStyle: 'color: #856404;', buttonStyle: 'background: #ffc107; color: #856404; border: 1px solid #d39e00; padding: 8px 16px; border-radius: 4px;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 4, + buttonBackground: '#ffc107', + buttonTextColor: '#856404', + buttonBorder: '1px solid #d39e00' }, 'dark': { name: 'Tmavý motiv', - containerStyle: 'background: #2d3748;', + background: '#2d3748', + backgroundColor: '#2d3748', + textColor: '#e2e8f0', textStyle: 'color: #e2e8f0;', buttonStyle: 'background: #4fd1c5; color: #1a202c; font-weight: 600; padding: 8px 16px; border-radius: 4px;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 4, + buttonBackground: '#4fd1c5', + buttonTextColor: '#1a202c', + buttonBorder: 'none' }, 'gradient': { name: 'Přechod', - containerStyle: 'background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);', + background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)', + backgroundColor: '#667eea', + textColor: 'white', textStyle: 'color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.2);', buttonStyle: 'background: white; color: #4a6cf7; border: none; padding: 8px 20px; border-radius: 4px; font-weight: 600;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 4, + buttonBackground: 'white', + buttonTextColor: '#4a6cf7', + buttonBorder: 'none' }, 'gradient-blue': { name: 'Modrý gradient', - containerStyle: 'background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;', background: 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)', backgroundColor: '#4f46e5', + textColor: 'white', textStyle: 'color: white; font-family: \'Inter\', sans-serif; font-size: 16px; font-weight: 500;', buttonStyle: 'background-color: white; color: #4f46e5; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600;', - isVisible: true + isVisible: true, + textAlign: 'left', + fontSize: 16, + padding: 20, + margin: 20, + borderRadius: 6, + buttonBackground: 'white', + buttonTextColor: '#4f46e5', + buttonBorder: 'none' } };