/
UzhvaD
/
Web_application_development_Course_work
Обзор
Документация
Войти
/
UzhvaD
/
Web_application_development_Course_work
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
167 строк
8 KB
UzhvaD
create: index.html
03 май 2026, 16:05
Верифицирован
03 май 2026, 16:05
cfb8b13
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ETL-сервис | Планировщик | Трансформация данных</title> <link rel="stylesheet" href="css/style.css"> </head> <body class="light"> <div class="container"> <!-- ШАПКА --> <div class="header"> <h1>Тема курсовой:</h1> <h1> Сервис ETL для миграции данных между БД (Pandas + Airflow + FastAPI) Планировщик задач, трансформация данных, валидация, логирование</h1> <h>Автор:</h> <h>Студент группы ит2303 Ужва Дмитрий Александрович</h> <h1></h1> <h>Руководитель:</h> <h>Аврахам Елена Михайловна</h> <h1>Реализация:</h1> <h1>🔄 ETL-сервис</h1> <p>Планировщик задач • Трансформация данных • Валидация • Логирование</p> </div> <!-- БЛОК 1: СОЗДАНИЕ / ИМПОРТ / РЕДАКТИРОВАНИЕ БД --> <div class="card"> <div class="card-title">📁 СОЗДАНИЕ / ИМПОРТ / РЕДАКТИРОВАНИЕ БАЗЫ ДАННЫХ</div> <div class="mode-buttons"> <button id="btnCreateMode" class="mode-btn active">➕ Создать</button> <button id="btnImportMode" class="mode-btn">📥 Импорт</button> <button id="btnEditMode" class="mode-btn">✏️ Редактировать</button> </div> <!-- Режим создания --> <div id="createModePanel" class="mode-panel"> <div class="form-group"> <label>🏷️ Имя базы данных</label> <input type="text" id="dbName" placeholder="например: movies, sales, users"> </div> <div class="form-group"> <label>📊 Содержимое (CSV)</label> <textarea id="csvContent" rows="8" placeholder='movie_id,title,director,genre 1,Inception,Christopher Nolan,Sci-Fi 2,The Dark Knight,Christopher Nolan,Action'></textarea> <div class="hint">💡 Первая строка — заголовки. Разделитель — запятая.</div> </div> <div class="action-buttons"> <button id="btnSaveDb" class="btn-success">💾 Сохранить БД</button> </div> </div> <!-- Режим импорта --> <div id="importModePanel" class="mode-panel" style="display: none;"> <div class="form-group"> <label>📁 Выберите файл для импорта</label> <input type="file" id="importFile" accept=".csv,.json,.html,.htm,.md,.markdown,.sql"> <div class="hint">💡 Поддерживаемые форматы: CSV, JSON, HTML, Markdown, SQL</div> </div> <button id="btnImportJson" class="btn-warning">📥 Начать импорт</button> </div> <!-- Режим редактирования --> <div id="editModePanel" class="mode-panel" style="display: none;"> <div class="form-group"> <label>📂 Выберите базу данных для редактирования</label> <select id="editDbSelect"> <option value="">— выберите БД —</option> </select> </div> <div class="form-group"> <label>🏷️ Новое имя (оставьте пустым, чтобы не менять)</label> <input type="text" id="editDbName" placeholder="новое имя (опционально)"> </div> <div class="form-group"> <label>📊 Содержимое (CSV)</label> <textarea id="editCsvContent" rows="8" placeholder="Выберите БД для редактирования"></textarea> <div class="hint">✏️ Поддерживаются форматы: CSV, JSON, HTML, Markdown, SQL (автоматическая конвертация)</div> </div> <div class="action-buttons"> <button id="btnSaveEdit" class="btn-success">💾 Сохранить изменения</button> <button id="btnCancelEdit" class="btn-secondary">❌ Отмена</button> </div> </div> </div> <!-- БЛОК 2: ЛОГИ ДЕЙСТВИЙ --> <div class="card"> <div class="card-title">📜 ЛОГИ ДЕЙСТВИЙ</div> <div id="logContainer" class="log-area"> <div class="log-entry log-info">🟢 Система готова</div> </div> <button id="btnClearLogs" class="btn-secondary" style="margin-top: 12px;">🗑️ Очистить логи</button> </div> <!-- БЛОК 3: ПЛАНИРОВЩИК --> <div class="card"> <div class="card-title">⏰ ПЛАНИРОВЩИК ETL ЗАДАЧ</div> <div class="scheduler-row"> <div class="scheduler-field"> <label>⏱️ Интервал</label> <select id="scheduleInterval"> <option value="5000">Каждые 5 секунд (тест)</option> <option value="30000">Каждые 30 секунд</option> <option value="60000">Каждую минуту</option> <option value="300000">Каждые 5 минут</option> <option value="3600000">Каждый час</option> </select> </div> <div class="scheduler-field"> <label>📂 База-источник</label> <select id="scheduleSource"> <option value="">— выберите БД —</option> </select> </div> <div class="scheduler-field"> <label>⚙️ Трансформация</label> <select id="scheduleTransform"> <option value="dedup">Удаление дубликатов</option> <option value="normalize">Нормализация чисел</option> <option value="uppercase">Верхний регистр</option> <option value="fillna">Заполнить пропуски</option> </select> </div> </div> <div class="scheduler-controls"> <button id="btnStartScheduler" class="btn-success">▶️ Запустить</button> <button id="btnStopScheduler" class="btn-danger">⏸️ Остановить</button> <div class="scheduler-status"> <span>Статус:</span> <span id="schedulerStatusText" class="status-stopped">● Остановлен</span> </div> </div> </div> <!-- БЛОК 4: СОХРАНЁННЫЕ БАЗЫ ДАННЫХ --> <div class="card"> <div class="card-title">🗄️ СОХРАНЁННЫЕ БАЗЫ ДАННЫХ</div> <div class="db-actions"> <button id="btnRefreshList" class="btn-secondary">🔄 Обновить список</button> <button id="btnExportAll" class="btn-secondary">💾 Экспорт всех БД (JSON)</button> </div> <div id="dbList" class="db-list"> <div class="empty-message">📭 Нет сохранённых БД. Создайте первую!</div> </div> </div> </div> <script src="js/utils.js"></script> <script src="js/database.js"></script> <script src="js/transforms.js"></script> <script src="js/scheduler.js"></script> <script src="js/ui.js"></script> <script src="js/app.js"></script> </body> </html>