Added VM detail page, Added VM setting page, Added VM pricing page,Added VM orders page, Added VM status page
This commit is contained in:
parent
bbddb48ecc
commit
1486843af0
9 changed files with 226 additions and 20 deletions
|
|
@ -18,9 +18,10 @@
|
|||
<!-- 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/order.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/commons.css' %}" rel="stylesheet">
|
||||
<link href="{% static 'hosting/css/virtual-machine.css' %}" rel="stylesheet">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,6 @@
|
|||
{% 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 orders-container">
|
||||
<div class="row">
|
||||
|
|
|
|||
155
hosting/templates/hosting/virtual_machine_detail.html
Normal file
155
hosting/templates/hosting/virtual_machine_detail.html
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
{% extends "hosting/base_short.html" %}
|
||||
{% load staticfiles bootstrap3 %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="container virtual-machine-container dashboard-container ">
|
||||
<div class="row">
|
||||
<div class="col-md-9 col-md-offset-2">
|
||||
<div class="col-sm-12">
|
||||
<h3><i class="fa fa-cloud" aria-hidden="true"></i> {{virtual_machine.name}}</h3>
|
||||
<hr/>
|
||||
<div class="col-md-3"> <!-- required for floating -->
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs tabs-left sideways">
|
||||
<li class="active">
|
||||
<a href="#settings-v" data-toggle="tab">
|
||||
<i class="fa fa-cogs" aria-hidden="true"></i>
|
||||
Settings
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#billing-v" data-toggle="tab">
|
||||
<i class="fa fa-money" aria-hidden="true"></i>
|
||||
Billing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#orders-v" data-toggle="tab">
|
||||
<i class="fa fa-credit-card"></i>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#status-v" data-toggle="tab">
|
||||
<i class="fa fa-signal" aria-hidden="true"></i> Status
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-md-9">
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane active" id="settings-v">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3>{{virtual_machine.hosting_company_name}}</h3>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center">
|
||||
<i class="fa fa-cubes" aria-hidden="true"></i> Cores <br/>
|
||||
<span class="label label-success">{{virtual_machine.cores}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center">
|
||||
<i class="fa fa-tachometer" aria-hidden="true"></i> Memory <br/>
|
||||
<span class="label label-success">{{virtual_machine.memory}} GiB</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="well text-center">
|
||||
<i class="fa fa-hdd-o" aria-hidden="true"></i> Disk <br/>
|
||||
<span class="label label-success">{{virtual_machine.disk_size}} GiB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/row-->
|
||||
</div><!--/col-12-->
|
||||
</div><!--/row-->
|
||||
|
||||
|
||||
</div>
|
||||
<div class="tab-pane" id="billing-v">
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-md-12 inline-headers">
|
||||
<h3>Current pricing</h3>
|
||||
<span class="h3 pull-right"><strong>{{virtual_machine.price|floatformat}} CHF</strong>/mo</span>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane" id="orders-v">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<table class="table borderless table-hover">
|
||||
<h3>Orders</h3>
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Date</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for order in virtual_machine.orders %}
|
||||
<tr>
|
||||
<td scope="row">{{order.id}}</td>
|
||||
<td>{{order.created_at}}</td>
|
||||
<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>
|
||||
</div><!--/col-12-->
|
||||
</div><!--/row-->
|
||||
</div>
|
||||
<div class="tab-pane" id="status-v">
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-md-12 inline-headers">
|
||||
<h3>Current status</h3>
|
||||
<span class="h3 pull-right label label-success"><strong>Online</strong></span>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{%endblock%}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
<tbody>
|
||||
{% for vm in vms %}
|
||||
<tr>
|
||||
<td scope="row">{{vm.id}}</td>
|
||||
<td scope="row">{{vm.name}}</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>
|
||||
<button type="button" class="btn btn-default"><a href="{% url 'hosting:virtual_machines' vm.id %}">View Detail</a></button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue