refactor price calculator into multiple files

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

@@ -0,0 +1,160 @@
+/**
+ * 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;