/** * 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;