fscalc/webroot/js/main.js

// Main application file that coordinates all modules

import { setupTooltips, setupCopyButtons } from './utils.js';
import { Calculator } from './calculator.js';
import { FATFilesystem } from './filesystems/fat.js';
import { NTFSFilesystem } from './filesystems/ntfs.js';

class FilesystemCalculator {
    constructor() {
        this.filesystems = [
            new FATFilesystem(),
            new NTFSFilesystem()
        ];
        this.calculator = new Calculator();
        this.activeTab = null;
    }

    init() {
        this.renderTabs();
        this.renderContent();
        this.setupEventListeners();
        this.setupCalculator();
        this.setupUtilities();
        
        // Activate first tab
        if (this.filesystems[0] && this.filesystems[0].variants[0]) {
            this.switchTab(this.filesystems[0].variants[0].id);
        }
    }

    renderTabs() {
        const tabsContainer = document.getElementById('filesystem-tabs');
        const tabs = [];

        this.filesystems.forEach(filesystem => {
            filesystem.variants.forEach(variant => {
                tabs.push(`
                    <div class="tab" data-tab="${variant.id}">
                        ${variant.name}
                    </div>
                `);
            });
        });

        tabsContainer.innerHTML = tabs.join('');
    }

    renderContent() {
        const contentContainer = document.getElementById('filesystem-content');
        const calculatorHTML = this.calculator.generateHTML();
        const contents = [];

        this.filesystems.forEach(filesystem => {
            filesystem.variants.forEach(variant => {
                contents.push(filesystem.generateTabContentHTML(variant.id, calculatorHTML));
            });
        });

        contentContainer.innerHTML = contents.join('');
    }

    setupEventListeners() {
        // Tab switching
        document.addEventListener('click', (e) => {
            if (e.target.classList.contains('tab')) {
                const tabId = e.target.getAttribute('data-tab');
                this.switchTab(tabId);
            }
        });

        // Input listeners for all filesystems
        this.filesystems.forEach(filesystem => {
            filesystem.variants.forEach(variant => {
                filesystem.setupInputListeners(variant.id);
            });
        });
    }

    setupCalculator() {
        this.calculator.setupEventListeners();
    }

    setupUtilities() {
        setupTooltips();
        setupCopyButtons();
        
        window.copyToClipboard = (elementId) => {
            import('./utils.js').then(module => {
                module.copyToClipboard(elementId);
            });
        };
    }

    switchTab(tabId) {
        // Update tab appearance
        document.querySelectorAll('.tab').forEach(tab => {
            tab.classList.remove('active');
        });
        document.querySelector(`[data-tab="${tabId}"]`).classList.add('active');

        // Update content visibility
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.remove('active');
        });
        document.getElementById(tabId).classList.add('active');

        this.activeTab = tabId;

        // Update calculator display
        this.calculator.updateDisplay();

        // Trigger calculation for the new tab
        const filesystem = this.findFilesystemForTab(tabId);
        if (filesystem) {
            filesystem.calculate(tabId);
        }
    }

    findFilesystemForTab(tabId) {
        for (const filesystem of this.filesystems) {
            if (filesystem.variants.some(variant => variant.id === tabId)) {
                return filesystem;
            }
        }
        return null;
    }
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    const app = new FilesystemCalculator();
    app.init();
});