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:
@@ -4596,27 +4596,55 @@ var wpcf7 = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Group storage options by signature (content similarity)
|
// For instant customization, don't group - show each slot individually
|
||||||
// This allows us to separate "Consumer Gen4 Slots" from "Enterprise Gen5 Slots" automatically
|
// For custom servers, group similar slots together
|
||||||
const storageGroups = {};
|
if (isInstant) {
|
||||||
const groupOrder = []; // Preserve order
|
// 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 visualizer for this single slot
|
||||||
// Create a signature based on available values.
|
const visualContainer = document.createElement('div');
|
||||||
// We use a simplified signature: text + price of all options
|
visualContainer.className = 'storage-slots-container';
|
||||||
// We trim and lowercase to be robust against minor scraping diffs
|
const uniqueSuffix = '-instant-s' + index;
|
||||||
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
|
visualContainer.innerHTML = `
|
||||||
groupOrder.forEach((sig, groupIndex) => {
|
<div class="slots-header">
|
||||||
const groupOpts = storageGroups[sig];
|
<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 firstOpt = groupOpts[0];
|
||||||
|
|
||||||
const label = document.createElement('div');
|
const label = document.createElement('div');
|
||||||
|
|||||||
Reference in New Issue
Block a user