sync the vcpu and memory sliders when moving around

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

@@ -77,9 +77,12 @@ class PriceCalculator {
         // Setup service levels based on available data
         this.uiManager.setupServiceLevels(this.domManager, this.pricingDataManager);
 
-        // Calculate and set slider maximums
+        // Calculate and set slider maximums and ranges
         this.uiManager.updateSliderMaximums(this.domManager, this.pricingDataManager);
 
+        // Set smart default values based on available plans
+        this.domManager.setSmartDefaults(this.pricingDataManager);
+
         // Populate plan dropdown
         this.planManager.populatePlanDropdown(this.domManager);
 
@@ -99,11 +102,21 @@ class PriceCalculator {
         // Slider event listeners
         cpuRange.addEventListener('input', () => {
             this.domManager.get('cpuValue').textContent = cpuRange.value;
+            // Only synchronize if in auto-select mode (no manual plan selection)
+            const planSelect = this.domManager.get('planSelect');
+            if (!planSelect?.value) {
+                this.synchronizeMemoryToMatchingPlan(parseFloat(cpuRange.value));
+            }
             this.updatePricing();
         });
 
         memoryRange.addEventListener('input', () => {
             this.domManager.get('memoryValue').textContent = memoryRange.value;
+            // Only synchronize if in auto-select mode (no manual plan selection)
+            const planSelect = this.domManager.get('planSelect');
+            if (!planSelect?.value) {
+                this.synchronizeCpuToMatchingPlan(parseFloat(memoryRange.value));
+            }
             this.updatePricing();
         });
 
@@ -136,8 +149,8 @@ class PriceCalculator {
                     // Update pricing with the selected plan
                     this.updatePricingWithPlan(selectedPlan);
                 } else {
-                    // Auto-select mode - reset sliders to default values
-                    this.domManager.resetSlidersToDefaults();
+                    // Auto-select mode - reset sliders to smart default values
+                    this.domManager.setSmartDefaults(this.pricingDataManager);
 
                     // Auto-select mode - fade sliders back in
                     this.uiManager.fadeInSliders(this.domManager, ['cpu', 'memory']);
@@ -275,6 +288,150 @@ class PriceCalculator {
             [...addons.mandatory, ...addons.optional]
         );
     }
+
+    // Synchronize memory slider to match CPU value with best matching plan
+    synchronizeMemoryToMatchingPlan(targetCpu) {
+        const serviceLevel = this.domManager.getSelectedServiceLevel();
+        if (!serviceLevel) return;
+
+        // Get all available plans for the current service level
+        const availablePlans = this.pricingDataManager.getPlansForServiceLevel(serviceLevel);
+        if (!availablePlans || availablePlans.length === 0) return;
+
+        // Snap CPU to nearest available value first
+        const { cpuValues } = this.pricingDataManager.getAvailableSliderValues();
+        const snappedCpu = this.findNearestValue(targetCpu, cpuValues);
+        
+        // Update CPU slider to snapped value if different
+        if (snappedCpu !== targetCpu) {
+            const cpuRange = this.domManager.get('cpuRange');
+            const cpuValue = this.domManager.get('cpuValue');
+            if (cpuRange && cpuValue) {
+                cpuRange.value = snappedCpu;
+                cpuValue.textContent = snappedCpu;
+            }
+        }
+
+        // Find the plan that best matches the snapped CPU requirement
+        let bestPlan = null;
+        let minDifference = Infinity;
+
+        availablePlans.forEach(plan => {
+            const planCpu = parseFloat(plan.vcpus);
+            // Look for plans that meet or exceed the CPU requirement
+            if (planCpu >= snappedCpu) {
+                const difference = planCpu - snappedCpu;
+                if (difference < minDifference) {
+                    minDifference = difference;
+                    bestPlan = plan;
+                }
+            }
+        });
+
+        // If no plan meets the CPU requirement, find the closest one below it
+        if (!bestPlan) {
+            availablePlans.forEach(plan => {
+                const planCpu = parseFloat(plan.vcpus);
+                const difference = Math.abs(planCpu - snappedCpu);
+                if (difference < minDifference) {
+                    minDifference = difference;
+                    bestPlan = plan;
+                }
+            });
+        }
+
+        // Update memory slider to match the found plan
+        if (bestPlan) {
+            const memoryRange = this.domManager.get('memoryRange');
+            const memoryValue = this.domManager.get('memoryValue');
+            
+            if (memoryRange && memoryValue) {
+                memoryRange.value = bestPlan.ram;
+                memoryValue.textContent = bestPlan.ram;
+            }
+        }
+    }
+
+    // Synchronize CPU slider to match memory value with best matching plan
+    synchronizeCpuToMatchingPlan(targetMemory) {
+        const serviceLevel = this.domManager.getSelectedServiceLevel();
+        if (!serviceLevel) return;
+
+        // Get all available plans for the current service level
+        const availablePlans = this.pricingDataManager.getPlansForServiceLevel(serviceLevel);
+        if (!availablePlans || availablePlans.length === 0) return;
+
+        // Snap memory to nearest available value first
+        const { memoryValues } = this.pricingDataManager.getAvailableSliderValues();
+        const snappedMemory = this.findNearestValue(targetMemory, memoryValues);
+        
+        // Update memory slider to snapped value if different
+        if (snappedMemory !== targetMemory) {
+            const memoryRange = this.domManager.get('memoryRange');
+            const memoryValue = this.domManager.get('memoryValue');
+            if (memoryRange && memoryValue) {
+                memoryRange.value = snappedMemory;
+                memoryValue.textContent = snappedMemory;
+            }
+        }
+
+        // Find the plan that best matches the snapped memory requirement
+        let bestPlan = null;
+        let minDifference = Infinity;
+
+        availablePlans.forEach(plan => {
+            const planMemory = parseFloat(plan.ram);
+            // Look for plans that meet or exceed the memory requirement
+            if (planMemory >= snappedMemory) {
+                const difference = planMemory - snappedMemory;
+                if (difference < minDifference) {
+                    minDifference = difference;
+                    bestPlan = plan;
+                }
+            }
+        });
+
+        // If no plan meets the memory requirement, find the closest one below it
+        if (!bestPlan) {
+            availablePlans.forEach(plan => {
+                const planMemory = parseFloat(plan.ram);
+                const difference = Math.abs(planMemory - snappedMemory);
+                if (difference < minDifference) {
+                    minDifference = difference;
+                    bestPlan = plan;
+                }
+            });
+        }
+
+        // Update CPU slider to match the found plan
+        if (bestPlan) {
+            const cpuRange = this.domManager.get('cpuRange');
+            const cpuValue = this.domManager.get('cpuValue');
+            
+            if (cpuRange && cpuValue) {
+                cpuRange.value = bestPlan.vcpus;
+                cpuValue.textContent = bestPlan.vcpus;
+            }
+        }
+    }
+
+    // Find the nearest value in an array to a target value
+    findNearestValue(target, availableValues) {
+        if (!availableValues || availableValues.length === 0) return target;
+        
+        let nearest = availableValues[0];
+        let minDifference = Math.abs(target - nearest);
+        
+        for (let i = 1; i < availableValues.length; i++) {
+            const difference = Math.abs(target - availableValues[i]);
+            if (difference < minDifference) {
+                minDifference = difference;
+                nearest = availableValues[i];
+            }
+        }
+        
+        return nearest;
+    }
 }
 
 // Export for use in other modules