125 lines
4.3 KiB
JavaScript
125 lines
4.3 KiB
JavaScript
/**
|
|
* uiHelpers.js - UI helper functions
|
|
*
|
|
* This module contains utility functions for UI operations like showing messages,
|
|
* handling toasts, managing UI visibility, etc.
|
|
*/
|
|
|
|
import { formatDateForDisplay } from './dateUtils.js'; // Use from dateUtils for consistency
|
|
|
|
// UI toast instance
|
|
let toastInstance = null;
|
|
|
|
/**
|
|
* Shows a log message in the toast notification
|
|
* @param {string} message - Message to display
|
|
*/
|
|
export function showLogMessage(message) {
|
|
const logToast = document.getElementById('logToast');
|
|
const logMessage = document.getElementById('logMessage');
|
|
const logTime = document.getElementById('logTime');
|
|
|
|
if (!logToast || !logMessage || !logTime) {
|
|
console.warn("Toast UI elements not found for showLogMessage.");
|
|
// Still log to console as a fallback
|
|
console.log(`[Toast Omitted - UI Missing] [${new Date().toLocaleTimeString()}] ${message}`);
|
|
return;
|
|
}
|
|
|
|
// Update toast content
|
|
logMessage.textContent = message;
|
|
logTime.textContent = new Date().toLocaleTimeString();
|
|
|
|
// Initialize the toast if not already done
|
|
if (!toastInstance) {
|
|
toastInstance = new bootstrap.Toast(logToast, {
|
|
autohide: true,
|
|
delay: 5000
|
|
});
|
|
}
|
|
|
|
// Show the toast
|
|
toastInstance.show();
|
|
|
|
// Also log to console for debugging
|
|
console.log(`[${new Date().toLocaleTimeString()}] ${message}`);
|
|
}
|
|
|
|
/**
|
|
* Show error message in the main error container
|
|
* @param {string} message - Error message to display
|
|
*/
|
|
export function showError(message) {
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
const reportBody = document.getElementById('reportBody');
|
|
|
|
if (!errorMessage) {
|
|
console.warn("Error message UI element not found for showError.");
|
|
// If only errorMessage is missing, other parts might still be attempted if reportBody exists,
|
|
// but for consistency, perhaps return early or make reportBody optional.
|
|
// For now, let's ensure errorMessage exists.
|
|
return;
|
|
}
|
|
|
|
errorMessage.textContent = `Error: ${message}`;
|
|
errorMessage.classList.remove('d-none');
|
|
|
|
if (reportBody) {
|
|
// Assuming 5 columns is a safe maximum or most common case for the main table error display
|
|
reportBody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Failed to load data. See console for details.</td></tr>';
|
|
} else {
|
|
console.warn("Report body UI element not found for showError to clear table.");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show error message in the modal error container
|
|
* @param {string} message - Error message to display
|
|
*/
|
|
export function showModalError(message) {
|
|
const modalErrorMessage = document.getElementById('modalErrorMessage');
|
|
const userActivityBody = document.getElementById('userActivityBody');
|
|
|
|
if (!modalErrorMessage) {
|
|
console.warn("Modal error message UI element not found for showModalError.");
|
|
return;
|
|
}
|
|
|
|
modalErrorMessage.textContent = `Error: ${message}`;
|
|
modalErrorMessage.classList.remove('d-none');
|
|
|
|
if (userActivityBody) {
|
|
// Assuming 4 columns for the user activity table error display
|
|
userActivityBody.innerHTML = '<tr><td colspan="4" class="text-center text-danger">Failed to load activity data.</td></tr>';
|
|
} else {
|
|
console.warn("User activity body UI element not found for showModalError to clear table.");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Update the active button state in a button group
|
|
* @param {HTMLElement[]} buttons - Array of button elements
|
|
* @param {HTMLElement} activeButton - Button to set as active
|
|
*/
|
|
export function setActiveButton(buttons, activeButton) {
|
|
// Remove active class from all buttons
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
// Add active class to the specified button
|
|
activeButton.classList.add('active');
|
|
}
|
|
|
|
/**
|
|
* Update the date display in the UI
|
|
* @param {string} dateString - Date string in YYYY-MM-DD format
|
|
*/
|
|
export function updateDateDisplay(dateString) {
|
|
const currentDateDisplay = document.getElementById('currentDateDisplay');
|
|
|
|
if (!currentDateDisplay) {
|
|
console.warn("Current date display UI element not found for updateDateDisplay.");
|
|
return;
|
|
}
|
|
|
|
currentDateDisplay.textContent = formatDateForDisplay(dateString); // Use from dateUtils
|
|
}
|