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

filtering in price list

Browse source
This commit is contained in:
Tobias Brunner 2025-05-26 15:36:20 +02:00
parent 57fd001246
commit 7989d4e553
No known key found for this signature in database
2 changed files with 152 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

97
hub/services/templates/services/pricelist.html
View file

@ -13,6 +13,84 @@
<div class="col-12">
<h1 class="mb-4">Complete Price List - All Service Variants</h1>
<!-- Filter Form -->
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">Filters</h5>
</div>
<div class="card-body">
<form method="get" class="row g-3" id="filter-form">
<div class="col-md-3">
<label for="cloud_provider" class="form-label">Cloud Provider</label>
<select name="cloud_provider" id="cloud_provider" class="form-select filter-select">
<option value="">All Providers</option>
{% for provider in all_cloud_providers %}
<option value="{{ provider }}" {% if provider == filter_cloud_provider %}selected{% endif %}>
{{ provider }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label for="service" class="form-label">Service</label>
<select name="service" id="service" class="form-select filter-select">
<option value="">All Services</option>
{% for service in all_services %}
<option value="{{ service }}" {% if service == filter_service %}selected{% endif %}>
{{ service }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label for="compute_plan_group" class="form-label">Compute Plan Group</label>
<select name="compute_plan_group" id="compute_plan_group" class="form-select filter-select">
<option value="">All Groups</option>
{% for group in all_compute_plan_groups %}
<option value="{{ group }}" {% if group == filter_compute_plan_group %}selected{% endif %}>
{{ group }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-3">
<label for="service_level" class="form-label">Service Level</label>
<select name="service_level" id="service_level" class="form-select filter-select">
<option value="">All Service Levels</option>
{% for level in all_service_levels %}
<option value="{{ level }}" {% if level == filter_service_level %}selected{% endif %}>
{{ level }}
</option>
{% endfor %}
</select>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="discount_details" value="true" id="discount_details" {% if show_discount_details %}checked{% endif %}>
<label class="form-check-label" for="discount_details">
Show discount details
</label>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary">Apply Filters</button>
<a href="{% url 'services:pricelist' %}" class="btn btn-secondary">Clear Filters</a>
</div>
</form>
</div>
</div>
<!-- Active Filters Display -->
{% if filter_cloud_provider or filter_service or filter_compute_plan_group or filter_service_level %}
<div class="alert alert-info">
<strong>Active Filters:</strong>
{% if filter_cloud_provider %}<span class="badge me-1">Cloud Provider: {{ filter_cloud_provider }}</span>{% endif %}
{% if filter_service %}<span class="badge me-1">Service: {{ filter_service }}</span>{% endif %}
{% if filter_compute_plan_group %}<span class="badge me-1">Group: {{ filter_compute_plan_group }}</span>{% endif %}
{% if filter_service_level %}<span class="badge me-1">Service Level: {{ filter_service_level }}</span>{% endif %}
</div>
{% endif %}
{% if pricing_data_by_group_and_service_level %}
{% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
<div class="mb-5 border rounded p-3">
@ -135,7 +213,7 @@
{% else %}
<div class="alert alert-info">
<h4>No pricing data available</h4>
<p>Please ensure you have active compute plans with prices and VSHNAppCat price configurations.</p>
<p>{% if filter_cloud_provider or filter_service or filter_compute_plan_group or filter_service_level %}No data matches the selected filters. Try adjusting your filter criteria.{% else %}Please ensure you have active compute plans with prices and VSHNAppCat price configurations.{% endif %}</p>
</div>
{% endif %}
</div>
@ -144,6 +222,23 @@
<script>
document.addEventListener('DOMContentLoaded', function() {
// Auto-submit form when filter dropdowns change
const filterForm = document.getElementById('filter-form');
const filterSelects = document.querySelectorAll('.filter-select');
const discountCheckbox = document.getElementById('discount_details');
// Add change event listeners to all filter dropdowns
filterSelects.forEach(function(select) {
select.addEventListener('change', function() {
filterForm.submit();
});
});
// Add change event listener to discount details checkbox
discountCheckbox.addEventListener('change', function() {
filterForm.submit();
});
// Chart data for each service level
{% for group_name, service_levels in pricing_data_by_group_and_service_level.items %}
{% for service_level, pricing_data in service_levels.items %}