diff --git a/.gitignore b/.gitignore index 7487dec..63eb1b0 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ wheels/ media/ deployment/secret.yaml *.json +static/ diff --git a/Dockerfile b/Dockerfile index 89fa732..21e6ece 100644 --- a/Dockerfile +++ b/Dockerfile @@ -35,6 +35,6 @@ RUN uv sync --frozen \ && chgrp -R 0 /app \ && chmod -R g=u /app \ && chmod g+w /app/config/caddy/Caddyfile \ - && SECRET_KEY= python -m hub collectstatic --noinput + && SECRET_KEY=dummy python -m hub build_assets --force CMD ["/usr/local/bin/runhub.sh"] \ No newline at end of file diff --git a/SVG_SUPPORT.md b/SVG_SUPPORT.md new file mode 100644 index 0000000..32322a6 --- /dev/null +++ b/SVG_SUPPORT.md @@ -0,0 +1,176 @@ +# SVG Support in Image Library + +## Overview + +The Image Library now supports SVG (Scalable Vector Graphics) files alongside traditional raster image formats. This enhancement allows you to upload, manage, and display SVG images with the same ease as JPEG, PNG, and other image formats. + +## Supported Formats + +The Image Library now supports: +- **Raster Images**: JPEG, PNG, GIF, WebP, BMP, TIFF +- **Vector Images**: SVG + +## Features + +### 1. SVG File Validation +- SVG files are validated to ensure they contain valid XML structure +- File size limits apply (max 1MB by default) +- MIME type detection for proper handling + +### 2. Automatic Dimension Detection +- SVG dimensions are extracted from `width` and `height` attributes +- Falls back to `viewBox` if width/height attributes are missing +- Provides sensible defaults (100x100) if dimensions cannot be determined + +### 3. Proper Rendering +- **Template Tags**: SVG images use `` tags for optimal rendering +- **Admin Interface**: SVG thumbnails display correctly in the admin +- **Form Widgets**: SVG previews work in form interfaces + +### 4. Template Tag Support +The `image_library_img` template tag automatically handles SVG files: + +```html + +{% image_library_img "my-svg-logo" css_class="logo" %} + + + + + + +``` + +## Usage + +### 1. Uploading SVG Images + +1. Go to the Django admin interface +2. Navigate to **Services > Image Library** +3. Click **Add Image** +4. Choose your SVG file in the image field +5. Fill in the required fields (name, alt text, etc.) +6. Save the image + +### 2. Using SVG Images in Templates + +```html + +{% load image_library %} + + +{% image_library_img "my-logo" css_class="img-fluid" %} +{% image_library_img "my-icon" css_class="icon" width="24" height="24" %} + + +{% image_library_url "my-logo" %} +``` + +### 3. Checking if an Image is SVG + +In Python code: +```python +from hub.services.models.images import ImageLibrary + +image = ImageLibrary.objects.get(slug="my-image") +if image.is_svg(): + print("This is an SVG image") + print(f"MIME type: {image.get_mime_type()}") +``` + +## Migration + +### Existing Images +All existing raster images continue to work without any changes. The migration is backward compatible. + +### Updating Image Properties +If you want to update image properties for all existing images: + +```bash +uv run --extra dev manage.py update_image_properties +``` + +## Benefits + +1. **Scalability**: SVG images scale perfectly at any size +2. **Performance**: SVG files are typically smaller than high-resolution raster images +3. **Flexibility**: SVG images can be styled with CSS +4. **Accessibility**: SVG images provide better accessibility options +5. **Consistency**: All images are managed through the same unified interface + +## Technical Details + +### Model Changes +- Changed `ImageField` to `FileField` with custom validation +- Added `is_svg()` method to check if file is SVG +- Added `get_mime_type()` method to determine file type +- Enhanced `_update_image_properties()` to handle SVG dimensions + +### Validation +- SVG files are validated as valid XML +- File size limits are enforced +- MIME type checking ensures only valid image/SVG files are accepted + +### Rendering +- SVG files use `` tags for optimal rendering +- Fallback `` tags are provided for compatibility +- Admin interface properly displays SVG thumbnails + +## File Size Considerations + +SVG files are typically much smaller than equivalent raster images: +- **Simple logos**: 1-5KB +- **Complex illustrations**: 10-50KB +- **Very complex graphics**: 100KB+ + +This makes SVG files ideal for: +- Logos and brand assets +- Icons and symbols +- Simple illustrations +- Graphics that need to scale + +## Browser Support + +SVG support is excellent across all modern browsers: +- Chrome: Full support +- Firefox: Full support +- Safari: Full support +- Edge: Full support +- Internet Explorer 9+: Full support + +## Best Practices + +1. **Use SVG for**: + - Logos and brand assets + - Icons and symbols + - Simple illustrations + - Graphics that need to scale + +2. **Use raster images for**: + - Photographs + - Complex graphics with many colors + - Images from external sources + +3. **Optimize SVG files**: + - Remove unnecessary metadata + - Use simple shapes when possible + - Consider using SVG optimization tools + +## Troubleshooting + +### SVG Not Displaying +- Check that the SVG file is valid XML +- Ensure the file has proper width/height or viewBox attributes +- Verify the file size is under the limit (1MB) + +### Wrong Dimensions +- SVG dimensions are extracted from width/height attributes or viewBox +- If dimensions appear wrong, check the SVG source +- Use the `update_image_properties` command to refresh dimensions + +### Upload Errors +- Ensure the file is valid SVG format +- Check file size limits +- Verify the file contains valid XML structure diff --git a/hub/middleware.py b/hub/middleware.py index 0ee2475..6d49bb6 100644 --- a/hub/middleware.py +++ b/hub/middleware.py @@ -6,12 +6,11 @@ from urllib.parse import urlparse class PrimaryDomainRedirectMiddleware: def __init__(self, get_response): self.get_response = get_response - # Parse the primary hostname from WEBSITE_URL self.primary_host = urlparse(settings.WEBSITE_URL).netloc + self.disable_redirect = settings.DISABLE_REDIRECT def __call__(self, request): - # Skip redirects in DEBUG mode - if settings.DEBUG: + if settings.DEBUG or self.disable_redirect: return self.get_response(request) # Check if the host is different from the primary host diff --git a/hub/services/admin/__init__.py b/hub/services/admin/__init__.py index fba7be9..e8e3470 100644 --- a/hub/services/admin/__init__.py +++ b/hub/services/admin/__init__.py @@ -8,4 +8,5 @@ from .images import * from .leads import * from .pricing import * from .providers import * +from .widgets import * from .services import * diff --git a/hub/services/admin/articles.py b/hub/services/admin/articles.py index 387ec30..5050c76 100644 --- a/hub/services/admin/articles.py +++ b/hub/services/admin/articles.py @@ -7,8 +7,8 @@ from django.utils.html import format_html from django import forms from django.core.exceptions import ValidationError - from ..models import Article +from .widgets import ImageLibraryWidget class ArticleAdminForm(forms.ModelForm): @@ -17,6 +17,9 @@ class ArticleAdminForm(forms.ModelForm): class Meta: model = Article fields = "__all__" + widgets = { + "image_library": ImageLibraryWidget(), + } def clean_title(self): """Validate title length""" @@ -66,11 +69,8 @@ class ArticleAdmin(admin.ModelAdmin): ( "Images", { - "fields": ( - "image_library", - "image", - ), # New image library field and legacy field - "description": "Use the Image Library field for new images. Legacy field will be removed after migration.", + "fields": ("image_library", "og_image"), + "description": "Select an image from the Image Library and optionally upload a specific Open Graph image for social sharing.", }, ), ( diff --git a/hub/services/admin/images.py b/hub/services/admin/images.py index 917d0db..761fd2d 100644 --- a/hub/services/admin/images.py +++ b/hub/services/admin/images.py @@ -72,6 +72,8 @@ class ImageLibraryAdmin(admin.ModelAdmin): Display small thumbnail in list view. """ if obj.image: + # Use img tag for all images in list view to maintain clickability + # SVG files will still display correctly with img tag return format_html( '', obj.image.url, @@ -85,10 +87,23 @@ class ImageLibraryAdmin(admin.ModelAdmin): Display larger preview in detail view. """ if obj.image: - return format_html( - '', - obj.image.url, - ) + if obj.is_svg(): + # For SVG files in detail view, use object tag for better rendering + # This is only for display, not for clickable elements + return format_html( + '
' + '' + '' + "" + "
", + obj.image.url, + obj.image.url, + ) + else: + return format_html( + '', + obj.image.url, + ) return "No Image" image_preview.short_description = "Preview" diff --git a/hub/services/admin/pricing.py b/hub/services/admin/pricing.py index ac9711d..fe8c03e 100644 --- a/hub/services/admin/pricing.py +++ b/hub/services/admin/pricing.py @@ -322,10 +322,26 @@ class DiscountTierInline(admin.TabularInline): class ProgressiveDiscountModelAdmin(admin.ModelAdmin): """Admin configuration for ProgressiveDiscountModel""" - list_display = ("name", "description", "active") + list_display = ("name", "description", "active", "admin_display_discount_tiers") search_fields = ("name", "description") inlines = [DiscountTierInline] + def admin_display_discount_tiers(self, obj): + """Display discount tiers in admin list view""" + tiers = obj.tiers.all().order_by("min_units") + if not tiers: + return "No discount tiers" + return format_html( + "
".join( + [ + f"{tier.min_units}-{tier.max_units if tier.max_units else '∞'} units: {tier.discount_percent}%" + for tier in tiers + ] + ) + ) + + admin_display_discount_tiers.short_description = "Discount Tiers" + @admin.register(VSHNAppCatPrice) class VSHNAppCatPriceAdmin(admin.ModelAdmin): @@ -350,7 +366,12 @@ class VSHNAppCatPriceAdmin(admin.ModelAdmin): if not fees: return "No base fees" return format_html( - "
".join([f"{fee.amount} {fee.currency} ({fee.get_service_level_display()})" for fee in fees]) + "
".join( + [ + f"{fee.amount} {fee.currency} ({fee.get_service_level_display()})" + for fee in fees + ] + ) ) admin_display_base_fees.short_description = "Base Fees" @@ -618,7 +639,12 @@ class VSHNAppCatAddonAdmin(admin.ModelAdmin): if not fees: return "No base fees set" return format_html( - "
".join([f"{fee.amount} {fee.currency} ({fee.get_service_level_display()})" for fee in fees]) + "
".join( + [ + f"{fee.amount} {fee.currency} ({fee.get_service_level_display()})" + for fee in fees + ] + ) ) elif obj.addon_type == "UR": # Unit Rate rates = obj.unit_rates.all() diff --git a/hub/services/admin/providers.py b/hub/services/admin/providers.py index d33e291..51f6d59 100644 --- a/hub/services/admin/providers.py +++ b/hub/services/admin/providers.py @@ -4,9 +4,33 @@ Admin classes for cloud providers and consulting partners from django.contrib import admin from django.utils.html import format_html +from django import forms from adminsortable2.admin import SortableAdminMixin from ..models import CloudProvider, ConsultingPartner, ServiceOffering +from .widgets import ImageLibraryWidget + + +class CloudProviderAdminForm(forms.ModelForm): + """Custom form for CloudProvider admin with image widget""" + + class Meta: + model = CloudProvider + fields = "__all__" + widgets = { + "image_library": ImageLibraryWidget(), + } + + +class ConsultingPartnerAdminForm(forms.ModelForm): + """Custom form for ConsultingPartner admin with image widget""" + + class Meta: + model = ConsultingPartner + fields = "__all__" + widgets = { + "image_library": ImageLibraryWidget(), + } class OfferingInline(admin.StackedInline): @@ -34,6 +58,8 @@ class OfferingInline(admin.StackedInline): class CloudProviderAdmin(SortableAdminMixin, admin.ModelAdmin): """Admin configuration for CloudProvider model""" + form = CloudProviderAdminForm + list_display = ( "name", "slug", @@ -52,11 +78,8 @@ class CloudProviderAdmin(SortableAdminMixin, admin.ModelAdmin): ( "Images", { - "fields": ( - "image_library", - "logo", - ), # New image library field and legacy field - "description": "Use the Image Library field for new images. Legacy field will be removed after migration.", + "fields": ("image_library",), + "description": "Select an image from the Image Library.", }, ), ( @@ -80,8 +103,11 @@ class CloudProviderAdmin(SortableAdminMixin, admin.ModelAdmin): class ConsultingPartnerAdmin(SortableAdminMixin, admin.ModelAdmin): """Admin configuration for ConsultingPartner model""" + form = ConsultingPartnerAdminForm + list_display = ( "name", + "category", "website", "logo_preview", "disable_listing", @@ -89,20 +115,18 @@ class ConsultingPartnerAdmin(SortableAdminMixin, admin.ModelAdmin): "order", ) search_fields = ("name", "description") + list_filter = ("category", "is_featured", "disable_listing") prepopulated_fields = {"slug": ("name",)} filter_horizontal = ("services", "cloud_providers") ordering = ("order",) fieldsets = ( - (None, {"fields": ("name", "slug", "description", "order")}), + (None, {"fields": ("name", "slug", "description", "category", "order")}), ( "Images", { - "fields": ( - "image_library", - "logo", - ), # New image library field and legacy field - "description": "Use the Image Library field for new images. Legacy field will be removed after migration.", + "fields": ("image_library",), + "description": "Select an image from the Image Library.", }, ), ( diff --git a/hub/services/admin/services.py b/hub/services/admin/services.py index b34cf97..92e76e3 100644 --- a/hub/services/admin/services.py +++ b/hub/services/admin/services.py @@ -4,6 +4,7 @@ Admin classes for services and service offerings from django.contrib import admin from django.utils.html import format_html +from django import forms from ..models import ( Service, @@ -13,6 +14,18 @@ from ..models import ( Plan, PlanPrice, ) +from .widgets import ImageLibraryWidget + + +class ServiceAdminForm(forms.ModelForm): + """Custom form for Service admin with image widget""" + + class Meta: + model = Service + fields = "__all__" + widgets = { + "image_library": ImageLibraryWidget(), + } class ExternalLinkInline(admin.TabularInline): @@ -79,6 +92,8 @@ class OfferingInline(admin.StackedInline): class ServiceAdmin(admin.ModelAdmin): """Admin configuration for Service model""" + form = ServiceAdminForm + list_display = ( "name", "logo_preview", @@ -98,11 +113,8 @@ class ServiceAdmin(admin.ModelAdmin): ( "Images", { - "fields": ( - "image_library", - "logo", - ), # New image library field and legacy field - "description": "Use the Image Library field for new images. Legacy field will be removed after migration.", + "fields": ("image_library",), + "description": "Select an image from the Image Library.", }, ), ( diff --git a/hub/services/admin/widgets.py b/hub/services/admin/widgets.py new file mode 100644 index 0000000..13c8e4d --- /dev/null +++ b/hub/services/admin/widgets.py @@ -0,0 +1,232 @@ +""" +Custom widgets for Django admin interface +""" + +from django import forms +from django.utils.html import format_html +from django.utils.safestring import mark_safe +from django.urls import reverse +from django.conf import settings + +from ..models import ImageLibrary + + +class ImageLibraryWidget(forms.Select): + """Custom widget for selecting images from the library with visual preview""" + + def __init__(self, attrs=None): + super().__init__(attrs) + self.attrs.update( + { + "class": "image-library-select", + "style": "display: none;", # Hide the original select + } + ) + + def render(self, name, value, attrs=None, renderer=None): + """Render the widget with image previews""" + # Get the original select element + original_select = super().render(name, value, attrs, renderer) + + # Get all images from the library + images = ImageLibrary.objects.all().order_by("-uploaded_at") + + # Create the visual interface + html_parts = [ + '
', + original_select, # Keep the original select for form submission + '
', + ] + + # Add "No image" option + no_image_selected = "selected" if not value else "" + html_parts.append( + f""" +
+
+ + No image +
+
+ No image selected +
+
+ """ + ) + + # Add each image as an option + for image in images: + selected = "selected" if str(image.pk) == str(value) else "" + image_url = image.image.url if image.image else "" + + # Use img tag for all images in widget to maintain clickability + # SVG files will still display correctly with img tag + preview_html = ( + f'{image.alt_text}' + ) + + html_parts.append( + f""" +
+
+ {preview_html} +
+
+ {image.name} + {image.get_category_display()} + {image.width}x{image.height} +
+
+ """ + ) + + html_parts.extend( + [ + "
", + "
", + self._get_styles(), + self._get_javascript(), + ] + ) + + return mark_safe("".join(html_parts)) + + def _get_styles(self): + """Return CSS styles for the widget""" + return """ + + """ + + def _get_javascript(self): + """Return JavaScript for the widget functionality""" + return """ + + """ + + class Media: + css = { + "all": ( + "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css", + ) + } diff --git a/hub/services/forms/image_library.py b/hub/services/forms/image_library.py index 1770456..6435ef8 100644 --- a/hub/services/forms/image_library.py +++ b/hub/services/forms/image_library.py @@ -40,6 +40,8 @@ class ImageLibraryWidget(forms.Select): for image in images: thumbnail_html = "" if self.show_thumbnails and image.image: + # Use img tag for all images in dropdowns to maintain functionality + # SVG files will still display correctly with img tag thumbnail_html = format_html( ' ', image.image.url, @@ -64,16 +66,21 @@ class ImageLibraryWidget(forms.Select): if value: try: image = ImageLibrary.objects.get(pk=value) + + # Use img tag for all images in preview for consistency + # Add SVG indicator in the text if it's an SVG file + svg_indicator = " (SVG)" if image.is_svg() else "" preview_html = format_html( '
' '' - '

{} - {}x{} - {}

' + '

{} - {}x{} - {}{}

' "
", image.image.url, image.name, image.width or "?", image.height or "?", image.get_file_size_display(), + svg_indicator, ) except ImageLibrary.DoesNotExist: pass diff --git a/hub/services/management/commands/build_assets.py b/hub/services/management/commands/build_assets.py new file mode 100644 index 0000000..e46813a --- /dev/null +++ b/hub/services/management/commands/build_assets.py @@ -0,0 +1,32 @@ +from django.core.management.base import BaseCommand +from django.core.management import call_command + + +class Command(BaseCommand): + help = "Build and compress static assets for production" + + def add_arguments(self, parser): + parser.add_argument( + "--force", + action="store_true", + help="Force compression even if files exist", + ) + + def handle(self, *args, **options): + self.stdout.write("Building static assets...") + + # Compress CSS and JS files + self.stdout.write("Compressing CSS and JavaScript...") + call_command( + "compress", + force=options.get("force", False), + verbosity=options.get("verbosity", 1), + ) + + # Collect all static files + self.stdout.write("Collecting static files...") + call_command( + "collectstatic", interactive=False, verbosity=options.get("verbosity", 1) + ) + + self.stdout.write(self.style.SUCCESS("Successfully built static assets")) diff --git a/hub/services/management/commands/update_image_properties.py b/hub/services/management/commands/update_image_properties.py new file mode 100644 index 0000000..965c823 --- /dev/null +++ b/hub/services/management/commands/update_image_properties.py @@ -0,0 +1,40 @@ +from django.core.management.base import BaseCommand +from hub.services.models.images import ImageLibrary + + +class Command(BaseCommand): + help = "Update image properties for existing images in the library" + + def handle(self, *args, **options): + """ + Update image properties for all images in the library. + This is especially useful after adding SVG support. + """ + images = ImageLibrary.objects.all() + updated_count = 0 + error_count = 0 + + self.stdout.write(f"Updating properties for {images.count()} images...") + + for image in images: + try: + # Force update of image properties + image._update_image_properties() + updated_count += 1 + + # Show progress + if updated_count % 10 == 0: + self.stdout.write(f"Updated {updated_count} images...") + + except Exception as e: + error_count += 1 + self.stdout.write( + self.style.ERROR(f"Error updating {image.name}: {str(e)}") + ) + + self.stdout.write( + self.style.SUCCESS( + f"Successfully updated {updated_count} images. " + f"Errors: {error_count}" + ) + ) diff --git a/hub/services/migrations/0043_remove_article_image_remove_cloudprovider_logo_and_more.py b/hub/services/migrations/0043_remove_article_image_remove_cloudprovider_logo_and_more.py new file mode 100644 index 0000000..e8d3612 --- /dev/null +++ b/hub/services/migrations/0043_remove_article_image_remove_cloudprovider_logo_and_more.py @@ -0,0 +1,29 @@ +# Generated by Django 5.2 on 2025-07-08 09:37 + +from django.db import migrations + + +class Migration(migrations.Migration): + + dependencies = [ + ("services", "0042_fix_image_library_field_name"), + ] + + operations = [ + migrations.RemoveField( + model_name="article", + name="image", + ), + migrations.RemoveField( + model_name="cloudprovider", + name="logo", + ), + migrations.RemoveField( + model_name="consultingpartner", + name="logo", + ), + migrations.RemoveField( + model_name="service", + name="logo", + ), + ] diff --git a/hub/services/migrations/0044_add_svg_support.py b/hub/services/migrations/0044_add_svg_support.py new file mode 100644 index 0000000..904a04f --- /dev/null +++ b/hub/services/migrations/0044_add_svg_support.py @@ -0,0 +1,24 @@ +# Generated by Django 5.2 on 2025-07-08 10:51 + +import hub.services.models.base +import hub.services.models.images +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("services", "0043_remove_article_image_remove_cloudprovider_logo_and_more"), + ] + + operations = [ + migrations.AlterField( + model_name="imagelibrary", + name="image", + field=models.FileField( + help_text="Upload image file (max 1MB) - supports JPEG, PNG, GIF, WebP, BMP, TIFF, and SVG", + upload_to=hub.services.models.images.get_image_upload_path, + validators=[hub.services.models.base.validate_image_or_svg], + ), + ), + ] diff --git a/hub/services/migrations/0045_add_og_image_to_article.py b/hub/services/migrations/0045_add_og_image_to_article.py new file mode 100644 index 0000000..ff4d13d --- /dev/null +++ b/hub/services/migrations/0045_add_og_image_to_article.py @@ -0,0 +1,25 @@ +# Generated by Django 5.2 on 2025-07-08 13:53 + +import hub.services.models.base +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("services", "0044_add_svg_support"), + ] + + operations = [ + migrations.AddField( + model_name="article", + name="og_image", + field=models.ImageField( + blank=True, + help_text="Optional Open Graph image for social sharing (max 1MB). If not provided, the article's main image will be used.", + null=True, + upload_to="article_og_images/", + validators=[hub.services.models.base.validate_image_size], + ), + ), + ] diff --git a/hub/services/migrations/0046_add_partner_category.py b/hub/services/migrations/0046_add_partner_category.py new file mode 100644 index 0000000..109943e --- /dev/null +++ b/hub/services/migrations/0046_add_partner_category.py @@ -0,0 +1,23 @@ +# Generated by Django 5.2 on 2025-07-11 08:40 + +from django.db import migrations, models + + +class Migration(migrations.Migration): + + dependencies = [ + ("services", "0045_add_og_image_to_article"), + ] + + operations = [ + migrations.AddField( + model_name="consultingpartner", + name="category", + field=models.CharField( + choices=[("CONSULTING", "Consulting"), ("TRAINING", "Training")], + default="CONSULTING", + help_text="Category of the consulting partner", + max_length=20, + ), + ), + ] diff --git a/hub/services/models/articles.py b/hub/services/models/articles.py index 8ea50c0..627bea0 100644 --- a/hub/services/models/articles.py +++ b/hub/services/models/articles.py @@ -2,9 +2,8 @@ from django.db import models from django.urls import reverse from django.utils.text import slugify from django.contrib.auth.models import User -from django_prose_editor.fields import ProseEditorField from django.utils import timezone -from .base import validate_image_size +from .base import validate_image_size, get_prose_editor_field from .services import Service from .providers import CloudProvider, ConsultingPartner from .images import ImageReference @@ -16,17 +15,10 @@ class Article(ImageReference): excerpt = models.TextField( max_length=500, help_text="Brief description of the article" ) - content = ProseEditorField() + content = get_prose_editor_field() meta_keywords = models.CharField( max_length=255, blank=True, help_text="SEO keywords separated by commas" ) - # Original image field - keep temporarily for migration - image = models.ImageField( - upload_to="article_images/", - help_text="Title picture for the article", - null=True, - blank=True, - ) author = models.ForeignKey(User, on_delete=models.CASCADE, related_name="articles") article_date = models.DateField( default=timezone.now, help_text="Date of the article publishing" @@ -58,6 +50,15 @@ class Article(ImageReference): help_text="Link this article to a cloud provider", ) + # Open Graph image for social sharing + og_image = models.ImageField( + upload_to="article_og_images/", + blank=True, + null=True, + validators=[validate_image_size], + help_text="Optional Open Graph image for social sharing (max 1MB). If not provided, the article's main image will be used.", + ) + # Publishing controls is_published = models.BooleanField( default=False, help_text="Only published articles are visible to users" @@ -92,10 +93,19 @@ class Article(ImageReference): @property def get_image(self): - """Returns the image from library or falls back to legacy image""" + """Returns the image from the library""" if self.image_library and self.image_library.image: return self.image_library.image - return self.image + return None + + @property + def get_og_image(self): + """Returns the Open Graph image for social sharing""" + # Use specific OG image if available + if self.og_image: + return self.og_image + # Fall back to main article image + return self.get_image @property def related_to(self): diff --git a/hub/services/models/base.py b/hub/services/models/base.py index a047330..cbbcf52 100644 --- a/hub/services/models/base.py +++ b/hub/services/models/base.py @@ -2,6 +2,40 @@ from django.db import models from django.core.exceptions import ValidationError from django.utils.text import slugify from django_prose_editor.fields import ProseEditorField +import mimetypes +import xml.etree.ElementTree as ET + + +# Centralized ProseEditorField configuration +PROSE_EDITOR_CONFIG = { + "extensions": { + "Bold": True, + "Italic": True, + "Strike": True, + "Underline": True, + "HardBreak": True, + "Heading": {"levels": [1, 2, 3, 4, 5, 6]}, + "BulletList": True, + "OrderedList": True, + "Blockquote": True, + "Link": True, + "Table": True, + "History": True, + "HTML": True, + "Typographic": True, + }, + "sanitize": True, +} + + +def get_prose_editor_field(**kwargs): + """ + Returns a ProseEditorField with the standard configuration. + Additional kwargs can be passed to override or add field options. + """ + config = PROSE_EDITOR_CONFIG.copy() + config.update(kwargs) + return ProseEditorField(**config) def validate_image_size(value, mb=1): @@ -10,6 +44,49 @@ def validate_image_size(value, mb=1): raise ValidationError(f"Maximum file size is {mb} MB") +def validate_image_or_svg(value): + """ + Validate that the uploaded file is either a valid image or SVG file. + """ + # Check file size first + validate_image_size(value) + + # Get the file extension and MIME type + filename = value.name.lower() + mime_type, _ = mimetypes.guess_type(filename) + + # List of allowed image formats + allowed_image_types = [ + "image/jpeg", + "image/png", + "image/gif", + "image/webp", + "image/bmp", + "image/tiff", + "image/svg+xml", + ] + + # Check if it's an SVG file + if filename.endswith(".svg") or mime_type == "image/svg+xml": + try: + # Reset file pointer and read content + value.seek(0) + content = value.read() + value.seek(0) # Reset for later use + + # Try to parse as XML to ensure it's valid SVG + ET.fromstring(content) + return # Valid SVG + except ET.ParseError: + raise ValidationError("Invalid SVG file format") + + # For non-SVG files, check MIME type + if mime_type not in allowed_image_types: + raise ValidationError( + f"Unsupported file type. Allowed types: JPEG, PNG, GIF, WebP, BMP, TIFF, SVG" + ) + + class Currency(models.TextChoices): CHF = "CHF", "Swiss Franc" EUR = "EUR", "Euro" @@ -29,6 +106,11 @@ class Unit(models.TextChoices): CPU = "CPU", "vCPU" +class PartnerCategory(models.TextChoices): + CONSULTING = "CONSULTING", "Consulting" + TRAINING = "TRAINING", "Training" + + # This should be a relation, but for now this is good enough :TM: class ManagedServiceProvider(models.TextChoices): VS = "VS", "VSHN" @@ -43,7 +125,7 @@ class ReusableText(models.Model): blank=True, related_name="children", ) - text = ProseEditorField() + text = get_prose_editor_field() class Meta: ordering = ["name"] diff --git a/hub/services/models/content.py b/hub/services/models/content.py index 6f4eba1..a2f1d7b 100644 --- a/hub/services/models/content.py +++ b/hub/services/models/content.py @@ -1,10 +1,10 @@ from django.db import models -from django_prose_editor.fields import ProseEditorField +from .base import get_prose_editor_field class WebsiteFaq(models.Model): question = models.CharField(max_length=200) - answer = ProseEditorField() + answer = get_prose_editor_field() order = models.IntegerField(default=0) class Meta: diff --git a/hub/services/models/images.py b/hub/services/models/images.py index 3bf72f7..ccaa26e 100644 --- a/hub/services/models/images.py +++ b/hub/services/models/images.py @@ -1,12 +1,13 @@ import os - +import mimetypes +import xml.etree.ElementTree as ET from django.db import models from django.utils import timezone from django.contrib.auth.models import User from django.core.exceptions import ValidationError from django.utils.text import slugify from PIL import Image as PILImage -from .base import validate_image_size +from .base import validate_image_or_svg def get_image_upload_path(instance, filename): @@ -35,10 +36,10 @@ class ImageLibrary(models.Model): ) # Image file - image = models.ImageField( + image = models.FileField( upload_to=get_image_upload_path, - validators=[validate_image_size], - help_text="Upload image file (max 1MB)", + validators=[validate_image_or_svg], + help_text="Upload image file (max 1MB) - supports JPEG, PNG, GIF, WebP, BMP, TIFF, and SVG", ) # Image properties (automatically populated) @@ -122,14 +123,86 @@ class ImageLibrary(models.Model): Update image properties like width, height, and file size. """ try: - # Get image dimensions - with PILImage.open(self.image.path) as img: - self.width = img.width - self.height = img.height - # Get file size self.file_size = self.image.size + # Check if it's an SVG file + filename = self.image.name.lower() + mime_type, _ = mimetypes.guess_type(filename) + + if filename.endswith(".svg") or mime_type == "image/svg+xml": + # For SVG files, try to extract dimensions from the SVG content + try: + with open(self.image.path, "r", encoding="utf-8") as f: + content = f.read() + + # Parse the SVG to extract width and height + root = ET.fromstring(content) + + # Get width and height attributes + width = root.get("width") + height = root.get("height") + + # Extract numeric values if they exist + if width and height: + # Remove units like 'px', 'em', etc. and convert to int + try: + width_val = int( + float( + width.replace("px", "") + .replace("em", "") + .replace("pt", "") + ) + ) + height_val = int( + float( + height.replace("px", "") + .replace("em", "") + .replace("pt", "") + ) + ) + self.width = width_val + self.height = height_val + except (ValueError, TypeError): + # If we can't parse dimensions, try viewBox + viewbox = root.get("viewBox") + if viewbox: + try: + viewbox_parts = viewbox.split() + if len(viewbox_parts) >= 4: + self.width = int(float(viewbox_parts[2])) + self.height = int(float(viewbox_parts[3])) + except (ValueError, TypeError): + # Default SVG dimensions if we can't parse + self.width = 100 + self.height = 100 + else: + # Check for viewBox if width/height attributes don't exist + viewbox = root.get("viewBox") + if viewbox: + try: + viewbox_parts = viewbox.split() + if len(viewbox_parts) >= 4: + self.width = int(float(viewbox_parts[2])) + self.height = int(float(viewbox_parts[3])) + except (ValueError, TypeError): + self.width = 100 + self.height = 100 + else: + # Default SVG dimensions + self.width = 100 + self.height = 100 + + except (ET.ParseError, FileNotFoundError, UnicodeDecodeError): + # If SVG parsing fails, set default dimensions + self.width = 100 + self.height = 100 + else: + # For raster images, use PIL + with PILImage.open(self.image.path) as img: + self.width = img.width + self.height = img.height + # Save without calling the full save method to avoid recursion ImageLibrary.objects.filter(pk=self.pk).update( width=self.width, height=self.height, file_size=self.file_size @@ -175,6 +248,28 @@ class ImageLibrary(models.Model): self.usage_count -= 1 self.save(update_fields=["usage_count"]) + def is_svg(self): + """ + Check if the uploaded file is an SVG. + """ + if not self.image: + return False + + filename = self.image.name.lower() + mime_type, _ = mimetypes.guess_type(filename) + + return filename.endswith(".svg") or mime_type == "image/svg+xml" + + def get_mime_type(self): + """ + Return the MIME type of the image file. + """ + if not self.image: + return None + + mime_type, _ = mimetypes.guess_type(self.image.name) + return mime_type + class ImageReference(models.Model): """ diff --git a/hub/services/models/providers.py b/hub/services/models/providers.py index 5567cb9..0877111 100644 --- a/hub/services/models/providers.py +++ b/hub/services/models/providers.py @@ -1,28 +1,20 @@ from django.db import models from django.urls import reverse from django.utils.text import slugify -from django_prose_editor.fields import ProseEditorField -from .base import validate_image_size +from .base import validate_image_size, get_prose_editor_field, PartnerCategory from .images import ImageReference class CloudProvider(ImageReference): name = models.CharField(max_length=100) slug = models.SlugField(unique=True) - description = ProseEditorField() + description = get_prose_editor_field() website = models.URLField() linkedin = models.URLField(blank=True) phone = models.CharField(max_length=25, blank=True, null=True) email = models.EmailField(max_length=254, blank=True, null=True) address = models.TextField(max_length=250, blank=True, null=True) - # Original logo field - keep temporarily for migration - logo = models.ImageField( - upload_to="cloud_provider_logos/", - validators=[validate_image_size], - null=True, - blank=True, - ) order = models.IntegerField(default=0) is_featured = models.BooleanField(default=False) disable_listing = models.BooleanField(default=False) @@ -43,29 +35,30 @@ class CloudProvider(ImageReference): @property def get_logo(self): - """Returns the logo from library or falls back to legacy logo""" + """Returns the logo from the library""" if self.image_library and self.image_library.image: return self.image_library.image - return self.logo + return None class ConsultingPartner(ImageReference): name = models.CharField(max_length=200) slug = models.SlugField(unique=True) - description = ProseEditorField() - # Original logo field - keep temporarily for migration - logo = models.ImageField( - upload_to="partner_logos/", - validators=[validate_image_size], - null=True, - blank=True, - ) + description = get_prose_editor_field() website = models.URLField(blank=True) linkedin = models.URLField(blank=True) phone = models.CharField(max_length=25, blank=True, null=True) email = models.EmailField(max_length=254, blank=True, null=True) address = models.TextField(max_length=250, blank=True, null=True) + # Partner category (hardcoded choices as requested) + category = models.CharField( + max_length=20, + choices=PartnerCategory.choices, + default=PartnerCategory.CONSULTING, + help_text="Category of the partner", + ) + services = models.ManyToManyField( "services.Service", related_name="consulting_partners", blank=True ) @@ -84,7 +77,10 @@ class ConsultingPartner(ImageReference): ordering = ["order"] def __str__(self): - return self.name + return f"{self.name} ({self.get_category_display()})" + + def get_category_display_badge(self): + return f"Servala {self.get_category_display()} Partner" def save(self, *args, **kwargs): if not self.slug: @@ -96,7 +92,7 @@ class ConsultingPartner(ImageReference): @property def get_logo(self): - """Returns the logo from library or falls back to legacy logo""" + """Returns the logo from the library""" if self.image_library and self.image_library.image: return self.image_library.image - return self.logo + return None diff --git a/hub/services/models/services.py b/hub/services/models/services.py index af4c2e0..a884949 100644 --- a/hub/services/models/services.py +++ b/hub/services/models/services.py @@ -11,6 +11,7 @@ from .base import ( ManagedServiceProvider, validate_image_size, Currency, + get_prose_editor_field, ) from .providers import CloudProvider from .images import ImageReference @@ -19,17 +20,10 @@ from .images import ImageReference class Service(ImageReference): name = models.CharField(max_length=200) slug = models.SlugField(max_length=250, unique=True) - description = ProseEditorField() + description = get_prose_editor_field() tagline = models.TextField(max_length=500, blank=True, null=True) - # Original logo field - keep temporarily for migration - logo = models.ImageField( - upload_to="service_logos/", - validators=[validate_image_size], - null=True, - blank=True, - ) categories = models.ManyToManyField(Category, related_name="services") - features = ProseEditorField() + features = get_prose_editor_field() is_featured = models.BooleanField(default=False) is_coming_soon = models.BooleanField(default=False) disable_listing = models.BooleanField(default=False) @@ -62,10 +56,10 @@ class Service(ImageReference): @property def get_logo(self): - """Returns the logo from library or falls back to legacy logo""" + """Returns the logo from the library""" if self.image_library and self.image_library.image: return self.image_library.image - return self.logo + return None class ServiceOffering(models.Model): @@ -81,7 +75,7 @@ class ServiceOffering(models.Model): cloud_provider = models.ForeignKey( CloudProvider, on_delete=models.CASCADE, related_name="offerings" ) - description = ProseEditorField(blank=True, null=True) + description = get_prose_editor_field(blank=True, null=True) offer_description = models.ForeignKey( ReusableText, on_delete=models.PROTECT, @@ -136,7 +130,7 @@ class PlanPrice(models.Model): class Plan(models.Model): name = models.CharField(max_length=100) - description = ProseEditorField(blank=True, null=True) + description = get_prose_editor_field(blank=True, null=True) plan_description = models.ForeignKey( ReusableText, on_delete=models.PROTECT, diff --git a/hub/services/static/admin/css/image_library.css b/hub/services/static/admin/css/image_library.css index 6d589bb..06c4af0 100644 --- a/hub/services/static/admin/css/image_library.css +++ b/hub/services/static/admin/css/image_library.css @@ -76,4 +76,34 @@ .category-badge.other { background-color: #f0f0f0; color: #666; +} + +/* SVG support */ +.svg-preview { + background: #f5f5f5; + border: 1px solid #ddd; + border-radius: 4px; + padding: 5px; +} + +.svg-preview object { + width: 100%; + height: 100%; +} + +/* SVG thumbnails in admin */ +.image-thumbnail object { + background: #f5f5f5; + border-radius: 4px; +} + +.image-preview object { + background: #f5f5f5; + border-radius: 4px; +} + +/* Category badges */ +.category-badge.svg { + background-color: #f3e8ff; + color: #7c3aed; } \ No newline at end of file diff --git a/hub/services/static/css/servala-main.css b/hub/services/static/css/servala-main.css index a766b6e..38874aa 100644 --- a/hub/services/static/css/servala-main.css +++ b/hub/services/static/css/servala-main.css @@ -351,7 +351,8 @@ dl { ol ol, ul ul, ol ul, -ul ol { +ul ol, +li p { margin-bottom: 0 } @@ -12534,4 +12535,8 @@ a.btn:focus { .article-content a { font-weight: bold; text-decoration: underline; +} + +.article-content h2 { + margin-top: 3rem; } \ No newline at end of file diff --git a/hub/services/static/img/servala-logo.png b/hub/services/static/img/servala-logo.png index af1fd9d..af5de89 100644 Binary files a/hub/services/static/img/servala-logo.png and b/hub/services/static/img/servala-logo.png differ diff --git a/hub/services/static/js/price-calculator.js b/hub/services/static/js/price-calculator.js index 9ea66bb..c2c8eb1 100644 --- a/hub/services/static/js/price-calculator.js +++ b/hub/services/static/js/price-calculator.js @@ -1,1841 +1,82 @@ /** - * Price Calculator for Service Offerings - * Handles interactive pricing calculation with sliders and plan selection + * Price Calculator Module Loader + * Loads the modular price calculator components + * The original monolithic code has been split into multiple files for better maintainability */ -class PriceCalculator { - constructor() { - this.pricingData = null; - this.storagePrice = null; - this.currentOffering = null; - this.selectedConfiguration = null; - this.replicaInfo = null; - this.addonsData = null; - this.init(); +(function () { + 'use strict'; + + // Check if we're on a page that needs the price calculator + if (!document.getElementById('cpuRange')) { + return; } - // Initialize calculator elements and event listeners - init() { - // Get offering info from URL - const pathParts = window.location.pathname.split('/'); - if (pathParts.length >= 4 && pathParts[1] === 'offering') { - this.currentOffering = { - provider_slug: pathParts[2], - service_slug: pathParts[3] - }; - } - - // Initialize DOM elements - this.initElements(); - - // Load pricing data and setup calculator - if (this.currentOffering) { - this.loadPricingData(); - } - - // Setup order button click handler - this.setupOrderButton(); - } - - // Initialize DOM element references - initElements() { - // Calculator controls - this.cpuRange = document.getElementById('cpuRange'); - this.memoryRange = document.getElementById('memoryRange'); - this.storageRange = document.getElementById('storageRange'); - this.instancesRange = document.getElementById('instancesRange'); - this.cpuValue = document.getElementById('cpuValue'); - this.memoryValue = document.getElementById('memoryValue'); - this.storageValue = document.getElementById('storageValue'); - this.instancesValue = document.getElementById('instancesValue'); - this.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]'); - this.planSelect = document.getElementById('planSelect'); - - // Addon elements - this.addonsContainer = document.getElementById('addonsContainer'); - this.addonPricingContainer = document.getElementById('addonPricingContainer'); - - // Result display elements - this.planMatchStatus = document.getElementById('planMatchStatus'); - this.selectedPlanDetails = document.getElementById('selectedPlanDetails'); - this.noMatchFound = document.getElementById('noMatchFound'); - - // Plan detail elements - this.planGroup = document.getElementById('planGroup'); - this.planName = document.getElementById('planName'); - this.planDescription = document.getElementById('planDescription'); - this.planCpus = document.getElementById('planCpus'); - this.planMemory = document.getElementById('planMemory'); - this.planInstances = document.getElementById('planInstances'); - this.planServiceLevel = document.getElementById('planServiceLevel'); - this.managedServicePrice = document.getElementById('managedServicePrice'); - this.storagePriceEl = document.getElementById('storagePrice'); - this.storageAmount = document.getElementById('storageAmount'); - this.totalPrice = document.getElementById('totalPrice'); - - // Order button - this.orderButton = document.querySelector('a[href="#order-form"]'); - } - - // Update slider display values (min/max text below sliders) - updateSliderDisplayValues() { - // Update CPU slider display - if (this.cpuRange) { - const cpuMinDisplay = document.getElementById('cpuMinDisplay'); - const cpuMaxDisplay = document.getElementById('cpuMaxDisplay'); - if (cpuMinDisplay) cpuMinDisplay.textContent = this.cpuRange.min; - if (cpuMaxDisplay) cpuMaxDisplay.textContent = this.cpuRange.max; - } - - // Update Memory slider display - if (this.memoryRange) { - const memoryMinDisplay = document.getElementById('memoryMinDisplay'); - const memoryMaxDisplay = document.getElementById('memoryMaxDisplay'); - if (memoryMinDisplay) memoryMinDisplay.textContent = this.memoryRange.min + ' GB'; - if (memoryMaxDisplay) memoryMaxDisplay.textContent = this.memoryRange.max + ' GB'; - } - - // Update Storage slider display - if (this.storageRange) { - const storageMinDisplay = document.getElementById('storageMinDisplay'); - const storageMaxDisplay = document.getElementById('storageMaxDisplay'); - if (storageMinDisplay) storageMinDisplay.textContent = this.storageRange.min + ' GB'; - if (storageMaxDisplay) storageMaxDisplay.textContent = this.storageRange.max + ' GB'; - } - - // Update Instances slider display - if (this.instancesRange) { - const instancesMinDisplay = document.getElementById('instancesMinDisplay'); - const instancesMaxDisplay = document.getElementById('instancesMaxDisplay'); - if (instancesMinDisplay) instancesMinDisplay.textContent = this.instancesRange.min; - if (instancesMaxDisplay) instancesMaxDisplay.textContent = this.instancesRange.max; - } - } - - // Setup order button click handler - setupOrderButton() { - if (this.orderButton) { - this.orderButton.addEventListener('click', (e) => { - e.preventDefault(); - this.handleOrderClick(); - }); - } - } - - // Handle order button click - handleOrderClick() { - if (this.selectedConfiguration) { - // Pre-fill the contact form with configuration details - this.prefillContactForm(); - - // Scroll to the contact form - const contactForm = document.getElementById('order-form'); - if (contactForm) { - contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' }); + // Get the current script's directory + const getCurrentScriptPath = () => { + const scripts = document.getElementsByTagName('script'); + // Find the script that contains 'price-calculator.js' + for (let script of scripts) { + if (script.src.includes('price-calculator.js')) { + const scriptPath = script.src; + const lastSlash = scriptPath.lastIndexOf('/'); + return scriptPath.substring(0, lastSlash + 1); } } - } + return '/static/js/'; + }; - // Pre-fill contact form with selected configuration - prefillContactForm() { - if (!this.selectedConfiguration) return; + // Define the modules to load in dependency order + const modules = [ + 'price-calculator/dom-manager.js', + 'price-calculator/pricing-data-manager.js', + 'price-calculator/plan-manager.js', + 'price-calculator/addon-manager.js', + 'price-calculator/ui-manager.js', + 'price-calculator/order-manager.js', + 'price-calculator/price-calculator.js' + ]; - const config = this.selectedConfiguration; + // Helper function to load a script + const loadScript = (src) => { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.src = src; + script.onload = resolve; + script.onerror = reject; + document.head.appendChild(script); + }); + }; - // Create configuration summary message - const configMessage = this.generateConfigurationMessage(config); + // Load modules sequentially + const loadModules = async () => { + const basePath = getCurrentScriptPath(); - // Find and fill the message textarea in the contact form - const messageField = document.querySelector('#order-form textarea[name="message"]'); - if (messageField) { - messageField.value = configMessage; - } - - // Store configuration details in hidden field - const detailsField = document.querySelector('#order-form input[name="details"]'); - if (detailsField) { - detailsField.value = JSON.stringify({ - plan: config.planName, - vcpus: config.vcpus, - memory: config.memory, - storage: config.storage, - instances: config.instances, - serviceLevel: config.serviceLevel, - totalPrice: config.totalPrice, - addons: config.addons || [] - }); - } - } - - // Generate human-readable configuration message - generateConfigurationMessage(config) { - let message = `I would like to order the following configuration: - -Plan: ${config.planName} (${config.planGroup}) -vCPUs: ${config.vcpus} -Memory: ${config.memory} GB -Storage: ${config.storage} GB -Instances: ${config.instances} -Service Level: ${config.serviceLevel}`; - - // Add addons to the message if any are selected - if (config.addons && config.addons.length > 0) { - message += '\n\nSelected Add-ons:'; - config.addons.forEach(addon => { - message += `\n- ${addon.name}: CHF ${addon.price}`; - }); - } - - message += `\n\nTotal Monthly Price: CHF ${config.totalPrice} - -Please contact me with next steps for ordering this configuration.`; - - return message; - } - - // Load pricing data from API endpoint - async loadPricingData() { - try { - const response = await fetch(`/offering/${this.currentOffering.provider_slug}/${this.currentOffering.service_slug}/?pricing=json`); - if (!response.ok) { - throw new Error('Failed to load pricing data'); - } - - const data = await response.json(); - this.pricingData = data.pricing || data; - - // Extract addons data from the plans - addons are embedded in each plan - this.extractAddonsData(); - - // Extract storage price from the first available plan - this.extractStoragePrice(); - - this.setupEventListeners(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - } catch (error) { - console.error('Error loading pricing data:', error); - this.showError('Failed to load pricing information'); - } - } - - // Extract replica information and storage price from pricing data - extractStoragePrice() { - if (!this.pricingData) return; - - // Find the first plan with storage pricing data and replica info - for (const groupName of Object.keys(this.pricingData)) { - const group = this.pricingData[groupName]; - for (const serviceLevel of Object.keys(group)) { - const plans = group[serviceLevel]; - if (plans.length > 0 && plans[0].storage_price !== undefined) { - this.storagePrice = parseFloat(plans[0].storage_price); - this.replicaInfo = { - ha_replica_min: plans[0].ha_replica_min || 1, - ha_replica_max: plans[0].ha_replica_max || 1 - }; - return; - } + for (const module of modules) { + try { + await loadScript(basePath + module); + } catch (error) { + console.error(`Failed to load module: ${module}`, error); } } - } - // Extract addons data from pricing plans - extractAddonsData() { - if (!this.pricingData) return; - - this.addonsData = {}; - - // Extract addons from the first available plan for each service level - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - const plans = group[serviceLevel]; - if (plans.length > 0) { - // Use the first plan's addon data for this service level - const plan = plans[0]; - const allAddons = []; - - // Add mandatory addons - if (plan.mandatory_addons) { - plan.mandatory_addons.forEach(addon => { - allAddons.push({ - ...addon, - is_mandatory: true, - addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" - }); - }); - } - - // Add optional addons - if (plan.optional_addons) { - plan.optional_addons.forEach(addon => { - allAddons.push({ - ...addon, - is_mandatory: false, - addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" - }); - }); - } - - this.addonsData[serviceLevel] = allAddons; - } - }); - }); - } - - // Setup event listeners for calculator controls - setupEventListeners() { - if (!this.cpuRange || !this.memoryRange || !this.storageRange || !this.instancesRange) return; - - // Setup service levels based on available data - this.setupServiceLevels(); - - // Slider event listeners - this.cpuRange.addEventListener('input', () => { - this.cpuValue.textContent = this.cpuRange.value; - this.updatePricing(); - }); - - this.memoryRange.addEventListener('input', () => { - this.memoryValue.textContent = this.memoryRange.value; - this.updatePricing(); - }); - - this.storageRange.addEventListener('input', () => { - this.storageValue.textContent = this.storageRange.value; - this.updatePricing(); - }); - - this.instancesRange.addEventListener('input', () => { - this.instancesValue.textContent = this.instancesRange.value; - this.updatePricing(); - }); - - // Service level change listeners - this.serviceLevelInputs.forEach(input => { - input.addEventListener('change', () => { - this.updateInstancesSlider(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - }); - }); - - // Plan selection listener - if (this.planSelect) { - this.planSelect.addEventListener('change', () => { - if (this.planSelect.value) { - const selectedPlan = JSON.parse(this.planSelect.value); - - // Update sliders to match selected plan - this.cpuRange.value = selectedPlan.vcpus; - this.memoryRange.value = selectedPlan.ram; - this.cpuValue.textContent = selectedPlan.vcpus; - this.memoryValue.textContent = selectedPlan.ram; - - // Fade out CPU and Memory sliders since plan is manually selected - this.fadeOutSliders(['cpu', 'memory']); - - // Update addons for the new configuration - this.updateAddons(); - // Update pricing with the selected plan - this.updatePricingWithPlan(selectedPlan); - } else { - // Auto-select mode - reset sliders to default values - this.resetSlidersToDefaults(); - - // Auto-select mode - fade sliders back in - this.fadeInSliders(['cpu', 'memory']); - - // Auto-select mode - update addons and recalculate - this.updateAddons(); - this.updatePricing(); - } - }); - } - - // Initialize instances slider - this.updateInstancesSlider(); - } - - // Update instances slider based on service level and replica info - updateInstancesSlider() { - if (!this.instancesRange || !this.replicaInfo) return; - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (serviceLevel === 'Guaranteed Availability') { - // For GA, min is ha_replica_min - this.instancesRange.min = this.replicaInfo.ha_replica_min; - this.instancesRange.value = Math.max(this.instancesRange.value, this.replicaInfo.ha_replica_min); + // Initialize the calculator after modules are loaded + if (window.PriceCalculator) { + window.priceCalculator = new window.PriceCalculator(); } else { - // For BE, min is 1 - this.instancesRange.min = 1; - this.instancesRange.value = Math.max(this.instancesRange.value, 1); + console.error('PriceCalculator class not found after module loading'); } + }; - // Set max to ha_replica_max - this.instancesRange.max = this.replicaInfo.ha_replica_max; - - // Update display value - this.instancesValue.textContent = this.instancesRange.value; - - // Update the min/max display under the slider using direct IDs - const instancesMinDisplay = document.getElementById('instancesMinDisplay'); - const instancesMaxDisplay = document.getElementById('instancesMaxDisplay'); - - if (instancesMinDisplay) instancesMinDisplay.textContent = this.instancesRange.min; - if (instancesMaxDisplay) instancesMaxDisplay.textContent = this.instancesRange.max; + // Start loading modules when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', loadModules); + } else { + loadModules(); } +})(); - // Setup service levels dynamically from pricing data - setupServiceLevels() { - if (!this.pricingData) return; - - const serviceLevelGroup = document.getElementById('serviceLevelGroup'); - if (!serviceLevelGroup) return; - - // Get all available service levels from the pricing data - const availableServiceLevels = new Set(); - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - availableServiceLevels.add(serviceLevel); - }); - }); - - // Clear existing service level buttons - serviceLevelGroup.innerHTML = ''; - - // Create buttons for each available service level - let isFirst = true; - availableServiceLevels.forEach(serviceLevel => { - const inputId = `serviceLevel${serviceLevel.replace(/\s+/g, '')}`; - - // Create radio input - const input = document.createElement('input'); - input.type = 'radio'; - input.className = 'btn-check'; - input.name = 'serviceLevel'; - input.id = inputId; - input.value = serviceLevel; - if (isFirst) { - input.checked = true; - isFirst = false; - } - - // Create label - const label = document.createElement('label'); - label.className = 'btn btn-outline-primary'; - label.setAttribute('for', inputId); - label.textContent = serviceLevel; - - // Add event listener - input.addEventListener('change', () => { - this.updateInstancesSlider(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - }); - - serviceLevelGroup.appendChild(input); - serviceLevelGroup.appendChild(label); - }); - - // Update the serviceLevelInputs reference - this.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]'); - - // Calculate and set slider maximums based on available plans - this will call updateSliderDisplayValues() - this.updateSliderMaximums(); - } - - // Calculate maximum values for sliders based on available plans - updateSliderMaximums() { - if (!this.pricingData || !this.cpuRange || !this.memoryRange) return; - - let maxCpus = 0; - let maxMemory = 0; - - // Find maximum CPU and memory across all plans - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - group[serviceLevel].forEach(plan => { - const planCpus = parseFloat(plan.vcpus); - const planMemory = parseFloat(plan.ram); - - if (planCpus > maxCpus) maxCpus = planCpus; - if (planMemory > maxMemory) maxMemory = planMemory; - }); - }); - }); - - // Set slider maximums with some padding - if (maxCpus > 0) { - this.cpuRange.max = Math.ceil(maxCpus); - } - - if (maxMemory > 0) { - this.memoryRange.max = Math.ceil(maxMemory); - } - - // Update display values after changing min/max - moved to end and call explicitly - this.updateSliderDisplayValues(); - } - - // Populate plan dropdown based on selected service level - populatePlanDropdown() { - if (!this.planSelect || !this.pricingData) return; - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - if (!serviceLevel) return; - - // Clear existing options - this.planSelect.innerHTML = ''; - - // Collect all plans for selected service level - const availablePlans = []; - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - if (group[serviceLevel]) { - group[serviceLevel].forEach(plan => { - availablePlans.push({ - ...plan, - groupName: groupName - }); - }); - } - }); - - // Sort plans by vCPU, then by RAM - availablePlans.sort((a, b) => { - if (parseInt(a.vcpus) !== parseInt(b.vcpus)) { - return parseInt(a.vcpus) - parseInt(b.vcpus); - } - return parseInt(a.ram) - parseInt(b.ram); - }); - - // Add plans to dropdown - availablePlans.forEach(plan => { - const option = document.createElement('option'); - option.value = JSON.stringify(plan); - option.textContent = `${plan.compute_plan} - ${plan.vcpus} vCPUs, ${plan.ram} GB RAM`; - this.planSelect.appendChild(option); - }); - } - - // Update addons based on current configuration - updateAddons() { - if (!this.addonsContainer || !this.addonsData) { - // Hide addons section if no container or data - const addonsSection = document.getElementById('addonsSection'); - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - if (!serviceLevel || !this.addonsData[serviceLevel]) { - // Hide addons section if no service level or no addons for this level - const addonsSection = document.getElementById('addonsSection'); - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - const addons = this.addonsData[serviceLevel]; - - // Clear existing addons - this.addonsContainer.innerHTML = ''; - - // Show or hide addons section based on availability - const addonsSection = document.getElementById('addonsSection'); - if (addons && addons.length > 0) { - if (addonsSection) addonsSection.style.display = 'block'; - } else { - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - // Add each addon - addons.forEach(addon => { - const addonElement = document.createElement('div'); - addonElement.className = `addon-item mb-2 p-2 border rounded ${addon.is_mandatory ? 'bg-light' : ''}`; - - addonElement.innerHTML = ` -
- - -
- `; - - this.addonsContainer.appendChild(addonElement); - - // Add event listener for optional addons - if (!addon.is_mandatory) { - const checkbox = addonElement.querySelector('.addon-checkbox'); - checkbox.addEventListener('change', () => { - // Update addon prices and recalculate total - this.updateAddonPrices(); - this.updatePricing(); - }); - } - }); - - // Update addon prices - this.updateAddonPrices(); - } // Update addon prices based on current configuration - updateAddonPrices() { - if (!this.addonsContainer) return; - - const cpus = parseInt(this.cpuRange?.value || 2); - const memory = parseInt(this.memoryRange?.value || 4); - const storage = parseInt(this.storageRange?.value || 20); - const instances = parseInt(this.instancesRange?.value || 1); - - // Find the current plan data to get variable_unit for addon calculations - const matchedPlan = this.getCurrentPlan(); - const variableUnit = matchedPlan?.variable_unit || 'CPU'; - const units = variableUnit === 'CPU' ? cpus : memory; - const totalUnits = units * instances; - - const addonCheckboxes = this.addonsContainer.querySelectorAll('.addon-checkbox'); - addonCheckboxes.forEach(checkbox => { - const addon = JSON.parse(checkbox.dataset.addon); - const priceElement = checkbox.parentElement.querySelector('.addon-price-value'); - - let calculatedPrice = 0; - - // Calculate addon price based on type - if (addon.addon_type === 'BASE_FEE') { - // Base fee: price per instance - calculatedPrice = parseFloat(addon.price || 0) * instances; - } else if (addon.addon_type === 'UNIT_RATE') { - // Unit rate: price per unit (CPU or memory) across all instances - calculatedPrice = parseFloat(addon.price_per_unit || 0) * totalUnits; - } - - // Update the display price - if (priceElement) { - priceElement.textContent = calculatedPrice.toFixed(2); - } - - // Store the calculated price for later use in total calculations - checkbox.dataset.calculatedPrice = calculatedPrice.toString(); - }); - } - - // Get current plan based on configuration - getCurrentPlan() { - const cpus = parseInt(this.cpuRange?.value || 2); - const memory = parseInt(this.memoryRange?.value || 4); - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (this.planSelect?.value) { - return JSON.parse(this.planSelect.value); - } - - return this.findBestMatchingPlan(cpus, memory, serviceLevel); - } - - // Find best matching plan based on requirements - findBestMatchingPlan(cpus, memory, serviceLevel) { - if (!this.pricingData) return null; - - let bestMatch = null; - let bestScore = Infinity; - - // Iterate through all groups and service levels - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - - if (group[serviceLevel]) { - group[serviceLevel].forEach(plan => { - const planCpus = parseInt(plan.vcpus); - const planMemory = parseInt(plan.ram); - - // Check if plan meets minimum requirements - if (planCpus >= cpus && planMemory >= memory) { - // Calculate efficiency score (lower is better) - const cpuOverhead = planCpus - cpus; - const memoryOverhead = planMemory - memory; - const score = cpuOverhead + memoryOverhead + plan.final_price * 0.1; - - if (score < bestScore) { - bestScore = score; - bestMatch = { - ...plan, - groupName: groupName - }; - } - } - }); - } - }); - - return bestMatch; - } - - // Update pricing with specific plan - updatePricingWithPlan(selectedPlan) { - const storage = parseInt(this.storageRange?.value || 20); - const instances = parseInt(this.instancesRange?.value || 1); - - // Update addon prices first to ensure calculated prices are current - this.updateAddonPrices(); - - this.showPlanDetails(selectedPlan, storage, instances); - this.updateStatusMessage('Plan selected directly!', 'success'); - } - - // Main pricing update function - updatePricing() { - if (!this.pricingData || !this.cpuRange || !this.memoryRange || !this.storageRange || !this.instancesRange) return; - - // Update addon prices first to ensure they're current - this.updateAddonPrices(); - - // Reset plan selection if in auto-select mode - if (!this.planSelect?.value) { - const cpus = parseInt(this.cpuRange.value); - const memory = parseInt(this.memoryRange.value); - const storage = parseInt(this.storageRange.value); - const instances = parseInt(this.instancesRange.value); - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (!serviceLevel) return; - - // Find best matching plan - const matchedPlan = this.findBestMatchingPlan(cpus, memory, serviceLevel); - - if (matchedPlan) { - this.showPlanDetails(matchedPlan, storage, instances); - this.updateStatusMessage('Perfect match found!', 'success'); - } else { - this.showNoMatch(); - } - } else { - // Plan is directly selected, update storage pricing - const selectedPlan = JSON.parse(this.planSelect.value); - const storage = parseInt(this.storageRange.value); - const instances = parseInt(this.instancesRange.value); - - // Update addon prices for current configuration - this.updateAddonPrices(); - this.showPlanDetails(selectedPlan, storage, instances); - this.updateStatusMessage('Plan selected directly!', 'success'); - } - } - - // Show plan details in the UI - showPlanDetails(plan, storage, instances) { - if (!this.selectedPlanDetails) return; - - // Show plan details section - this.planMatchStatus.style.display = 'block'; - this.selectedPlanDetails.style.display = 'block'; - if (this.noMatchFound) this.noMatchFound.style.display = 'none'; - - // Get current service level - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value || 'Best Effort'; - - // Update plan information - if (this.planGroup) this.planGroup.textContent = plan.groupName; - if (this.planName) this.planName.textContent = plan.compute_plan; - if (this.planDescription) this.planDescription.textContent = plan.compute_plan_group_description || ''; - if (this.planCpus) this.planCpus.textContent = plan.vcpus; - if (this.planMemory) this.planMemory.textContent = plan.ram + ' GB'; - if (this.planInstances) this.planInstances.textContent = instances; - if (this.planServiceLevel) this.planServiceLevel.textContent = serviceLevel; - - // Ensure addon prices are calculated with current configuration - this.updateAddonPrices(); - - // Calculate pricing using final price from plan data (which already includes mandatory addons) - // plan.final_price = compute_plan_price + sla_price (where sla_price includes mandatory addons) - const managedServicePricePerInstance = parseFloat(plan.final_price); - - // Collect addon information for display and calculation - let mandatoryAddonTotal = 0; - let optionalAddonTotal = 0; - const mandatoryAddons = []; - const selectedOptionalAddons = []; - - if (this.addonsContainer) { - const addonCheckboxes = this.addonsContainer.querySelectorAll('.addon-checkbox'); - addonCheckboxes.forEach(checkbox => { - const addon = JSON.parse(checkbox.dataset.addon); - const calculatedPrice = parseFloat(checkbox.dataset.calculatedPrice || 0); - - if (addon.is_mandatory) { - // Mandatory addons are already included in plan.final_price - // We collect them for display purposes only - mandatoryAddons.push({ - name: addon.name, - price: calculatedPrice.toFixed(2) - }); - } else if (checkbox.checked) { - // Only count checked optional addons - optionalAddonTotal += calculatedPrice; - selectedOptionalAddons.push({ - name: addon.name, - price: calculatedPrice.toFixed(2) - }); - } - }); - } - - const managedServicePrice = managedServicePricePerInstance * instances; - - // Use storage price from plan data or fallback to instance variable - const storageUnitPrice = plan.storage_price !== undefined ? parseFloat(plan.storage_price) : this.storagePrice; - const storagePriceValue = storage * storageUnitPrice * instances; - - // Total price = managed service price (includes mandatory addons) + storage + optional addons - const totalPriceValue = managedServicePrice + storagePriceValue + optionalAddonTotal; - - // Update pricing display - if (this.managedServicePrice) this.managedServicePrice.textContent = managedServicePrice.toFixed(2); - if (this.storagePriceEl) this.storagePriceEl.textContent = storagePriceValue.toFixed(2); - if (this.storageAmount) this.storageAmount.textContent = storage; - if (this.totalPrice) this.totalPrice.textContent = totalPriceValue.toFixed(2); - - // Update addon pricing display - this.updateAddonPricingDisplay(mandatoryAddons, selectedOptionalAddons); - - // Store current configuration for order button - this.selectedConfiguration = { - planName: plan.compute_plan, - planGroup: plan.groupName, - vcpus: plan.vcpus, - memory: plan.ram, - storage: storage, - instances: instances, - serviceLevel: serviceLevel, - totalPrice: totalPriceValue.toFixed(2), - addons: [...mandatoryAddons, ...selectedOptionalAddons] - }; - } - - // Update addon pricing display in the results panel - updateAddonPricingDisplay(mandatoryAddons, selectedOptionalAddons) { - if (!this.addonPricingContainer) return; - - // Clear existing addon pricing display - this.addonPricingContainer.innerHTML = ''; - - // Add mandatory addons to pricing breakdown (for informational purposes only) - if (mandatoryAddons && mandatoryAddons.length > 0) { - // Add a note explaining mandatory addons are included - const mandatoryNote = document.createElement('div'); - mandatoryNote.className = 'text-muted small mb-2'; - mandatoryNote.innerHTML = 'Required add-ons (included in managed service price):'; - this.addonPricingContainer.appendChild(mandatoryNote); - - mandatoryAddons.forEach(addon => { - const addonRow = document.createElement('div'); - addonRow.className = 'd-flex justify-content-between mb-1 ps-3'; - addonRow.innerHTML = ` - ${addon.name} - CHF ${addon.price} - `; - this.addonPricingContainer.appendChild(addonRow); - }); - - // Add separator if there are also optional addons - if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { - const separator = document.createElement('hr'); - separator.className = 'my-2'; - this.addonPricingContainer.appendChild(separator); - } - } - - // Add optional addons to pricing breakdown (these are added to total) - if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { - selectedOptionalAddons.forEach(addon => { - const addonRow = document.createElement('div'); - addonRow.className = 'd-flex justify-content-between mb-2'; - addonRow.innerHTML = ` - Add-on: ${addon.name} - CHF ${addon.price} - `; - this.addonPricingContainer.appendChild(addonRow); - }); - } - } - - // Show no matching plan found - showNoMatch() { - if (this.planMatchStatus) this.planMatchStatus.style.display = 'none'; - if (this.selectedPlanDetails) this.selectedPlanDetails.style.display = 'none'; - if (this.noMatchFound) this.noMatchFound.style.display = 'block'; - } - - // Update status message - updateStatusMessage(message, type) { - if (!this.planMatchStatus) return; - - const iconClass = type === 'success' ? 'bi-check-circle' : 'bi-info-circle'; - const textClass = type === 'success' ? 'text-success' : ''; - const alertClass = type === 'success' ? 'alert-success' : 'alert-info'; - - this.planMatchStatus.innerHTML = `${message}`; - this.planMatchStatus.className = `alert ${alertClass} mb-3`; - this.planMatchStatus.style.display = 'block'; - } - - // Show error message - showError(message) { - if (this.planMatchStatus) { - this.planMatchStatus.innerHTML = `${message}`; - this.planMatchStatus.className = 'alert alert-danger mb-3'; - this.planMatchStatus.style.display = 'block'; - } - } - - // Fade out specified sliders when plan is manually selected - fadeOutSliders(sliderTypes) { - sliderTypes.forEach(type => { - const sliderContainer = this.getSliderContainer(type); - if (sliderContainer) { - sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; - sliderContainer.style.opacity = '0.3'; - sliderContainer.style.pointerEvents = 'none'; - - // Add visual indicator that sliders are disabled - const slider = sliderContainer.querySelector('.form-range'); - if (slider) { - slider.style.cursor = 'not-allowed'; - } - } - }); - } - - // Fade in specified sliders when auto-select mode is chosen - fadeInSliders(sliderTypes) { - sliderTypes.forEach(type => { - const sliderContainer = this.getSliderContainer(type); - if (sliderContainer) { - sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; - sliderContainer.style.opacity = '1'; - sliderContainer.style.pointerEvents = 'auto'; - - // Remove visual indicator - const slider = sliderContainer.querySelector('.form-range'); - if (slider) { - slider.style.cursor = 'pointer'; - } - } - }); - } - - // Get slider container element by type - getSliderContainer(type) { - switch (type) { - case 'cpu': - return this.cpuRange?.closest('.mb-4'); - case 'memory': - return this.memoryRange?.closest('.mb-4'); - case 'storage': - return this.storageRange?.closest('.mb-4'); - case 'instances': - return this.instancesRange?.closest('.mb-4'); - default: - return null; - } - } - - // Reset sliders to their default values - resetSlidersToDefaults() { - // Reset CPU slider to default value (2) - if (this.cpuRange) { - this.cpuRange.value = '2'; - if (this.cpuValue) this.cpuValue.textContent = '2'; - } - - // Reset Memory slider to default value (4 GB) - if (this.memoryRange) { - this.memoryRange.value = '4'; - if (this.memoryValue) this.memoryValue.textContent = '4'; - } - - // Reset Storage slider to default value (20 GB) - if (this.storageRange) { - this.storageRange.value = '20'; - if (this.storageValue) this.storageValue.textContent = '20'; - } - - // Reset Instances slider to default value (1) - if (this.instancesRange) { - this.instancesRange.value = '1'; - if (this.instancesValue) this.instancesValue.textContent = '1'; - } - } - - // Setup order button click handler - setupOrderButton() { - if (this.orderButton) { - this.orderButton.addEventListener('click', (e) => { - e.preventDefault(); - this.handleOrderClick(); - }); - } - } - - // Handle order button click - handleOrderClick() { - if (this.selectedConfiguration) { - // Pre-fill the contact form with configuration details - this.prefillContactForm(); - - // Scroll to the contact form - const contactForm = document.getElementById('order-form'); - if (contactForm) { - contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' }); - } - } - } - - // Pre-fill contact form with selected configuration - prefillContactForm() { - if (!this.selectedConfiguration) return; - - const config = this.selectedConfiguration; - - // Create configuration summary message - const configMessage = this.generateConfigurationMessage(config); - - // Find and fill the message textarea in the contact form - const messageField = document.querySelector('#order-form textarea[name="message"]'); - if (messageField) { - messageField.value = configMessage; - } - - // Store configuration details in hidden field - const detailsField = document.querySelector('#order-form input[name="details"]'); - if (detailsField) { - detailsField.value = JSON.stringify({ - plan: config.planName, - vcpus: config.vcpus, - memory: config.memory, - storage: config.storage, - instances: config.instances, - serviceLevel: config.serviceLevel, - totalPrice: config.totalPrice, - addons: config.addons || [] - }); - } - } - - // Generate human-readable configuration message - generateConfigurationMessage(config) { - let message = `I would like to order the following configuration: - -Plan: ${config.planName} (${config.planGroup}) -vCPUs: ${config.vcpus} -Memory: ${config.memory} GB -Storage: ${config.storage} GB -Instances: ${config.instances} -Service Level: ${config.serviceLevel}`; - - // Add addons to the message if any are selected - if (config.addons && config.addons.length > 0) { - message += '\n\nSelected Add-ons:'; - config.addons.forEach(addon => { - message += `\n- ${addon.name}: CHF ${addon.price}`; - }); - } - - message += `\n\nTotal Monthly Price: CHF ${config.totalPrice} - -Please contact me with next steps for ordering this configuration.`; - - return message; - } - - // Load pricing data from API endpoint - async loadPricingData() { - try { - const response = await fetch(`/offering/${this.currentOffering.provider_slug}/${this.currentOffering.service_slug}/?pricing=json`); - if (!response.ok) { - throw new Error('Failed to load pricing data'); - } - - const data = await response.json(); - this.pricingData = data.pricing || data; - - // Extract addons data from the plans - addons are embedded in each plan - this.extractAddonsData(); - - // Extract storage price from the first available plan - this.extractStoragePrice(); - - this.setupEventListeners(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - } catch (error) { - console.error('Error loading pricing data:', error); - this.showError('Failed to load pricing information'); - } - } - - // Extract replica information and storage price from pricing data - extractStoragePrice() { - if (!this.pricingData) return; - - // Find the first plan with storage pricing data and replica info - for (const groupName of Object.keys(this.pricingData)) { - const group = this.pricingData[groupName]; - for (const serviceLevel of Object.keys(group)) { - const plans = group[serviceLevel]; - if (plans.length > 0 && plans[0].storage_price !== undefined) { - this.storagePrice = parseFloat(plans[0].storage_price); - this.replicaInfo = { - ha_replica_min: plans[0].ha_replica_min || 1, - ha_replica_max: plans[0].ha_replica_max || 1 - }; - return; - } - } - } - } - - // Extract addons data from pricing plans - extractAddonsData() { - if (!this.pricingData) return; - - this.addonsData = {}; - - // Extract addons from the first available plan for each service level - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - const plans = group[serviceLevel]; - if (plans.length > 0) { - // Use the first plan's addon data for this service level - const plan = plans[0]; - const allAddons = []; - - // Add mandatory addons - if (plan.mandatory_addons) { - plan.mandatory_addons.forEach(addon => { - allAddons.push({ - ...addon, - is_mandatory: true, - addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" - }); - }); - } - - // Add optional addons - if (plan.optional_addons) { - plan.optional_addons.forEach(addon => { - allAddons.push({ - ...addon, - is_mandatory: false, - addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" - }); - }); - } - - this.addonsData[serviceLevel] = allAddons; - } - }); - }); - } - - // Setup event listeners for calculator controls - setupEventListeners() { - if (!this.cpuRange || !this.memoryRange || !this.storageRange || !this.instancesRange) return; - - // Setup service levels based on available data - this.setupServiceLevels(); - - // Slider event listeners - this.cpuRange.addEventListener('input', () => { - this.cpuValue.textContent = this.cpuRange.value; - this.updatePricing(); - }); - - this.memoryRange.addEventListener('input', () => { - this.memoryValue.textContent = this.memoryRange.value; - this.updatePricing(); - }); - - this.storageRange.addEventListener('input', () => { - this.storageValue.textContent = this.storageRange.value; - this.updatePricing(); - }); - - this.instancesRange.addEventListener('input', () => { - this.instancesValue.textContent = this.instancesRange.value; - this.updatePricing(); - }); - - // Service level change listeners - this.serviceLevelInputs.forEach(input => { - input.addEventListener('change', () => { - this.updateInstancesSlider(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - }); - }); - - // Plan selection listener - if (this.planSelect) { - this.planSelect.addEventListener('change', () => { - if (this.planSelect.value) { - const selectedPlan = JSON.parse(this.planSelect.value); - - // Update sliders to match selected plan - this.cpuRange.value = selectedPlan.vcpus; - this.memoryRange.value = selectedPlan.ram; - this.cpuValue.textContent = selectedPlan.vcpus; - this.memoryValue.textContent = selectedPlan.ram; - - // Fade out CPU and Memory sliders since plan is manually selected - this.fadeOutSliders(['cpu', 'memory']); - - // Update addons for the new configuration - this.updateAddons(); - // Update pricing with the selected plan - this.updatePricingWithPlan(selectedPlan); - } else { - // Auto-select mode - reset sliders to default values - this.resetSlidersToDefaults(); - - // Auto-select mode - fade sliders back in - this.fadeInSliders(['cpu', 'memory']); - - // Auto-select mode - update addons and recalculate - this.updateAddons(); - this.updatePricing(); - } - }); - } - - // Initialize instances slider - this.updateInstancesSlider(); - } - - // Update instances slider based on service level and replica info - updateInstancesSlider() { - if (!this.instancesRange || !this.replicaInfo) return; - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (serviceLevel === 'Guaranteed Availability') { - // For GA, min is ha_replica_min - this.instancesRange.min = this.replicaInfo.ha_replica_min; - this.instancesRange.value = Math.max(this.instancesRange.value, this.replicaInfo.ha_replica_min); - } else { - // For BE, min is 1 - this.instancesRange.min = 1; - this.instancesRange.value = Math.max(this.instancesRange.value, 1); - } - - // Set max to ha_replica_max - this.instancesRange.max = this.replicaInfo.ha_replica_max; - - // Update display value - this.instancesValue.textContent = this.instancesRange.value; - - // Update the min/max display under the slider using direct IDs - const instancesMinDisplay = document.getElementById('instancesMinDisplay'); - const instancesMaxDisplay = document.getElementById('instancesMaxDisplay'); - - if (instancesMinDisplay) instancesMinDisplay.textContent = this.instancesRange.min; - if (instancesMaxDisplay) instancesMaxDisplay.textContent = this.instancesRange.max; - } - - // Setup service levels dynamically from pricing data - setupServiceLevels() { - if (!this.pricingData) return; - - const serviceLevelGroup = document.getElementById('serviceLevelGroup'); - if (!serviceLevelGroup) return; - - // Get all available service levels from the pricing data - const availableServiceLevels = new Set(); - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - availableServiceLevels.add(serviceLevel); - }); - }); - - // Clear existing service level buttons - serviceLevelGroup.innerHTML = ''; - - // Create buttons for each available service level - let isFirst = true; - availableServiceLevels.forEach(serviceLevel => { - const inputId = `serviceLevel${serviceLevel.replace(/\s+/g, '')}`; - - // Create radio input - const input = document.createElement('input'); - input.type = 'radio'; - input.className = 'btn-check'; - input.name = 'serviceLevel'; - input.id = inputId; - input.value = serviceLevel; - if (isFirst) { - input.checked = true; - isFirst = false; - } - - // Create label - const label = document.createElement('label'); - label.className = 'btn btn-outline-primary'; - label.setAttribute('for', inputId); - label.textContent = serviceLevel; - - // Add event listener - input.addEventListener('change', () => { - this.updateInstancesSlider(); - this.populatePlanDropdown(); - this.updateAddons(); - this.updatePricing(); - }); - - serviceLevelGroup.appendChild(input); - serviceLevelGroup.appendChild(label); - }); - - // Update the serviceLevelInputs reference - this.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]'); - - // Calculate and set slider maximums based on available plans - this will call updateSliderDisplayValues() - this.updateSliderMaximums(); - } - - // Calculate maximum values for sliders based on available plans - updateSliderMaximums() { - if (!this.pricingData || !this.cpuRange || !this.memoryRange) return; - - let maxCpus = 0; - let maxMemory = 0; - - // Find maximum CPU and memory across all plans - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - Object.keys(group).forEach(serviceLevel => { - group[serviceLevel].forEach(plan => { - const planCpus = parseFloat(plan.vcpus); - const planMemory = parseFloat(plan.ram); - - if (planCpus > maxCpus) maxCpus = planCpus; - if (planMemory > maxMemory) maxMemory = planMemory; - }); - }); - }); - - // Set slider maximums with some padding - if (maxCpus > 0) { - this.cpuRange.max = Math.ceil(maxCpus); - } - - if (maxMemory > 0) { - this.memoryRange.max = Math.ceil(maxMemory); - } - - // Update display values after changing min/max - moved to end and call explicitly - this.updateSliderDisplayValues(); - } - - // Populate plan dropdown based on selected service level - populatePlanDropdown() { - if (!this.planSelect || !this.pricingData) return; - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - if (!serviceLevel) return; - - // Clear existing options - this.planSelect.innerHTML = ''; - - // Collect all plans for selected service level - const availablePlans = []; - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - if (group[serviceLevel]) { - group[serviceLevel].forEach(plan => { - availablePlans.push({ - ...plan, - groupName: groupName - }); - }); - } - }); - - // Sort plans by vCPU, then by RAM - availablePlans.sort((a, b) => { - if (parseInt(a.vcpus) !== parseInt(b.vcpus)) { - return parseInt(a.vcpus) - parseInt(b.vcpus); - } - return parseInt(a.ram) - parseInt(b.ram); - }); - - // Add plans to dropdown - availablePlans.forEach(plan => { - const option = document.createElement('option'); - option.value = JSON.stringify(plan); - option.textContent = `${plan.compute_plan} - ${plan.vcpus} vCPUs, ${plan.ram} GB RAM`; - this.planSelect.appendChild(option); - }); - } - - // Update addons based on current configuration - updateAddons() { - if (!this.addonsContainer || !this.addonsData) { - // Hide addons section if no container or data - const addonsSection = document.getElementById('addonsSection'); - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - if (!serviceLevel || !this.addonsData[serviceLevel]) { - // Hide addons section if no service level or no addons for this level - const addonsSection = document.getElementById('addonsSection'); - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - const addons = this.addonsData[serviceLevel]; - - // Clear existing addons - this.addonsContainer.innerHTML = ''; - - // Show or hide addons section based on availability - const addonsSection = document.getElementById('addonsSection'); - if (addons && addons.length > 0) { - if (addonsSection) addonsSection.style.display = 'block'; - } else { - if (addonsSection) addonsSection.style.display = 'none'; - return; - } - - // Add each addon - addons.forEach(addon => { - const addonElement = document.createElement('div'); - addonElement.className = `addon-item mb-2 p-2 border rounded ${addon.is_mandatory ? 'bg-light' : ''}`; - - addonElement.innerHTML = ` -
- - -
- `; - - this.addonsContainer.appendChild(addonElement); - - // Add event listener for optional addons - if (!addon.is_mandatory) { - const checkbox = addonElement.querySelector('.addon-checkbox'); - checkbox.addEventListener('change', () => { - // Update addon prices and recalculate total - this.updateAddonPrices(); - this.updatePricing(); - }); - } - }); - - // Update addon prices - this.updateAddonPrices(); - } // Update addon prices based on current configuration - updateAddonPrices() { - if (!this.addonsContainer) return; - - const cpus = parseInt(this.cpuRange?.value || 2); - const memory = parseInt(this.memoryRange?.value || 4); - const storage = parseInt(this.storageRange?.value || 20); - const instances = parseInt(this.instancesRange?.value || 1); - - // Find the current plan data to get variable_unit for addon calculations - const matchedPlan = this.getCurrentPlan(); - const variableUnit = matchedPlan?.variable_unit || 'CPU'; - const units = variableUnit === 'CPU' ? cpus : memory; - const totalUnits = units * instances; - - const addonCheckboxes = this.addonsContainer.querySelectorAll('.addon-checkbox'); - addonCheckboxes.forEach(checkbox => { - const addon = JSON.parse(checkbox.dataset.addon); - const priceElement = checkbox.parentElement.querySelector('.addon-price-value'); - - let calculatedPrice = 0; - - // Calculate addon price based on type - if (addon.addon_type === 'BASE_FEE') { - // Base fee: price per instance - calculatedPrice = parseFloat(addon.price || 0) * instances; - } else if (addon.addon_type === 'UNIT_RATE') { - // Unit rate: price per unit (CPU or memory) across all instances - calculatedPrice = parseFloat(addon.price_per_unit || 0) * totalUnits; - } - - // Update the display price - if (priceElement) { - priceElement.textContent = calculatedPrice.toFixed(2); - } - - // Store the calculated price for later use in total calculations - checkbox.dataset.calculatedPrice = calculatedPrice.toString(); - }); - } - - // Get current plan based on configuration - getCurrentPlan() { - const cpus = parseInt(this.cpuRange?.value || 2); - const memory = parseInt(this.memoryRange?.value || 4); - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (this.planSelect?.value) { - return JSON.parse(this.planSelect.value); - } - - return this.findBestMatchingPlan(cpus, memory, serviceLevel); - } - - // Find best matching plan based on requirements - findBestMatchingPlan(cpus, memory, serviceLevel) { - if (!this.pricingData) return null; - - let bestMatch = null; - let bestScore = Infinity; - - // Iterate through all groups and service levels - Object.keys(this.pricingData).forEach(groupName => { - const group = this.pricingData[groupName]; - - if (group[serviceLevel]) { - group[serviceLevel].forEach(plan => { - const planCpus = parseInt(plan.vcpus); - const planMemory = parseInt(plan.ram); - - // Check if plan meets minimum requirements - if (planCpus >= cpus && planMemory >= memory) { - // Calculate efficiency score (lower is better) - const cpuOverhead = planCpus - cpus; - const memoryOverhead = planMemory - memory; - const score = cpuOverhead + memoryOverhead + plan.final_price * 0.1; - - if (score < bestScore) { - bestScore = score; - bestMatch = { - ...plan, - groupName: groupName - }; - } - } - }); - } - }); - - return bestMatch; - } - - // Update pricing with specific plan - updatePricingWithPlan(selectedPlan) { - const storage = parseInt(this.storageRange?.value || 20); - const instances = parseInt(this.instancesRange?.value || 1); - - // Update addon prices first to ensure calculated prices are current - this.updateAddonPrices(); - - this.showPlanDetails(selectedPlan, storage, instances); - this.updateStatusMessage('Plan selected directly!', 'success'); - } - - // Main pricing update function - updatePricing() { - if (!this.pricingData || !this.cpuRange || !this.memoryRange || !this.storageRange || !this.instancesRange) return; - - // Update addon prices first to ensure they're current - this.updateAddonPrices(); - - // Reset plan selection if in auto-select mode - if (!this.planSelect?.value) { - const cpus = parseInt(this.cpuRange.value); - const memory = parseInt(this.memoryRange.value); - const storage = parseInt(this.storageRange.value); - const instances = parseInt(this.instancesRange.value); - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value; - - if (!serviceLevel) return; - - // Find best matching plan - const matchedPlan = this.findBestMatchingPlan(cpus, memory, serviceLevel); - - if (matchedPlan) { - this.showPlanDetails(matchedPlan, storage, instances); - this.updateStatusMessage('Perfect match found!', 'success'); - } else { - this.showNoMatch(); - } - } else { - // Plan is directly selected, update storage pricing - const selectedPlan = JSON.parse(this.planSelect.value); - const storage = parseInt(this.storageRange.value); - const instances = parseInt(this.instancesRange.value); - - // Update addon prices for current configuration - this.updateAddonPrices(); - this.showPlanDetails(selectedPlan, storage, instances); - this.updateStatusMessage('Plan selected directly!', 'success'); - } - } - - // Show plan details in the UI - showPlanDetails(plan, storage, instances) { - if (!this.selectedPlanDetails) return; - - // Show plan details section - this.planMatchStatus.style.display = 'block'; - this.selectedPlanDetails.style.display = 'block'; - if (this.noMatchFound) this.noMatchFound.style.display = 'none'; - - // Get current service level - const serviceLevel = document.querySelector('input[name="serviceLevel"]:checked')?.value || 'Best Effort'; - - // Update plan information - if (this.planGroup) this.planGroup.textContent = plan.groupName; - if (this.planName) this.planName.textContent = plan.compute_plan; - if (this.planDescription) this.planDescription.textContent = plan.compute_plan_group_description || ''; - if (this.planCpus) this.planCpus.textContent = plan.vcpus; - if (this.planMemory) this.planMemory.textContent = plan.ram + ' GB'; - if (this.planInstances) this.planInstances.textContent = instances; - if (this.planServiceLevel) this.planServiceLevel.textContent = serviceLevel; - - // Ensure addon prices are calculated with current configuration - this.updateAddonPrices(); - - // Calculate pricing using final price from plan data (which already includes mandatory addons) - // plan.final_price = compute_plan_price + sla_price (where sla_price includes mandatory addons) - const managedServicePricePerInstance = parseFloat(plan.final_price); - - // Collect addon information for display and calculation - let mandatoryAddonTotal = 0; - let optionalAddonTotal = 0; - const mandatoryAddons = []; - const selectedOptionalAddons = []; - - if (this.addonsContainer) { - const addonCheckboxes = this.addonsContainer.querySelectorAll('.addon-checkbox'); - addonCheckboxes.forEach(checkbox => { - const addon = JSON.parse(checkbox.dataset.addon); - const calculatedPrice = parseFloat(checkbox.dataset.calculatedPrice || 0); - - if (addon.is_mandatory) { - // Mandatory addons are already included in plan.final_price - // We collect them for display purposes only - mandatoryAddons.push({ - name: addon.name, - price: calculatedPrice.toFixed(2) - }); - } else if (checkbox.checked) { - // Only count checked optional addons - optionalAddonTotal += calculatedPrice; - selectedOptionalAddons.push({ - name: addon.name, - price: calculatedPrice.toFixed(2) - }); - } - }); - } - - const managedServicePrice = managedServicePricePerInstance * instances; - - // Use storage price from plan data or fallback to instance variable - const storageUnitPrice = plan.storage_price !== undefined ? parseFloat(plan.storage_price) : this.storagePrice; - const storagePriceValue = storage * storageUnitPrice * instances; - - // Total price = managed service price (includes mandatory addons) + storage + optional addons - const totalPriceValue = managedServicePrice + storagePriceValue + optionalAddonTotal; - - // Update pricing display - if (this.managedServicePrice) this.managedServicePrice.textContent = managedServicePrice.toFixed(2); - if (this.storagePriceEl) this.storagePriceEl.textContent = storagePriceValue.toFixed(2); - if (this.storageAmount) this.storageAmount.textContent = storage; - if (this.totalPrice) this.totalPrice.textContent = totalPriceValue.toFixed(2); - - // Update addon pricing display - this.updateAddonPricingDisplay(mandatoryAddons, selectedOptionalAddons); - - // Store current configuration for order button - this.selectedConfiguration = { - planName: plan.compute_plan, - planGroup: plan.groupName, - vcpus: plan.vcpus, - memory: plan.ram, - storage: storage, - instances: instances, - serviceLevel: serviceLevel, - totalPrice: totalPriceValue.toFixed(2), - addons: [...mandatoryAddons, ...selectedOptionalAddons] - }; - } - - // Update addon pricing display in the results panel - updateAddonPricingDisplay(mandatoryAddons, selectedOptionalAddons) { - if (!this.addonPricingContainer) return; - - // Clear existing addon pricing display - this.addonPricingContainer.innerHTML = ''; - - // Add mandatory addons to pricing breakdown (for informational purposes only) - if (mandatoryAddons && mandatoryAddons.length > 0) { - // Add a note explaining mandatory addons are included - const mandatoryNote = document.createElement('div'); - mandatoryNote.className = 'text-muted small mb-2'; - mandatoryNote.innerHTML = 'Required add-ons (included in managed service price):'; - this.addonPricingContainer.appendChild(mandatoryNote); - - mandatoryAddons.forEach(addon => { - const addonRow = document.createElement('div'); - addonRow.className = 'd-flex justify-content-between mb-1 ps-3'; - addonRow.innerHTML = ` - ${addon.name} - CHF ${addon.price} - `; - this.addonPricingContainer.appendChild(addonRow); - }); - - // Add separator if there are also optional addons - if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { - const separator = document.createElement('hr'); - separator.className = 'my-2'; - this.addonPricingContainer.appendChild(separator); - } - } - - // Add optional addons to pricing breakdown (these are added to total) - if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { - selectedOptionalAddons.forEach(addon => { - const addonRow = document.createElement('div'); - addonRow.className = 'd-flex justify-content-between mb-2'; - addonRow.innerHTML = ` - Add-on: ${addon.name} - CHF ${addon.price} - `; - this.addonPricingContainer.appendChild(addonRow); - }); - } - } - - // Show no matching plan found - showNoMatch() { - if (this.planMatchStatus) this.planMatchStatus.style.display = 'none'; - if (this.selectedPlanDetails) this.selectedPlanDetails.style.display = 'none'; - if (this.noMatchFound) this.noMatchFound.style.display = 'block'; - } - - // Update status message - updateStatusMessage(message, type) { - if (!this.planMatchStatus) return; - - const iconClass = type === 'success' ? 'bi-check-circle' : 'bi-info-circle'; - const textClass = type === 'success' ? 'text-success' : ''; - const alertClass = type === 'success' ? 'alert-success' : 'alert-info'; - - this.planMatchStatus.innerHTML = `${message}`; - this.planMatchStatus.className = `alert ${alertClass} mb-3`; - this.planMatchStatus.style.display = 'block'; - } - - // Show error message - showError(message) { - if (this.planMatchStatus) { - this.planMatchStatus.innerHTML = `${message}`; - this.planMatchStatus.className = 'alert alert-danger mb-3'; - this.planMatchStatus.style.display = 'block'; - } - } - - // Fade out specified sliders when plan is manually selected - fadeOutSliders(sliderTypes) { - sliderTypes.forEach(type => { - const sliderContainer = this.getSliderContainer(type); - if (sliderContainer) { - sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; - sliderContainer.style.opacity = '0.3'; - sliderContainer.style.pointerEvents = 'none'; - - // Add visual indicator that sliders are disabled - const slider = sliderContainer.querySelector('.form-range'); - if (slider) { - slider.style.cursor = 'not-allowed'; - } - } - }); - } - - // Fade in specified sliders when auto-select mode is chosen - fadeInSliders(sliderTypes) { - sliderTypes.forEach(type => { - const sliderContainer = this.getSliderContainer(type); - if (sliderContainer) { - sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; - sliderContainer.style.opacity = '1'; - sliderContainer.style.pointerEvents = 'auto'; - - // Remove visual indicator - const slider = sliderContainer.querySelector('.form-range'); - if (slider) { - slider.style.cursor = 'pointer'; - } - } - }); - } - - // Get slider container element by type - getSliderContainer(type) { - switch (type) { - case 'cpu': - return this.cpuRange?.closest('.mb-4'); - case 'memory': - return this.memoryRange?.closest('.mb-4'); - case 'storage': - return this.storageRange?.closest('.mb-4'); - case 'instances': - return this.instancesRange?.closest('.mb-4'); - default: - return null; - } - } -} - -// Initialize calculator when DOM is loaded -document.addEventListener('DOMContentLoaded', () => { - // Only initialize if we're on an offering detail page with pricing calculator - if (document.getElementById('cpuRange')) { - new PriceCalculator(); - } -}); - +// Global function for traditional plan selection (used by template buttons) function selectPlan(element) { const planId = element.getAttribute('data-plan-id'); const planName = element.getAttribute('data-plan-name'); diff --git a/hub/services/static/js/price-calculator/addon-manager.js b/hub/services/static/js/price-calculator/addon-manager.js new file mode 100644 index 0000000..daf4735 --- /dev/null +++ b/hub/services/static/js/price-calculator/addon-manager.js @@ -0,0 +1,176 @@ +/** + * Addon Manager - Handles addon functionality + */ +class AddonManager { + constructor(pricingDataManager) { + this.pricingDataManager = pricingDataManager; + } + + // Update addons based on current configuration + updateAddons(domManager) { + const addonsContainer = domManager.get('addonsContainer'); + const addonsData = this.pricingDataManager.getAddonsData(); + + if (!addonsContainer || !addonsData) { + // Hide addons section if no container or data + const addonsSection = document.getElementById('addonsSection'); + if (addonsSection) addonsSection.style.display = 'none'; + return; + } + + const serviceLevel = domManager.getSelectedServiceLevel(); + if (!serviceLevel || !addonsData[serviceLevel]) { + // Hide addons section if no service level or no addons for this level + const addonsSection = document.getElementById('addonsSection'); + if (addonsSection) addonsSection.style.display = 'none'; + return; + } + + const addons = addonsData[serviceLevel]; + + // Clear existing addons + addonsContainer.innerHTML = ''; + + // Show or hide addons section based on availability + const addonsSection = document.getElementById('addonsSection'); + if (addons && addons.length > 0) { + if (addonsSection) addonsSection.style.display = 'block'; + } else { + if (addonsSection) addonsSection.style.display = 'none'; + return; + } + + // Add each addon + addons.forEach(addon => { + const addonElement = document.createElement('div'); + addonElement.className = `addon-item mb-2 p-2 border rounded ${addon.is_mandatory ? 'bg-light' : ''}`; + + addonElement.innerHTML = ` +
+ + +
+ `; + + addonsContainer.appendChild(addonElement); + + // Add event listener for optional addons + if (!addon.is_mandatory) { + const checkbox = addonElement.querySelector('.addon-checkbox'); + checkbox.addEventListener('change', () => { + // Update addon prices and recalculate total + this.updateAddonPrices(domManager); + // Trigger pricing update through custom event + window.dispatchEvent(new CustomEvent('addon-changed')); + }); + } + }); + + // Update addon prices + this.updateAddonPrices(domManager); + } + + // Update addon prices based on current configuration + updateAddonPrices(domManager, planManager) { + const addonsContainer = domManager.get('addonsContainer'); + if (!addonsContainer) return; + + const config = domManager.getCurrentConfiguration(); + + // Find the current plan data to get variable_unit for addon calculations + const matchedPlan = planManager ? planManager.getCurrentPlan(domManager) : null; + const variableUnit = matchedPlan?.variable_unit || 'CPU'; + const units = variableUnit === 'CPU' ? config.cpus : config.memory; + const totalUnits = units * config.instances; + + const addonCheckboxes = addonsContainer.querySelectorAll('.addon-checkbox'); + addonCheckboxes.forEach(checkbox => { + const addon = JSON.parse(checkbox.dataset.addon); + const priceElement = checkbox.parentElement.querySelector('.addon-price-value'); + + let calculatedPrice = 0; + + // Calculate addon price based on type + if (addon.addon_type === 'BASE_FEE') { + // Base fee: price per instance + calculatedPrice = parseFloat(addon.price || 0) * config.instances; + } else if (addon.addon_type === 'UNIT_RATE') { + // Unit rate: price per unit (CPU or memory) across all instances + calculatedPrice = parseFloat(addon.price_per_unit || 0) * totalUnits; + } + + // Update the display price + if (priceElement) { + priceElement.textContent = calculatedPrice.toFixed(2); + } + + // Store the calculated price for later use in total calculations + checkbox.dataset.calculatedPrice = calculatedPrice.toString(); + }); + } + + // Get selected addons with their calculated prices + getSelectedAddons(domManager) { + const addonsContainer = domManager.get('addonsContainer'); + if (!addonsContainer) return { mandatory: [], optional: [] }; + + const mandatoryAddons = []; + const selectedOptionalAddons = []; + + const addonCheckboxes = addonsContainer.querySelectorAll('.addon-checkbox'); + addonCheckboxes.forEach(checkbox => { + const addon = JSON.parse(checkbox.dataset.addon); + const calculatedPrice = parseFloat(checkbox.dataset.calculatedPrice || 0); + + if (addon.is_mandatory) { + mandatoryAddons.push({ + name: addon.name, + price: calculatedPrice.toFixed(2) + }); + } else if (checkbox.checked) { + selectedOptionalAddons.push({ + name: addon.name, + price: calculatedPrice.toFixed(2) + }); + } + }); + + return { + mandatory: mandatoryAddons, + optional: selectedOptionalAddons + }; + } + + // Calculate total optional addon price + calculateOptionalAddonTotal(domManager) { + const addonsContainer = domManager.get('addonsContainer'); + if (!addonsContainer) return 0; + + let total = 0; + const addonCheckboxes = addonsContainer.querySelectorAll('.addon-checkbox'); + + addonCheckboxes.forEach(checkbox => { + const addon = JSON.parse(checkbox.dataset.addon); + if (!addon.is_mandatory && checkbox.checked) { + const calculatedPrice = parseFloat(checkbox.dataset.calculatedPrice || 0); + total += calculatedPrice; + } + }); + + return total; + } +} + +// Export for use in other modules +window.AddonManager = AddonManager; diff --git a/hub/services/static/js/price-calculator/dom-manager.js b/hub/services/static/js/price-calculator/dom-manager.js new file mode 100644 index 0000000..42c4626 --- /dev/null +++ b/hub/services/static/js/price-calculator/dom-manager.js @@ -0,0 +1,160 @@ +/** + * DOM Manager - Handles DOM element references and basic manipulation + */ +class DOMManager { + constructor() { + this.elements = {}; + this.initElements(); + } + + // Initialize DOM element references + initElements() { + // Calculator controls + this.elements.cpuRange = document.getElementById('cpuRange'); + this.elements.memoryRange = document.getElementById('memoryRange'); + this.elements.storageRange = document.getElementById('storageRange'); + this.elements.instancesRange = document.getElementById('instancesRange'); + this.elements.cpuValue = document.getElementById('cpuValue'); + this.elements.memoryValue = document.getElementById('memoryValue'); + this.elements.storageValue = document.getElementById('storageValue'); + this.elements.instancesValue = document.getElementById('instancesValue'); + this.elements.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]'); + this.elements.planSelect = document.getElementById('planSelect'); + + // Addon elements + this.elements.addonsContainer = document.getElementById('addonsContainer'); + this.elements.addonPricingContainer = document.getElementById('addonPricingContainer'); + this.elements.managedServiceIncludesContainer = document.getElementById('managedServiceIncludesContainer'); + + // Result display elements + this.elements.planMatchStatus = document.getElementById('planMatchStatus'); + this.elements.selectedPlanDetails = document.getElementById('selectedPlanDetails'); + this.elements.noMatchFound = document.getElementById('noMatchFound'); + + // Plan detail elements + this.elements.planGroup = document.getElementById('planGroup'); + this.elements.planName = document.getElementById('planName'); + this.elements.planDescription = document.getElementById('planDescription'); + this.elements.planCpus = document.getElementById('planCpus'); + this.elements.planMemory = document.getElementById('planMemory'); + this.elements.planInstances = document.getElementById('planInstances'); + this.elements.planServiceLevel = document.getElementById('planServiceLevel'); + this.elements.managedServicePrice = document.getElementById('managedServicePrice'); + this.elements.storagePriceEl = document.getElementById('storagePrice'); + this.elements.storageAmount = document.getElementById('storageAmount'); + this.elements.totalPrice = document.getElementById('totalPrice'); + + // Order button + this.elements.orderButton = document.querySelector('a[href="#order-form"]'); + + // Service level group + this.elements.serviceLevelGroup = document.getElementById('serviceLevelGroup'); + } + + // Get element by key + get(key) { + return this.elements[key]; + } + + // Check if element exists + has(key) { + return this.elements[key] && this.elements[key] !== null; + } + + // Update slider display values (min/max text below sliders) + updateSliderDisplayValues() { + // Update CPU slider display + if (this.elements.cpuRange) { + const cpuMinDisplay = document.getElementById('cpuMinDisplay'); + const cpuMaxDisplay = document.getElementById('cpuMaxDisplay'); + if (cpuMinDisplay) cpuMinDisplay.textContent = this.elements.cpuRange.min; + if (cpuMaxDisplay) cpuMaxDisplay.textContent = this.elements.cpuRange.max; + } + + // Update Memory slider display + if (this.elements.memoryRange) { + const memoryMinDisplay = document.getElementById('memoryMinDisplay'); + const memoryMaxDisplay = document.getElementById('memoryMaxDisplay'); + if (memoryMinDisplay) memoryMinDisplay.textContent = this.elements.memoryRange.min; + if (memoryMaxDisplay) memoryMaxDisplay.textContent = this.elements.memoryRange.max; + } + + // Update Storage slider display + if (this.elements.storageRange) { + const storageMinDisplay = document.getElementById('storageMinDisplay'); + const storageMaxDisplay = document.getElementById('storageMaxDisplay'); + if (storageMinDisplay) storageMinDisplay.textContent = this.elements.storageRange.min; + if (storageMaxDisplay) storageMaxDisplay.textContent = this.elements.storageRange.max; + } + + // Update Instances slider display + if (this.elements.instancesRange) { + const instancesMinDisplay = document.getElementById('instancesMinDisplay'); + const instancesMaxDisplay = document.getElementById('instancesMaxDisplay'); + if (instancesMinDisplay) instancesMinDisplay.textContent = this.elements.instancesRange.min; + if (instancesMaxDisplay) instancesMaxDisplay.textContent = this.elements.instancesRange.max; + } + } + + // Get slider container element by type + getSliderContainer(type) { + switch (type) { + case 'cpu': + return this.elements.cpuRange?.closest('.mb-4'); + case 'memory': + return this.elements.memoryRange?.closest('.mb-4'); + case 'storage': + return this.elements.storageRange?.closest('.mb-4'); + case 'instances': + return this.elements.instancesRange?.closest('.mb-4'); + default: + return null; + } + } + + // Reset sliders to their default values + resetSlidersToDefaults() { + // Reset CPU slider to default value (0.5 vCPUs) + if (this.elements.cpuRange) { + this.elements.cpuRange.value = '0.5'; + if (this.elements.cpuValue) this.elements.cpuValue.textContent = '0.5'; + } + + // Reset Memory slider to default value (1 GB) + if (this.elements.memoryRange) { + this.elements.memoryRange.value = '1'; + if (this.elements.memoryValue) this.elements.memoryValue.textContent = '1'; + } + + // Reset Storage slider to default value (20 GB) + if (this.elements.storageRange) { + this.elements.storageRange.value = '20'; + if (this.elements.storageValue) this.elements.storageValue.textContent = '20'; + } + + // Reset Instances slider to default value (1) + if (this.elements.instancesRange) { + this.elements.instancesRange.value = '1'; + if (this.elements.instancesValue) this.elements.instancesValue.textContent = '1'; + } + } + + // Get current selected service level + getSelectedServiceLevel() { + return document.querySelector('input[name="serviceLevel"]:checked')?.value; + } + + // Get current configuration values + getCurrentConfiguration() { + return { + cpus: parseFloat(this.elements.cpuRange?.value || 0.5), + memory: parseFloat(this.elements.memoryRange?.value || 1), + storage: parseInt(this.elements.storageRange?.value || 20), + instances: parseInt(this.elements.instancesRange?.value || 1), + serviceLevel: this.getSelectedServiceLevel() + }; + } +} + +// Export for use in other modules +window.DOMManager = DOMManager; diff --git a/hub/services/static/js/price-calculator/order-manager.js b/hub/services/static/js/price-calculator/order-manager.js new file mode 100644 index 0000000..99ea5a8 --- /dev/null +++ b/hub/services/static/js/price-calculator/order-manager.js @@ -0,0 +1,113 @@ +/** + * Order Manager - Handles order form functionality + */ +class OrderManager { + constructor() { + this.selectedConfiguration = null; + } + + // Setup order button click handler + setupOrderButton(domManager) { + const orderButton = domManager.get('orderButton'); + if (orderButton) { + orderButton.addEventListener('click', (e) => { + e.preventDefault(); + this.handleOrderClick(); + }); + } + } + + // Handle order button click + handleOrderClick() { + if (this.selectedConfiguration) { + // Pre-fill the contact form with configuration details + this.prefillContactForm(); + + // Scroll to the contact form + const contactForm = document.getElementById('order-form'); + if (contactForm) { + contactForm.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + } + } + + // Pre-fill contact form with selected configuration + prefillContactForm() { + if (!this.selectedConfiguration) return; + + const config = this.selectedConfiguration; + + // Create configuration summary message + const configMessage = this.generateConfigurationMessage(config); + + // Find and fill the message textarea in the contact form + const messageField = document.querySelector('#order-form textarea[name="message"]'); + if (messageField) { + messageField.value = configMessage; + } + + // Store configuration details in hidden field + const detailsField = document.querySelector('#order-form input[name="details"]'); + if (detailsField) { + detailsField.value = JSON.stringify({ + plan: config.planName, + vcpus: config.vcpus, + memory: config.memory, + storage: config.storage, + instances: config.instances, + serviceLevel: config.serviceLevel, + totalPrice: config.totalPrice, + addons: config.addons || [] + }); + } + } + + // Generate human-readable configuration message + generateConfigurationMessage(config) { + let message = `I would like to order the following configuration: + +Plan: ${config.planName} (${config.planGroup}) +vCPUs: ${config.vcpus} +Memory: ${config.memory} GB +Storage: ${config.storage} GB +Instances: ${config.instances} +Service Level: ${config.serviceLevel}`; + + // Add addons to the message if any are selected + if (config.addons && config.addons.length > 0) { + message += '\n\nSelected Add-ons:'; + config.addons.forEach(addon => { + message += `\n- ${addon.name}: CHF ${addon.price}`; + }); + } + + message += `\n\nTotal Monthly Price: CHF ${config.totalPrice} + +Please contact me with next steps for ordering this configuration.`; + + return message; + } + + // Store current configuration for order button + storeConfiguration(plan, config, serviceLevel, totalPrice, addons) { + this.selectedConfiguration = { + planName: plan.compute_plan, + planGroup: plan.groupName, + vcpus: plan.vcpus, + memory: plan.ram, + storage: config.storage, + instances: config.instances, + serviceLevel: serviceLevel, + totalPrice: totalPrice, + addons: addons + }; + } + + // Get stored configuration + getStoredConfiguration() { + return this.selectedConfiguration; + } +} + +// Export for use in other modules +window.OrderManager = OrderManager; diff --git a/hub/services/static/js/price-calculator/plan-manager.js b/hub/services/static/js/price-calculator/plan-manager.js new file mode 100644 index 0000000..9abdc0f --- /dev/null +++ b/hub/services/static/js/price-calculator/plan-manager.js @@ -0,0 +1,104 @@ +/** + * Plan Manager - Handles plan selection and matching logic + */ +class PlanManager { + constructor(pricingDataManager) { + this.pricingDataManager = pricingDataManager; + } + + // Find best matching plan based on requirements + findBestMatchingPlan(cpus, memory, serviceLevel) { + const pricingData = this.pricingDataManager.getPricingData(); + + if (!pricingData) return null; + + let bestMatch = null; + let bestScore = Infinity; + + // Iterate through all groups and service levels + Object.keys(pricingData).forEach(groupName => { + const group = pricingData[groupName]; + + if (group[serviceLevel]) { + group[serviceLevel].forEach(plan => { + const planCpus = parseFloat(plan.vcpus); + const planMemory = parseFloat(plan.ram); + + // Check if plan meets minimum requirements + if (planCpus >= cpus && planMemory >= memory) { + // Calculate efficiency score (lower is better) + const cpuOverhead = planCpus - cpus; + const memoryOverhead = planMemory - memory; + const score = cpuOverhead + memoryOverhead + plan.final_price * 0.1; + + if (score < bestScore) { + bestScore = score; + bestMatch = { + ...plan, + groupName: groupName + }; + } + } + }); + } + }); + + return bestMatch; + } + + // Get current plan based on configuration + getCurrentPlan(domManager) { + const config = domManager.getCurrentConfiguration(); + const planSelect = domManager.get('planSelect'); + + if (planSelect?.value) { + return JSON.parse(planSelect.value); + } + + return this.findBestMatchingPlan(config.cpus, config.memory, config.serviceLevel); + } + + // Populate plan dropdown based on selected service level + populatePlanDropdown(domManager) { + const planSelect = domManager.get('planSelect'); + if (!planSelect) return; + + const serviceLevel = domManager.getSelectedServiceLevel(); + if (!serviceLevel) return; + + // Clear existing options + planSelect.innerHTML = ''; + + // Get plans for the selected service level + const availablePlans = this.pricingDataManager.getPlansForServiceLevel(serviceLevel); + + // Add plans to dropdown + availablePlans.forEach(plan => { + const option = document.createElement('option'); + option.value = JSON.stringify(plan); + option.textContent = `${plan.compute_plan} - ${plan.vcpus} vCPUs, ${plan.ram} GB RAM`; + planSelect.appendChild(option); + }); + } + + // Update sliders to match selected plan + updateSlidersForPlan(plan, domManager) { + const cpuRange = domManager.get('cpuRange'); + const memoryRange = domManager.get('memoryRange'); + const cpuValue = domManager.get('cpuValue'); + const memoryValue = domManager.get('memoryValue'); + + if (cpuRange && cpuValue) { + cpuRange.value = plan.vcpus; + cpuValue.textContent = plan.vcpus; + } + + if (memoryRange && memoryValue) { + memoryRange.value = plan.ram; + memoryValue.textContent = plan.ram; + } + } +} + +// Export for use in other modules +window.PlanManager = PlanManager; diff --git a/hub/services/static/js/price-calculator/price-calculator.js b/hub/services/static/js/price-calculator/price-calculator.js new file mode 100644 index 0000000..ecde2ac --- /dev/null +++ b/hub/services/static/js/price-calculator/price-calculator.js @@ -0,0 +1,252 @@ +/** + * Price Calculator - Main orchestrator class + * Coordinates all the different managers to provide pricing calculation functionality + */ +class PriceCalculator { + constructor() { + // Initialize managers + this.domManager = new DOMManager(); + this.currentOffering = this.extractOfferingFromURL(); + this.pricingDataManager = new PricingDataManager(this.currentOffering); + this.planManager = new PlanManager(this.pricingDataManager); + this.addonManager = new AddonManager(this.pricingDataManager); + this.uiManager = new UIManager(); + this.orderManager = new OrderManager(); + + // Initialize the calculator + this.init(); + } + + // Extract offering info from URL + extractOfferingFromURL() { + const pathParts = window.location.pathname.split('/'); + if (pathParts.length >= 4 && pathParts[1] === 'offering') { + return { + provider_slug: pathParts[2], + service_slug: pathParts[3] + }; + } + return null; + } + + // Initialize calculator + async init() { + try { + // Load pricing data and setup calculator + if (this.currentOffering) { + await this.pricingDataManager.loadPricingData(); + + this.setupEventListeners(); + this.setupUI(); + this.orderManager.setupOrderButton(this.domManager); + this.updateCalculator(); + } else { + console.warn('No current offering found, calculator not initialized'); + } + } catch (error) { + console.error('Error initializing price calculator:', error); + this.uiManager.showError(this.domManager, 'Failed to load pricing information'); + } + } + + // Setup initial UI components + setupUI() { + // Setup service levels based on available data + this.uiManager.setupServiceLevels(this.domManager, this.pricingDataManager); + + // Calculate and set slider maximums + this.uiManager.updateSliderMaximums(this.domManager, this.pricingDataManager); + + // Populate plan dropdown + this.planManager.populatePlanDropdown(this.domManager); + + // Initialize instances slider + this.uiManager.updateInstancesSlider(this.domManager, this.pricingDataManager); + } + + // Setup event listeners for calculator controls + setupEventListeners() { + const cpuRange = this.domManager.get('cpuRange'); + const memoryRange = this.domManager.get('memoryRange'); + const storageRange = this.domManager.get('storageRange'); + const instancesRange = this.domManager.get('instancesRange'); + + if (!cpuRange || !memoryRange || !storageRange || !instancesRange) return; + + // Slider event listeners + cpuRange.addEventListener('input', () => { + this.domManager.get('cpuValue').textContent = cpuRange.value; + this.updatePricing(); + }); + + memoryRange.addEventListener('input', () => { + this.domManager.get('memoryValue').textContent = memoryRange.value; + this.updatePricing(); + }); + + storageRange.addEventListener('input', () => { + this.domManager.get('storageValue').textContent = storageRange.value; + this.updatePricing(); + }); + + instancesRange.addEventListener('input', () => { + this.domManager.get('instancesValue').textContent = instancesRange.value; + this.updatePricing(); + }); + + // Service level change listeners + const serviceLevelInputs = this.domManager.get('serviceLevelInputs'); + serviceLevelInputs.forEach(input => { + input.addEventListener('change', () => { + this.uiManager.updateInstancesSlider(this.domManager, this.pricingDataManager); + this.planManager.populatePlanDropdown(this.domManager); + this.addonManager.updateAddons(this.domManager); + this.updatePricing(); + }); + }); + + // Plan selection listener + const planSelect = this.domManager.get('planSelect'); + if (planSelect) { + planSelect.addEventListener('change', () => { + if (planSelect.value) { + const selectedPlan = JSON.parse(planSelect.value); + + // Update sliders to match selected plan + this.planManager.updateSlidersForPlan(selectedPlan, this.domManager); + + // Fade out CPU and Memory sliders since plan is manually selected + this.uiManager.fadeOutSliders(this.domManager, ['cpu', 'memory']); + + // Update addons for the new configuration + this.addonManager.updateAddons(this.domManager); + + // Update pricing with the selected plan + this.updatePricingWithPlan(selectedPlan); + } else { + // Auto-select mode - reset sliders to default values + this.domManager.resetSlidersToDefaults(); + + // Auto-select mode - fade sliders back in + this.uiManager.fadeInSliders(this.domManager, ['cpu', 'memory']); + + // Auto-select mode - update addons and recalculate + this.addonManager.updateAddons(this.domManager); + this.updatePricing(); + } + }); + } + + // Listen for addon changes + window.addEventListener('addon-changed', () => { + this.updatePricing(); + }); + } + + // Update calculator (initial setup) + updateCalculator() { + this.addonManager.updateAddons(this.domManager); + this.updatePricing(); + } + + // Update pricing with specific plan + updatePricingWithPlan(selectedPlan) { + const config = this.domManager.getCurrentConfiguration(); + + // Update addon prices first to ensure calculated prices are current + this.addonManager.updateAddonPrices(this.domManager, this.planManager); + + this.showPlanDetails(selectedPlan, config.storage, config.instances); + this.uiManager.updateStatusMessage(this.domManager, 'Plan selected directly!', 'success'); + } + + // Main pricing update function + updatePricing() { + // Update addon prices first to ensure they're current + this.addonManager.updateAddonPrices(this.domManager, this.planManager); + + const planSelect = this.domManager.get('planSelect'); + + // Reset plan selection if in auto-select mode + if (!planSelect?.value) { + const config = this.domManager.getCurrentConfiguration(); + + if (!config.serviceLevel) { + return; + } + + // Find best matching plan + const matchedPlan = this.planManager.findBestMatchingPlan(config.cpus, config.memory, config.serviceLevel); + + if (matchedPlan) { + this.showPlanDetails(matchedPlan, config.storage, config.instances); + this.uiManager.updateStatusMessage(this.domManager, 'Perfect match found!', 'success'); + } else { + this.uiManager.showNoMatch(this.domManager); + } + } else { + // Plan is directly selected, update storage pricing + const selectedPlan = JSON.parse(planSelect.value); + const config = this.domManager.getCurrentConfiguration(); + + // Update addon prices for current configuration + this.addonManager.updateAddonPrices(this.domManager, this.planManager); + this.showPlanDetails(selectedPlan, config.storage, config.instances); + this.uiManager.updateStatusMessage(this.domManager, 'Plan selected directly!', 'success'); + } + } + + // Show plan details in the UI + showPlanDetails(plan, storage, instances) { + // Get current service level + const serviceLevel = this.domManager.getSelectedServiceLevel() || 'Best Effort'; + + // Ensure addon prices are calculated with current configuration + this.addonManager.updateAddonPrices(this.domManager, this.planManager); + + // Calculate pricing using final price from plan data (which already includes mandatory addons) + const managedServicePricePerInstance = parseFloat(plan.final_price); + + // Collect addon information for display and calculation + const addons = this.addonManager.getSelectedAddons(this.domManager); + const optionalAddonTotal = this.addonManager.calculateOptionalAddonTotal(this.domManager); + + const managedServicePrice = managedServicePricePerInstance * instances; + + // Use storage price from plan data or fallback to instance variable + const storageUnitPrice = plan.storage_price !== undefined ? + parseFloat(plan.storage_price) : + this.pricingDataManager.getStoragePrice(); + const storagePriceValue = storage * storageUnitPrice * instances; + + // Total price = managed service price (includes mandatory addons) + storage + optional addons + const totalPriceValue = managedServicePrice + storagePriceValue + optionalAddonTotal; + + // Show plan details in UI + this.uiManager.showPlanDetails( + this.domManager, + plan, + storage, + instances, + serviceLevel, + managedServicePrice, + storagePriceValue, + totalPriceValue + ); + + // Update addon pricing display + this.uiManager.updateAddonPricingDisplay(this.domManager, addons.mandatory, addons.optional); + + // Store current configuration for order button + this.orderManager.storeConfiguration( + plan, + { storage, instances }, + serviceLevel, + totalPriceValue.toFixed(2), + [...addons.mandatory, ...addons.optional] + ); + } +} + +// Export for use in other modules +window.PriceCalculator = PriceCalculator; diff --git a/hub/services/static/js/price-calculator/pricing-data-manager.js b/hub/services/static/js/price-calculator/pricing-data-manager.js new file mode 100644 index 0000000..147086d --- /dev/null +++ b/hub/services/static/js/price-calculator/pricing-data-manager.js @@ -0,0 +1,190 @@ +/** + * Pricing Data Manager - Handles API calls and data extraction + */ +class PricingDataManager { + constructor(currentOffering) { + this.currentOffering = currentOffering; + this.pricingData = null; + this.storagePrice = null; + this.replicaInfo = null; + this.addonsData = null; + } + + // Load pricing data from API endpoint + async loadPricingData() { + try { + const response = await fetch(`/offering/${this.currentOffering.provider_slug}/${this.currentOffering.service_slug}/?pricing=json`); + + if (!response.ok) { + throw new Error(`Failed to load pricing data: ${response.status} ${response.statusText}`); + } + + const data = await response.json(); + + this.pricingData = data.pricing || data; + + // Extract addons data from the plans - addons are embedded in each plan + this.extractAddonsData(); + + // Extract storage price from the first available plan + this.extractStoragePrice(); + + return this.pricingData; + } catch (error) { + console.error('Error loading pricing data:', error); + throw error; + } + } + + // Extract replica information and storage price from pricing data + extractStoragePrice() { + if (!this.pricingData) return; + + // Find the first plan with storage pricing data and replica info + for (const groupName of Object.keys(this.pricingData)) { + const group = this.pricingData[groupName]; + for (const serviceLevel of Object.keys(group)) { + const plans = group[serviceLevel]; + if (plans.length > 0 && plans[0].storage_price !== undefined) { + this.storagePrice = parseFloat(plans[0].storage_price); + this.replicaInfo = { + ha_replica_min: plans[0].ha_replica_min || 1, + ha_replica_max: plans[0].ha_replica_max || 1 + }; + return; + } + } + } + } + + // Extract addons data from pricing plans + extractAddonsData() { + if (!this.pricingData) return; + + this.addonsData = {}; + + // Extract addons from the first available plan for each service level + Object.keys(this.pricingData).forEach(groupName => { + const group = this.pricingData[groupName]; + Object.keys(group).forEach(serviceLevel => { + const plans = group[serviceLevel]; + if (plans.length > 0) { + // Use the first plan's addon data for this service level + const plan = plans[0]; + const allAddons = []; + + // Add mandatory addons + if (plan.mandatory_addons) { + plan.mandatory_addons.forEach(addon => { + allAddons.push({ + ...addon, + is_mandatory: true, + addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" + }); + }); + } + + // Add optional addons + if (plan.optional_addons) { + plan.optional_addons.forEach(addon => { + allAddons.push({ + ...addon, + is_mandatory: false, + addon_type: addon.addon_type === "Base Fee" ? "BASE_FEE" : "UNIT_RATE" + }); + }); + } + + this.addonsData[serviceLevel] = allAddons; + } + }); + }); + } + + // Get available service levels from pricing data + getAvailableServiceLevels() { + if (!this.pricingData) return new Set(); + + const availableServiceLevels = new Set(); + Object.keys(this.pricingData).forEach(groupName => { + const group = this.pricingData[groupName]; + Object.keys(group).forEach(serviceLevel => { + availableServiceLevels.add(serviceLevel); + }); + }); + + return availableServiceLevels; + } + + // Get maximum CPU and memory values from all plans + getSliderMaximums() { + if (!this.pricingData) return { maxCpus: 0, maxMemory: 0 }; + + let maxCpus = 0; + let maxMemory = 0; + + // Find maximum CPU and memory across all plans + Object.keys(this.pricingData).forEach(groupName => { + const group = this.pricingData[groupName]; + Object.keys(group).forEach(serviceLevel => { + group[serviceLevel].forEach(plan => { + const planCpus = parseFloat(plan.vcpus); + const planMemory = parseFloat(plan.ram); + + if (planCpus > maxCpus) maxCpus = planCpus; + if (planMemory > maxMemory) maxMemory = planMemory; + }); + }); + }); + + return { maxCpus, maxMemory }; + } + + // Get all plans for a specific service level + getPlansForServiceLevel(serviceLevel) { + if (!this.pricingData || !serviceLevel) return []; + + const availablePlans = []; + Object.keys(this.pricingData).forEach(groupName => { + const group = this.pricingData[groupName]; + if (group[serviceLevel]) { + group[serviceLevel].forEach(plan => { + availablePlans.push({ + ...plan, + groupName: groupName + }); + }); + } + }); + + // Sort plans by vCPU, then by RAM + availablePlans.sort((a, b) => { + if (parseFloat(a.vcpus) !== parseFloat(b.vcpus)) { + return parseFloat(a.vcpus) - parseFloat(b.vcpus); + } + return parseFloat(a.ram) - parseFloat(b.ram); + }); + + return availablePlans; + } + + // Getters + getPricingData() { + return this.pricingData; + } + + getStoragePrice() { + return this.storagePrice; + } + + getReplicaInfo() { + return this.replicaInfo; + } + + getAddonsData() { + return this.addonsData; + } +} + +// Export for use in other modules +window.PricingDataManager = PricingDataManager; diff --git a/hub/services/static/js/price-calculator/ui-manager.js b/hub/services/static/js/price-calculator/ui-manager.js new file mode 100644 index 0000000..e1a099a --- /dev/null +++ b/hub/services/static/js/price-calculator/ui-manager.js @@ -0,0 +1,269 @@ +/** + * UI Manager - Handles UI updates and visual feedback + */ +class UIManager { + constructor() { + // Visual feedback states + this.isSlidersFaded = false; + } + + // Update status message + updateStatusMessage(domManager, message, type) { + const planMatchStatus = domManager.get('planMatchStatus'); + if (!planMatchStatus) return; + + const iconClass = type === 'success' ? 'bi-check-circle' : 'bi-info-circle'; + const textClass = type === 'success' ? 'text-success' : ''; + const alertClass = type === 'success' ? 'alert-success' : 'alert-info'; + + planMatchStatus.innerHTML = `${message}`; + planMatchStatus.className = `alert ${alertClass} mb-3`; + planMatchStatus.style.display = 'block'; + } + + // Show error message + showError(domManager, message) { + const planMatchStatus = domManager.get('planMatchStatus'); + if (planMatchStatus) { + planMatchStatus.innerHTML = `${message}`; + planMatchStatus.className = 'alert alert-danger mb-3'; + planMatchStatus.style.display = 'block'; + } + } + + // Show no matching plan found + showNoMatch(domManager) { + const planMatchStatus = domManager.get('planMatchStatus'); + const selectedPlanDetails = domManager.get('selectedPlanDetails'); + const noMatchFound = domManager.get('noMatchFound'); + + if (planMatchStatus) planMatchStatus.style.display = 'none'; + if (selectedPlanDetails) selectedPlanDetails.style.display = 'none'; + if (noMatchFound) noMatchFound.style.display = 'block'; + } + + // Show plan details in the UI + showPlanDetails(domManager, plan, storage, instances, serviceLevel, managedServicePrice, storagePriceValue, totalPriceValue) { + const selectedPlanDetails = domManager.get('selectedPlanDetails'); + if (!selectedPlanDetails) return; + + // Show plan details section + const planMatchStatus = domManager.get('planMatchStatus'); + const noMatchFound = domManager.get('noMatchFound'); + + if (planMatchStatus) planMatchStatus.style.display = 'block'; + selectedPlanDetails.style.display = 'block'; + if (noMatchFound) noMatchFound.style.display = 'none'; + + // Update plan information + const planGroup = domManager.get('planGroup'); + const planName = domManager.get('planName'); + const planDescription = domManager.get('planDescription'); + const planCpus = domManager.get('planCpus'); + const planMemory = domManager.get('planMemory'); + const planInstances = domManager.get('planInstances'); + const planServiceLevel = domManager.get('planServiceLevel'); + const managedServicePriceEl = domManager.get('managedServicePrice'); + const storagePriceEl = domManager.get('storagePriceEl'); + const storageAmount = domManager.get('storageAmount'); + const totalPrice = domManager.get('totalPrice'); + + if (planGroup) planGroup.textContent = plan.groupName; + if (planName) planName.textContent = plan.compute_plan; + if (planDescription) planDescription.textContent = plan.compute_plan_group_description || ''; + if (planCpus) planCpus.textContent = plan.vcpus; + if (planMemory) planMemory.textContent = plan.ram + ' GB'; + if (planInstances) planInstances.textContent = instances; + if (planServiceLevel) planServiceLevel.textContent = serviceLevel; + + // Update pricing display + if (managedServicePriceEl) managedServicePriceEl.textContent = managedServicePrice.toFixed(2); + if (storagePriceEl) storagePriceEl.textContent = storagePriceValue.toFixed(2); + if (storageAmount) storageAmount.textContent = storage; + if (totalPrice) totalPrice.textContent = totalPriceValue.toFixed(2); + } + + // Update addon pricing display in the results panel + updateAddonPricingDisplay(domManager, mandatoryAddons, selectedOptionalAddons) { + // Update mandatory addons in the managed service includes container + const managedServiceIncludesContainer = domManager.get('managedServiceIncludesContainer'); + if (managedServiceIncludesContainer) { + // Clear existing content + managedServiceIncludesContainer.innerHTML = ''; + + // Add mandatory addons to the managed service includes section + 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'; + addonRow.innerHTML = ` + ${addon.name} + CHF ${addon.price} + `; + managedServiceIncludesContainer.appendChild(addonRow); + }); + } + } + + // Update optional addons in the addon pricing container + const addonPricingContainer = domManager.get('addonPricingContainer'); + if (!addonPricingContainer) return; + + // Clear existing addon pricing display + addonPricingContainer.innerHTML = ''; + + // Add optional addons to pricing breakdown (these are added to total) + if (selectedOptionalAddons && selectedOptionalAddons.length > 0) { + selectedOptionalAddons.forEach(addon => { + const addonRow = document.createElement('div'); + addonRow.className = 'd-flex justify-content-between mb-2'; + addonRow.innerHTML = ` + Add-on: ${addon.name} + CHF ${addon.price} + `; + addonPricingContainer.appendChild(addonRow); + }); + } + } + + // Fade out specified sliders when plan is manually selected + fadeOutSliders(domManager, sliderTypes) { + sliderTypes.forEach(type => { + const sliderContainer = domManager.getSliderContainer(type); + if (sliderContainer) { + sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; + sliderContainer.style.opacity = '0.3'; + sliderContainer.style.pointerEvents = 'none'; + + // Add visual indicator that sliders are disabled + const slider = sliderContainer.querySelector('.form-range'); + if (slider) { + slider.style.cursor = 'not-allowed'; + } + } + }); + this.isSlidersFaded = true; + } + + // Fade in specified sliders when auto-select mode is chosen + fadeInSliders(domManager, sliderTypes) { + sliderTypes.forEach(type => { + const sliderContainer = domManager.getSliderContainer(type); + if (sliderContainer) { + sliderContainer.style.transition = 'opacity 0.3s ease-in-out'; + sliderContainer.style.opacity = '1'; + sliderContainer.style.pointerEvents = 'auto'; + + // Remove visual indicator + const slider = sliderContainer.querySelector('.form-range'); + if (slider) { + slider.style.cursor = 'pointer'; + } + } + }); + this.isSlidersFaded = false; + } + + // Setup service levels dynamically from pricing data + setupServiceLevels(domManager, pricingDataManager) { + const serviceLevelGroup = domManager.get('serviceLevelGroup'); + if (!serviceLevelGroup) return; + + // Get all available service levels from the pricing data + const availableServiceLevels = pricingDataManager.getAvailableServiceLevels(); + + // Clear existing service level buttons + serviceLevelGroup.innerHTML = ''; + + // Create buttons for each available service level + let isFirst = true; + availableServiceLevels.forEach(serviceLevel => { + const inputId = `serviceLevel${serviceLevel.replace(/\s+/g, '')}`; + + // Create radio input + const input = document.createElement('input'); + input.type = 'radio'; + input.className = 'btn-check'; + input.name = 'serviceLevel'; + input.id = inputId; + input.value = serviceLevel; + if (isFirst) { + input.checked = true; + isFirst = false; + } + + // Create label + const label = document.createElement('label'); + label.className = 'btn btn-outline-primary'; + label.setAttribute('for', inputId); + label.textContent = serviceLevel; + + serviceLevelGroup.appendChild(input); + serviceLevelGroup.appendChild(label); + }); + + // Update the serviceLevelInputs reference + domManager.elements.serviceLevelInputs = document.querySelectorAll('input[name="serviceLevel"]'); + } + + // Update slider maximums based on pricing data + updateSliderMaximums(domManager, pricingDataManager) { + const cpuRange = domManager.get('cpuRange'); + const memoryRange = domManager.get('memoryRange'); + + if (!cpuRange || !memoryRange) return; + + const { maxCpus, maxMemory } = pricingDataManager.getSliderMaximums(); + + // Set slider maximums with some padding + if (maxCpus > 0) { + cpuRange.min = "0.25"; + cpuRange.max = Math.ceil(maxCpus); + } + + if (maxMemory > 0) { + memoryRange.min = "0.25"; + memoryRange.max = Math.ceil(maxMemory); + } + + // Update display values after changing min/max + domManager.updateSliderDisplayValues(); + } + + // Update instances slider based on service level and replica info + updateInstancesSlider(domManager, pricingDataManager) { + const instancesRange = domManager.get('instancesRange'); + const instancesValue = domManager.get('instancesValue'); + const replicaInfo = pricingDataManager.getReplicaInfo(); + + if (!instancesRange || !replicaInfo) return; + + const serviceLevel = domManager.getSelectedServiceLevel(); + + if (serviceLevel === 'Guaranteed Availability') { + // For GA, min is ha_replica_min + instancesRange.min = replicaInfo.ha_replica_min; + instancesRange.value = Math.max(instancesRange.value, replicaInfo.ha_replica_min); + } else { + // For BE, min is 1 + instancesRange.min = 1; + instancesRange.value = Math.max(instancesRange.value, 1); + } + + // Set max to ha_replica_max + instancesRange.max = replicaInfo.ha_replica_max; + + // Update display value + if (instancesValue) instancesValue.textContent = instancesRange.value; + + // Update the min/max display under the slider + const instancesMinDisplay = document.getElementById('instancesMinDisplay'); + const instancesMaxDisplay = document.getElementById('instancesMaxDisplay'); + + if (instancesMinDisplay) instancesMinDisplay.textContent = instancesRange.min; + if (instancesMaxDisplay) instancesMaxDisplay.textContent = instancesRange.max; + } +} + +// Export for use in other modules +window.UIManager = UIManager; diff --git a/hub/services/templates/base.html b/hub/services/templates/base.html index 9cef2f2..57d59ff 100644 --- a/hub/services/templates/base.html +++ b/hub/services/templates/base.html @@ -55,9 +55,9 @@ - - {% if partner.cloud_providers.exists %} -
-

Cloud Providers

- -
- {% endif %} - {% if related_articles %}
@@ -153,7 +132,7 @@

{{ partner.name }}

- +
@@ -168,23 +147,26 @@ {% if services %}
-

Consulting for Services

+

+ {% if partner.category == 'TRAINING' %} + Training for Services + {% else %} + Consulting for Services + {% endif %} +

{% for service in services %}
- {% if service.logo %} -
- {% if service.logo %} -
- - {{ service.name }} logo +
+ {% if service.get_logo %} +
+ + {{ service.name }} logo
{% endif %} -
- {% endif %} -

{{ service.name }}

diff --git a/hub/services/templates/services/partner_list.html b/hub/services/templates/services/partner_list.html index 5f554ac..0746547 100644 --- a/hub/services/templates/services/partner_list.html +++ b/hub/services/templates/services/partner_list.html @@ -94,6 +94,23 @@

+ +
+
+

Category

+
+
+ +
+
+
Clear @@ -110,17 +127,21 @@
+ {% if partner.category %} +
+ {{ partner.get_category_display_badge }} +
+ {% endif %}
-
-
- - {{ partner.name }} - -
+ {% if partner.get_logo %} +
+ + {{ partner.name }} logo +
+ {% endif %}

{{ partner.name }}

@@ -135,7 +156,9 @@ {% if partner.website %} Visit Website {% endif %} - Available Services + + {% if partner.category == 'TRAINING' %}Available Trainings{% else %}Available Services{% endif %} +
diff --git a/hub/services/templates/services/pricelist.html b/hub/services/templates/services/pricelist.html index 5cdec7b..a3a0c0c 100644 --- a/hub/services/templates/services/pricelist.html +++ b/hub/services/templates/services/pricelist.html @@ -159,65 +159,11 @@

Complete Price List - All Service Variants

- +
- -
-
-
-
-
Price Components
-
    -
  • - Compute Plan Price - Base infrastructure cost for CPU, memory, and storage -
    • -
  • - SLA Base - Fixed cost for the service level agreement -
    • -
  • - Units × SLA Per Unit - Variable cost based on scale/usage -
    • -
  • - Mandatory Add-ons - Required additional services (backup, monitoring, etc.) -
    • -
-
-
-
Final Price Formula
-
- - Compute Plan Price + - SLA Base + - (Units × SLA Per Unit) + - Mandatory Add-ons = - Final Price - -
-

- - This transparent pricing model ensures you understand exactly what you're paying for. - The table below breaks down each component for every service variant we offer. -

- Price Comparisons: When enabled, you'll see: -
• External Providers - Competitor prices from AWS, Google Cloud, etc. -
• Other Servala Providers - Same service specs on different cloud providers within our network - -

-
-
-
-
+ See VSHN Wiki for a detailed explanation
- +
@@ -226,16 +172,18 @@
- +
- +