servala/website
1
0
Fork 0
Code Issues 12 Pull requests Projects 1 Packages 1 Activity Actions

much improved display of included in managed service

Browse source
This commit is contained in:
Tobias Brunner 2025-07-16 11:53:24 +02:00
parent d3e0fdd941
commit a7713b46a2
Signed by: tobru
SSH key fingerprint: SHA256:kOXg1R6c11XW3/Pt9dbLdQvOJGFAy+B2K6v6PtRWBGQ
2 changed files with 22 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

24
hub/services/static/js/price-calculator/ui-manager.js
View file

@ -87,22 +87,22 @@ class UIManager {
updateAddonPricingDisplay(domManager, mandatoryAddons, selectedOptionalAddons) { updateAddonPricingDisplay(domManager, mandatoryAddons, selectedOptionalAddons) {
// Get references to the managed service includes elements // Get references to the managed service includes elements
const managedServiceIncludesContainer = domManager.get('managedServiceIncludesContainer'); const managedServiceIncludesContainer = domManager.get('managedServiceIncludesContainer');
const managedServiceToggleButton = domManager.get('managedServiceToggleButton');
if (managedServiceIncludesContainer) { if (managedServiceIncludesContainer) {
// Clear existing content // Clear existing content
managedServiceIncludesContainer.innerHTML = ''; managedServiceIncludesContainer.innerHTML = '';
// Show/hide the toggle button based on mandatory addons // Always add "Compute" as the first item
const hasMandatoryAddons = mandatoryAddons && mandatoryAddons.length > 0; const computeRow = document.createElement('div');
computeRow.className = 'd-flex justify-content-between small text-muted mb-1';
// Only control button visibility - let Bootstrap handle collapse behavior completely computeRow.innerHTML = `
if (managedServiceToggleButton) { <span>Compute (vCPUs & Memory)</span>
managedServiceToggleButton.style.display = hasMandatoryAddons ? 'inline-block' : 'none'; <span>Included</span>
} `;
managedServiceIncludesContainer.appendChild(computeRow);
// Add mandatory addons to the managed service includes section // Add mandatory addons to the managed service includes section
if (hasMandatoryAddons) { if (mandatoryAddons && mandatoryAddons.length > 0) {
mandatoryAddons.forEach(addon => { mandatoryAddons.forEach(addon => {
const addonRow = document.createElement('div'); const addonRow = document.createElement('div');
addonRow.className = 'd-flex justify-content-between small text-muted mb-1'; addonRow.className = 'd-flex justify-content-between small text-muted mb-1';
@ -126,10 +126,10 @@ class UIManager {
if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { if (selectedOptionalAddons && selectedOptionalAddons.length > 0) {
selectedOptionalAddons.forEach(addon => { selectedOptionalAddons.forEach(addon => {
const addonRow = document.createElement('div'); const addonRow = document.createElement('div');
addonRow.className = 'd-flex justify-content-between mb-2'; addonRow.className = 'd-flex justify-content-between align-items-center mb-2';
addonRow.innerHTML = ` addonRow.innerHTML = `
<span>Add-on: ${addon.name}</span> <span class="text-nowrap flex-shrink-1" style="min-width: 0;">Add-on: ${addon.name}</span>
<span class="fw-bold">CHF ${addon.price}</span> <span class="fw-bold text-nowrap flex-shrink-0" style="min-width: 110px; text-align: right;">CHF ${addon.price}</span>
`; `;
addonPricingContainer.appendChild(addonRow); addonPricingContainer.appendChild(addonRow);
}); });

20
hub/services/templates/services/offering_detail.html
View file

@ -440,13 +440,13 @@ function selectPlan(element) {
<!-- Managed Service Section --> <!-- Managed Service Section -->
<div class="mb-3"> <div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2"> <div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center"> <div class="d-flex align-items-center flex-shrink-1" style="min-width: 0; max-width: calc(100% - 120px);">
<span>Managed Service (incl. Compute)</span> <span class="text-nowrap me-1">Managed Service</span>
<button class="btn btn-link btn-sm p-0 ms-2 text-muted" type="button" data-bs-toggle="collapse" data-bs-target="#managedServiceIncludes" aria-expanded="false" aria-controls="managedServiceIncludes" title="Show included mandatory add-ons" style="display: none;"> <button class="btn btn-link btn-sm p-0 text-muted flex-shrink-0" type="button" data-bs-toggle="collapse" data-bs-target="#managedServiceIncludes" aria-expanded="false" aria-controls="managedServiceIncludes" title="Show what's included" id="managedServiceToggleButton">
<i class="bi bi-info-circle" id="managedServiceToggleIcon"></i> <i class="bi bi-info-circle" id="managedServiceToggleIcon"></i>
</button> </button>
</div> </div>
<span class="fw-bold">CHF <span id="managedServicePrice">0.00</span></span> <span class="fw-bold text-nowrap flex-shrink-0" style="min-width: 110px; text-align: right;">CHF <span id="managedServicePrice">0.00</span></span>
</div> </div>
<!-- What's included in managed service (collapsible) --> <!-- What's included in managed service (collapsible) -->
@ -460,9 +460,9 @@ function selectPlan(element) {
</div> </div>
<!-- Storage - separate billable item --> <!-- Storage - separate billable item -->
<div class="d-flex justify-content-between mb-2"> <div class="d-flex justify-content-between align-items-center mb-2">
<span>Storage - <span id="storageAmount">20</span> GB</span> <span class="text-nowrap flex-shrink-1" style="min-width: 0;">Storage - <span id="storageAmount">20</span> GB</span>
<span class="fw-bold">CHF <span id="storagePrice">0.00</span></span> <span class="fw-bold text-nowrap flex-shrink-0" style="min-width: 110px; text-align: right;">CHF <span id="storagePrice">0.00</span></span>
</div> </div>
<!-- Optional Addons Pricing --> <!-- Optional Addons Pricing -->
@ -471,9 +471,9 @@ function selectPlan(element) {
</div> </div>
<hr> <hr>
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between align-items-center">
<span class="fs-5 fw-bold">Total Monthly Price</span> <span class="fs-5 fw-bold text-nowrap flex-shrink-1" style="min-width: 0;">Total Monthly Price</span>
<span class="fs-4 fw-bold text-primary">CHF <span id="totalPrice">0.00</span></span> <span class="fs-4 fw-bold text-primary text-nowrap flex-shrink-0" style="min-width: 120px; text-align: right;">CHF <span id="totalPrice">0.00</span></span>
</div> </div>
<small class="text-muted mt-2 d-block"> <small class="text-muted mt-2 d-block">
<i class="bi bi-info-circle me-1"></i> <i class="bi bi-info-circle me-1"></i>