- Объединены ресурсы в 5 логических групп: Контент сайта, Бронирования, Отзывы и рейтинги, Персонал и гиды, Администрирование - Удалены дублирующие настройки navigation для чистой группировки - Добавлены CSS стили для визуального отображения иерархии с отступами - Добавлены эмодзи-иконки для каждого типа ресурсов через CSS - Улучшена навигация с правильной вложенностью элементов
143 lines
5.7 KiB
HTML
143 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Тест редактора изображений</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
padding: 20px;
|
||
background: #f5f5f5;
|
||
}
|
||
.test-form {
|
||
background: white;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
max-width: 600px;
|
||
}
|
||
.field {
|
||
margin: 15px 0;
|
||
}
|
||
label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: bold;
|
||
}
|
||
input[type="text"] {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
}
|
||
.test-results {
|
||
margin-top: 20px;
|
||
padding: 15px;
|
||
background: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
.adminjs-app { /* Имитируем класс AdminJS */ }
|
||
.status {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 12px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
.status.success { background: #d4edda; color: #155724; }
|
||
.status.error { background: #f8d7da; color: #721c24; }
|
||
</style>
|
||
</head>
|
||
<body class="adminjs-app">
|
||
<h1>🧪 Тест редактора изображений</h1>
|
||
<p>Эта страница тестирует интеграцию редактора изображений с AdminJS</p>
|
||
|
||
<form class="test-form">
|
||
<div class="field">
|
||
<label for="image_url">URL изображения маршрута:</label>
|
||
<input type="text" name="image_url" id="image_url" value="/uploads/routes/example.jpg">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="profile_image">Изображение профиля:</label>
|
||
<input type="text" name="profile_image" id="profile_image" value="">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="article_image_url">Изображение статьи:</label>
|
||
<input type="text" name="article_image_url" id="article_image_url" value="">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="title">Обычное поле (заголовок):</label>
|
||
<input type="text" name="title" id="title" value="Тест обычного поля">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="description">Описание:</label>
|
||
<input type="text" name="description" id="description" value="Это поле не должно иметь кнопку редактора">
|
||
</div>
|
||
</form>
|
||
|
||
<div class="test-results">
|
||
<h3>📊 Результаты теста:</h3>
|
||
<div id="test-output">
|
||
<p>⏳ Загрузка и инициализация скрипта...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Имитируем AdminJS окружение
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
console.log('🧪 Страница теста загружена');
|
||
|
||
// Загружаем наш скрипт
|
||
const script = document.createElement('script');
|
||
script.src = '/js/admin-image-selector-fixed.js';
|
||
script.onload = function() {
|
||
console.log('✅ Скрипт admin-image-selector-fixed.js загружен');
|
||
updateTestResults();
|
||
};
|
||
script.onerror = function() {
|
||
console.error('❌ Ошибка загрузки скрипта admin-image-selector-fixed.js');
|
||
updateTestResults();
|
||
};
|
||
document.head.appendChild(script);
|
||
|
||
// Обновляем результаты тестирования через некоторое время
|
||
setTimeout(updateTestResults, 2000);
|
||
setTimeout(updateTestResults, 5000);
|
||
});
|
||
|
||
function updateTestResults() {
|
||
const outputDiv = document.getElementById('test-output');
|
||
const imageFields = document.querySelectorAll('input[name*="image"]');
|
||
const regularFields = document.querySelectorAll('input:not([name*="image"])');
|
||
|
||
let html = '<h4>🔍 Анализ полей:</h4>';
|
||
|
||
// Проверяем поля изображений
|
||
html += '<h5>Поля изображений:</h5>';
|
||
imageFields.forEach(field => {
|
||
const hasButton = field.parentNode.querySelector('.image-editor-btn');
|
||
const status = hasButton ? 'success' : 'error';
|
||
const statusText = hasButton ? '✅ Кнопка добавлена' : '❌ Кнопка отсутствует';
|
||
html += `<p><strong>${field.name}:</strong> <span class="status ${status}">${statusText}</span></p>`;
|
||
});
|
||
|
||
// Проверяем обычные поля
|
||
html += '<h5>Обычные поля:</h5>';
|
||
regularFields.forEach(field => {
|
||
const hasButton = field.parentNode.querySelector('.image-editor-btn');
|
||
const status = hasButton ? 'error' : 'success';
|
||
const statusText = hasButton ? '❌ Кнопка добавлена (ошибка)' : '✅ Кнопка отсутствует';
|
||
html += `<p><strong>${field.name}:</strong> <span class="status ${status}">${statusText}</span></p>`;
|
||
});
|
||
|
||
outputDiv.innerHTML = html;
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |