mirror of
https://github.com/StuffAnThings/qbit_manage.git
synced 2025-10-12 14:56:22 +08:00
3fa5fcee3b
# Requirements Updated - fastapi==0.116.0 - retrying==1.4.0 - uvicorn==0.35.0 # New Features - **Web UI**: Introduced a new Web UI for configuring and managing qBit Manage. - Visual Configuration Editor for YAML files. - Command Execution directly from the UI. - Undo/Redo History for changes. - Theme Support (light/dark mode). - Responsive Design for desktop and mobile. - Real-time YAML Preview. - Pass skip qbitorrent check as optional parameter to the API (Adds #860)\ **Full Changelog**: https://github.com/StuffAnThings/qbit_manage/compare/v4.4.0...v4.5.0 --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: ineednewpajamas <73252768+ineednewpajamas@users.noreply.github.com>
71 lines
2 KiB
JavaScript
71 lines
2 KiB
JavaScript
/**
|
||
* Toast Utility Module
|
||
* Manages the display of toast notifications.
|
||
*/
|
||
|
||
import { get, show, hide } from './dom.js';
|
||
import { CLOSE_ICON_SVG } from './icons.js';
|
||
|
||
const TOAST_CONTAINER_ID = 'toast-container';
|
||
|
||
/**
|
||
* Displays a toast notification.
|
||
* @param {string} message - The message to display in the toast.
|
||
* @param {'success'|'error'|'warning'|'info'} [type='info'] - The type of toast (for styling).
|
||
* @param {number} [duration=5000] - How long the toast should be visible in milliseconds.
|
||
*/
|
||
export function showToast(message, type = 'info', duration = 5000) {
|
||
const container = get(TOAST_CONTAINER_ID);
|
||
if (!container) {
|
||
console.warn('Toast container not found. Cannot display toast message.');
|
||
return;
|
||
}
|
||
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast toast-${type}`;
|
||
|
||
const icons = {
|
||
success: '✓',
|
||
error: '✕',
|
||
warning: '⚠',
|
||
info: 'ℹ',
|
||
undo: '↶',
|
||
redo: '↷'
|
||
};
|
||
|
||
toast.innerHTML = `
|
||
<div class="toast-icon">${icons[type] || icons.info}</div>
|
||
<div class="toast-content">
|
||
<div class="toast-message">${message}</div>
|
||
</div>
|
||
<button class="btn btn-icon btn-close-icon toast-close">
|
||
${CLOSE_ICON_SVG}
|
||
</button>
|
||
`;
|
||
|
||
container.appendChild(toast);
|
||
|
||
// Show toast (add 'show' class to trigger transition)
|
||
setTimeout(() => {
|
||
toast.classList.add('show');
|
||
}, 100);
|
||
|
||
// Auto-hide toast
|
||
const hideToast = () => {
|
||
toast.classList.remove('show');
|
||
// Remove from DOM after transition
|
||
toast.addEventListener('transitionend', () => {
|
||
if (toast.parentElement) {
|
||
toast.remove();
|
||
}
|
||
}, { once: true });
|
||
};
|
||
|
||
setTimeout(hideToast, duration);
|
||
|
||
// Close button event
|
||
const closeButton = toast.querySelector('.toast-close');
|
||
if (closeButton) {
|
||
closeButton.addEventListener('click', hideToast);
|
||
}
|
||
}
|