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 = '
' + data.error + '
'; @@ -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 = ` +
+ ${icon} + ${message} +
+ `; + + // Добавляем в контейнер + 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); +}