images

templates/index.html

@@ -267,6 +267,10 @@
             background: #222; 
         }
         #notes-content { margin-top: 10px; }
+        #notes-content img {
+            max-width: 100%; /* Ограничение ширины изображений */
+            height: auto;
+        }
         #note-modal { 
             display: none; 
             position: fixed; 
@@ -293,6 +297,12 @@
             color: #e0e0e0;
             border: 1px solid #555;
         }
+        #note-modal .image-upload {
+            margin-bottom: 10px;
+        }
+        #note-modal .image-upload input {
+            margin-right: 10px;
+        }
         #note-modal button { margin-right: 10px; }
         #note-modal.dark-theme button {
             background: #007bff;
@@ -407,6 +417,10 @@
             <button onclick="formatItalic()">Курсив</button>
             <button onclick="formatLink()">Ссылка</button>
         </div>
+        <div class="image-upload">
+            <input type="file" id="image-upload-input" accept="image/*" onchange="uploadImage()">
+            <button onclick="document.getElementById('image-upload-input').click()">Добавить изображение</button>
+        </div>
         <textarea id="note-textarea" placeholder="Введите заметку (Markdown поддерживается)"></textarea>
         <button onclick="saveNote()">Сохранить</button>
         <button onclick="closeNoteModal()">Закрыть</button>
@@ -963,6 +977,41 @@
             $('#note-textarea').val(currentNote || ''); // Устанавливаем текущую заметку или пустую строку
             $('#note-modal').show();
             $('#modal-overlay').show();
+            document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки
+        }
+
+        function uploadImage() {
+            const fileInput = document.getElementById('image-upload-input');
+            const file = fileInput.files[0];
+            if (!file) return;
+
+            const formData = new FormData();
+            formData.append('image', file);
+            formData.append('install_id', selectedInstallId);
+
+            $.ajax({
+                url: `${API_URL}/upload-image`,
+                type: 'POST',
+                data: formData,
+                processData: false,
+                contentType: false,
+                success: function (response) {
+                    console.log('Image uploaded:', response);
+                    const imageUrl = response.url; // Предполагаем, что сервер возвращает { url: "path/to/image" }
+                    const textarea = $('#note-textarea');
+                    const cursorPos = textarea[0].selectionStart;
+                    const text = textarea.val();
+                    const altText = prompt('Введите альтернативный текст для изображения:', file.name);
+                    const markdownImage = `![${altText || 'image'}](${imageUrl})`;
+                    textarea.val(text.substring(0, cursorPos) + markdownImage + text.substring(cursorPos));
+                    textarea[0].selectionStart = cursorPos + markdownImage.length;
+                    textarea[0].selectionEnd = cursorPos + markdownImage.length;
+                },
+                error: function (xhr, status, error) {
+                    console.error('Error uploading image:', status, error);
+                    alert(`Не удалось загрузить изображение: ${xhr.responseJSON?.detail || error}`);
+                }
+            });
         }
 
         function saveNote() {
@@ -1002,13 +1051,14 @@
             $('#modal-overlay').hide();
             $('#note-textarea').val(''); // Очищаем текстовое поле
             selectedInstallId = null; // Сбрасываем выбранный ID
+            document.getElementById('image-upload-input').value = ''; // Сбрасываем поле загрузки
         }
 
         function updateNotesPanel() {
             if (selectedInstallId) {
                 const install = allInstalls.find(i => i.id === selectedInstallId);
                 if (install && install.note) {
-                    $('#notes-content').html(marked.parse(install.note));
+                    $('#notes-content').html(marked.parse(install.note)); // Рендеринг Markdown с изображениями
                 } else {
                     $('#notes-content').html('<p>Нет заметок</p>');
                 }
@@ -1056,7 +1106,7 @@
         function formatItalic() {
             const textarea = $('#note-textarea');
             const start = textarea[0].selectionStart;
-            const end = textarea[0].selectionEnd;
+            end = textarea[0].selectionEnd;
             const text = textarea.val();
             const selected = text.substring(start, end);
             const newText = `*${selected}*`;