TimeTrack/static/js/date-formatter.js

// Date and Time Formatting Utility
// This file provides client-side date/time formatting that matches user preferences

(function() {
    'use strict';
    
    // Get user preferences from data attributes or localStorage
    function getUserPreferences() {
        // Check if preferences are stored in the DOM
        const prefsElement = document.getElementById('user-preferences');
        if (prefsElement) {
            return {
                dateFormat: prefsElement.dataset.dateFormat || 'ISO',
                timeFormat24h: prefsElement.dataset.timeFormat24h === 'true'
            };
        }
        
        // Fallback to localStorage
        return {
            dateFormat: localStorage.getItem('dateFormat') || 'ISO',
            timeFormat24h: localStorage.getItem('timeFormat24h') === 'true'
        };
    }
    
    // Format date according to user preference
    function formatDate(date) {
        if (!date) return '';
        
        const d = date instanceof Date ? date : new Date(date);
        if (isNaN(d.getTime())) return '';
        
        const prefs = getUserPreferences();
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, '0');
        const day = String(d.getDate()).padStart(2, '0');
        
        switch (prefs.dateFormat) {
            case 'US':
                return `${month}/${day}/${year}`;
            case 'EU':
            case 'UK':
                return `${day}/${month}/${year}`;
            case 'Readable':
                return d.toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'short', 
                    day: 'numeric' 
                });
            case 'Full':
                return d.toLocaleDateString('en-US', { 
                    year: 'numeric', 
                    month: 'long', 
                    day: 'numeric' 
                });
            case 'ISO':
            default:
                return `${year}-${month}-${day}`;
        }
    }
    
    // Format time according to user preference
    function formatTime(date, includeSeconds = true) {
        if (!date) return '';
        
        const d = date instanceof Date ? date : new Date(date);
        if (isNaN(d.getTime())) return '';
        
        const prefs = getUserPreferences();
        const hours = d.getHours();
        const minutes = String(d.getMinutes()).padStart(2, '0');
        const seconds = String(d.getSeconds()).padStart(2, '0');
        
        if (prefs.timeFormat24h) {
            const h24 = String(hours).padStart(2, '0');
            return includeSeconds ? `${h24}:${minutes}:${seconds}` : `${h24}:${minutes}`;
        } else {
            const h12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
            const ampm = hours >= 12 ? 'PM' : 'AM';
            const timeStr = includeSeconds ? 
                `${h12}:${minutes}:${seconds}` : 
                `${h12}:${minutes}`;
            return `${timeStr} ${ampm}`;
        }
    }
    
    // Format datetime according to user preference
    function formatDateTime(date) {
        if (!date) return '';
        
        const d = date instanceof Date ? date : new Date(date);
        if (isNaN(d.getTime())) return '';
        
        return `${formatDate(d)} ${formatTime(d)}`;
    }
    
    // Format duration (seconds to HH:MM:SS)
    function formatDuration(seconds) {
        if (seconds == null || seconds < 0) return '00:00:00';
        
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = Math.floor(seconds % 60);
        
        return [hours, minutes, secs]
            .map(v => String(v).padStart(2, '0'))
            .join(':');
    }
    
    // Update all elements with data-format attributes
    function updateFormattedDates() {
        // Update date elements
        document.querySelectorAll('[data-format-date]').forEach(el => {
            const dateStr = el.dataset.formatDate;
            if (dateStr) {
                el.textContent = formatDate(dateStr);
            }
        });
        
        // Update time elements
        document.querySelectorAll('[data-format-time]').forEach(el => {
            const timeStr = el.dataset.formatTime;
            const includeSeconds = el.dataset.includeSeconds !== 'false';
            if (timeStr) {
                el.textContent = formatTime(timeStr, includeSeconds);
            }
        });
        
        // Update datetime elements
        document.querySelectorAll('[data-format-datetime]').forEach(el => {
            const datetimeStr = el.dataset.formatDatetime;
            if (datetimeStr) {
                el.textContent = formatDateTime(datetimeStr);
            }
        });
        
        // Update duration elements
        document.querySelectorAll('[data-format-duration]').forEach(el => {
            const seconds = parseInt(el.dataset.formatDuration);
            if (!isNaN(seconds)) {
                el.textContent = formatDuration(seconds);
            }
        });
    }
    
    // Store preferences in localStorage when they change
    function storePreferences(dateFormat, timeFormat24h) {
        localStorage.setItem('dateFormat', dateFormat);
        localStorage.setItem('timeFormat24h', timeFormat24h);
    }
    
    // Initialize on DOM ready
    document.addEventListener('DOMContentLoaded', function() {
        updateFormattedDates();
        
        // Listen for preference changes
        window.addEventListener('preferenceChanged', function(e) {
            if (e.detail) {
                storePreferences(e.detail.dateFormat, e.detail.timeFormat24h);
                updateFormattedDates();
            }
        });
    });
    
    // Expose functions globally
    window.DateFormatter = {
        formatDate: formatDate,
        formatTime: formatTime,
        formatDateTime: formatDateTime,
        formatDuration: formatDuration,
        updateFormattedDates: updateFormattedDates,
        getUserPreferences: getUserPreferences
    };
})();