imcp 0.1.5 → 0.1.6

package/src/web/public/js/modal.js

@@ -0,0 +1,42 @@
+// Import all functionality from the modal folder
+import {
+    showInstallModal,
+    closeModal,
+    uninstallTools,
+    showInstallLoadingModal,
+    // appendInstallLoadingMessage, // Removed
+    hideInstallLoadingModal,
+    // Potentially add updateOverallInstallStatus, addInstallationStep if needed from ./modal/index.js
+} from './modal/index.js';
+
+// Re-export all modal functionality
+export {
+    showInstallModal,
+    closeModal,
+    uninstallTools,
+    showInstallLoadingModal, // Added to exports
+    hideInstallLoadingModal // Added to exports
+    // Potentially add updateOverallInstallStatus, addInstallationStep to exports
+};
+
+// Make certain functions available globally
+window.showInstallModal = showInstallModal;
+window.showInstallLoadingModal = showInstallLoadingModal;
+// window.appendInstallLoadingMessage = appendInstallLoadingMessage; // Removed
+window.hideInstallLoadingModal = hideInstallLoadingModal;
+
+// Listen for the custom event to refresh the main modal content
+document.addEventListener('refreshMainModalContent', () => {
+    console.log('[ModalJS] Received refreshMainModalContent event. Refreshing main modal.');
+    const lastSelectedCategory = localStorage.getItem('lastSelectedCategory');
+    const lastSelectedServerName = localStorage.getItem('lastSelectedServerName');
+
+    const isCategoryValid = lastSelectedCategory && lastSelectedCategory.trim() !== '' && lastSelectedCategory !== 'undefined' && lastSelectedCategory !== 'null';
+    const isServerNameValid = lastSelectedServerName && lastSelectedServerName.trim() !== '' && lastSelectedServerName !== 'undefined' && lastSelectedServerName !== 'null';
+
+    if (isCategoryValid && isServerNameValid) {
+        window.showInstallModal(lastSelectedCategory, lastSelectedServerName);
+    } else {
+        console.warn(`[ModalJS] Not refreshing modal. Category valid: ${isCategoryValid} (value: "${lastSelectedCategory}"), ServerName valid: ${isServerNameValid} (value: "${lastSelectedServerName}")`);
+    }
+});

package/src/web/public/js/notifications.js

@@ -0,0 +1,137 @@
+// Function to show a toast notification
+function showToast(message, type = 'success') {
+    const alertContainer = document.querySelector('.alert-container');
+    if (!alertContainer) {
+        console.error('Alert container not found. Notifications will not be displayed.');
+        return;
+    }
+    const alertId = `alert-${Date.now()}`;
+
+    let iconHtml = '';
+    switch (type) {
+        case 'success':
+            iconHtml = '<i class="bi bi-check-circle-fill alert-icon"></i>';
+            break;
+        case 'error':
+            iconHtml = '<i class="bi bi-x-octagon-fill alert-icon"></i>'; // Changed icon for error
+            break;
+        case 'info':
+            iconHtml = '<i class="bi bi-info-circle-fill alert-icon"></i>';
+            break;
+        case 'warning':
+            iconHtml = '<i class="bi bi-exclamation-triangle-fill alert-icon"></i>';
+            break;
+        default:
+            iconHtml = '<i class="bi bi-bell-fill alert-icon"></i>'; // Default icon
+    }
+
+    const alertHtml = `
+        <div id="${alertId}" class="alert alert-${type}" role="alert">
+            ${iconHtml}
+            <span>${message}</span>
+            <button type="button" class="btn-close" aria-label="Close"></button>
+        </div>
+    `;
+
+    alertContainer.insertAdjacentHTML('beforeend', alertHtml);
+
+    const alertElement = document.getElementById(alertId);
+    if (!alertElement) return;
+
+    // Trigger the slide-in animation
+    // Adding a slight delay to ensure the element is in the DOM before adding the 'show' class
+    requestAnimationFrame(() => {
+        requestAnimationFrame(() => { // Double requestAnimationFrame for more reliable transition start
+            alertElement.classList.add('show');
+        });
+    });
+
+
+    const closeButton = alertElement.querySelector('.btn-close');
+
+    const dismissAlert = () => {
+        alertElement.classList.remove('show'); // Trigger slide-out animation
+        // Wait for fade out animation to complete before removing
+        alertElement.addEventListener('transitionend', () => {
+            alertElement.remove();
+        }, { once: true }); // Ensure event listener is removed after execution
+    };
+
+    if (closeButton) {
+        closeButton.addEventListener('click', dismissAlert);
+    }
+
+    // Auto-dismiss after 5 seconds (increased from 3)
+    setTimeout(dismissAlert, 5000);
+}
+
+// Function to show a confirmation dialog using custom modal system
+function showConfirm(title, message) {
+    return new Promise((resolve) => {
+        const modalId = `confirm-modal-${Date.now()}`;
+        const modalHtml = `
+            <div id="${modalId}" class="modal" style="display: none;">
+                <div class="modal-content" style="max-width: 400px; margin: 15% auto;">
+                    <div class="modal-header">
+                        <h3 class="text-lg font-semibold text-gray-700">${title}</h3>
+                    </div>
+                    <div style="margin: 1rem 0;">
+                        ${message}
+                    </div>
+                    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
+                        <button type="button" class="cancel-button px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
+                            Cancel
+                        </button>
+                        <button type="button" class="confirm-button submit-button">
+                            Confirm
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        const modalElement = document.getElementById(modalId);
+        // Trigger display after a short delay to allow CSS transitions if any are added later for modals
+        requestAnimationFrame(() => {
+            modalElement.style.display = 'block';
+        });
+
+
+        // Handle confirm button click
+        modalElement.querySelector('.confirm-button').addEventListener('click', () => {
+            modalElement.style.display = 'none';
+            modalElement.remove();
+            resolve(true);
+        });
+
+        // Handle cancel button click
+        modalElement.querySelector('.cancel-button').addEventListener('click', () => {
+            modalElement.style.display = 'none';
+            modalElement.remove();
+            resolve(false);
+        });
+
+        // Handle click outside modal
+        modalElement.addEventListener('click', (event) => {
+            if (event.target === modalElement) {
+                modalElement.style.display = 'none';
+                modalElement.remove();
+                resolve(false);
+            }
+        });
+    });
+}
+
+export { showToast, showConfirm };
+
+// Display install notification after page reload
+document.addEventListener('DOMContentLoaded', () => {
+    const data = sessionStorage.getItem('installNotification');
+    if (data) {
+        const { message, type } = JSON.parse(data);
+        showToast(message, type);
+        sessionStorage.removeItem('installNotification');
+    }
+});