datacenterlight: Added create vm modal and responding with json
This commit is contained in:
		
					parent
					
						
							
								ab66d25abe
							
						
					
				
			
			
				commit
				
					
						a48188a190
					
				
			
		
					 2 changed files with 143 additions and 85 deletions
				
			
		|  | @ -9,98 +9,133 @@ | ||||||
| 
 | 
 | ||||||
| {% block content %} | {% block content %} | ||||||
| 
 | 
 | ||||||
|     <div class="order-detail-container"> | <div class="order-detail-container"> | ||||||
|        {% if messages %} |    {% if messages %} | ||||||
|             <div class="row"> |         <div class="row"> | ||||||
|                 <div class="col-xs-12 col-md-8 col-md-offset-2"> |             <div class="col-xs-12 col-md-8 col-md-offset-2"> | ||||||
|                     <br/> |                 <br/> | ||||||
|                     <div class="alert alert-warning"> |                 <div class="alert alert-warning"> | ||||||
|                         {% for message in messages %} |                     {% for message in messages %} | ||||||
|                         <span>{{ message }}</span> |                     <span>{{ message }}</span> | ||||||
|                         {% endfor %} |                     {% endfor %} | ||||||
|                     </div> |  | ||||||
|                 </div> |                 </div> | ||||||
|             </div> |             </div> | ||||||
|         {% endif %} |         </div> | ||||||
|         {% if not error %} |     {% endif %} | ||||||
|             <div class="row"> |     {% if not error %} | ||||||
|                 <div class="col-xs-12 col-md-8 col-md-offset-2"> |         <div class="row"> | ||||||
|                     <div class="invoice-title"> |             <div class="col-xs-12 col-md-8 col-md-offset-2"> | ||||||
|                         <h2>{% trans "Confirm Order"%}</h2> |                 <div class="invoice-title"> | ||||||
|                     </div> |                     <h2>{% trans "Confirm Order"%}</h2> | ||||||
|                     <hr> |  | ||||||
|                     <div class="row"> |  | ||||||
|                         <div class="col-xs-12 col-sm-6 pull-right order-confirm-date"> |  | ||||||
|                             <address> |  | ||||||
|                                 <strong>{% trans "Date"%}:</strong><br> |  | ||||||
|                                 <span id="order-created_at">{% now "Y-m-d H:i" %}</span><br><br> |  | ||||||
|                             </address> |  | ||||||
|                         </div> |  | ||||||
|                         <div class="col-xs-12 col-sm-6"> |  | ||||||
|                             <address> |  | ||||||
|                             <h3><b>{% trans "Billed To:"%}</b></h3> |  | ||||||
|                             {% with billing_address_data as billing_address %} |  | ||||||
|                                 {{billing_address.cardholder_name}}<br> {{billing_address.street_address}}, {{billing_address.postal_code}}<br> |  | ||||||
|                                 {{billing_address.city}}, {{billing_address.country}}. |  | ||||||
|                             {% endwith %} |  | ||||||
|                             </address> |  | ||||||
|                         </div> |  | ||||||
|                     </div> |  | ||||||
|                     <div class="row"> |  | ||||||
|                         <div class="col-xs-6"> |  | ||||||
|                             <address> |  | ||||||
|                                 <strong>{% trans "Payment Method:"%}</strong><br> |  | ||||||
|                                     {{cc_brand}} {% trans "ending in" %} **** {{cc_last4}}<br> |  | ||||||
|                                     {{request.session.user.email}} |  | ||||||
|                             </address> |  | ||||||
|                         </div> |  | ||||||
|                     </div> |  | ||||||
|                 </div> |                 </div> | ||||||
|             </div> |                 <hr> | ||||||
| 
 |                 <div class="row"> | ||||||
|             <div class="row"> |                     <div class="col-xs-12 col-sm-6 pull-right order-confirm-date"> | ||||||
|                 <div class="col-md-8 col-md-offset-2"> |                         <address> | ||||||
|                     <h3><b>{% trans "Order summary"%}</b></h3> |                             <strong>{% trans "Date"%}:</strong><br> | ||||||
|                     <hr> |                             <span id="order-created_at">{% now "Y-m-d H:i" %}</span><br><br> | ||||||
|                     <div class="content"> |                         </address> | ||||||
|                         {% with request.session.specs as vm %} |                     </div> | ||||||
|                             <p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cpu}}</span></p> |                     <div class="col-xs-12 col-sm-6"> | ||||||
|                             <hr> |                         <address> | ||||||
|                             <p><b>{% trans "Memory"%}</b> <span class="pull-right">{{vm.memory}} GB</span></p> |                         <h3><b>{% trans "Billed To:"%}</b></h3> | ||||||
|                             <hr> |                         {% with billing_address_data as billing_address %} | ||||||
|                             <p><b>{% trans "Disk space"%}</b> <span class="pull-right">{{vm.disk_size}} GB</span></p> |                             {{billing_address.cardholder_name}}<br> {{billing_address.street_address}}, {{billing_address.postal_code}}<br> | ||||||
|                             <hr> |                             {{billing_address.city}}, {{billing_address.country}}. | ||||||
|                             <p><b>{% trans "Configuration"%}</b> <span class="pull-right">{{request.session.template.name}}</span></p> |  | ||||||
|                             <hr> |  | ||||||
|                             <h4>{% trans "Total"%}<p class="pull-right"><b>{{vm.price}} CHF</b><span class="dcl-price-month"> /{% trans "Month" %}</span></p></h4> |  | ||||||
|                         {% endwith %} |                         {% endwith %} | ||||||
|  |                         </address> | ||||||
|  |                     </div> | ||||||
|  |                 </div> | ||||||
|  |                 <div class="row"> | ||||||
|  |                     <div class="col-xs-6"> | ||||||
|  |                         <address> | ||||||
|  |                             <strong>{% trans "Payment Method:"%}</strong><br> | ||||||
|  |                                 {{cc_brand}} {% trans "ending in" %} **** {{cc_last4}}<br> | ||||||
|  |                                 {{request.session.user.email}} | ||||||
|  |                         </address> | ||||||
|                     </div> |                     </div> | ||||||
|                     <br/> |  | ||||||
|                     <form method="post"> |  | ||||||
|                         {% csrf_token %} |  | ||||||
|                         <div class="row"> |  | ||||||
|                             <div class="col-sm-8"> |  | ||||||
|                                 <p class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</p> |  | ||||||
|                             </div> |  | ||||||
|                             <div class="col-sm-4 content"> |  | ||||||
|                                 <a href="{{next_url}}" ><button class="btn btn-info pull-right">{% trans "Place order"%}</button></a> |  | ||||||
|                             </div> |  | ||||||
|                         </div> |  | ||||||
|                     </form> |  | ||||||
|                 </div> |                 </div> | ||||||
|             </div> |             </div> | ||||||
|         {% endif %} |         </div> | ||||||
|  | 
 | ||||||
|  |         <div class="row"> | ||||||
|  |             <div class="col-md-8 col-md-offset-2"> | ||||||
|  |                 <h3><b>{% trans "Order summary"%}</b></h3> | ||||||
|  |                 <hr> | ||||||
|  |                 <div class="content"> | ||||||
|  |                     {% with request.session.specs as vm %} | ||||||
|  |                         <p><b>{% trans "Cores"%}</b> <span class="pull-right">{{vm.cpu}}</span></p> | ||||||
|  |                         <hr> | ||||||
|  |                         <p><b>{% trans "Memory"%}</b> <span class="pull-right">{{vm.memory}} GB</span></p> | ||||||
|  |                         <hr> | ||||||
|  |                         <p><b>{% trans "Disk space"%}</b> <span class="pull-right">{{vm.disk_size}} GB</span></p> | ||||||
|  |                         <hr> | ||||||
|  |                         <p><b>{% trans "Configuration"%}</b> <span class="pull-right">{{request.session.template.name}}</span></p> | ||||||
|  |                         <hr> | ||||||
|  |                         <h4>{% trans "Total"%}<p class="pull-right"><b>{{vm.price}} CHF</b><span class="dcl-price-month"> /{% trans "Month" %}</span></p></h4> | ||||||
|  |                     {% endwith %} | ||||||
|  |                 </div> | ||||||
|  |                 <br/> | ||||||
|  |                 <form method="post" id="virtual_machine_create_form"> | ||||||
|  |                     {% csrf_token %} | ||||||
|  |                     <div class="row"> | ||||||
|  |                         <div class="col-sm-8"> | ||||||
|  |                             <p class="dcl-place-order-text">{% blocktrans with vm_price=request.session.specs.price %}By clicking "Place order" this plan will charge your credit card account with the fee of {{ vm_price }}CHF/month{% endblocktrans %}.</p> | ||||||
|  |                         </div> | ||||||
|  |                         <div class="col-sm-4 content"> | ||||||
|  |                             <button class="btn btn-info pull-right" | ||||||
|  |                                     id="btn-create-vm" | ||||||
|  |                                     data-href="{% url 'hosting:order-confirmation' %}" | ||||||
|  |                                     data-toggle="modal" | ||||||
|  |                                     data-target="#createvm-modal"> | ||||||
|  |                                 {% trans "Place order"%} | ||||||
|  |                             </button> | ||||||
|  |                         </div> | ||||||
|  |                     </div> | ||||||
|  |                 </form> | ||||||
|  |             </div> | ||||||
|  |         </div> | ||||||
|  |     {% endif %} | ||||||
|  | </div> | ||||||
|  | <!-- Create VM Modal --> | ||||||
|  | <div class="modal fade" id="createvm-modal" tabindex="-1" role="dialog" | ||||||
|  |      aria-hidden="true" data-backdrop="static" data-keyboard="false"> | ||||||
|  |     <div class="modal-dialog"> | ||||||
|  |         <div class="modal-content"> | ||||||
|  |             <div class="modal-header"> | ||||||
|  |                 <button type="button" class="close hidden" data-dismiss="modal" | ||||||
|  |                         aria-label="create-vm-close"> | ||||||
|  |                     <span aria-hidden="true">×</span> | ||||||
|  |                 </button> | ||||||
|  |             </div> | ||||||
|  |             <div class="modal-body"> | ||||||
|  |                 <div class="modal-icon"> | ||||||
|  |                     <i class="fa fa-cog fa-spin fa-3x fa-fw"></i> | ||||||
|  |                     <span class="sr-only">{% trans "Processing..." %}</span> | ||||||
|  |                 </div> | ||||||
|  |                 <h4 class="modal-title" id="createvm-modal-title"> | ||||||
|  |                 </h4> | ||||||
|  |                 <div class="modal-text" id="createvm-modal-body"> | ||||||
|  |                     {% trans "Hold tight, we are processing your request" %} | ||||||
|  |                 </div> | ||||||
|  |                 <div class="modal-footer"> | ||||||
|  |                 </div> | ||||||
|  |             </div> | ||||||
|  |         </div> | ||||||
|     </div> |     </div> | ||||||
|  | </div> | ||||||
|  | <!-- / Create VM Modal --> | ||||||
| 
 | 
 | ||||||
| 
 | 
 | ||||||
|     <script type="text/javascript"> | <script type="text/javascript"> | ||||||
|  |     {% trans "Some problem encountered. Please try again later." as err_msg %} | ||||||
|  |     var create_vm_error_message = '{{err_msg|safe}}.'; | ||||||
| 
 | 
 | ||||||
|         window.onload = function () { |     window.onload = function () { | ||||||
|                 var locale_date = moment.utc(document.getElementById("order-created_at").textContent,'YYYY-MM-DD HH:mm').toDate(); |         var locale_date = moment.utc(document.getElementById("order-created_at").textContent,'YYYY-MM-DD HH:mm').toDate(); | ||||||
|                 locale_date =  moment(locale_date).format("YYYY-MM-DD h:mm:ss a"); |         locale_date =  moment(locale_date).format("YYYY-MM-DD h:mm:ss a"); | ||||||
|                 document.getElementById('order-created_at').innerHTML = locale_date; |         document.getElementById('order-created_at').innerHTML = locale_date; | ||||||
|  |     }; | ||||||
| 
 | 
 | ||||||
|         }; | </script> | ||||||
| 
 |  | ||||||
|     </script> |  | ||||||
| {%endblock%} | {%endblock%} | ||||||
|  |  | ||||||
|  | @ -1,4 +1,5 @@ | ||||||
| import logging | import logging | ||||||
|  | import json | ||||||
| 
 | 
 | ||||||
| from django import forms | from django import forms | ||||||
| from django.conf import settings | from django.conf import settings | ||||||
|  | @ -6,7 +7,7 @@ from django.contrib import messages | ||||||
| from django.contrib.auth import login, authenticate | from django.contrib.auth import login, authenticate | ||||||
| from django.core.exceptions import ValidationError | from django.core.exceptions import ValidationError | ||||||
| from django.core.urlresolvers import reverse | from django.core.urlresolvers import reverse | ||||||
| from django.http import HttpResponseRedirect | from django.http import HttpResponseRedirect, HttpResponse | ||||||
| from django.shortcuts import redirect | from django.shortcuts import redirect | ||||||
| from django.shortcuts import render | from django.shortcuts import render | ||||||
| from django.utils.translation import get_language, ugettext_lazy as _ | from django.utils.translation import get_language, ugettext_lazy as _ | ||||||
|  | @ -554,6 +555,9 @@ class OrderConfirmationView(DetailView): | ||||||
|             try: |             try: | ||||||
|                 custom_user = CustomUser.objects.get( |                 custom_user = CustomUser.objects.get( | ||||||
|                     email=user.get('email')) |                     email=user.get('email')) | ||||||
|  |                 customer = StripeCustomer.objects.filter( | ||||||
|  |                     user_id=custom_user.id).first() | ||||||
|  |                 stripe_customer_id = customer.id | ||||||
|             except CustomUser.DoesNotExist: |             except CustomUser.DoesNotExist: | ||||||
|                 logger.debug( |                 logger.debug( | ||||||
|                     "Customer {} does not exist.".format(user.get('email'))) |                     "Customer {} does not exist.".format(user.get('email'))) | ||||||
|  | @ -577,6 +581,7 @@ class OrderConfirmationView(DetailView): | ||||||
|             customer = StripeCustomer.objects.filter( |             customer = StripeCustomer.objects.filter( | ||||||
|                 id=stripe_customer_id).first() |                 id=stripe_customer_id).first() | ||||||
|             custom_user = customer.user |             custom_user = customer.user | ||||||
|  |             stripe_customer_id = customer.id | ||||||
| 
 | 
 | ||||||
|         # Save billing address |         # Save billing address | ||||||
|         billing_address_data = request.session.get('billing_address_data') |         billing_address_data = request.session.get('billing_address_data') | ||||||
|  | @ -603,5 +608,23 @@ class OrderConfirmationView(DetailView): | ||||||
|                              stripe_customer_id, billing_address_data, |                              stripe_customer_id, billing_address_data, | ||||||
|                              billing_address_id, |                              billing_address_id, | ||||||
|                              stripe_subscription_obj, card_details_dict) |                              stripe_subscription_obj, card_details_dict) | ||||||
|         request.session['order_confirmation'] = True |         for session_var in ['specs', 'template', 'billing_address', | ||||||
|         return HttpResponseRedirect(reverse('datacenterlight:order_success')) |                             'billing_address_data', | ||||||
|  |                             'token', 'customer']: | ||||||
|  |             if session_var in request.session: | ||||||
|  |                 del request.session[session_var] | ||||||
|  | 
 | ||||||
|  |         response = { | ||||||
|  |             'status': True, | ||||||
|  |             'redirect': reverse( | ||||||
|  |                 'hosting:dashboard') if request.user.is_authenticated() else reverse( | ||||||
|  |                 'datacenterlight:index'), | ||||||
|  |             'msg_title': str(_('Thank you for the order.')), | ||||||
|  |             'msg_body': str( | ||||||
|  |                 _('Your VM will be up and running in a few moments.' | ||||||
|  |                   ' We will send you a confirmation email as soon as' | ||||||
|  |                   ' it is ready.')) | ||||||
|  |         } | ||||||
|  | 
 | ||||||
|  |         return HttpResponse(json.dumps(response), | ||||||
|  |                             content_type="application/json") | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue