353 lines
18 KiB
HTML
353 lines
18 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>
|
||
<link rel="stylesheet" href="doc.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-content">
|
||
<div>
|
||
<h1><i class="fas fa-id-card"></i> Группы 2.0</h1>
|
||
<p class="subtitle">Управление идентификаторами пользователей в сторонних системах</p>
|
||
</div>
|
||
<div class="user-info">
|
||
<div class="user-name" id="userName">Загрузка...</div>
|
||
<div class="user-role" id="userRole"></div>
|
||
<button onclick="window.location.href = '/'" class="logout-btn"><i class="fas fa-cog"></i> Главная</button>
|
||
<button class="logout-btn" onclick="logout()"><i class="fas fa-sign-out-alt"></i> Выйти</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="tabs">
|
||
<div class="tab active" data-tab="groups">
|
||
<i class="fas fa-users"></i> Группы идентификаторов
|
||
</div>
|
||
<div class="tab" data-tab="idusers">
|
||
<i class="fas fa-id-card"></i> Идентификаторы пользователей
|
||
</div>
|
||
<!--
|
||
<div class="tab" data-tab="stats">
|
||
<i class="fas fa-chart-bar"></i> Статистика
|
||
</div>
|
||
-->
|
||
</div>
|
||
|
||
<!-- Вкладка Группы -->
|
||
<div id="tab-groups" class="tab-content active">
|
||
<div class="controls">
|
||
<input type="text" class="search-box" id="groupSearch" placeholder="Поиск по названию или описанию...">
|
||
<div class="filter-group">
|
||
<select class="select" id="groupServiceTypeFilter">
|
||
<option value="">Все типы сервисов</option>
|
||
<option value="sberbank">Сбербанк</option>
|
||
<option value="yandex">Яндекс</option>
|
||
<option value="ldap">LDAP</option>
|
||
<option value="other">Прочие</option>
|
||
</select>
|
||
<select class="select" id="groupStatusFilter">
|
||
<option value="">Все статусы</option>
|
||
<option value="true">Активные</option>
|
||
<option value="false">Неактивные</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="showAddGroupModal()">
|
||
<i class="fas fa-plus"></i> Добавить группу
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="loadGroups()">
|
||
<i class="fas fa-sync-alt"></i> Обновить
|
||
</button>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table id="groupsTable">
|
||
<thead>
|
||
<tr>
|
||
<th width="50">ID</th>
|
||
<th>Название</th>
|
||
<th>Тип сервиса</th>
|
||
<th>Описание</th>
|
||
<th>Статус</th>
|
||
<th>Создано</th>
|
||
<th>Обновлено</th>
|
||
<th width="150">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="groupsTableBody">
|
||
<!-- Данные будут загружены через JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="pagination" id="groupsPagination">
|
||
<!-- Пагинация будет добавлена через JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Вкладка Идентификаторы пользователей -->
|
||
<div id="tab-idusers" class="tab-content">
|
||
<div class="controls">
|
||
<input type="text" class="search-box" id="iduserSearch" placeholder="Поиск по ID, логину или имени...">
|
||
<div class="filter-group">
|
||
<select class="select" id="iduserServiceTypeFilter">
|
||
<option value="">Все типы сервисов</option>
|
||
<option value="sberbank">Сбербанк</option>
|
||
<option value="yandex">Яндекс</option>
|
||
<option value="ldap">LDAP</option>
|
||
<option value="other">Прочие</option>
|
||
</select>
|
||
<select class="select" id="iduserGroupFilter">
|
||
<option value="">Все группы</option>
|
||
<!-- Опции будут заполнены через JavaScript -->
|
||
</select>
|
||
<select class="select" id="iduserStatusFilter">
|
||
<option value="">Все статусы</option>
|
||
<option value="true">Активные</option>
|
||
<option value="false">Неактивные</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary" onclick="showAddIdUserModal()">
|
||
<i class="fas fa-plus"></i> Добавить идентификатор
|
||
</button>
|
||
<button class="btn btn-secondary" onclick="loadIdUsers()">
|
||
<i class="fas fa-sync-alt"></i> Обновить
|
||
</button>
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table id="idusersTable">
|
||
<thead>
|
||
<tr>
|
||
<th width="50">ID</th>
|
||
<th>Пользователь</th>
|
||
<th>Тип сервиса</th>
|
||
<th>Внешний ID</th>
|
||
<th>Логин LDAP</th>
|
||
<th>Группа LDAP</th>
|
||
<th>Группа</th>
|
||
<th>Метаданные</th>
|
||
<th>Статус</th>
|
||
<th>Создано</th>
|
||
<th width="150">Действия</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="idusersTableBody">
|
||
<!-- Данные будут загружены через JavaScript -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="pagination" id="idusersPagination">
|
||
<!-- Пагинация будет добавлена через JavaScript -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Вкладка Статистика -->
|
||
<div id="tab-stats" class="tab-content">
|
||
<div class="controls">
|
||
<button class="btn btn-secondary" onclick="loadStats()">
|
||
<i class="fas fa-sync-alt"></i> Обновить статистику
|
||
</button>
|
||
</div>
|
||
|
||
<div id="statsContent">
|
||
<div class="stats-grid" id="statsGrid">
|
||
<!-- Статистика будет загружена через JavaScript -->
|
||
</div>
|
||
|
||
<div class="table-container">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Тип сервиса</th>
|
||
<th>Всего идентификаторов</th>
|
||
<th>Активных</th>
|
||
<th>Уникальных пользователей</th>
|
||
<th>Доля</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="statsTableBody">
|
||
<!-- Статистика по типам сервисов -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно для создания/редактирования группы -->
|
||
<div id="groupModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="groupModalTitle">Добавить группу</h2>
|
||
<button class="close-modal" onclick="closeGroupModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="groupMessage"></div>
|
||
<form id="groupForm" onsubmit="saveGroup(event)">
|
||
<input type="hidden" id="groupId">
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="groupName">Название группы *</label>
|
||
<input type="text" id="groupName" class="form-control" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="groupServiceType">Тип сервиса *</label>
|
||
<select id="groupServiceType" class="form-control" required>
|
||
<option value="">Выберите тип</option>
|
||
<option value="sberbank">Сбербанк</option>
|
||
<option value="yandex">Яндекс</option>
|
||
<option value="ldap">LDAP</option>
|
||
<option value="other">Прочие</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="groupDescription">Описание</label>
|
||
<textarea id="groupDescription" class="form-control" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="groupIsActive" checked>
|
||
Активная группа
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group" style="text-align: right; margin-top: 30px;">
|
||
<button type="button" class="btn btn-secondary" onclick="closeGroupModal()">
|
||
Отмена
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-save"></i> Сохранить
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно для создания/редактирования идентификатора -->
|
||
<div id="iduserModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="iduserModalTitle">Добавить идентификатор</h2>
|
||
<button class="close-modal" onclick="closeIdUserModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div id="iduserMessage"></div>
|
||
<form id="iduserForm" onsubmit="saveIdUser(event)">
|
||
<input type="hidden" id="iduserId">
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="iduserUserId">Пользователь *</label>
|
||
<select id="iduserUserId" class="form-control" required>
|
||
<option value="">Выберите пользователя</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iduserServiceType">Тип сервиса *</label>
|
||
<select id="iduserServiceType" class="form-control" required onchange="updateGroupOptions()">
|
||
<option value="">Выберите тип</option>
|
||
<option value="sberbank">Сбербанк</option>
|
||
<option value="yandex">Яндекс</option>
|
||
<option value="ldap">LDAP</option>
|
||
<option value="other">Прочие</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="iduserExternalId">Внешний ID *</label>
|
||
<input type="text" id="iduserExternalId" class="form-control" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iduserLogin">Логин LDAP</label>
|
||
<input type="text" id="iduserLogin" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="iduserLdapGroup">Группа LDAP</label>
|
||
<input type="text" id="iduserLdapGroup" class="form-control">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iduserGroupId">Группа идентификаторов</label>
|
||
<select id="iduserGroupId" class="form-control">
|
||
<option value="">Без группы</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="iduserMetadata">Метаданные (JSON)</label>
|
||
<textarea id="iduserMetadata" class="form-control json-editor" rows="6" placeholder='{"department": "Отдел", "position": "Должность"}'></textarea>
|
||
<small>Дополнительные данные в формате JSON</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label>
|
||
<input type="checkbox" id="iduserIsActive" checked>
|
||
Активный идентификатор
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group" style="text-align: right; margin-top: 30px;">
|
||
<button type="button" class="btn btn-secondary" onclick="closeIdUserModal()">
|
||
Отмена
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
<i class="fas fa-save"></i> Сохранить
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно подтверждения удаления -->
|
||
<div id="confirmModal" class="modal">
|
||
<div class="modal-content" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h2 id="confirmModalTitle">Подтверждение</h2>
|
||
<button class="close-modal" onclick="closeConfirmModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p id="confirmMessage">Вы уверены, что хотите удалить эту запись?</p>
|
||
<div style="text-align: right; margin-top: 30px;">
|
||
<button type="button" class="btn btn-secondary" onclick="closeConfirmModal()">
|
||
Отмена
|
||
</button>
|
||
<button type="button" class="btn btn-danger" onclick="confirmDelete()">
|
||
<i class="fas fa-trash"></i> Удалить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Модальное окно просмотра метаданных -->
|
||
<div id="metadataModal" class="modal">
|
||
<div class="modal-content" style="max-width: 700px;">
|
||
<div class="modal-header">
|
||
<h2>Метаданные</h2>
|
||
<button class="close-modal" onclick="closeMetadataModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre id="metadataContent" class="metadata-full"></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="doc.js"></script>
|
||
</body>
|
||
</html> |