website/hub/services/static/js/price-calculator/dom-manager.js

/**
 * DOM Manager - Handles DOM element references and basic manipulation
 */
class DOMManager {
    constructor() {
        this.elements = {};
        this.initElements();
    }

    // Initialize DOM element references
    initElements() {
        // Calculator controls
        this.elements.cpuRange = document.getElementById('cpuRange');
        this.elements.memoryRange = document.getElementById('memoryRange');
        this.elements.storageRange = document.getElementById('storageRange');
        this.elements.instancesRange = document.getElementById('instancesRange');
        this.elements.cpuValue = document.getElementById('cpuValue');
        this.elements.memoryValue = document.getElementById('memoryValue');
        this.elements.storageValue = document.getElementById('storageValue');
        this.elements.instancesValue = document.getElementById('instancesValue');
        this.elements.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]');
        this.elements.planSelect = document.getElementById('planSelect');

        // Addon elements
        this.elements.addonsContainer = document.getElementById('addonsContainer');
        this.elements.addonPricingContainer = document.getElementById('addonPricingContainer');
        this.elements.managedServiceIncludesContainer = document.getElementById('managedServiceIncludesContainer');

        // Result display elements
        this.elements.planMatchStatus = document.getElementById('planMatchStatus');
        this.elements.selectedPlanDetails = document.getElementById('selectedPlanDetails');
        this.elements.noMatchFound = document.getElementById('noMatchFound');

        // Plan detail elements
        this.elements.planGroup = document.getElementById('planGroup');
        this.elements.planName = document.getElementById('planName');
        this.elements.planDescription = document.getElementById('planDescription');
        this.elements.planCpus = document.getElementById('planCpus');
        this.elements.planMemory = document.getElementById('planMemory');
        this.elements.planInstances = document.getElementById('planInstances');
        this.elements.planServiceLevel = document.getElementById('planServiceLevel');
        this.elements.managedServicePrice = document.getElementById('managedServicePrice');
        this.elements.storagePriceEl = document.getElementById('storagePrice');
        this.elements.storageAmount = document.getElementById('storageAmount');
        this.elements.totalPrice = document.getElementById('totalPrice');

        // Order button
        this.elements.orderButton = document.querySelector('a[href="#order-form"]');

        // Service level group
        this.elements.serviceLevelGroup = document.getElementById('serviceLevelGroup');
    }

    // Get element by key
    get(key) {
        return this.elements[key];
    }

    // Check if element exists
    has(key) {
        return this.elements[key] && this.elements[key] !== null;
    }

    // Update slider display values (min/max text below sliders)
    updateSliderDisplayValues() {
        // Update CPU slider display
        if (this.elements.cpuRange) {
            const cpuMinDisplay = document.getElementById('cpuMinDisplay');
            const cpuMaxDisplay = document.getElementById('cpuMaxDisplay');
            if (cpuMinDisplay) cpuMinDisplay.textContent = this.elements.cpuRange.min;
            if (cpuMaxDisplay) cpuMaxDisplay.textContent = this.elements.cpuRange.max;
        }

        // Update Memory slider display
        if (this.elements.memoryRange) {
            const memoryMinDisplay = document.getElementById('memoryMinDisplay');
            const memoryMaxDisplay = document.getElementById('memoryMaxDisplay');
            if (memoryMinDisplay) memoryMinDisplay.textContent = this.elements.memoryRange.min;
            if (memoryMaxDisplay) memoryMaxDisplay.textContent = this.elements.memoryRange.max;
        }

        // Update Storage slider display
        if (this.elements.storageRange) {
            const storageMinDisplay = document.getElementById('storageMinDisplay');
            const storageMaxDisplay = document.getElementById('storageMaxDisplay');
            if (storageMinDisplay) storageMinDisplay.textContent = this.elements.storageRange.min;
            if (storageMaxDisplay) storageMaxDisplay.textContent = this.elements.storageRange.max;
        }

        // Update Instances slider display
        if (this.elements.instancesRange) {
            const instancesMinDisplay = document.getElementById('instancesMinDisplay');
            const instancesMaxDisplay = document.getElementById('instancesMaxDisplay');
            if (instancesMinDisplay) instancesMinDisplay.textContent = this.elements.instancesRange.min;
            if (instancesMaxDisplay) instancesMaxDisplay.textContent = this.elements.instancesRange.max;
        }
    }

    // Get slider container element by type
    getSliderContainer(type) {
        switch (type) {
            case 'cpu':
                return this.elements.cpuRange?.closest('.mb-4');
            case 'memory':
                return this.elements.memoryRange?.closest('.mb-4');
            case 'storage':
                return this.elements.storageRange?.closest('.mb-4');
            case 'instances':
                return this.elements.instancesRange?.closest('.mb-4');
            default:
                return null;
        }
    }

    // Reset sliders to their default values
    resetSlidersToDefaults() {
        // Reset CPU slider to default value (0.5 vCPUs)
        if (this.elements.cpuRange) {
            this.elements.cpuRange.value = '0.5';
            if (this.elements.cpuValue) this.elements.cpuValue.textContent = '0.5';
        }

        // Reset Memory slider to default value (1 GB)
        if (this.elements.memoryRange) {
            this.elements.memoryRange.value = '1';
            if (this.elements.memoryValue) this.elements.memoryValue.textContent = '1';
        }

        // Reset Storage slider to default value (20 GB)
        if (this.elements.storageRange) {
            this.elements.storageRange.value = '20';
            if (this.elements.storageValue) this.elements.storageValue.textContent = '20';
        }

        // Reset Instances slider to default value (1)
        if (this.elements.instancesRange) {
            this.elements.instancesRange.value = '1';
            if (this.elements.instancesValue) this.elements.instancesValue.textContent = '1';
        }
    }

    // Get current selected service level
    getSelectedServiceLevel() {
        return document.querySelector('input[name="serviceLevel"]:checked')?.value;
    }

    // Get current configuration values
    getCurrentConfiguration() {
        return {
            cpus: parseFloat(this.elements.cpuRange?.value || 0.5),
            memory: parseFloat(this.elements.memoryRange?.value || 1),
            storage: parseInt(this.elements.storageRange?.value || 20),
            instances: parseInt(this.elements.instancesRange?.value || 1),
            serviceLevel: this.getSelectedServiceLevel()
        };
    }
}

// Export for use in other modules
window.DOMManager = DOMManager;