introduce support for instances in price calculator

This commit is contained in:
Tobias Brunner 2025-06-04 17:39:53 +02:00
parent 8bb8930361
commit 6ad8b9aa49
No known key found for this signature in database
3 changed files with 134 additions and 25 deletions

View file

@ -176,8 +176,8 @@
</label>
<input type="range" class="form-range" id="cpuRange" min="1" max="32" value="2" step="1">
<div class="d-flex justify-content-between text-muted small">
<span>1</span>
<span>32</span>
<span id="cpuMinDisplay">1</span>
<span id="cpuMaxDisplay">32</span>
</div>
</div>
@ -189,8 +189,8 @@
</label>
<input type="range" class="form-range" id="memoryRange" min="1" max="128" value="4" step="1">
<div class="d-flex justify-content-between text-muted small">
<span>1 GB</span>
<span>128 GB</span>
<span id="memoryMinDisplay">1 GB</span>
<span id="memoryMaxDisplay">128 GB</span>
</div>
</div>
@ -202,8 +202,21 @@
</label>
<input type="range" class="form-range" id="storageRange" min="10" max="1000" value="20" step="10">
<div class="d-flex justify-content-between text-muted small">
<span>10 GB</span>
<span>1000 GB</span>
<span id="storageMinDisplay">10 GB</span>
<span id="storageMaxDisplay">1000 GB</span>
</div>
</div>
<!-- Instances Slider -->
<div class="mb-4">
<label for="instancesRange" class="form-label d-flex justify-content-between">
<span>Instances</span>
<span class="fw-bold" id="instancesValue">1</span>
</label>
<input type="range" class="form-range" id="instancesRange" min="1" max="1" value="1" step="1">
<div class="d-flex justify-content-between text-muted small">
<span id="instancesMinDisplay">1</span>
<span id="instancesMaxDisplay">1</span>
</div>
</div>
@ -255,15 +268,22 @@
</div>
<div class="row mb-3">
<div class="col-4">
<div class="col-3">
<small class="text-muted">vCPUs</small>
<div class="fw-bold" id="planCpus"></div>
</div>
<div class="col-4">
<div class="col-3">
<small class="text-muted">Memory</small>
<div class="fw-bold" id="planMemory"></div>
</div>
<div class="col-4">
<div class="col-3">
<small class="text-muted">Instances</small>
<div class="fw-bold" id="planInstances"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<small class="text-muted">Service Level</small>
<div class="fw-bold">
<a href="https://products.vshn.ch/service_levels.html" target="_blank" class="text-decoration-none" id="planServiceLevel"></a>