126 lines
7.3 KiB
HTML
126 lines
7.3 KiB
HTML
{% load i18n static %}
|
|
<link rel="stylesheet" href="{% static 'css/plan-selection.css' %}">
|
|
<div class="plan-selection"
|
|
data-radio-name="{{ plan_form.compute_plan_assignment.html_name }}"
|
|
data-storage-price-per-gib="{{ storage_plan.price_per_gib|default:0 }}"
|
|
data-per-hour-text="{% trans 'per hour' %}">
|
|
{% if plan_form %}
|
|
<!-- Hidden radio inputs for form submission -->
|
|
<div style="display: none;">
|
|
{% for assignment in plan_form.fields.compute_plan_assignment.queryset %}
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="{{ plan_form.compute_plan_assignment.html_name }}"
|
|
id="{{ plan_form.compute_plan_assignment.auto_id }}_{{ forloop.counter0 }}"
|
|
value="{{ assignment.pk }}"
|
|
{% if plan_form.compute_plan_assignment.value == assignment.pk|stringformat:"s" or plan_form.fields.compute_plan_assignment.initial == assignment or not plan_form.is_bound and forloop.first %}checked{% endif %}
|
|
data-memory-limits="{{ assignment.compute_plan.memory_limits }}"
|
|
data-memory-requests="{{ assignment.compute_plan.memory_requests }}"
|
|
data-cpu-limits="{{ assignment.compute_plan.cpu_limits }}"
|
|
data-cpu-requests="{{ assignment.compute_plan.cpu_requests }}"
|
|
data-plan-name="{{ assignment.compute_plan.name }}"
|
|
data-plan-sla="{{ assignment.sla }}"
|
|
data-plan-sla-display="{{ assignment.get_sla_display }}"
|
|
data-plan-price="{{ assignment.price }}"
|
|
data-plan-unit="{{ assignment.get_unit_display }}"
|
|
required>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="plan-dropdown">
|
|
<div class="plan-dropdown-toggle"
|
|
role="button"
|
|
tabindex="0"
|
|
aria-expanded="false"
|
|
aria-haspopup="listbox"
|
|
id="plan-dropdown-toggle">
|
|
<div class="plan-content">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="plan-header">
|
|
<h6 id="selected-plan-name">-</h6>
|
|
<span class="badge" id="selected-plan-sla">-</span>
|
|
</div>
|
|
<div class="d-flex align-items-start gap-3">
|
|
<div class="text-end">
|
|
<div class="price-display" id="selected-plan-price">-</div>
|
|
<div class="text-muted small">
|
|
{% trans "per" %} <span id="selected-plan-unit">-</span>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-arrow text-muted">
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan-specs text-muted small">
|
|
<i class="bi bi-cpu"></i> <span id="selected-plan-cpu">-</span> {% trans "vCPU" %}
|
|
<span class="mx-2">•</span>
|
|
<i class="bi bi-memory"></i> <span id="selected-plan-memory">-</span> {% trans "RAM" %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan-dropdown-menu" role="listbox" id="plan-dropdown-menu">
|
|
{% for assignment in plan_form.fields.compute_plan_assignment.queryset %}
|
|
<div class="plan-option"
|
|
role="option"
|
|
data-value="{{ assignment.pk }}"
|
|
data-plan-name="{{ assignment.compute_plan.name }}"
|
|
data-plan-sla="{{ assignment.sla }}"
|
|
data-plan-sla-display="{{ assignment.get_sla_display }}"
|
|
data-plan-price="{{ assignment.price }}"
|
|
data-plan-unit="{{ assignment.get_unit_display }}"
|
|
data-cpu-limits="{{ assignment.compute_plan.cpu_limits }}"
|
|
data-memory-limits="{{ assignment.compute_plan.memory_limits }}"
|
|
data-cpu-requests="{{ assignment.compute_plan.cpu_requests }}"
|
|
data-memory-requests="{{ assignment.compute_plan.memory_requests }}">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="plan-header">
|
|
<h6>{{ assignment.compute_plan.name }}</h6>
|
|
<span class="badge bg-{% if assignment.sla == 'guaranteed' %}success{% else %}secondary{% endif %}">
|
|
{{ assignment.get_sla_display }}
|
|
</span>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="price-display">CHF {{ assignment.price }}</div>
|
|
<div class="text-muted small">{% trans "per" %} {{ assignment.get_unit_display }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan-specs text-muted small">
|
|
<i class="bi bi-cpu"></i> {{ assignment.compute_plan.cpu_limits }} {% trans "vCPU" %}
|
|
<span class="mx-2">•</span>
|
|
<i class="bi bi-memory"></i> {{ assignment.compute_plan.memory_limits }} {% trans "RAM" %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="storage-card">
|
|
<div class="plan-content">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="d-flex align-items-start gap-3">
|
|
<div class="storage-icon">
|
|
<i class="bi bi-hdd"></i>
|
|
</div>
|
|
<div class="plan-header">
|
|
<h6>{% trans "Storage" %}</h6>
|
|
<span class="text-muted small">{% trans "Billed separately based on disk usage" %}</span>
|
|
</div>
|
|
</div>
|
|
{% if storage_plan %}
|
|
<div class="text-end">
|
|
<div class="price-display">CHF {{ storage_plan.price_per_gib }}</div>
|
|
<div class="text-muted small">{% trans "per GiB / hour" %}</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-end">
|
|
<span class="badge bg-secondary">{% trans "Included" %}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% if storage_plan %}<div class="plan-specs text-muted small" id="storage-cost-display"></div>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-warning">{% trans "No compute plans available for this service offering." %}</div>
|
|
{% endif %}
|
|
</div>
|
|
<script defer src="{% static 'js/plan-selection.js' %}"></script>
|