saturn
/
addressbook_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dis fix

main
Satur@it-depot.ru 2025-03-06 17:05:42 +03:00
parent d82106e506
commit 3a8f8e246d
1 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
templates/index.html
View File

@ -271,7 +271,7 @@
max-width: 100%; /* Ограничение ширины изображений */ max-width: 100%; /* Ограничение ширины изображений */
height: auto; height: auto;
} }
#note-modal { #add-modal, #note-modal {
display: none; display: none;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -284,33 +284,33 @@
z-index: 1000; z-index: 1000;
width: 500px; width: 500px;
} }
#note-modal.dark-theme { #add-modal.dark-theme, #note-modal.dark-theme {
background: #2a2a2a; background: #2a2a2a;
border-color: #444; border-color: #444;
box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5);
} }
#note-modal .markdown-buttons { margin-bottom: 10px; } #add-modal .markdown-buttons, #note-modal .markdown-buttons { margin-bottom: 10px; }
#note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; } #add-modal .markdown-buttons button, #note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
#note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; } #add-modal textarea, #note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
#note-modal.dark-theme textarea { #add-modal.dark-theme textarea, #note-modal.dark-theme textarea {
background: #333; background: #333;
color: #e0e0e0; color: #e0e0e0;
border: 1px solid #555; border: 1px solid #555;
} }
#note-modal .image-upload { #add-modal .image-upload, #note-modal .image-upload {
margin-bottom: 10px; margin-bottom: 10px;
} }
#note-modal .image-upload input { #add-modal .image-upload input, #note-modal .image-upload input {
margin-right: 10px; margin-right: 10px;
} }
#note-modal button { margin-right: 10px; } #add-modal button, #note-modal button { margin-right: 10px; }
#note-modal.dark-theme button { #add-modal.dark-theme button, #note-modal.dark-theme button {
background: #007bff; background: #007bff;
color: white; color: white;
border-color: #007bff; border-color: #007bff;
} }
#note-modal button:hover { background: #0056b3; } #add-modal button:hover, #note-modal button:hover { background: #0056b3; }
#note-modal.dark-theme button:hover { background: #004d99; } #add-modal.dark-theme button:hover, #note-modal.dark-theme button:hover { background: #004d99; }
#modal-overlay { #modal-overlay {
display: none; display: none;
position: fixed; position: fixed;
@ -379,23 +379,7 @@
<option value="">Все папки</option> <option value="">Все папки</option>
</select> </select>
</div> </div>
<div class="form-container"> <button onclick="openAddModal()">Добавить запись</button>
<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 class="header">
<div onclick="sortInstalls('computer_name')">Имя компьютера<span class="sort-arrow"></span></div> <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('rust_id')">ID подключения<span class="sort-arrow"></span></div>
@ -410,6 +394,24 @@
</div> </div>
<div id="modal-overlay"></div> <div id="modal-overlay"></div>
<div id="add-modal">
<h3>Добавить запись</h3>
<input type="text" id="add-rustId" placeholder="ID подключения" required>
<input type="text" id="add-computerName" placeholder="Имя компьютера" required>
<input type="text" id="add-installTime" placeholder="Время (опционально, формат: ГГГГ-ММ-ДД ЧЧ:ММ:СС)">
<select id="add-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="add-note" placeholder="Заметка (Markdown поддерживается)"></textarea>
<button onclick="addInstall()">Добавить</button>
<button onclick="closeAddModal()">Закрыть</button>
<div class="time-hint">Пример: 2025-03-05 14:30:00</div>
</div>
<div id="note-modal"> <div id="note-modal">
<h3>Редактировать заметку</h3> <h3>Редактировать заметку</h3>
<div class="markdown-buttons"> <div class="markdown-buttons">
@ -460,6 +462,7 @@
document.getElementById('installs-container').classList.add('dark-theme'); document.getElementById('installs-container').classList.add('dark-theme');
document.getElementById('tree-container').classList.add('dark-theme'); document.getElementById('tree-container').classList.add('dark-theme');
document.getElementById('notes-panel').classList.add('dark-theme'); document.getElementById('notes-panel').classList.add('dark-theme');
document.getElementById('add-modal').classList.add('dark-theme');
document.getElementById('note-modal').classList.add('dark-theme'); document.getElementById('note-modal').classList.add('dark-theme');
document.getElementById('search-container').classList.add('dark-theme'); document.getElementById('search-container').classList.add('dark-theme');
document.getElementById('import-label').classList.add('dark-theme'); document.getElementById('import-label').classList.add('dark-theme');
@ -507,6 +510,29 @@
isResizing = false; isResizing = false;
document.body.style.cursor = 'default'; document.body.style.cursor = 'default';
}); });
// Обработка клавиш для навигации
document.addEventListener('keydown', (e) => {
if (!selectedFolderId || !allInstalls.length) return;
const items = $('#installs-list .install-item');
let currentIndex = items.index($('.install-item.selected'));
if (e.key === 'ArrowUp' && currentIndex > 0) {
e.preventDefault();
currentIndex--;
} else if (e.key === 'ArrowDown' && currentIndex < items.length - 1) {
e.preventDefault();
currentIndex++;
} else {
return;
}
selectedInstallId = $(items[currentIndex]).data('id');
$('.install-item').removeClass('selected');
$(items[currentIndex]).addClass('selected');
updateNotesPanel();
});
}); });
function toggleTheme() { function toggleTheme() {
@ -514,6 +540,7 @@
const installsContainer = document.getElementById('installs-container'); const installsContainer = document.getElementById('installs-container');
const treeContainer = document.getElementById('tree-container'); const treeContainer = document.getElementById('tree-container');
const notesPanel = document.getElementById('notes-panel'); const notesPanel = document.getElementById('notes-panel');
const addModal = document.getElementById('add-modal');
const noteModal = document.getElementById('note-modal'); const noteModal = document.getElementById('note-modal');
const searchContainer = document.getElementById('search-container'); const searchContainer = document.getElementById('search-container');
const importLabel = document.getElementById('import-label'); const importLabel = document.getElementById('import-label');
@ -528,6 +555,7 @@
installsContainer.classList.remove('dark-theme'); installsContainer.classList.remove('dark-theme');
treeContainer.classList.remove('dark-theme'); treeContainer.classList.remove('dark-theme');
notesPanel.classList.remove('dark-theme'); notesPanel.classList.remove('dark-theme');
addModal.classList.remove('dark-theme');
noteModal.classList.remove('dark-theme'); noteModal.classList.remove('dark-theme');
searchContainer.classList.remove('dark-theme'); searchContainer.classList.remove('dark-theme');
importLabel.classList.remove('dark-theme'); importLabel.classList.remove('dark-theme');
@ -543,6 +571,7 @@
installsContainer.classList.add('dark-theme'); installsContainer.classList.add('dark-theme');
treeContainer.classList.add('dark-theme'); treeContainer.classList.add('dark-theme');
notesPanel.classList.add('dark-theme'); notesPanel.classList.add('dark-theme');
addModal.classList.add('dark-theme');
noteModal.classList.add('dark-theme'); noteModal.classList.add('dark-theme');
searchContainer.classList.add('dark-theme'); searchContainer.classList.add('dark-theme');
importLabel.classList.add('dark-theme'); importLabel.classList.add('dark-theme');
@ -827,12 +856,27 @@
} }
} }
function openAddModal() {
$('#add-rustId').val('');
$('#add-computerName').val('');
$('#add-installTime').val('');
$('#add-protocol').val('rustdesk');
$('#add-note').val('');
$('#add-modal').show();
$('#modal-overlay').show();
}
function closeAddModal() {
$('#add-modal').hide();
$('#modal-overlay').hide();
}
function addInstall() { function addInstall() {
const rustId = $('#rustId').val(); const rustId = $('#add-rustId').val();
const computerName = $('#computerName').val(); const computerName = $('#add-computerName').val();
const installTime = $('#installTime').val() || ''; const installTime = $('#add-installTime').val() || '';
const protocol = $('#protocol').val(); const protocol = $('#add-protocol').val();
const note = $('#note').val() || ''; const note = $('#add-note').val() || '';
if (installTime && !/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(installTime)) { if (installTime && !/^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/.test(installTime)) {
alert("Неверный формат времени. Используйте ГГГГ-ММ-ДД ЧЧ:ММ:СС (например, 2025-03-05 14:30:00)"); alert("Неверный формат времени. Используйте ГГГГ-ММ-ДД ЧЧ:ММ:СС (например, 2025-03-05 14:30:00)");
@ -846,6 +890,7 @@
data: JSON.stringify({ rust_id: rustId, computer_name: computerName, install_time: installTime, folder_id: selectedFolderId, protocol: protocol, note: note }), data: JSON.stringify({ rust_id: rustId, computer_name: computerName, install_time: installTime, folder_id: selectedFolderId, protocol: protocol, note: note }),
success: function () { success: function () {
loadInstalls(selectedFolderId); loadInstalls(selectedFolderId);
closeAddModal();
}, },
error: function (xhr, status, error) { error: function (xhr, status, error) {
if (xhr.status === 400) { if (xhr.status === 400) {
@ -979,11 +1024,11 @@
function openNoteModal(installId, currentNote) { function openNoteModal(installId, currentNote) {
console.log('Opening note modal for installId:', installId, 'with note:', currentNote); console.log('Opening note modal for installId:', installId, 'with note:', currentNote);
selectedInstallId = installId; // Устанавливаем выбранный ID selectedInstallId = installId; // Сохраняем выделение
$('#note-textarea').val(currentNote || ''); // Устанавливаем текущую заметку или пустую строку $('#note-textarea').val(currentNote || '');
$('#note-modal').show(); $('#note-modal').show();
$('#modal-overlay').show(); $('#modal-overlay').show();
document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки document.getElementById('image-upload-input').value = '';
} }
function uploadImage() { function uploadImage() {
@ -995,8 +1040,8 @@
} }
const formData = new FormData(); const formData = new FormData();
formData.append('install_id', selectedInstallId); // Отправляем как часть формы formData.append('install_id', selectedInstallId);
formData.append('file', file); // Отправляем файл formData.append('file', file);
$.ajax({ $.ajax({
url: `${API_URL}/upload-image`, url: `${API_URL}/upload-image`,
@ -1006,7 +1051,7 @@
contentType: false, contentType: false,
success: function (response) { success: function (response) {
console.log('Image uploaded:', response); console.log('Image uploaded:', response);
const imageUrl = response.url; // Предполагаем, что сервер возвращает { url: "path/to/image" } const imageUrl = response.url;
const textarea = $('#note-textarea'); const textarea = $('#note-textarea');
const cursorPos = textarea[0].selectionStart; const cursorPos = textarea[0].selectionStart;
const text = textarea.val(); const text = textarea.val();
@ -1048,7 +1093,7 @@
}), }),
success: function () { success: function () {
console.log('Note saved successfully'); console.log('Note saved successfully');
loadInstalls(selectedFolderId); // Обновляем список установок loadInstalls(selectedFolderId);
closeNoteModal(); closeNoteModal();
}, },
error: function (xhr, status, error) { error: function (xhr, status, error) {
@ -1062,16 +1107,26 @@
function closeNoteModal() { function closeNoteModal() {
$('#note-modal').hide(); $('#note-modal').hide();
$('#modal-overlay').hide(); $('#modal-overlay').hide();
$('#note-textarea').val(''); // Очищаем текстовое поле $('#note-textarea').val('');
selectedInstallId = null; // Сбрасываем выбранный ID document.getElementById('image-upload-input').value = '';
document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки // Фокус остаётся на текущей записи
if (selectedInstallId) {
const items = $('#installs-list .install-item');
$(`#installs-list .install-item[data-id="${selectedInstallId}"]`).addClass('selected');
updateNotesPanel();
}
}
function closeAddModal() {
$('#add-modal').hide();
$('#modal-overlay').hide();
} }
function updateNotesPanel() { function updateNotesPanel() {
if (selectedInstallId) { if (selectedInstallId) {
const install = allInstalls.find(i => i.id === selectedInstallId); const install = allInstalls.find(i => i.id === selectedInstallId);
if (install && install.note) { if (install && install.note) {
$('#notes-content').html(marked.parse(install.note)); // Рендеринг Markdown с изображениями $('#notes-content').html(marked.parse(install.note));
} else { } else {
$('#notes-content').html('<p>Нет заметок</p>'); $('#notes-content').html('<p>Нет заметок</p>');
} }