test
parent
500a6abad6
commit
2f2149a014
|
|
@ -1,125 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Органайзер АйТи-Депо</title>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
|
||||
<style>
|
||||
body { display: flex; font-family: Arial, sans-serif; margin: 0; }
|
||||
#tree-container { width: 20%; padding: 10px; border-right: 1px solid #ccc; }
|
||||
#installs-container { width: 50%; padding: 10px; position: relative; }
|
||||
.install-item { padding: 5px; margin: 2px; border: 1px solid #ddd; cursor: move; position: relative; }
|
||||
.install-item.selected { background-color: #e6f7ff; } /* Подсветка выбранного пункта */
|
||||
.form-container { margin-bottom: 20px; }
|
||||
.jstree-node { position: relative; }
|
||||
.folder-actions { display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); margin-left: 0; }
|
||||
.jstree-node.drag-over { background-color: #d4edda; border: 2px dashed #28a745; } /* Подсветка при перетаскивании */
|
||||
#search-container { position: absolute; top: 10px; right: 10px; text-align: right; }
|
||||
#search-input { width: 200px; margin-bottom: 5px; }
|
||||
#installs-list { margin-top: 0; }
|
||||
.header { display: flex; justify-content: space-between; font-weight: bold; padding: 5px; background: #f0f0f0; cursor: pointer; }
|
||||
.header div { flex: 1; text-align: center; }
|
||||
.header div:hover { background: #e0e0e0; }
|
||||
.sort-arrow { font-size: 12px; margin-left: 5px; }
|
||||
.protocol-icon { margin-right: 5px; height: 16px; width: 16px; vertical-align: middle; }
|
||||
.connection-link { color: blue; text-decoration: underline; cursor: pointer; }
|
||||
.edit-button { display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: #007bff; color: white; border: none; padding: 2px 5px; border-radius: 3px; cursor: pointer; }
|
||||
.edit-button:hover { background: #0056b3; }
|
||||
.install-item:hover .edit-button { display: inline-block; }
|
||||
.action-buttons { display: none; }
|
||||
.install-item:hover .action-buttons { display: inline; }
|
||||
#import-form { margin-top: 5px; }
|
||||
#import-file { display: none; }
|
||||
#import-label { cursor: pointer; background: #007bff; color: white; padding: 5px 10px; border-radius: 3px; margin-left: 5px; }
|
||||
#import-label:hover { background: #0056b3; }
|
||||
.folder-select { margin-bottom: 5px; width: 150px; }
|
||||
.time-hint { font-size: 12px; color: #666; margin-top: 5px; }
|
||||
#notes-panel { width: 30%; padding: 10px; border-left: 1px solid #ccc; background: #f9f9f9; min-height: 200px; margin-top: 240px; }
|
||||
#notes-content { margin-top: 10px; }
|
||||
#note-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1000; width: 500px; }
|
||||
#note-modal .markdown-buttons { margin-bottom: 10px; }
|
||||
#note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
|
||||
#note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
|
||||
#note-modal button { margin-right: 10px; }
|
||||
#modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
|
||||
.header-logo { display: flex; align-items: center; }
|
||||
.header-logo img { height: 50px; margin-right: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="tree-container">
|
||||
<h2>Папки</h2>
|
||||
<div id="folder-tree"></div>
|
||||
<button onclick="addFolder()">Добавить папку</button>
|
||||
</div>
|
||||
<div id="installs-container">
|
||||
<h1 class="header-logo">
|
||||
<img src="/icons/it-depo-logo.png" alt="АйТи-Депо логотип">
|
||||
Органайзер АйТи-Депо
|
||||
</h1>
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-input" placeholder="Поиск по ID или имени">
|
||||
<select id="folder-select" class="folder-select">
|
||||
<option value="">Все папки</option>
|
||||
</select>
|
||||
<button onclick="exportCSV()">Экспорт CSV</button>
|
||||
<form id="import-form" enctype="multipart/form-data">
|
||||
<input type="file" id="import-file" accept=".csv" onchange="importCSV(this.files[0])">
|
||||
<label for="import-file" id="import-label">Импорт CSV</label>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-container">
|
||||
<h2>Добавить запись</h2>
|
||||
<input type="text" id="rustId" placeholder="ID подключения" required>
|
||||
<input type="text" id="computerName" placeholder="Имя компьютера" required>
|
||||
<input type="text" id="installTime" placeholder="Время (опционально, формат: ГГГГ-ММ-ДД ЧЧ:ММ:СС)">
|
||||
<select id="protocol">
|
||||
<option value="rustdesk" selected>RustDesk</option>
|
||||
<option value="anydesk">AnyDesk</option>
|
||||
<option value="ammyy">Ammyy Admin</option>
|
||||
<option value="teamviewer">TeamViewer</option>
|
||||
<option value="vnc">VNC</option>
|
||||
<option value="rdp">RDP</option>
|
||||
</select>
|
||||
<textarea id="note" placeholder="Заметка (Markdown поддерживается)"></textarea>
|
||||
<button onclick="addInstall()">Добавить</button>
|
||||
<div class="time-hint">Пример: 2025-03-05 14:30:00</div>
|
||||
</div>
|
||||
<div class="header">
|
||||
<div onclick="sortInstalls('computer_name')">Имя компьютера<span class="sort-arrow"></span></div>
|
||||
<div onclick="sortInstalls('rust_id')">ID подключения<span class="sort-arrow"></span></div>
|
||||
<div onclick="sortInstalls('install_time')">Время установки<span class="sort-arrow"></span></div>
|
||||
<div>Действия</div>
|
||||
</div>
|
||||
<div id="installs-list"></div>
|
||||
</div>
|
||||
<div id="notes-panel">
|
||||
<h2>Заметка</h2>
|
||||
<div id="notes-content"></div>
|
||||
</div>
|
||||
|
||||
<!-- Модальное окно для редактирования заметок -->
|
||||
<div id="modal-overlay"></div>
|
||||
<div id="note-modal">
|
||||
<h3>Редактировать заметку</h3>
|
||||
<div class="markdown-buttons">
|
||||
<button onclick="formatBold()">Жирный</button>
|
||||
<button onclick="formatItalic()">Курсив</button>
|
||||
<button onclick="formatLink()">Ссылка</button>
|
||||
</div>
|
||||
<textarea id="note-textarea" placeholder="Введите заметку (Markdown поддерживается)"></textarea>
|
||||
<button onclick="saveNote()">Сохранить</button>
|
||||
<button onclick="closeNoteModal()">Закрыть</button>
|
||||
</div>
|
||||
|
||||
<script defer>
|
||||
const API_URL = "http://10.0.0.10:8002/api"; // Замени <server-ip> на IP или домен сервера
|
||||
<script defer>
|
||||
const API_URL = "http://10.0.0.10:8002/api"; // Замени 192.168.1.100 на реальный IP или домен
|
||||
let selectedFolderId = null;
|
||||
let allInstalls = [];
|
||||
let allFolders = [];
|
||||
let allFolders = []; // Добавляем для отслеживания папок
|
||||
let selectedInstallId = null;
|
||||
let sortField = null;
|
||||
let sortDirection = 'asc';
|
||||
|
|
@ -152,7 +35,7 @@
|
|||
'core': {
|
||||
'data': function (node, cb) {
|
||||
$.getJSON(`${API_URL}/folders`, function (data) {
|
||||
allFolders = data;
|
||||
allFolders = data; // Сохраняем все папки
|
||||
const treeData = [
|
||||
{ id: "root", text: "Корень", parent: "#" }
|
||||
].concat(data.map(folder => ({
|
||||
|
|
@ -163,16 +46,6 @@
|
|||
parent: folder.parent_id ? folder.parent_id : "root"
|
||||
})));
|
||||
cb(treeData);
|
||||
|
||||
// Автоматически выбираем папку "Несортированные" после загрузки дерева
|
||||
const unsortedFolder = data.find(f => f.name === 'Несортированные');
|
||||
if (unsortedFolder) {
|
||||
setTimeout(() => {
|
||||
$('#folder-tree').jstree('select_node', unsortedFolder.id);
|
||||
loadInstalls(unsortedFolder.id);
|
||||
updateFolderActions();
|
||||
}, 100); // Задержка для инициализации jstree
|
||||
}
|
||||
});
|
||||
},
|
||||
'check_callback': true
|
||||
|
|
@ -198,16 +71,10 @@
|
|||
e.originalEvent.dataTransfer.setData('text/plain', $(this).data('id'));
|
||||
});
|
||||
|
||||
// Подсветка папки при перетаскивании
|
||||
$('#folder-tree').on('dragover', '.jstree-node', function (e) {
|
||||
$('#folder-tree').on('dragover', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).addClass('drag-over'); // Добавляем класс для подсветки
|
||||
}).on('dragleave', '.jstree-node', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('drag-over'); // Убираем подсветку при покидании
|
||||
}).on('drop', function (e) {
|
||||
e.preventDefault();
|
||||
$(this).removeClass('drag-over'); // Убираем подсветку после дропа
|
||||
const installId = e.originalEvent.dataTransfer.getData('text');
|
||||
let targetFolderId = $(e.target).closest('.jstree-node').attr('id');
|
||||
if (installId && targetFolderId) {
|
||||
|
|
@ -219,14 +86,14 @@
|
|||
|
||||
function loadFolders() {
|
||||
$.getJSON(`${API_URL}/folders`, function (data) {
|
||||
allFolders = data;
|
||||
updateFolderSelect();
|
||||
allFolders = data; // Обновляем список папок
|
||||
updateFolderSelect(); // Обновляем выпадающий список
|
||||
});
|
||||
}
|
||||
|
||||
function loadInstalls(folderId) {
|
||||
const url = `${API_URL}/installs`;
|
||||
console.log("Requesting URL:", url);
|
||||
console.log("Requesting URL:", url); // Логируем URL для отладки
|
||||
$.getJSON(url, function (data) {
|
||||
console.log("Loaded installs:", data);
|
||||
allInstalls = data;
|
||||
|
|
@ -243,17 +110,19 @@
|
|||
const query = $('#search-input').val().toLowerCase().trim();
|
||||
const folderId = $('#folder-select').val() || '';
|
||||
|
||||
console.log("Search query:", query, "Folder ID:", folderId);
|
||||
console.log("Search query:", query, "Folder ID:", folderId); // Логируем для отладки
|
||||
|
||||
let filteredInstalls = [...allInstalls];
|
||||
let filteredInstalls = [...allInstalls]; // Копируем массив, чтобы не изменять оригинал
|
||||
|
||||
// Фильтрация по папке, исключая удаленные или несуществующие папки
|
||||
if (folderId) {
|
||||
filteredInstalls = filteredInstalls.filter(i =>
|
||||
i.folder_id == folderId &&
|
||||
allFolders.some(f => f.id === i.folder_id)
|
||||
allFolders.some(f => f.id === i.folder_id) // Проверяем, существует ли папка
|
||||
);
|
||||
}
|
||||
|
||||
// Фильтрация по запросу (по rust_id и computer_name)
|
||||
if (query) {
|
||||
filteredInstalls = filteredInstalls.filter(i =>
|
||||
i.rust_id.toLowerCase().trim().includes(query) ||
|
||||
|
|
@ -261,11 +130,11 @@
|
|||
);
|
||||
}
|
||||
|
||||
sortInstalls(null, filteredInstalls);
|
||||
sortInstalls(null, filteredInstalls); // Сортируем и отображаем результаты
|
||||
}
|
||||
|
||||
function displayInstalls(installs) {
|
||||
console.log("Displaying installs:", installs);
|
||||
console.log("Displaying installs:", installs); // Логируем для отладки
|
||||
if (installs.length === 0) {
|
||||
$('#installs-list').html('<p>Нет результатов</p>');
|
||||
} else {
|
||||
|
|
@ -296,6 +165,8 @@
|
|||
updateSortArrows();
|
||||
}
|
||||
|
||||
// Остальной код (selectInstall, sortInstalls, updateSortArrows, addFolder, editFolder, deleteFolder, addInstall, editField, deleteInstall, moveInstallToFolder, openRemote, exportCSV, importCSV, openNoteModal, saveNote, closeNoteModal, updateNotesPanel, updateFolderActions, updateFolderSelect, formatBold, formatItalic, formatLink) остается без изменений, но я их включу для полноты ниже.
|
||||
|
||||
function selectInstall(installId, rustId, protocol) {
|
||||
selectedInstallId = installId;
|
||||
$('.install-item').removeClass('selected');
|
||||
|
|
@ -348,7 +219,7 @@
|
|||
contentType: 'application/json',
|
||||
data: JSON.stringify({ name, parent_id: selectedFolderId }),
|
||||
success: function () {
|
||||
loadFolders();
|
||||
loadFolders(); // Обновляем список папок
|
||||
$('#folder-tree').jstree(true).refresh();
|
||||
}
|
||||
});
|
||||
|
|
@ -364,7 +235,7 @@
|
|||
contentType: 'application/json',
|
||||
data: JSON.stringify({ name: newName }),
|
||||
success: function () {
|
||||
loadFolders();
|
||||
loadFolders(); // Обновляем список папок
|
||||
$('#folder-tree').jstree(true).refresh();
|
||||
}
|
||||
});
|
||||
|
|
@ -383,7 +254,7 @@
|
|||
moveInstallToFolder(item.id, null);
|
||||
});
|
||||
});
|
||||
loadFolders();
|
||||
loadFolders(); // Обновляем список папок
|
||||
$('#folder-tree').jstree(true).refresh();
|
||||
loadInstalls(selectedFolderId);
|
||||
},
|
||||
|
|
@ -625,7 +496,7 @@
|
|||
function formatLink() {
|
||||
const textarea = $('#note-textarea');
|
||||
const start = textarea[0].selectionStart;
|
||||
end = textarea[0].selectionEnd;
|
||||
const end = textarea[0].selectionEnd;
|
||||
const text = textarea.val();
|
||||
const selected = text.substring(start, end) || 'текст';
|
||||
const url = prompt('Введите URL ссылки:', 'https://example.com');
|
||||
|
|
@ -636,6 +507,4 @@
|
|||
textarea[0].selectionEnd = start + newText.length - (selected ? 0 : '[текст]'.length);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</script>
|
||||
Loading…
Reference in New Issue