fix: show individual storage slots for instant customization

Instead of grouping similar storage slots together:
- Show each storage slot individually for instant customization
- Each NVMe 1, NVMe 2, etc. gets its own section
- Properly displays the preselected drive in each slot
- Shows exact configuration from WHMCS (6 individual drives)

This will now show:
- NVMe 1: Crucial T705 4TB
- NVMe 2: Crucial T705 4TB
- NVMe 3: Crucial T705 4TB
- NVMe 4: Crucial T705 4TB
- NVMe 5: Kioxia CM7-V 3.2TB
- NVMe 6: Kioxia CM7-V 3.2TB

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
2025-12-06 01:31:23 +04:00
Unverified
parent 9a234088fe
commit 2c83ac33c8

View File

@@ -4596,27 +4596,55 @@ var wpcf7 = {
}
}
// Group storage options by signature (content similarity)
// This allows us to separate "Consumer Gen4 Slots" from "Enterprise Gen5 Slots" automatically
const storageGroups = {};
const groupOrder = []; // Preserve order
// For instant customization, don't group - show each slot individually
// For custom servers, group similar slots together
if (isInstant) {
// Show each storage slot individually
groups.storage.forEach((opt, index) => {
const label = document.createElement('div');
label.className = 'section-label';
label.style.marginTop = '1.5rem';
label.textContent = `💿 ${opt.label}`;
container.appendChild(label);
groups.storage.forEach(opt => {
// Create a signature based on available values.
// We use a simplified signature: text + price of all options
// We trim and lowercase to be robust against minor scraping diffs
const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||');
if (!storageGroups[signature]) {
storageGroups[signature] = [];
groupOrder.push(signature);
}
storageGroups[signature].push(opt);
});
// Create visualizer for this single slot
const visualContainer = document.createElement('div');
visualContainer.className = 'storage-slots-container';
const uniqueSuffix = '-instant-s' + index;
// Render each group
groupOrder.forEach((sig, groupIndex) => {
const groupOpts = storageGroups[sig];
visualContainer.innerHTML = `
<div class="slots-header">
<span>Slot: <strong>${opt.label}</strong></span>
<span id="dynamic-slots-status${uniqueSuffix}" style="color:var(--success); font-size:0.75rem;">Configured</span>
</div>
<div class="slots-visual" id="dynamic-slots-visual${uniqueSuffix}">
<div class="drive-slot filled"></div>
</div>
`;
container.appendChild(visualContainer);
// Create individual option grid for this slot
container.appendChild(createOptionGrid(opt, true, -1, isInstant, preselected));
});
} else {
// Group storage options by signature for custom servers
const storageGroups = {};
const groupOrder = []; // Preserve order
groups.storage.forEach(opt => {
// Create a signature based on available values
const signature = opt.values.map(v => v.text.trim().toLowerCase() + '|' + v.price).join('||');
if (!storageGroups[signature]) {
storageGroups[signature] = [];
groupOrder.push(signature);
}
storageGroups[signature].push(opt);
});
// Render each group
groupOrder.forEach((sig, groupIndex) => {
const groupOpts = storageGroups[sig];
const firstOpt = groupOpts[0];
const label = document.createElement('div');