From 6a100c42578286d41f8a695f32560146b62fee7d Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Tue, 11 Nov 2025 01:09:36 +0300
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=BC=D0=B5=D0=BD=D0=B5=D0=BD=20al?=
 =?UTF-8?q?ert()=20=D0=BD=D0=B0=20=D0=BA=D1=80=D0=B0=D1=81=D0=B8=D0=B2?=
 =?UTF-8?q?=D0=BE=D0=B5=20=D0=B0=D0=B2=D1=82=D0=BE=D0=B8=D1=81=D1=87=D0=B5?=
 =?UTF-8?q?=D0=B7=D0=B0=D1=8E=D1=89=D0=B5=D0=B5=20=D1=83=D0=B2=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=BF=D1=80=D0=B8?=
 =?UTF-8?q?=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D0=B8=20=D0=BA?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=B5=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Проблема: При успешном создании клиента показывалось системное окно alert(),
которое требовало ручного закрытия.

Решение: Создана функция showNotification() которая показывает красивое
уведомление в правом верхнем углу формы заказа с автоматическим исчезновением.

Особенности:
✓ Плавная анимация появления (slideIn, 0.3s)
✓ Плавная анимация исчезновения (slideOut, 0.3s)
✓ Автоматически исчезает через 4 секунды
✓ Поддерживает 3 типа: 'success' (зелёный), 'error' (красный), 'info' (синий)
✓ Иконки для каждого типа: ✓, ⚠️, ℹ️
✓ Можно показывать несколько уведомлений одновременно (стакуются)
✓ Не требует закрытия вручную
✓ Красиво выглядит и не отвлекает от заполнения формы

Примеры использования:
- showNotification('Успех!', 'success')
- showNotification('Ошибка!', 'error', 5000)
- showNotification('Информация', 'info', 3000)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../orders/templates/orders/order_form.html   | 87 ++++++++++++++++++-
 1 file changed, 85 insertions(+), 2 deletions(-)

diff --git a/myproject/orders/templates/orders/order_form.html b/myproject/orders/templates/orders/order_form.html
index 97bad49..6f599ac 100644
--- a/myproject/orders/templates/orders/order_form.html
+++ b/myproject/orders/templates/orders/order_form.html
@@ -1303,8 +1303,8 @@ document.getElementById('save-customer-btn').addEventListener('click', function(
             document.getElementById('customer-form-errors').innerHTML = '';
             document.getElementById('customer-form-errors').style.display = 'none';
 
-            // Показываем успешное сообщение
-            alert(`Клиент "${data.name}" успешно создан!`);
+            // Показываем успешное уведомление (автоисчезающее)
+            showNotification(`✓ Клиент "${data.name}" успешно создан!`, 'success');
         } else {
             const errorDiv = document.getElementById('customer-form-errors');
             errorDiv.innerHTML = '<div class="alert alert-danger mb-0">' + data.error + '</div>';
@@ -1318,6 +1318,89 @@ document.getElementById('save-customer-btn').addEventListener('click', function(
         errorDiv.style.display = 'block';
     });
 });
+
+/**
+ * Показывает автоисчезающее уведомление в правом верхнем углу формы заказа
+ * @param {string} message - Текст сообщения
+ * @param {string} type - Тип: 'success', 'error', 'info' (по умолчанию 'info')
+ * @param {number} duration - Время показа в миллисекундах (по умолчанию 4000)
+ */
+function showNotification(message, type = 'info', duration = 4000) {
+    const alertClass = type === 'error' ? 'alert-danger' : type === 'success' ? 'alert-success' : 'alert-info';
+    const icon = type === 'error' ? '⚠️' : type === 'success' ? '✓' : 'ℹ️';
+
+    // Создаём контейнер для уведомлений, если его нет
+    let container = document.getElementById('notifications-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'notifications-container';
+        container.style.cssText = `
+            position: fixed;
+            top: 80px;
+            right: 20px;
+            z-index: 1050;
+            max-width: 400px;
+        `;
+        document.body.appendChild(container);
+    }
+
+    // Создаём уведомление
+    const notification = document.createElement('div');
+    notification.className = `alert ${alertClass}`;
+    notification.style.cssText = `
+        margin-bottom: 10px;
+        padding: 12px 15px;
+        border-radius: 4px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        animation: slideIn 0.3s ease-in-out;
+    `;
+    notification.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 10px;">
+            <span>${icon}</span>
+            <span>${message}</span>
+        </div>
+    `;
+
+    // Добавляем в контейнер
+    container.appendChild(notification);
+
+    // Удаляем через указанное время
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease-in-out';
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }, duration);
+}
+
+// CSS для анимаций уведомлений
+if (!document.getElementById('notification-styles')) {
+    const style = document.createElement('style');
+    style.id = 'notification-styles';
+    style.textContent = `
+        @keyframes slideIn {
+            from {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        @keyframes slideOut {
+            from {
+                transform: translateX(0);
+                opacity: 1;
+            }
+            to {
+                transform: translateX(400px);
+                opacity: 0;
+            }
+        }
+    `;
+    document.head.appendChild(style);
+}
 </script>
 
 <!-- Модальное окно для создания временного комплекта -->