Заменен 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:
@@ -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>
|
||||||
|
|
||||||
<!-- Модальное окно для создания временного комплекта -->
|
<!-- Модальное окно для создания временного комплекта -->
|
||||||
|
|||||||
Reference in New Issue
Block a user