From ea8a7158ecfeac7a8ad5fc43b6eecdf273e8b8c0 Mon Sep 17 00:00:00 2001 From: Tomas Dvorak Date: Fri, 30 May 2025 09:46:10 +0200 Subject: [PATCH] test --- admin-dashboard.html | 147 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 125 insertions(+), 22 deletions(-) diff --git a/admin-dashboard.html b/admin-dashboard.html index 162bbeb..e6f229a 100644 --- a/admin-dashboard.html +++ b/admin-dashboard.html @@ -725,9 +725,6 @@

Vlastní aplikace

-
@@ -766,19 +763,35 @@
- -
-
- - -
Nebyl vybrán žádný soubor
+ +
+
+
+ +
+
+ + +
-
-
- - Doporučená velikost: 64x64px (PNG, JPG, SVG) + +
+ +
+ +
+
+ +
+
+
Výchozí ikona
+
Vyberte ikonu z výše uvedených
+
+
+ +
@@ -1639,6 +1652,16 @@ async function saveApp(event) { return; } + // Get the selected icon class or generate a random one + let iconClass = document.getElementById('appIconClass').value; + if (!iconClass) { + const icons = [ + 'fa-globe', 'fa-link', 'fa-external-link-alt', 'fa-cube', 'fa-box', 'fa-folder', + 'fa-file', 'fa-archive', 'fa-database', 'fa-server', 'fa-network-wired', 'fa-sitemap' + ]; + iconClass = icons[Math.floor(Math.random() * icons.length)]; + } + // Generate a random color for the app const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'purple', 'pink', 'gray']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; @@ -1647,6 +1670,7 @@ async function saveApp(event) { formData.append('url', url); formData.append('description', document.getElementById('appDescription').value.trim()); formData.append('color', randomColor); + formData.append('iconClass', iconClass); // Handle icon upload if a new file is selected const iconInput = document.getElementById('appIcon'); @@ -1862,15 +1886,94 @@ document.getElementById('appModal').addEventListener('hidden.bs.modal', function const form = document.getElementById('appForm'); if (form) form.reset(); document.getElementById('appId').value = ''; - const previewImg = document.getElementById('appIconPreview'); - if (previewImg) { - previewImg.classList.add('hidden'); - previewImg.src = ''; + document.getElementById('fileName').textContent = 'Výchozí ikona'; + document.getElementById('appIconClass').value = 'fa-globe'; + document.getElementById('selectedIcon').className = 'fas fa-globe text-xl'; + document.getElementById('iconPreview').className = 'w-12 h-12 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3'; + + // Reset file input + const fileInput = document.getElementById('appIcon'); + if (fileInput) { + fileInput.value = ''; } - const fileNameDisplay = document.getElementById('fileName'); - if (fileNameDisplay) { - fileNameDisplay.textContent = 'Nebyl vybrán žádný soubor'; +}); + +// Icon picker functionality +const iconCategories = { + 'Doprava': ['car', 'truck', 'bus', 'bicycle', 'motorcycle', 'plane', 'ship', 'subway', 'train', 'walking'], + 'Jídlo': ['utensils', 'hamburger', 'pizza-slice', 'ice-cream', 'coffee', 'wine-glass', 'beer', 'wine-bottle', 'wine-glass-alt', 'wine-bottle-alt'], + 'Nástroje': ['tools', 'wrench', 'screwdriver', 'hammer', 'toolbox', 'ruler', 'ruler-combined', 'ruler-horizontal', 'ruler-vertical', 'screwdriver-wrench'], + 'Kancelář': ['briefcase', 'folder', 'file', 'file-alt', 'file-archive', 'file-audio', 'file-code', 'file-excel', 'file-image', 'file-pdf'], + 'Lidé': ['user', 'users', 'user-tie', 'user-graduate', 'user-astronaut', 'user-ninja', 'user-secret', 'user-shield', 'user-tag', 'user-tie'], + 'Komunikace': ['envelope', 'envelope-open', 'envelope-square', 'inbox', 'comment', 'comments', 'comment-alt', 'comment-dots', 'comment-medical', 'comment-slash'], + 'Sociální sítě': ['thumbs-up', 'thumbs-down', 'share', 'share-alt', 'retweet', 'reply', 'comment', 'comments', 'heart', 'star'] +}; + +// Initialize icon picker +function initIconPicker() { + const iconPicker = document.getElementById('iconPicker'); + if (!iconPicker) return; + + let iconsHtml = ''; + + // Add icons from all categories + for (const [category, icons] of Object.entries(iconCategories)) { + iconsHtml += `
${category}
`; + + icons.forEach(icon => { + iconsHtml += ` +
+ +
`; + }); } + + iconPicker.innerHTML = iconsHtml; +} + +// Filter icons based on search input +function filterIcons() { + const searchTerm = document.getElementById('iconSearch').value.toLowerCase(); + const iconOptions = document.querySelectorAll('.icon-option'); + + iconOptions.forEach(option => { + const iconName = option.getAttribute('data-icon').toLowerCase(); + if (iconName.includes(searchTerm)) { + option.style.display = 'flex'; + } else { + option.style.display = 'none'; + } + }); +} + +// Select an icon +function selectIcon(iconClass) { + document.getElementById('selectedIcon').className = `fas ${iconClass} text-xl`; + document.getElementById('appIconClass').value = iconClass; + document.getElementById('fileName').textContent = iconClass.replace('fa-', '').replace(/-/g, ' '); + + // Update preview with random color + const colors = ['blue', 'green', 'red', 'yellow', 'indigo', 'purple', 'pink', 'gray']; + const randomColor = colors[Math.floor(Math.random() * colors.length)]; + document.getElementById('iconPreview').className = `w-12 h-12 rounded-full bg-${randomColor}-100 text-${randomColor}-600 flex items-center justify-center mr-3`; + + // Reset file input if an icon is selected + document.getElementById('appIcon').value = ''; +} + +// Initialize icon picker when the page loads +document.addEventListener('DOMContentLoaded', function() { + initIconPicker(); + + // Update icon preview when editing an existing app + document.getElementById('appModal').addEventListener('shown.bs.modal', function() { + const iconClass = document.getElementById('appIconClass').value; + if (iconClass) { + selectIcon(iconClass); + } + }); }); // Initialize file input handling when the page loads