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
				
			
		|  | @ -90,6 +90,15 @@ class VirtualMachinePlan(models.Model): | |||
|     def hosting_company_name(self): | ||||
|         return self.vm_type.get_hosting_company_display() | ||||
| 
 | ||||
|     @cached_property | ||||
|     def name(self): | ||||
|         name = 'vm-%s' % self.id | ||||
|         return name | ||||
| 
 | ||||
|     @cached_property | ||||
|     def orders(self): | ||||
|         return [self.hostingorder] | ||||
| 
 | ||||
|     @classmethod | ||||
|     def create(cls, data, user): | ||||
|         instance = cls.objects.create(**data) | ||||
|  |  | |||
|  | @ -13,3 +13,8 @@ | |||
|     display: block; | ||||
|     color: transparent; | ||||
| } | ||||
| 
 | ||||
| .inline-headers h3, .inline-headers h4 { | ||||
|   display: inline-block; | ||||
|   vertical-align: baseline; | ||||
| } | ||||
|  |  | |||
							
								
								
									
										42
									
								
								hosting/static/hosting/css/virtual-machine.css
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										42
									
								
								hosting/static/hosting/css/virtual-machine.css
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,42 @@ | |||
| .virtual-machine-container .tabs-left, .virtual-machine-container .tabs-right { | ||||
|   border-bottom: none; | ||||
|   padding-top: 2px; | ||||
| } | ||||
| .virtual-machine-container .tabs-left { | ||||
|   border-right: 1px solid #ddd; | ||||
| } | ||||
| .virtual-machine-container .tabs-right { | ||||
|   border-left: 1px solid #ddd; | ||||
| } | ||||
| .virtual-machine-container .tabs-left>li, .virtual-machine-container .tabs-right>li { | ||||
|   float: none; | ||||
|   margin-bottom: 2px; | ||||
| } | ||||
| .virtual-machine-container .tabs-left>li { | ||||
|   margin-right: -1px; | ||||
| } | ||||
| .virtual-machine-container .tabs-right>li { | ||||
|   margin-left: -1px; | ||||
| } | ||||
| .virtual-machine-container .tabs-left>li.active>a, | ||||
| .virtual-machine-container .tabs-left>li.active>a:hover, | ||||
| .virtual-machine-container .tabs-left>li.active>a:focus { | ||||
|   border-bottom-color: #ddd; | ||||
|   border-right-color: transparent; | ||||
| } | ||||
| 
 | ||||
| .virtual-machine-container .tabs-right>li.active>a, | ||||
| .virtual-machine-container .tabs-right>li.active>a:hover, | ||||
| .virtual-machine-container .tabs-right>li.active>a:focus { | ||||
|   border-bottom: 1px solid #ddd; | ||||
|   border-left-color: transparent; | ||||
| } | ||||
| .virtual-machine-container .tabs-left>li>a { | ||||
|   border-radius: 4px 0 0 4px; | ||||
|   margin-right: 0; | ||||
|   display:block; | ||||
| } | ||||
| .virtual-machine-container .tabs-right>li>a { | ||||
|   border-radius: 0 4px 4px 0; | ||||
|   margin-right: 0; | ||||
| } | ||||
|  | @ -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 %} | ||||
|  |  | |||
|  | @ -2,7 +2,8 @@ from django.conf.urls import url | |||
| 
 | ||||
| from .views import DjangoHostingView, RailsHostingView, PaymentVMView, \ | ||||
|     NodeJSHostingView, LoginView, SignupView, IndexView, \ | ||||
|     OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView | ||||
|     OrdersHostingListView, OrdersHostingDetailView, VirtualMachinesPlanListView,\ | ||||
|     VirtualMachineDetailListView | ||||
| 
 | ||||
| urlpatterns = [ | ||||
|     url(r'index/?$', IndexView.as_view(), name='index'), | ||||
|  | @ -13,6 +14,8 @@ urlpatterns = [ | |||
|     url(r'orders/?$', OrdersHostingListView.as_view(), name='orders'), | ||||
|     url(r'orders/(?P<pk>\d+)/?$', OrdersHostingDetailView.as_view(), name='orders'), | ||||
|     url(r'my-virtual-machines/?$', VirtualMachinesPlanListView.as_view(), name='virtual_machines'), | ||||
|     url(r'my-virtual-machines/(?P<pk>\d+)/?$', VirtualMachineDetailListView.as_view(), | ||||
|         name='virtual_machines'), | ||||
|     url(r'login/?$', LoginView.as_view(), name='login'), | ||||
|     url(r'signup/?$', SignupView.as_view(), name='signup'), | ||||
|     url(r'^logout/?$', 'django.contrib.auth.views.logout', | ||||
|  |  | |||
|  | @ -247,3 +247,10 @@ class VirtualMachinesPlanListView(LoginRequiredMixin, ListView): | |||
|         user = self.request.user | ||||
|         self.queryset = VirtualMachinePlan.objects.active(user) | ||||
|         return super(VirtualMachinesPlanListView, self).get_queryset() | ||||
| 
 | ||||
| 
 | ||||
| class VirtualMachineDetailListView(LoginRequiredMixin, DetailView): | ||||
|     template_name = "hosting/virtual_machine_detail.html" | ||||
|     login_url = reverse_lazy('hosting:login') | ||||
|     model = VirtualMachinePlan | ||||
|     context_object_name = "virtual_machine" | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue