Заменен alert() на красивое автоисчезающее уведомление при создании клиента

Проблема: При успешном создании клиента показывалось системное окно 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>
This commit is contained in:
2025-11-11 01:09:36 +03:00
parent 9018e16267
commit 6a100c4257

View File

@@ -1303,8 +1303,8 @@ document.getElementById('save-customer-btn').addEventListener('click', function(
document.getElementById('customer-form-errors').innerHTML = ''; document.getElementById('customer-form-errors').innerHTML = '';
document.getElementById('customer-form-errors').style.display = 'none'; document.getElementById('customer-form-errors').style.display = 'none';
// Показываем успешное сообщение // Показываем успешное уведомление (автоисчезающее)
alert(`Клиент "${data.name}" успешно создан!`); showNotification(`Клиент "${data.name}" успешно создан!`, 'success');
} else { } else {
const errorDiv = document.getElementById('customer-form-errors'); const errorDiv = document.getElementById('customer-form-errors');
errorDiv.innerHTML = '<div class="alert alert-danger mb-0">' + data.error + '</div>'; 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'; 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> </script>
<!-- Модальное окно для создания временного комплекта --> <!-- Модальное окно для создания временного комплекта -->