addressbook_web/templates/index.html

223 lines
9.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Органайзер RustDesk</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></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; }
#tree-container { width: 30%; padding: 10px; border-right: 1px solid #ccc; }
#installs-container { width: 70%; padding: 10px; }
.install-item { padding: 5px; margin: 2px; border: 1px solid #ddd; cursor: move; }
.form-container { margin-bottom: 20px; }
.jstree-node { position: relative; }
.folder-actions { display: inline; margin-left: 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>Органайзер RustDesk</h1>
<div class="form-container">
<h2>Добавить запись</h2>
<input type="text" id="rustId" placeholder="Rust ID" required>
<input type="text" id="computerName" placeholder="Имя компьютера" required>
<input type="text" id="installTime" placeholder="Время (опционально)">
<button onclick="addInstall()">Добавить</button>
</div>
<div id="installs-list"></div>
</div>
<script>
const API_URL = "/api";
let selectedFolderId = null;
$(document).ready(function () {
// Инициализация дерева папок
$('#folder-tree').jstree({
'core': {
'data': function (node, cb) {
$.getJSON(`${API_URL}/folders`, function (data) {
const treeData = [
{
id: "root",
text: "Корень",
parent: "#"
}
].concat(data.map(folder => ({
id: folder.id,
text: `${folder.name} <span class="folder-actions">` +
`<button onclick="editFolder(${folder.id}, '${folder.name}')">✏️</button>` +
`<button onclick="deleteFolder(${folder.id})">🗑️</button></span>`,
parent: folder.parent_id ? folder.parent_id : "root"
})));
cb(treeData);
});
},
'check_callback': true
},
'plugins': ['dnd', 'html_data']
}).on('select_node.jstree', function (e, data) {
selectedFolderId = data.node.id === "root" ? null : data.node.id;
loadInstalls(selectedFolderId);
});
// Drag-and-drop для записей
$('#installs-list').on('dragstart', '.install-item', function (e) {
e.originalEvent.dataTransfer.setData('text/plain', $(this).data('id'));
});
$('#folder-tree').on('dragover', function (e) {
e.preventDefault(); // Разрешаем drop
}).on('drop', function (e) {
e.preventDefault();
const installId = e.originalEvent.dataTransfer.getData('text');
let targetFolderId = $(e.target).closest('.jstree-node').attr('id');
if (installId && targetFolderId) {
targetFolderId = targetFolderId === "root" ? null : targetFolderId;
moveInstallToFolder(installId, targetFolderId);
}
});
// Загрузка всех записей при старте
loadInstalls(null);
$('#folder-tree').jstree('select_node', 'root'); // Выбираем корень по умолчанию
});
function loadInstalls(folderId) {
$.getJSON(`${API_URL}/installs`, function (data) {
const filtered = folderId ? data.filter(i => i.folder_id == folderId) : data;
$('#installs-list').html(filtered.map(item => `
<div class="install-item" data-id="${item.id}" draggable="true">
<a href="rustdesk://${item.rust_id}" onclick="openRustDesk('${item.rust_id}'); return false;">${item.rust_id}</a>
- ${item.computer_name} (${item.install_time})
<button onclick="editInstall(${item.id}, '${item.rust_id}', '${item.computer_name}', '${item.install_time}')">Редактировать</button>
<button onclick="deleteInstall(${item.id})">Удалить</button>
</div>
`).join(''));
});
selectedFolderId = folderId; // Обновляем текущую папку
}
function addFolder() {
const name = prompt("Введите имя папки:");
if (name) {
$.ajax({
url: `${API_URL}/folders`,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ name, parent_id: selectedFolderId }),
success: function () {
$('#folder-tree').jstree(true).refresh();
}
});
}
}
function editFolder(folderId, currentName) {
const newName = prompt("Введите новое имя папки:", currentName);
if (newName) {
$.ajax({
url: `${API_URL}/folders/${folderId}`,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify({ name: newName }),
success: function () {
$('#folder-tree').jstree(true).refresh();
}
});
}
}
function deleteFolder(folderId) {
if (confirm("Удалить папку? Все записи будут перемещены в корень.")) {
$.ajax({
url: `${API_URL}/folders/${folderId}`,
type: 'DELETE',
success: function () {
$.getJSON(`${API_URL}/installs`, function (data) {
const folderInstalls = data.filter(i => i.folder_id == folderId);
folderInstalls.forEach(item => {
moveInstallToFolder(item.id, null);
});
});
$('#folder-tree').jstree(true).refresh();
loadInstalls(selectedFolderId);
}
});
}
}
function addInstall() {
const rustId = $('#rustId').val();
const computerName = $('#computerName').val();
const installTime = $('#installTime').val() || new Date().toISOString();
$.ajax({
url: `${API_URL}/install`,
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ rust_id: rustId, computer_name: computerName, install_time: installTime, folder_id: selectedFolderId }),
success: function () {
loadInstalls(selectedFolderId);
}
});
}
function editInstall(id, rustId, computerName, installTime) {
const newRustId = prompt("Rust ID:", rustId);
const newComputerName = prompt("Имя компьютера:", computerName);
const newInstallTime = prompt("Время установки:", installTime);
if (newRustId && newComputerName) {
$.ajax({
url: `${API_URL}/install/${id}`,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify({ rust_id: newRustId, computer_name: newComputerName, install_time: newInstallTime, folder_id: selectedFolderId }),
success: function () {
loadInstalls(selectedFolderId);
}
});
}
}
function deleteInstall(id) {
if (confirm("Удалить запись?")) {
$.ajax({
url: `${API_URL}/install/${id}`,
type: 'DELETE',
success: function () {
loadInstalls(selectedFolderId);
}
});
}
}
function moveInstallToFolder(installId, folderId) {
$.ajax({
url: `${API_URL}/install/${installId}`,
type: 'PUT',
contentType: 'application/json',
data: JSON.stringify({ folder_id: folderId }),
success: function () {
loadInstalls(selectedFolderId); // Обновляем текущую папку
},
error: function (xhr, status, error) {
console.error("Ошибка переноса:", status, error);
}
});
}
function openRustDesk(rustId) {
if (confirm("Подключиться к " + rustId + "?")) {
window.location.href = `rustdesk://${rustId}`;
}
}
</script>
</body>
</html>