Added pagination to orders view, Created, Virtual machines booked page ,Changed logged user nabber , Added pagination to virtual machines view , Started Virtual machine detail page
This commit is contained in:
Levi
parent
3a12308e85
commit
906df2a111
12 changed files with 289 additions and 116 deletions
|
|
@ -18,6 +18,9 @@
|
|||
<!-- Custom CSS -->
|
||||
<link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/payment.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||
|
|
@ -49,30 +52,51 @@
|
|||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand topnav" href="#"><img src="img/logo_black.svg"></a>
|
||||
<a class="navbar-brand topnav" href="#"><img src="{% static 'hosting/img/logo_black.svg' %}"></a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#how">How it works</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#your">Your infrastructure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#our">Our inftrastructure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#price">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#contact">Contact</a>
|
||||
</li>
|
||||
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<li>
|
||||
<a href="{% url 'hosting:logout' %}"> Logout</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'hosting:virtual_machines' %}">
|
||||
<i class="fa fa-server" aria-hidden="true"></i> My Virtual Machines
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'hosting:orders' %}">
|
||||
<i class="fa fa-credit-card"></i> My Orders
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="dropdown">
|
||||
<a class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">
|
||||
<i class="glyphicon glyphicon-user"></i> {{request.user.name}} <span class="caret"></span></a>
|
||||
<ul id="g-account-menu" class="dropdown-menu" role="menu">
|
||||
<li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#how">How it works</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#your">Your infrastructure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#our">Our inftrastructure</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#price">Pricing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ request.META.HTTP_REFERER }}#contact">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{% url 'hosting:login' %}?next={{request.current_path}}">Login</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,55 +2,37 @@
|
|||
{% load staticfiles bootstrap3 %}
|
||||
{% block content %}
|
||||
|
||||
<style type="text/css">
|
||||
.invoice-title h2, .invoice-title h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table > tbody > tr > .no-line {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.table > thead > tr > .no-line {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table > tbody > tr > .thick-line {
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container payment-container">
|
||||
<div class="container order-detail-container">
|
||||
<div class="row">
|
||||
<div class="col-xs-8 col-xs-offset-2">
|
||||
<div class="invoice-title">
|
||||
<h2>Invoice</h2><h3 class="pull-right">Order # {{order.id}}</h3>
|
||||
<h2>Invoice</h2><h3 class="pull-right">Order # {{object.id}}</h3>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<address>
|
||||
<h3><b>Billed To:</b></h3>
|
||||
John Smith<br>
|
||||
1234 Main<br>
|
||||
Apt. 4B<br>
|
||||
Springfield, ST 54321
|
||||
{{user.name}}<br>
|
||||
{{object.billing_address.street_address}},{{order.billing_address.postal_code}}<br>
|
||||
{{object.billing_address.city}}, {{object.billing_address.country}}.
|
||||
</address>
|
||||
</div>
|
||||
<div class="col-xs-6 text-right">
|
||||
<address>
|
||||
<strong>Order Date:</strong><br>
|
||||
{{order.created_at}}<br><br>
|
||||
{{object.created_at}}<br><br>
|
||||
<strong>Status:</strong><br>
|
||||
<strong class="text-danger">{{object.status}}</strong><br><br>
|
||||
</address>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<address>
|
||||
<strong>Payment Method:</strong><br>
|
||||
{{brand}} ending **** {{last4}}<br>
|
||||
{{object.cc_brand}} ending **** {{object.last4}}<br>
|
||||
{{user.email}}
|
||||
</address>
|
||||
</div>
|
||||
|
|
@ -63,15 +45,15 @@
|
|||
<h3><b>Order summary</b></h3>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<p><b>Type</b> <span class="pull-right">{{request.session.vm_specs.hosting_company_name}}</span></p>
|
||||
<p><b>Type</b> <span class="pull-right">{{object.VMPlan.hosting_company_name}}</span></p>
|
||||
<hr>
|
||||
<p><b>Cores</b> <span class="pull-right">{{request.session.vm_specs.cores}}</span></p>
|
||||
<p><b>Cores</b> <span class="pull-right">{{object.VMPlan.cores}}</span></p>
|
||||
<hr>
|
||||
<p><b>Memory</b> <span class="pull-right">{{request.session.vm_specs.memory}} GiB</span></p>
|
||||
<p><b>Memory</b> <span class="pull-right">{{object.VMPlan.memory}} GiB</span></p>
|
||||
<hr>
|
||||
<p><b>Disk space</b> <span class="pull-right">{{request.session.vm_specs.disk_size}} GiB</span></p>
|
||||
<p><b>Disk space</b> <span class="pull-right">{{object.VMPlan.disk_size}} GiB</span></p>
|
||||
<hr>
|
||||
<h4>Total<p class="pull-right"><b>{{request.session.vm_specs.final_price}} CHF</b></p></h4>
|
||||
<h4>Total<p class="pull-right"><b>{{object.VMPlan.price}} CHF</b></p></h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,75 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 %}
|
||||
{% block content %}
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.borderless td {
|
||||
border: none !important;
|
||||
}
|
||||
.borderless thead {
|
||||
}
|
||||
|
||||
.borderless tbody:before {
|
||||
content: "-";
|
||||
display: block;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<div class="container payment-container">
|
||||
<div class="container orders-container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<table class="table">
|
||||
<caption>My orders.</caption>
|
||||
<table class="table borderless table-hover">
|
||||
<h3><i class="fa fa-credit-card"></i> My Orders</h3>
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Date</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in orders %}
|
||||
<tr>
|
||||
<th scope="row">{{order.id}}</th>
|
||||
<td scope="row">{{order.id}}</td>
|
||||
<td>{{order.created_at}}</td>
|
||||
<td>{{order.VMPlan.price}}</td>
|
||||
<td>{{order.approved}}</td>
|
||||
</tr>
|
||||
<td>{{order.VMPlan.price}} CHF</td>
|
||||
<td>{% if order.approved %}
|
||||
<span class="text-success strong">Approved</span>
|
||||
{% else%}
|
||||
<span class="text-danger strong">Declined</span>
|
||||
{% endif%}
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default"><a href="{% url 'hosting:orders' order.id %}">View Detail</a></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">previous</a>
|
||||
{% endif %}
|
||||
<span class="page-current">
|
||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">next</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
56
hosting/templates/hosting/virtual_machines.html
Normal file
56
hosting/templates/hosting/virtual_machines.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="container dashboard-container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<table class="table borderless table-hover">
|
||||
<h3><i class="fa fa-server" aria-hidden="true"></i> Virtual Machines</h3>
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Type</th>
|
||||
<th>Amount</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for vm in vms %}
|
||||
<tr>
|
||||
<td scope="row">{{vm.id}}</td>
|
||||
<td>{{vm.hosting_company_name}}</td>
|
||||
<td>{{vm.price}} CHF</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-default"><a href="">View Detail</a></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% if is_paginated %}
|
||||
<div class="pagination">
|
||||
<span class="page-links">
|
||||
{% if page_obj.has_previous %}
|
||||
<a href="{{request.path}}?page={{ page_obj.previous_page_number }}">previous</a>
|
||||
{% endif %}
|
||||
<span class="page-current">
|
||||
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
|
||||
</span>
|
||||
{% if page_obj.has_next %}
|
||||
<a href="{{request.path}}?page={{ page_obj.next_page_number }}">next</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{%endblock%}
|
||||
Loading…
Add table
Add a link
Reference in a new issue