/
Gubare
/
Practic
Обзор
Документация
Войти
/
Gubare
/
Practic
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
operator.html
116 строк
6 KB
Gubare
Base HTML
08 мар 2025, 16:30
08 мар 2025, 16:30
e2cd24c
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Кабинет администратора</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="main-container"> <div class="content-container"> <div class="left-container"> <h2>Кабинет администратора</h2> <img src="https://avatars.mds.yandex.net/i?id=b1ab9385ad8700dfdc0383a930d5171c_sr-4073135-images-thumbs&n=13" alt="Фото профиля" class="profile-photo"> <div class="user-info"> <p><strong>Привет, Администратор!</strong></p> <p>Активная почта: admin@example.com</p> <p>Организация: Примерная организация</p> </div> <div class="action-links"> <a href="file:///D:/Distr/VScode/Projects/HTML/test_list.html">Выбрать тесты</a> </div> <div class="change-password-link"> <a href="/change-password">Сменить пароль</a> </div> </div> <div class="right-container"> <h2 class="completed-tests-header">Статистика тестов</h2> <div class="chart-container"> <canvas id="testStatisticsChart"></canvas> </div> <div class="test-management-container"> <h2 class="required-tests-header">Управление обязательными тестами</h2> <div class="test-management-item"> <h3>Обязательный Тест 1 <span style="color: red;">*</span></h3> <p>Описание: Описание обязательного теста 1</p> <p>Количество прохождений: 100</p> <p>Прохождений с результатом менее 30%: 10</p> <div class="actions"> <button class="btn deactivate-btn" data-test-id="1">Сделать неактивным</button> <button class="btn delete-btn" data-test-id="1">Удалить</button> </div> </div> <div class="test-management-item"> <h3>Обязательный Тест 2 <span style="color: red;">*</span></h3> <p>Описание: Описание обязательного теста 2</p> <p>Количество прохождений: 80</p> <p>Прохождений с результатом менее 30%: 5</p> <div class="actions"> <button class="btn deactivate-btn" data-test-id="2">Сделать неактивным</button> <button class="btn delete-btn" data-test-id="2">Удалить</button> </div> </div> <!-- Добавьте больше обязательных тестов по необходимости --> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const testData = [ { Test_ID: 1, Test_Name: 'Обязательный Тест 1', Description: 'Описание обязательного теста 1', Created_By_Org_ID: 12345678, Category: 'Категория 1', Created_Date: '08.03.2025', Is_Obligatory: true, Pass_Count: 100, Fail_Count: 10 }, { Test_ID: 2, Test_Name: 'Обязательный Тест 2', Description: 'Описание обязательного теста 2', Created_By_Org_ID: 12345678, Category: 'Категория 2', Created_Date: '09.03.2025', Is_Obligatory: true, Pass_Count: 80, Fail_Count: 5 }, // Добавьте больше тестов по необходимости ]; // Функция для создания круговой диаграммы function createChart() { const ctx = document.getElementById('testStatisticsChart').getContext('2d'); const chartData = { labels: ['Прохождений с результатом менее 30%', 'Успешные прохождения'], datasets: [{ data: [testData.reduce((sum, test) => sum + test.Fail_Count, 0), testData.reduce((sum, test) => sum + (test.Pass_Count - test.Fail_Count), 0)], backgroundColor: ['#ff6384', '#36a2eb'], hoverBackgroundColor: ['#ff6384', '#36a2eb'] }] }; new Chart(ctx, { type: 'pie', data: chartData, options: { responsive: true, plugins: { legend: { position: 'top', }, title: { display: true, text: 'Статистика прохождений тестов' } } } }); } // Функция для обработки действий над тестами document.querySelectorAll('.deactivate-btn, .delete-btn').forEach(button => { button.addEventListener('click', (event) => { const testId = event.target.getAttribute('data-test-id'); if (event.target.classList.contains('deactivate-btn')) { alert(`Тест с ID ${testId} будет сделан неактивным.`); } else if (event.target.classList.contains('delete-btn')) { if (confirm(`Вы уверены, что хотите удалить тест с ID ${testId}?`)) { alert(`Тест с ID ${testId} удален.`); } } }); }); // Инициализация диаграммы createChart(); </script> </body> </html>