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

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

@ -440,13 +440,13 @@ function selectPlan(element) {
<!-- Managed Service Section -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<span>Managed Service (incl. Compute)</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;">
<div class="d-flex align-items-center flex-shrink-1" style="min-width: 0; max-width: calc(100% - 120px);">
<span class="text-nowrap me-1">Managed Service</span>
<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>
</button>
</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>
<!-- What's included in managed service (collapsible) -->
@ -460,9 +460,9 @@ function selectPlan(element) {
</div>
<!-- Storage - separate billable item -->
<div class="d-flex justify-content-between mb-2">
<span>Storage - <span id="storageAmount">20</span> GB</span>
<span class="fw-bold">CHF <span id="storagePrice">0.00</span></span>
<div class="d-flex justify-content-between align-items-center mb-2">
<span class="text-nowrap flex-shrink-1" style="min-width: 0;">Storage - <span id="storageAmount">20</span> GB</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>
<!-- Optional Addons Pricing -->
@ -471,9 +471,9 @@ function selectPlan(element) {
</div>
<hr>
<div class="d-flex justify-content-between">
<span class="fs-5 fw-bold">Total Monthly Price</span>
<span class="fs-4 fw-bold text-primary">CHF <span id="totalPrice">0.00</span></span>
<div class="d-flex justify-content-between align-items-center">
<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 text-nowrap flex-shrink-0" style="min-width: 120px; text-align: right;">CHF <span id="totalPrice">0.00</span></span>
</div>
<small class="text-muted mt-2 d-block">
<i class="bi bi-info-circle me-1"></i>