Improve service detail template
This commit is contained in:
parent
58790c3b16
commit
fb11aa4407
4 changed files with 62 additions and 118 deletions
|
|
@ -18,7 +18,7 @@
|
|||
max-height: 48px">
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="card-title mb-0">{{ service.name }}</h4>
|
||||
<h4 class="mb-0">{{ service.name }}</h4>
|
||||
<small class="text-muted">{{ service.category }}</small>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -28,99 +28,38 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">{% trans "Available Offerings" %}</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% for offering in service.offerings.all %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<div class="d-flex align-items-center">
|
||||
{% if offering.provider.logo %}
|
||||
<img src="{{ offering.provider.logo.url }}"
|
||||
alt="{{ offering.provider.name }}"
|
||||
class="me-3"
|
||||
style="max-height: 40px">
|
||||
{% endif %}
|
||||
<h5 class="mb-0">{{ service.name }} on {{ offering.provider.name }}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8">
|
||||
<p>{{ offering.description|default:"No description available." }}</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h6>{% trans "Control Planes" %}</h6>
|
||||
<ul>
|
||||
{% for control_plane in offering.control_planes.all %}
|
||||
<li>{{ control_plane.name }}</li>
|
||||
{% empty %}
|
||||
<li>{% trans "No control planes available" %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<h6>{% trans "Available Plans" %}</h6>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Plan" %}</th>
|
||||
<th>{% trans "Term" %}</th>
|
||||
<th>{% trans "Features" %}</th>
|
||||
<th>{% trans "Pricing" %}</th>
|
||||
<th>{% trans "Actions" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for plan in plans %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ plan.name }}</strong>
|
||||
{% if plan.description %}
|
||||
<br>
|
||||
<small>{{ plan.description }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ plan.term }} {% trans "months" %}</td>
|
||||
<td>
|
||||
{% if plan.features %}
|
||||
<ul class="mb-0">
|
||||
{% for feature, value in plan.features.items %}<li>{{ feature }}: {{ value }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span class="text-muted">{% trans "No features specified" %}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if plan.pricing %}
|
||||
<ul class="mb-0">
|
||||
{% for price_type, price in plan.pricing.items %}<li>{{ price_type }}: {{ price }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<span class="text-muted">{% trans "No pricing specified" %}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-primary btn-sm">{% trans "Order" %}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<tr>
|
||||
<td colspan="5" class="text-center">{% trans "No plans available for this offering" %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% for offering in service.offerings.all %}
|
||||
<div class="card col-6 col-lg-3 col-md-4">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
{% if offering.provider.logo %}
|
||||
<img src="{{ offering.provider.logo.url }}"
|
||||
alt="{{ offering.provider.name }}"
|
||||
class="me-3"
|
||||
style="max-width: 48px;
|
||||
max-height: 48px">
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="mb-0">{{ offering.provider.name }}</h4>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="alert alert-info">{% trans "No offerings available for this service yet." %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if offering.description %}
|
||||
<p class="card-text">{{ offering.description }}</p>
|
||||
{% elif offering.provider.description %}
|
||||
<p class="card-text">{{ offering.provider.description }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<span></span>
|
||||
<a href="{{ offering.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p>{% translate "No offerings found." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -18,30 +18,33 @@
|
|||
</div>
|
||||
{% for service in services %}
|
||||
<div class="card col-6 col-lg-3 col-md-4">
|
||||
<div class="card-content">
|
||||
<div class="card-header d-flex align-items-center">
|
||||
{% if service.logo %}
|
||||
<img src="{{ service.logo.url }}"
|
||||
alt="{{ service.name }}"
|
||||
class="me-3"
|
||||
style="max-width: 48px;
|
||||
max-height: 48px">
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="card-title mb-0">{{ service.name }}</h4>
|
||||
<small class="text-muted">{{ service.category }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<a href="{{ service.pk }}/" class="btn btn-primary">{% translate "View Details" %}</a>
|
||||
<div class="card-header d-flex align-items-center">
|
||||
{% if service.logo %}
|
||||
<img src="{{ service.logo.url }}"
|
||||
alt="{{ service.name }}"
|
||||
class="me-3"
|
||||
style="max-width: 48px;
|
||||
max-height: 48px">
|
||||
{% endif %}
|
||||
<div class="d-flex flex-column">
|
||||
<h4 class="mb-0">{{ service.name }}</h4>
|
||||
<small class="text-muted">{{ service.category }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if service.description %}<p class="card-text">{{ service.description }}</p>{% endif %}
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-between">
|
||||
<span></span>
|
||||
<a href="{{ service.pk }}/" class="btn btn-light-primary">{% translate "Read More" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<p>{% translate "No services found." %}</p>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<p>{% translate "No services found." %}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<script src="{% static "js/autosubmit.js" %}" defer></script>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">{% translate "Profile" %}</h4>
|
||||
<h4 class="">{% translate "Profile" %}</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title">{% translate "Account" %}</h4>
|
||||
<h4 class="">{% translate "Account" %}</h4>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="card-body">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
from django.utils.functional import cached_property
|
||||
from django.views.generic import DetailView, ListView
|
||||
|
||||
from servala.core.models import Plan, Service, ServiceOffering
|
||||
from servala.core.models import Service
|
||||
from servala.frontend.forms.service import ServiceFilterForm
|
||||
from servala.frontend.views.mixins import OrganizationViewMixin
|
||||
|
||||
|
|
@ -43,6 +43,8 @@ class ServiceDetailView(OrganizationViewMixin, DetailView):
|
|||
return Service.objects.select_related("category").prefetch_related(
|
||||
"offerings",
|
||||
"offerings__provider",
|
||||
"offerings__control_planes",
|
||||
"offerings__plans",
|
||||
)
|
||||
|
||||
|
||||
class ServiceOfferingDetailView:
|
||||
pass
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue