[ВОЛК] отображение картинки в детализации площадки

templates/index.html

@@ -1924,8 +1924,15 @@
             const category = await response.json();
             // Создаем HTML для деталей
             let detailsHtml = `
-            <div>
-                <div class="mb-3">
+            <div style="position: relative;">
+                ${category.image_url ? `
+                <div id="category-image-container" style="position: absolute; top: 0; right: 0; z-index: 10; display: none;">
+                    <img id="category-image" src="${category.image_url}" 
+                         style="max-width: 200px; max-height: 200px; width: auto; height: auto; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"
+                         alt="Изображение площадки">
+                </div>
+                ` : ''}
+                <div class="mb-3" id="category-content" ${category.image_url ? 'style="padding-right: 220px;"' : ''}>
                     <div class="mb-2">
                         <strong>ID:</strong> ${category.id || 'Не указано'}
                     </div>
@@ -1945,6 +1952,28 @@
             }
             detailsHtml += `</div>`;
             detailsPanel.innerHTML = detailsHtml;
+            
+            // Проверяем, загрузилось ли изображение
+            if (category.image_url) {
+                const img = document.getElementById('category-image');
+                const imgContainer = document.getElementById('category-image-container');
+                const contentDiv = document.getElementById('category-content');
+                
+                if (img && imgContainer) {
+                    img.onload = function() {
+                        // Изображение успешно загрузилось - показываем его
+                        imgContainer.style.display = 'block';
+                    };
+                    img.onerror = function() {
+                        // Изображение не загрузилось, скрываем контейнер
+                        imgContainer.style.display = 'none';
+                        // Убираем отступ справа, если изображение не загрузилось
+                        if (contentDiv) {
+                            contentDiv.style.paddingRight = '';
+                        }
+                    };
+                }
+            }
             // Обновляем заголовок панели
             const header = document.getElementById('category-details-header');
             if (header) {